【CSS】画像を横並びにする方法は？Webデザイナーを目指すあなた必見！

などなど、「画像を横並びで表示したいけど、どうやったら良いかわからない！」という人もいますよね。

今回は、ITエンジニアの私が、画像を横並びにする方法をご紹介して、あなたの悩みを解消していきます！

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

CSSで画像を横並びにするには、「display: flex;」を使用するのがおすすめです。

以下に、HTMLの基本構文とCSSでの設定例を記載します。

順番に解説していきます！

display: flex

「display: flex」を理解するために「Flexbox」という概念をご説明します。

Flexboxは、以下の図のように「フレックスコンテナ」と「子要素（フレックスアイテム）」から成り立っています。

この中の「フレックスアイテム」を横並びにしたいときに使用するのが、「display: flex」ですね。

justify-content

justify-contentでは、フレックスアイテムの配置を指定することができます。

例えば、サンプルに示した「justify-content: space-around;」では、余白ありの等間隔で表示されますね。

その他の例は、以下になります。

justify-contentプロパティ	配置
justify-content:flex-start	先頭寄せ
justify-content:center	中央寄せ
justify-content:flex-end	最後尾寄せ
justify-content:space-between	端寄せ

justify-contentは、デザイン作成でもかなり使用するので、使えるようにしておきましょう！

HTMLだけで画像を横並びにできる？

画像の設定は、インラインレベルコンテンツなので、HTMLだけでも勝手に横並びになります。

インラインレベルコンテンツというのは、文字などのテキストと同じで水平に配置されるものですね。

ただ、スマホなど小さい画面だと横に入り切らずに折り返しになってしまう可能性があります。

やはり、CSSでしっかり設定するのがおすすめですね。

CSSで困ったときの対処方法

CSSで困ったときは、スクールを検討してみるのがおすすめです。

特に、わからないことが多すぎる場合は、スクールに通うことで、勉強時間の短縮が期待できます。

ちなみに、私がおすすめしているWebデザインスクールは、「シーライクス（SHElikes）」です。

Webデザイン以外のWebスキルも学べますし、質問しながら進められるオンライン勉強会のようなものもあります。

ここですべてご紹介するのは難しいので、良かったらこちらの記事も読んでみてください 

まとめ

CSSとHTMLで画像を横並びにする方法をお伝えしました。

見るだけで納得せず、実際にコードを書いて試してみてくださいね！

また、コーディングで挫折しそうな場合は、挫折する前に人に頼ることも大切です。

質問すると、悩んでいたのが不思議なくらい、一瞬で解決したりするので！

ちなみに、今回ご紹介した「シーライクス（SHElikes）」では、無料体験レッスンを行っています。

無料でシーライクスの体験ができますし、カウンセリングの時間であなたの悩みを質問することも可能です。

「HTMLは理解できたけど、CSSはよくわからない」、「思った通りのデザインにならない」など、悩みがある場合は、この機会を活用するのも良いですね。

無理な勧誘もなかったので、良かったら参加してみてください！

私が実際に無料体験レッスンに参加した記事はこちら