CSSでロゴのようにサイズが異なる画像を美しく揃えて配置するスタイルシートの実装テクニック

Post on:2020年7月16日

はじめに

フロントエンドのデベロッパーとして、複数のロゴを配置したことがあるでしょう。この実装は最初は簡単に思えるかもしれませんが、ロゴを揃えたり、中央配置にする時に悩ますかもしれません。さらに、ロゴにはさまざまな形があり、それぞれの画像サイズが異なることもあります。

この記事では、CSSでロゴを揃えて配置するためのテクニックを解説します。ロゴを完璧に揃えて配置できるようになると、デザイナーにも喜ばれるでしょう。

準備はいいですか？
では、始めましょう。

ロゴを配置する時のデザイン上の注意点

CSSに入る前に、デザイナーとしてロゴを配置する方法を簡単に紹介します。ここではSketchを使用しますが、好きなツールを自由に使用してください。

配置するロゴは8つあるとします。まずは、8つのロゴをSketchのキャンバスにドラッグします。

配置するロゴは8つ

これではよく分からないですね、整理しましょう！

ロゴを選択する際は、幅と高さがロックし、幅か高さのどちらかを150pxに変更します。下記の動画では、ロゴのサイズを変更して、グリッドに配置してみました。

ロゴのサイズを変更して、グリッドに配置

いくつかのロゴが大きいことに注目してください。Airbnbが一番大きいですね。正確に判断するため、私はロゴをグレーの矩形の上に配置します。この矩形は、ロゴの大きさ、配置、ロゴ間のスペースが適切かどうかを判断するのに役立ちます。

ロゴを矩形の上に配置

矩形間のスペースは等しくしてください。Sketchでは行を選択して簡単に行うことができ、Tidyをクリックしてスペースを調整できます。最低でも10pxは保つようにしましょう。

矩形を使用すると、一部のロゴの位置がずれていたり、大きかったりするのが分かります。その場合は、ロゴのサイズを変更して中央に配置します。

ロゴの位置とサイズを最適にする

ロゴの位置とサイズを変更しましたが、Dropbox Businessに問題があります。問題点が分かるように、矩形はそのままにしてあります。
まず、ロゴが横長（長すぎる）で、背景がホワイトです。Sketchでロゴをトリミングして、背景を削除します。

Dropbox Businessの背景を削除

これでデザインが完了し、実装できる準備ができました。
以下の解説では、サイズを考慮せずにデザイナーからランダムなロゴをもらったことを前提にしています。

ロゴを配置するグリッドの実装

HTMLとCSSで実装する際は、以下の点に注意します。

レスポンシブであること。
ロゴのサイズは同じくらいにする。例: 大きいロゴと小さいロゴの組み合わせはお勧めしません。
ロゴには最小・最大サイズを定義する必要があります。

<ul class="brands">
    <li class="brands__item">
        <a href="#">
            <img src="img/logo.png" alt="">
        </a>
    </li>
    <li> <!-- other logos --> </li>
</ul>

</a>

</li>

</ul>

ここでは、レイアウトにCSS Gridを使用します。ただし、何を使用するかはサポートするブラウザによって変更してください。

.brands {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 1rem;
}

.brands__item {
    background: #eee;
}

.brands__item img {
    display: block;
    /* Make sure max-width is added */
    max-width: 100%;
}

.brands {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

grid-gap: 1rem;

}

.brands__item {

background: #eee;

}

.brands__item img {

display: block;

/* Make sure max-width is added */

max-width: 100%;

}

グリッドに配置したけど、サイズがバラバラ

上記のように、それぞれのロゴは親要素の全幅を占めて表示されています。ロゴのサイズに一貫性がありません。最初のステップとして、ロゴの幅を追加します。

.brands__item img {
    display: block;
    /* Make sure max-width is added */
    max-width: 100%;
    width: 100px;
}

.brands__item img {

display: block;

/* Make sure max-width is added */

max-width: 100%;

width: 100px;

}

ロゴにwidthを定義

widthはいくつかのロゴで機能しました。しかし、Dropboxは横長なので、悪影響を受けています。他の解決策にうつる前に、heightを使用してみましょう。

.brands__item img {
    display: block;
    /* Make sure max-width is added */
    max-width: 100%;
    height: 70px;
}

.brands__item img {

display: block;

/* Make sure max-width is added */

max-width: 100%;

height: 70px;

}

ロゴにheightを定義

おっと！Dropboxは縦に伸びてしまいました。これはなぜでしょう？
Dropboxの高さは他のロゴに比べて小さいため、heightで定義した値が大きすぎたのが原因です。

画像にobject-fitを使用することで、この伸びを解決することができます。

.brands__item img {
    /* Other styles */
    object-fit: contain;
}

.brands__item img {

/* Other styles */

object-fit: contain;

}

とりあえず、widthを使ったこの方法でいきます。次のステップでは、ロゴが水平と垂直方向の中央に配置します。

.brands__item a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.brands__item a {

display: flex;

justify-content: center;

align-items: center;

height: 100%;

}

中央配置は、Flexboxを使用すると簡単です。これで、下記のように表示されます。

Flexboxでロゴを中央に配置

Dropboxがとても小さくなっています。どうやら、widthだけではうまくいかないようです。私が試したもう一つの方法は、widthとheightを組み合わせることですが、それだとロゴが伸びてしまいます。
この問題はobject-fit: contain;で解決できます。

.brands__item img {
    width: 130px;
    height: 75px;
    object-fit: contain;
}

.brands__item img {

width: 130px;

height: 75px;

object-fit: contain;

}

上: widthのみ、下: object-fit: contain;を適用

object-fit: contain;の素晴らしいところは、幅と高さがどのようなものであっても、ロゴが歪むことなく、その中に含まれることです。

追記

object-fitプロパティのサポートを検出するために@supportsを追加しました。ブラウザがサポートしていれば、heightとともに追加されます。これはobject-fitをサポートしていないブラウザでロゴが伸びるのを防ぐためです。この情報をくれたLouisに感謝します。

このテクニックが完璧に機能することを確認するために、別のロゴで試してみました。その結果は素晴らしいものでした。

同じテクニックで別のロゴを実装

加えて、このテクニックの仕組みが分かるビジュアルをお見せしたいと思います。下記は、2本のラインの中にロゴが含まれており、アスペクト比がスペース全体を埋めることができない場合は中央に配置されていることが確認できると思います。

このテクニックの仕組み

CSSブレンドモードを使用してホワイトの背景を削除する

グレーの矩形のおかげで、ロゴのいくつかがJPEG画像であることに気がつくことができます。それらのロゴには、ホワイトの背景があります。

どうしてもロゴの透明バージョンが手に入らない場合は、mix-blend-modeを使うといいでしょう。これは背景を魔法のように削除してくれます。

.brands__item img {
    width: 130px;
    height: 75px;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.brands__item img {

width: 130px;

height: 75px;

object-fit: contain;

mix-blend-mode: multiply;

}

これで完了です！
ロゴにあるホワイトの背景はなくなります。しかし、このエフェクトはMacdonaldのようにカラーが暗くなる可能性があります。

ホワイトの背景は見えなくなる

追記

ツイートで、.jpgと.pngのみにmix-blend-modeを適用すればよいと助言がありました。

.brands__item img[src$='.jpg'],
.brands__item img[src$='.png'] {
  mix-blend-mode: multiply;
}

.brands__item img[src$='.jpg'],

.brands__item img[src$='.png'] {

mix-blend-mode: multiply;

}

ロゴの最後の行の中央揃え

最後の行もロゴの数が同じであると保証することはできません。前述のように、空のスペースだけでは不十分な場合があります。最後の行を中央に配置するには、CSS Gridの代わりにFlexboxを使用することをお勧めします。

.brands {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.brands__item {
    flex: 0 0 50%;
}

@media (min-width: 700px) {
    .brands__item {
        flex: 0 0 33.33%;
    }
}

@media (min-width: 1100px) {
    .brands__item {
        flex: 0 0 25%;
    }
}

.brands {

display: flex;

flex-wrap: wrap;

justify-content: center;

}

.brands__item {

flex: 0 0 50%;

}

@media (min-width: 700px) {

.brands__item {

flex: 0 0 33.33%;

}

@media (min-width: 1100px) {

.brands__item {

flex: 0 0 25%;

}

これで最後の行が中央揃えになります。

最後の行の中央揃えに

実装時の注意点

この記事を終える前に、ロゴのグリッドで作業する際に考慮すべきいくつかのヒントを強調したいと思います。

各ロゴの実際の幅と高さを確認してください。例えば、サイズ（2500*1200）のロゴを使用する場合、これは非常に大きいです。一貫性のあるサイズに変更するには、デザイナーに相談してください。例えば、250*100のサイズで十分です、など。
背景がホワイトのロゴがある場合は、デザイナーに透過バージョンを要求してください。ない場合はmix-blend-modeで背景を削除します。