取引先ロゴ列セクション
取引先や導入企業のロゴを横一列に並べ、信頼感を底上げする定番セクションです。並びは display:flex と flex-wrap:wrap で、ロゴが増えても自動で折り返します。 justify-content:center で中央に寄せ、 gap:36px 56px で縦横の間隔を分けて指定しているのが見やす…
解説
取引先や導入企業のロゴを横一列に並べ、信頼感を底上げする定番セクションです。並びは display:flex と flex-wrap:wrap で、ロゴが増えても自動で折り返します。justify-content:center で中央に寄せ、gap:36px 56px で縦横の間隔を分けて指定しているのが見やすさのコツ。各ロゴは初期状態で filter:grayscale(1) のモノクロにし、:hover で filter:none と color が効いて色が戻る、上品な演出を transition で滑らかにつないでいます。
使う場面
- BtoB サービスの「導入企業」「取引実績」ブロック
- 制作会社やエージェンシーのクライアントロゴ列
- メディア掲載実績を並べる「掲載されました」セクション
このサンプルは社名テキストですが、実運用では span を img に置き換え、alt に企業名を入れて差し替えます。グレースケール演出を外したい場合は filter 行を削除すれば常時カラーに。ホバーのアクセント色は :hover の color を変えればブランドに合わせられます。タッチ端末ではホバーが効かないため、最初からカラーで見せる選択も検討すると親切です。
使用例・適したシーン
- コーポレートサイト構築
- サービス LP
- 採用ページ
- 事業紹介資料 Web 版
よくある質問
テキストの社名を実際のロゴ画像に変えられますか。
できます。各spanをimgに置き換え、altに企業名を入れてください。grayscaleとホバー時のfilter:noneは画像にもそのまま効くので、モノクロからカラーへ戻る演出を維持できます。WebPでの配置を推奨します。
常にカラーで表示するにはどうしますか。
spanに付いているfilter:grayscale(1)を削除すれば最初からカラーになります。ホバーで色が変わる演出も不要なら、:hover内のcolorとfilterの指定も合わせて外してください。