画像テキスト分割会社紹介
左画像（グラデーションプレースホルダー）・右テキストの2カラム会社紹介。アクセントライン付き見出し・本文・バッジ3点セット。モバイルで縦積み。
このパーツの使いどころと実装ポイント
このパーツは、左に画像・右にテキストを置く2カラムの会社紹介セクションです。土台は display:grid の 1fr 1fr で左右を均等に分け、align-items:center で上下中央に揃えます。画像は aspect-ratio:4/3 の枠の中に object-fit:cover で敷き、はみ出しなくトリミング表示されます。右側はアイブロウ（小見出しラベル）・見出し・本文2段落・バッジ3点という構成で、視線の流れに沿って情報を積み上げています。実画像は Unsplash の CDN を loading="lazy" 付きで読み込み、初期表示を軽くしています。
向いている場面
- コーポレートサイトの「私たちについて」「会社概要」
- 店舗・サロンのこだわり紹介、ブランドストーリー
- 個人事業・士業のプロフィール、サービスの背景説明
カスタマイズと注意点
画像とテキストの左右を入れ替えたいときは、グリッド内の order を変えるだけで対応できます。バッジは li の数で増減でき、設立年や実績などの短いキーワードを並べる用途に向きます。画像の alt には「モダンなオフィスビル外観」のように内容を表す説明を必ず入れ、装飾だけの飾り画像にしないことが大切です。見出しは clamp で可変なので長文でも収まりますが、日本語は br で文節を区切ると改行が自然になります。モバイルでは2カラムが1列の縦積みに切り替わり、画像が上・テキストが下に並ぶ設計です。
よくある質問
画像とテキストの左右を入れ替えられますか？
入れ替えられます。レイアウトはCSS Gridの2カラムで組まれているので、グリッドアイテムのorderプロパティで順序を変えるだけで、画像を右・テキストを左にできます。複数のaboutセクションを交互配置にしたいときに便利で、HTMLの記述順を変えずに見た目だけ切り替えられます。
画像にalt属性は必須ですか？
意味のある写真には必ず入れてください。このパーツの画像はオフィス外観など内容を伴うものなので、altに「モダンなオフィスビル外観」のように写っているものを説明する文を入れます。altはSEOと、画像が読み込めない場合や音声読み上げ利用者への配慮の両面で重要で、空にしてよいのは純粋な飾り画像のときだけです。