https://buildstd.com/html-css-tips01/
いざという時のために覚えておくと便利なHTML＆CSSのTipsを13個紹介します。何かで困った時に読み返してみてください。何かでお役にたてると思います。
BUILD
- テキストの円形回り込み：shape-outsideプロパティを使用し、circle(50%)を指定することで、要素の回り込みの形状を円形にしている。画像とテキストの間に余白をあけることも可能。
- floatの新たな解除方法：解除する方法はいくつかありますが、代表的なものとしては親要素の疑似要素（::after）にclear: bothを指定するClearfix。もっとシンプルに解除する方法がflow-root。floatプロパティを指定した要素の親要素にdisplay: flow-rootと1行指定するだけで回り込み解除できる。
- 画像のレスポンシブ対応：縦向き画像も用意し、スマホで適用すると見やすくなる。要素と要素を使用し、画像の出し分けをすると便利。
<source>にPC画像を、<img>にスマホ画像を設定。 - 未入力の処理：CMSを利用していればPHPの条件分岐で非表示にできるが、これをCSSで処理させるのが疑似クラス
empty。項目は残して未入力箇所はテキストで処理という場合にはCSSで指定すると便利。 - 画像hover演出 – 選択外を暗くする：疑似要素（::after）で半透明のフィルターを表現し、hover時に表示されるように設定。
- 画像hover演出 – hover時に表示される要素：画像をhoverした時にテキストや半透明の要素を表示させる。
li a::afterにhover時に表示される疑似要素のスタイルを指定し、opacity: 0で透明度を0にすることで非表示。li a:hover::after { opacity: 1 }でhover時にスタイルした疑似要素が表示されるように指定。 - スマホでも動画を自動再生：
playsinlineを追加して動画をインライン再生させる指定をすることで、スマホでも自動再生される。 - データ属性を利用したテキスト表示：
<span>を利用することが多いが、HTML側で指定したdata-subtitle="Shop"のデータ属性を、疑似要素（::before）のcontent: attr(data-subtitle)で読み込み、スタイルを指定。 - 最初の行だけスタイル指定：疑似要素
first-lineを使うと、最初の行だけスタイルを施す。1行目のテキストが長くてスマホ表示時に途中で改行されてしまう可能性がある場合は、<span>や前項のデータ属性を使った方法を利用する。 - 階層を考慮した自動連番：
liの疑似要素（::before）に数字を表示させる指定をしていく。countersをつかうことで入れ子に対応した連番が表示される。 - 画像の表示領域を揃える：画像とテキストを一括にしたカードレイアウトで、横並びにした際、画像のサイズやアスペクト比がバラバラだと視認性の悪い要素になる。
object-fit: coverは指定されたサイズの中でアスペクト比を維持したまま要素を埋めるように表示されるが、画像の上下や左右が見切れる可能性があるので、極端に異なるアスペクト比の画像の使用には向かない。横幅（width）と縦幅（height）の値を指定する必要がある。 - 指定行以降は省略：2022年4月現在はすべてのブラウザでベンダープレフィックスが必要なので
-webkit-line-clampで指定。 - 数字だけGoogle Fonts（サブセット）：
display=swapのあとに&text=0123456789を追記。text=以降に適用したい文字を指定。数字だけではなく、特定日本語や英字を指定することも可能。Google Fonts（特に日本語）は読み込むデータ量が大きいため、どうしても読み込み時間がかかってしまう。特定のテキストだけに指定しても大丈夫であればこの方法がおすすめ。