アイコン 3 列サービス紹介
丸アイコン・見出し・説明文をワンセットにし、横3列に並べたサービス紹介セクションです。 display:grid の repeat(3,1fr) で等幅3カラムを作り、各カラムは中央揃え。アイコン枠 sv-3__ic は直径80pxの円で、薄い背景色の上に SVG アイコンを置いています。
このパーツの使いどころと実装ポイント
丸アイコン・見出し・説明文をワンセットにし、横3列に並べたサービス紹介セクションです。display:grid の repeat(3,1fr) で等幅3カラムを作り、各カラムは中央揃え。アイコン枠 sv-3__ic は直径80pxの円で、薄い背景色の上に SVG アイコンを置いています。絵文字ではなくインライン SVG を使っているため、表示環境による崩れがなく統一感が出ます。
向いている場面
「選ばれる3つの理由」「サービスの3つの特徴」のように、強みを3点に要約して見せたい場面に最適です。制作会社の特徴紹介、ツールの主要機能、店舗のこだわり提示など、業種を問わず使えます。3という数は記憶に残りやすく、要点を絞る訓練にもなります。
カスタマイズと注意点
差し替えどころはアイコンの SVG、見出し（スピード等）、説明文の3要素です。アイコンは Material Symbols から内容に合うものへ置換し、円の背景色をブランドカラーに寄せると印象が変わります。説明文は2行程度に揃えると見栄えが整います。注意点として、3列のままだとスマホで文字が小さくなるので、狭い画面では1列に積む指定を足してください。SVG には装飾目的を示す aria-hidden="true" が付いている点も、そのまま活かすとスクリーンリーダーが冗長に読み上げません。
よくある質問
アイコンは差し替えられますか？
できます。各カラムの SVG を Material Symbols など商用利用可能なアイコンに置き換えてください。viewBox を合わせ、fill を currentColor のままにしておくと、文字色の指定だけでアイコン色も連動します。
列数を増やせますか？
可能ですが、3列は要点を絞るのに向いた構成です。4列以上にする場合は grid-template-columns の repeat の数を変え、1要素あたりの情報量を減らしてバランスを取ってください。