テキストに下線をつける方法で真っ先に思いつくものは、text-decorationをつける方法
ここに蛍光ペンで引くようと線の太さを求めると話が変わってくる
text-decorationは太さを変更できないからだ(色は変更可能)...
そこで思いつくのはbox-shadowを使う方法
ただし、個人的にどうかなーと思っていた。理由は以下
問題点は
1. テキスト以外の部分も線が引かれてる...
2. 複数行になると一番下しか線が引かれない...
スタイルシートだけで、テキストだけ蛍光ペンのような下線を引くことは難しいのか...
詰んだと思ってたけどhtmlの構造を変更すれば、可能だった
結果はこちら
pタグの下にspan要素を入れて文字を囲めばできた
cssは時々しか触らないので、spanにスタイルを当てても上記の問題は解決しないと思ってました
変わったことはpタグやh1〜h6タグはブロック要素なのでspan等のインライン要素で文字を囲むことになったこと
box-shadowの挙動がインライン要素になって変わるということがわかった
中途半端な知識で「無理だー:D」と思ってたら以外にいけちゃったという話でした
基礎は大切!!
ではではm( )m
