HTMLで複数の画像を均等に横並びする方法を現役エンジニアが解説【初心者向け】
初心者向けにHTMLで複数の画像を均等に横並びする方法について解説しています。ここではdisplay:flex;とflex-wrap:wrap;を使う方法、marginで均等に余白を維持する方法をサンプルコードで説明します。画面上での見え方を確認しましょう。
TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。
HTMLで複数の画像を均等に横並びする方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
HTMLで複数の画像を表示する場合、特別なことをしないと縦に並んで表示されます。
しかし、実務では均等に横に並べて表示することのほうが多いです。
この記事を通じて、実務でも利用できるような、HTMLで複数の画像を均等に横並びする方法を学べます。
目次
そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
複数の画像を均等に横並びする方法について詳しく説明していくね！
お願いします！
画像を横並びにする方法
横並びさせたい画像に対して、以下の3通りがあります。
- displayプロパティにinline-blockを指定する方法
- floatを使用する方法
- dispalyプロパティにflexを指定する方法
displayプロパティにinline-blockを指定する方法
displayプロパティとは、表示する要素の調整を行うプロパティです。
要素によって指定された要素に対して適用するデザインの種類です。
displayプロパティにinline-blockを設定するためには、該当する要素に対して、次のようなCSSのコードを指定することで適用が可能です。
li {
display: inline-block;
}
もし、display: inline-block;を指定しない場合は、次のように縦に並んで表示されます。
１つめ
２つめ
３つめ
liに対して、display: inline-block;を指定することで、次のように横並びの表示が可能になります。
floatを使用する方法
float プロパティを利用することでも横並びが可能です。
float とは「浮かぶ」という意味の英単語です。
float プロパティを利用すると、ブロックレベル要素を左寄せや右寄せにできます。
li{
float:left;
}float プロパティでは、leftを指定することで要素を右に回り込ませ、左寄せにできます。
また、rightを指定することで要素を左に回り込ませ、右寄せにすることができます。
↑
冗長
ブロックレベル要素とは次のような要素です。
h1,h2,h3,h4,h5,h6等の見出し
div
section
article
p
ul, ol
table
liに対して float:left;を指定することで、次の表示のように横並びの表示が可能になります。
dispalyプロパティにflexを指定する方法
displayプロパティをflexにすることでも横並びの表示が可能です。
inline-blockで指定する際は、liに対して display: inline-block;を指定しました。
flexで指定する際は、ulに対して display: flex;を指定すると良いです。
親要素であるulをflexで指定することで、小要素であるliを横並びにできます。
ul{
display: flex;
}
ulを利用すると、liで箇条書き表示を行う際に、箇条書きの各行頭に●を表示することが可能です。
ulの他にもolを利用することが可能です。
olを利用してliで箇条書き表示を行う際に、箇条書きの各行頭に1.2.3.のような連番を表示できます。
[PR] HTML/CSSで挫折しない学習方法を動画で公開中
画像間の隙間を均等に保つ方法
marginプロパティを使用することで隙間を作ることができますが、均等の隙間になる値を計算してから定義します。
marginプロパティは、borderと言う境界の外側の余白を意味します。
似たような余白で、paddingというものがあります。
paddingはborderの内側の余白で、marginはborderの外側の余白と覚えておくと良いですよ。
ブラウザの横幅を変えても均等に保つ方法
ブラウザの横幅を変更させても、隙間などの値を均等に保つために、相対的な値になる単位（%）を使用します。
ブラウザの横幅を変更させる方法としては、ショートカットキーを利用する方法があります。
例えば、Google Chromeというブラウザを利用する場合、以下のようなショートカットキーで表示を変更できます。
「Ctrl」＋「+」（Ctrlキーを押しながら+キーを押す）で拡大表示が可能です。
「Ctrl」＋「-」（Ctrlキーを押しながら-キーを押す）で縮小表示が可能です。
「Ctrl」＋「０」（Ctrlキーを押しながら数字の0キーを押す）で標準サイズの表示が可能です。
複数の画像を均等に横並びしてみよう
以下の例は、display:flex;とflex-wrap:wrap;を使用し、marginにて均等に隙間（余白）を維持する設定です。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTMLで複数の画像を均等に横並びする方法を現役エンジニアが解説</title>
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<div class="flex-box">
<div class="thumnail-left-box">
<img src="https://placehold.jp/150x150.png">
</div>
<ul class="thumnail-right-box flex-box">
<li><img src="https://placehold.jp/50x50.png"></li>
<li><img src="https://placehold.jp/50x50.png"></li>
<li><img src="https://placehold.jp/50x50.png"></li>
<li><img src="https://placehold.jp/50x50.png"></li>
<li><img src="https://placehold.jp/50x50.png"></li>
<li><img src="https://placehold.jp/50x50.png"></li>
<li><img src="https://placehold.jp/50x50.png"></li>
<li><img src="https://placehold.jp/50x50.png"></li>
<li><img src="https://placehold.jp/50x50.png"></li>
<li><img src="https://placehold.jp/50x50.png"></li>
</ul>
</div>
</body>
</html>
CSS(sample.css)
.flex-box {
display: flex;
flex-wrap: wrap;
}
.flex-box img {
vertical-align: top;
}
.thumnail-left-box {
width: 70%;
margin: 0;
padding: 0 0 2.5%;
}
.thumnail-left-box img {
width: 100%;
}
.thumnail-right-box {
width: 30%;
margin: 0;
padding: 0;
list-style: none;
}
.thumnail-right-box li {
display: flex;
flex-wrap: wrap;
width: 40%;
margin: 0 0 0 auto;
}
.thumnail-right-box li img {
width: 100%;
margin: 0 0 auto;
}
CSSコードの解説
1行目の.flex-box {では、HTMLの<div class=”flex-box”>で囲まれたブロックを対象にしてCSSを適用しています。
具体的には、 2行目のdisplay: flex;で、flexboxというレイアウトを使用できるように宣言しています。
3行目のflex-wrap: wrap;では、複数行に折り返して表示する指定をしています。
5行目の.flex-box img {では、HTMLの<img src=”https://placehold.jp/150×150.png”>というimgタグと、<li><img src=”https://placehold.jp/50×50.png”></li>というimgタグすべてに対してCSSを指定しています。
具体的には、vertical-align: top;で、テキストや画像などの縦方向の位置を揃える指定をしています。
今回はtopなので上側でそろえています。
8行目の.thumnail-left-box {では、<div class=”thumnail-left-box”>のブロックに対してCSSを適用しています。
具体的には、 width: 70%;で、幅を画面サイズの70%に指定しています。
margin: 0;ではマージンを0に指定しています。
marginを利用するとスペースを開けることができます。
13行目の、.thumnail-left-box img {では、HTMLの<img src=”https://placehold.jp/150×150.png”>に対して、width: 100%;で幅を画面幅の100%になるよう指定しています。
16行目の、.thumnail-right-box {では、HTMLの<ul class=”thumnail-right-box flex-box”>に対して、CSSを指定しています。
具体的には、width: 30%;で幅を画面幅の30%になるよう指定しています。
margin: 0;とpadding: 0;でそれぞれ余白がない状態にしています。
list-style: none;で、listと呼ばれる箇条書きの●を表示しないようにしています。
22行目の、.thumnail-right-box li {では、HTMLのすべての<li><img src=”https://placehold.jp/50×50.png”></li>に対して、CSSを指定しています。
具体的にはdisplay: flex;で、flexboxというレイアウトを使用できるように宣言しています。
flex-wrap: wrap;で、複数行に折り返して表示する指定をしています。
width: 40%;で、幅を画面幅の40%になるよう指定しています。
margin: 0 0 0 auto;で、マージンを上0、右0、下0、左auto指定で確保しています。
autoに指定すると、（親要素の横幅 – 指定した要素の横幅）を自動的に計算し、良い感じでmarginを適用してくれます。
表示結果
執筆してくれたメンター
| 中本賢吾（なかもとけんご） アジマッチ有限会社 代表取締役社長 開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。ボランティア活動：小学生がオリジナルAndroidアプリをGoogle Playでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がSNS型PWAアプリリリースする市クラブ講座活動を行っている。 |
内容が分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
HTMLを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
HTMLを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
