CSSで画像を横並び(均等)に表示する方法！。画像を横並びにしたいけど、上手く表示させることができないと嘆いている方は必見。今回は、CSSで画像を横並び(均等)に表示する方法！について書いていきます。
一概には言えませんが、ワードプレステーマのデフォルトでは、投稿のサムネイル画像が縦並びに表示されることがあります。そこで横並びで表示されるように、CSSでカスタマイズする方法をお伝えします。
| 結論を先に話ししておきます |
| ワードプレスをコーディングしていると「CSS」を使って、画像を配置することが多々あります。一昔前のワードプレスとは違って、最近のワードプレスには、画像を綺麗に配置するデザインが多く見受けられるようになりました。
画像を綺麗に取り扱うと言うことは、ワードプレスを「CSS」でコーディングする際、とても重要となっている訳です。その中に於いて「CSS」で画像を横並びに表示する方法が知りたいと言う方は必見です。
また、画像に関する横並びのデザインについても知りたいと言う方へ簡単に実装できるコードを用いて解説などもしていきたいと思います。それでは画像を横並びにする方法を見ていきましょう。
以前投稿した下記の記事にも目を通して貰えると嬉しいです。 |
目次はコチラ
【CSSとは(動画付き)】
「CSS」とは「Cascading Style Sheets」と言います。「HTML」同様、プログラミング言語ではありません。「CSS」の場合、Webページのスタイルを指定する為の言語であって「スタイルシート言語」と言います。
| Cascading Style Sheetsの読み方 |
| 「Cascading Style Sheets」の読み方は「カスケーディング・スタイル・シート」と読みます。良く覚えておきましょう。 |
「CSS」は、ワープロソフトなどで作成される文書も含め、文書のスタイルを指定する技術全般をスタイルシートと言います。「HTML」や「XHTML」などで作成されるWebページにスタイルを適用する場合、次のようになります。
それは「スタイルシート言語の1つであるCSSが、一般的に利用される」と言うことです。念の為、記載しておきますが「CSS」を用いる場合「HTML」と組み合わせて使用する言語となりますのでお忘れなく。
また「HTML」が、Webページ内に於いて、各要素の意味や情報構造を定義するのに対し「CSS」では、それらをどのように装飾するかを指定します。例えばですが、Webページがスクリーン画面に表示される際の出力で言うと。
| Webページをどのようなスタイルで「表示」「出力」「再生」するのかについて指定することが可能な訳です。 |
ではここで動画を視聴してみて下さい。題して「【たった1動画で全てが分かるCSSの教科書】」です。
| 先にも説明している通り、Webページは「HTML」と「CSS」が組み合わさって作られていると言うことです。つまり、Webページ＝「HTML/文書構造」＋「CSS/見栄え」と言う訳です。 |
【CSSファイルの作り方】
この章では「CSS」ファイルの作り方について、その手順を紹介していきたいと思います。ファイル名である拡張子の「.css」を付け加えることで「CSS」ファイルとしてコンピューターが認識してくれます。
| 拡張子とは |
| 「拡張子」と言う言葉ぐらいは聞いたことがあるのでは。「拡張子」とは、ファイルの種類を分かりやすく判別する為に使われる文字列のことを指します。普段使っているであろう「Word」や「Excel」なども下記のような拡張子で表示されています。
|
【CSSを実際に書いてみよう】
ブログ制作に於いて、画像を横並びにする機会は多いと思います。縦並びになってしまう画像を横並びにする為に必要なのが「CSS」の存在です。「CSS」で画像を横並びにする方法は一つだけではありません。
念の為書くと「floatプロパティ」「display:inline-block」「display: flex;」など。この3つの方法について、細かく見ていくことにしましょう。初心者の方には少し難しい内容かも知れません。
① 画像を横並びにする「floatプロパティ」
「float」は、要素を横に寄せる為のプロパティです。例えばですが「left」を指定した場合、その要素全てが左寄せで横並びになります。また「right」の場合、その要素全てが右寄せで横並びになります。
<ul> <li><img src="●"></li> <li><img src="●"></li> <li><img src="●"></li> </ul>
li { list-style:none; /*デフォルトの指定解除*/ float:left; } 上記「CSS」内で表示されているように、横並びにしたい要素に「float」を指定します。但し「float」を指定するだけだと、画像同士がくっついてしまいます。そこで「margin」や「padding」を指定すると、余白を設けられます。それが下記の内容です。
li { list-style:none;/*デフォルトの指定を解除*/ float:right; margin:10px;/*余白を指定*/ padding:10px;/*余白を指定*/ } |
② 画像を横並びにする「display:inline-block」
「display:inline-block」は、下記2つの特徴を併せ持つのがインラインブロック要素と言われるものです。「display:inline-block」は、改行が入らない為、横並びになりますが、縦方向の余白と幅や高さの指定が可能となります。
<ul> <li><img src="●"></li> <li><img src="●"></li> <li><img src="●"></li> </ul>
li { list-style:none;/*デフォルトの指定を解除*/ display:inline-block;/*liをインラインブロック要素に*/ padding:10px 0; /*縦の余白を指定*/ width:400px;/*幅を指定*/ height:400px;/*高さを指定*/ vertical-align:middle;/*縦方向を中央揃え*/ text-align:center;/*横方向を中央揃え*/ }
「li」ですが、元はと言えば、ブロックレベル要素な訳ですが、インラインブロック要素にしたことで横並びになります。また、余白や幅、高さの指定をすることも可能です。「縦方向」「横方向」の配置も指定可能です。 |
③ 画像を横並びにする「display: flex;」
ここまで「floatプロパティ」と「display:inline-block」の2つを紹介してきましたが、ここでは画像付きで解説していきます。「display: flex;」を使用した方が上記の2つより、簡単に実装できるかも知れません。
 
念の為書いておきますが、ここでの記述は「外観」→「カスタマイズ」→「追加CSS」により、記述したものです。この他にも「外観」→「テーマファイルエディター」→「style.css」内にも記述することができます。 |
今回は以上となります。CSSで画像を横並び(均等)に表示する方法！については理解して頂けたでしょうか。初心者の方には難しかった内容かも知れませんが、やればできます。頑張ってみて下さい。
以前投稿した下記の記事にも目を通して貰えると嬉しいです。
