PC/スマホで文章の改行位置を変える

PCとスマホで改行の位置をそれぞれ変えたいときは以下のCSSを使うと任意の場所で改行できます。

【PC】『カレイドアトリエ』と表記され
【sp】『カレイド
アトリエ』となります。

html
-------------------------------------------------------------------------------------------------------------------------
<p>カレイド<br class="pc_br">アトリエ</p>
-------------------------------------------------------------------------------------------------------------------------

CSS
-------------------------------------------------------------------------------------------------------------------------
/*pcで無効*/
.pc_br{
display: none;
}

/*スマホで有効*/
@media screen and(max-width:768px){
.pc_br{
display: block;
}
}

-------------------------------------------------------------------------------------------------------------------------
Tweet 　

更新日：2023/05/19

PC/スマホで違う画像に変える

PCとモバイルで表示させる画像をそれぞれ変えたいときは以下のCSSを使うとそれぞれ任意の画像を表示させることができます。

【PC】『A画像』
【sp】『B画像』

html
-------------------------------------------------------------------------------------------------------------------------
<img class="pc" src="img/--.png" alt="pc用">
<img class="sp" src="img/--.png" alt="スマホ用">
-------------------------------------------------------------------------------------------------------------------------

CSS
-------------------------------------------------------------------------------------------------------------------------
.pc{
display: block;
}
.sp{
display: none;
}

@media screen and(max-width:768px){
.pc{
display:　none;
}
.sp{
display: block;
}
}
-------------------------------------------------------------------------------------------------------------------------
Tweet 　

更新日：2023/05/19

ブロックレベルで要素全体をリンクする

PCとモバイルで表示させる画像をそれぞれ変えたいときは以下のCSSを使うとそれぞれ任意の画像を表示させることができます。

html　<　　　>
-------------------------------------------------------------------------------------------------------------------------
<div class="linkBox">
<a href=".html"> </a>
<p>ブロック〜リンクする</p>
</div>
-------------------------------------------------------------------------------------------------------------------------

CSS
-------------------------------------------------------------------------------------------------------------------------
.linkBox{
position: relative;
width: auto;
height: auto;
}
-------------------------------------------------------------------------------------------------------------------------
Tweet 　

更新日：2023/05/19