HTML/CSS

【HTML/CSS】 画像を横並びにする方法(デザインの例も)

「画像を横並びにする方法が知りたい…。また、画像に関するデザインについても知りたい。」と思ったことはありませんか?

HTMLでWebページをコーディングしていると、画像の配置は必須になってきますよね。

この記事では、「画像を横並びにする方法」「画像を使うときのデザイン例」の2つを解説していきます。

それでは、まず画像を横並びにする方法をみていきましょう。

【HTML/CSS】 画像を横並びにする方法

画像を横並びにするためには、CSSの「display」を「flex」にします。

具体的にみていきましょう。

下の画像を見てください。

<ul>
    <li><img src="image1.jpg" width="300" height="200" alt=""></li>
    <li><img src="image2.jpg" width="300" height="200" alt=""></li>
    <li><img src="image3.jpg" width="300" height="200" alt=""></li>
</ul>
li{
    list-style: none;
}

画像がタテ並びに配置されています。

※ここではliタグの中にimgタグを入れています。liタグのliはlist(リスト)の略です。画像が並立の関係にあるので、画像にリスト的な意味があるということをコードに表しました。ulタグとliタグに関しては、「【HTML】ulタグ、liタグとは?(具体的な使い方まで解説)」の記事で解説しているのでチェックしてみてください。

画像を横並びにするために、画像がある要素より1個上の階層の要素(親要素)であるulタグのdisplayをflexにします。

ul{
    display: flex;
}

更新してみましょう。

上のように横並びになりました。

※display: flex;に関しては、「【HTML/CSS】display: flex;とは?(具体的な例も解説)」の記事にも書いてあります。

さらに「justify-content: center;」のコードも書きます。

ul{
    display: flex;
    justify-content: center;
}

このコードにより横並びにした要素を中央寄せすることができます。

justify-content: center;のコードも書くと、以下のようになります。

画像が中央寄せされました(ついでに余白もつけておきました)。

<ul>
    <li><img src="image1.jpg" width="300" height="200" alt=""></li>
    <li><img src="image2.jpg" width="300" height="200" alt=""></li>
    <li><img src="image3.jpg" width="300" height="200" alt=""></li>
</ul>
ul{
    display: flex;
    justify-content: center;
}
li:nth-child(2){
    margin-right: 10px;
    margin-left: 10px;
}
li{
    list-style: none;
}

余白は真ん中の画像につけています。ここでは「nth-child(n)」を使っています。nth-child(n)は同じ階層の要素の「n番目」をピックアップするためのコードです。上のコードではでliの2番目に余白をつけました。よってCSSのコードが「li:nth-child(2)」になっているのです。

画像を使うときのデザイン例

画像を使うときのデザインの例として以下の2つを説明していきます。

  1. 画像の角を丸める
  2. カードをつくる

画像の角を丸める

1つ目は画像の角を丸めるデザインです。

角を丸めることでやわらかな印象を出すことができます。

丸みのあるデザインは今風のデザインであり、洗練された印象もあたえます。

角を丸めるためにCSSのborder-radiusプロパティを使います。

たとえば、下の画像をみてください。

<div id="rounded"><img src="image1.jpg"  width="300" height="200" alt=""></div>

何も手をくわえていない画像になります。

この画像にborder-radiusを適用させます。

#rounded img{
    border-radius: 5px;
}

出力してみましょう。下のようになります。

画像の端が少し丸くなっているのがわかります。

ここでは「border-radius: 5px;」と指定しました。

border-radius: 5px;は、半径が5pxの円の丸みがつくということになります。

※「radius」は英語で「半径」という意味です。

border-radiusのしくみを図で表すと以下のようになります。

上の図を見ると、border-radiusが円の丸みを利用していることがわかります。

以上、画像の角を丸めるデザインがあるということでした。

カードをつくる

つづいて、カードをつくるデザインです。

ここでいうカードというものは、記事のサムネイルと記事の情報を一目でわかるようにしたものです。

以下のようなものです。

<div id="cards">
    <div class="card">
        <div class="picture"><img src="image1.jpg" alt=""></div>
        <div class="description"><p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p></div>
    </div>
    <div class="card" id="card-center">
        <div class="picture"><img src="image2.jpg" alt=""></div>
        <div class="description"><p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p></div>
    </div>
    <div class="card">
        <div class="picture"><img src="image3.jpg" alt=""></div>
        <div class="description"><p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p></div>
    </div>
</div>
#cards{
    display: flex;
    justify-content: center;
}
.card{
    width: 300px;
    height: 315px;
    border: 1px solid lightgray;
}
.card:nth-child(2){
    margin-right: 10px;
    margin-left: 10px;
}
.picture img{
    width: 100%;
    height: 200px;
}
.description{
    width: 100%;
    height: 145px;
    padding-right: 12px;
    padding-left: 12px;
    box-sizing: border-box;
}
.description p{
    font-size: 13px;
    color: dimgray;
}

上のように画像+文字を書く場所がセットになったデザインです。

このようなデザインも参考にしてみてください。

(補足)スライドショー

画像を横並びにするようなデザインとしてスライドショーがあります。

複数枚の画像が、一定の時間の間隔で横にスライドしていくデザインのことです。

スライドショーを実装するにはjQuery(JavaScriptのライブラリ)を使います。

ここまで読んで難しそうに思いましたか?しかし、jQueryのプラグイン(便利ツールのようなもの)を使えば、楽にスライドショーをつくることができます。

スライドショーのつくり方に関しては、「jQueryでスライドショーを自動再生する方法を解説「Slick」」の記事を参考にしてみてください。

まとめ

いかがでしたでしょうか。

ここまで、画像を横並びにする方法と、画像のデザインの例に関して説明してきました。

横並びをするときは、displayをflexに設定しましょう。

また、画像のデザインの例として画像の角を丸くしたり、カードをつくったりすることがあるということでした。

この記事を読んだら、コードを書いて実際ブラウザ上に表示してみてください。

今回の知識が参考になれば幸いです。