【CSS】レスポンシブにするときに大事♪CSSで画像を文字に置き換える方法 | さけブロ。♡主にディズニー、htmlやcssなどのメモも♡

さけブロ。♡主にディズニー、htmlやcssなどのメモも♡

自分用htmlやcssなどメモ&身内向け料理日記&ただのディズニーマニア。海外ディズニーが最近好きすぎてヤバイ。WDW、DLR、HKDL、DLP、アウラニ、SHDL訪問済。クルーズも参加済。

これはとっても助かったー><

画像タイトルがスマホだと小さかったりいろいろ問題があるのよねん。

 

data-属性はすべてのHTML要素につけることができ、値も自由につけることができる属性なのだそう。

data-*(*は半角英字の文字列)で指定する。

 

<h2 data-label="Title"><img src="画像.jpg" width="800" height="40" alt="Title"></h2>

 

h2::after{

display: inline-block;

content: attr(data-label); /*contentでdata-label属性を指定*/

padding-left: 6px;

border-left: solid 6px #0182c3;

colorその他font-sizeなど

}

h2 img{

display: none;

}

h2{

box-sizing: border-box;

padding: 5px 3px 2px;

border-bottom: solid 2px #0182c3;

}

 

助かったー!

参考URLです♪

http://sterfield.co.jp/designer/%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96%E5%8C%96%E3%81%AB%E4%BE%BF%E5%88%A9%EF%BC%81css%E3%81%A7%E7%94%BB%E5%83%8F%E3%82%92%E6%96%87%E5%AD%97%E3%81%AB%E7%BD%AE%E3%81%8D%E6%8F%9B/