※当サイトにはプロモーションが含まれています。
クライアント わが社の製品を導入している企業を紹介したいから、その会社名をスライド表示してくれ！
にゃテック おけまるだにゃ。
企業サイトやランディングページ（LP）などで、導入企業のロゴや社名が横にスライドして表示されているのを見かけたことはありませんか？
たとえば、こんな感じです 。
今回は、そのような「会社名やロゴ画像をスライドで表示する仕組み」を、CSSだけで実装してみました。
なお、企業の導入事例に、もう少し詳細な情報を加えたい場合は、「Slick Slider（スリック・スライダー）」を使ってスライダー形式で紹介するのがおすすめです。
実際に「お客様の声（導入事例）」をスライダーで表示した事例がこちらです。
企業のホームページやLP（ランディングページ）などで、「お客様の声（導入事例）」を掲載しているのをよく見ます。 ただ、声の数や導入事例が多い場合は、１つずつ並べていくとページが縦に長くなってしまいます。 そういった時は、 …
企業ロゴなどの画像をスライド表示する方法
このスライドを作成するには、まずは画像ファイルを作成する必要があります。
ちなみに、例として使用したのは、1,820px×60pxの画像ファイルで、下記の画像を、右から左にスクロールさせています。
にゃのらいと スクロールさせるので、基本的に画像ファイルは横長になるにゃ！
“横幅”はどんな場面で使うか、どれだけ載せたい情報があるかにもよりますが、3,840px以上あれば安心だと思います。
では、企業ロゴなどの画像をスライド表示させるHTML、CSSです。
HTML
<div class="nya-loop">
<div class="nya-loop__box">
<img src="（画像のURL）" alt="企業ロゴ一覧">
<img src="（画像のURL）" alt="企業ロゴ一覧">
</div>
</div>なんで、<img>タグが２つ並んでいるにゃ？
１枚目の画像が左へ流れきったタイミングで、2枚目が自然に繋がるようにしておくためです。
なお、１枚目の画像と２枚目の画像はまったく同じ画像で構いません。
続いて、CSSです。
CSS
.nya-loop {
overflow: hidden;
padding: 0;
background: #fff;
}
.nya-loop__box {
display: flex;
animation: scrollLoop 10s linear infinite;
width: max-content;
}
.nya-loop__box img {
height: auto;
max-height: 60px;
width: auto;
flex-shrink: 0;
}
@keyframes scrollLoop {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}用意する画像によって、変更箇所がでてくるので、１つずつ説明するにゃ。
.nya-loopはスライダー全体の外枠
.nya-loop {
overflow: hidden;
padding: 0;
background: #fff;
}overflow: hidden;により、スライドして枠外にはみ出た画像を非表示にします。
background: #fff;は背景色を白にしています。画像に応じて色は変更しましょう。
.nya-loop__boxは画像を横に並べ、スライドさせる要素
.nya-loop__box {
display: flex;
animation: scrollLoop 10s linear infinite;
width: max-content;
}
display: flex;によって、内部の画像を横並びにしています。
width: max-content;は、中の画像サイズに応じて横幅を自動調整しています。場合によっては、横幅を指定した方が良い場合もあります。
animationの、10sの数値を大きくすると、スライダーの動きがゆっくりになります。
.nya-loop__box imgは画像の調整
.nya-loop__box img {
height: auto;
max-height: 60px;
width: auto;
flex-shrink: 0;
}
max-height: 60px;により、画像の縦サイズを統一感のある高さに制限。画像の高さに応じて調整が必要です。
にゃのらいと 少し工夫をすると下記のようなエヴァンゲリオン風にすることもできるにゃ！
エヴァンゲリオンや刑事ドラマ（映画）などのポスターでも使われている、規制線（警告線）の透過画像（1,820px×37px）を作ったので、もしよかったらご使用ください。
なお、再配布は不可です。
“緊急告知”の文字は、エヴァンゲリオン風の明朝体（マティスEB）の代わりに使える極太明朝体で記載しました。
にゃテック それをまとめた記事がこちらです。
大人気アニメ「新世紀エヴァンゲリオン」と言えば、タイトルなどに使われていた極太な明朝体を思い出します。 出典：エヴァンゲリオン公式サイトより このフォントは、「エヴァフォント」「エヴァ明朝」「エヴァ書体」などと呼ばれてい …
ご支援のお願い
この記事が役に立ったと感じたら･･･
この記事が少しでもお役に立ったと感じていただけましたら、ぜひ下の“ボタン”をクリックしてお買い物をしていただけると嬉しいです。
ご購入いただいた商品の金額の一部が私に入り、より有益な記事を作るための励みになります。
なお、商品は、ご自身の好きなものをご購入いただければと思います。
無料相談・お問い合わせはこちら