HTMLで横・縦に並べるレスポンシブデザインを上手に使う方法を現役エンジニアが解説【初心者向け】

初心者向けにHTMLで横に並べる・縦に並べるスタイルを使ってレスポンシブデザインを上手に使う方法について解説しています。Flexboxによる要素の配置、メディアクエリを使ったスタイルの切り替え方法を試してみましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

HTMLで横・縦に並べるレスポンシブデザインを上手に使う方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

 

そもそも、HTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

横に並べる・縦に並べるスタイルを使ってレスポンシブデザインを上手に使う方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

端末と画面サイズの関係性

PC/モバイルに最適化したデザインをする際、別々の端末ごとにデザインを作成できれば話は難しくないでしょう。

しかし、端末のデバイスサイズは多様化し、端末別にデザインを作成することは現実的ではありません。

現代では画面サイズにブレイクポイントを設定し、ブレイクポイントとブレイクポイントの範囲内でシームレスに変動するデザインを作成するのが主流です。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

ブレイクポイントの見極め

例えば、フロントエンドのコンポーネントライブラリとして、世界的に有名なBootstrap4では5つが存在します。

スマートフォン(縦)

スマートフォン(横)

タブレット

デスクトップ

大画面

 

Bootstrapは広い範囲で対応を求められているので5つの細かいブレイクポイントを設定しています。

しかし、必ずしも全てのブレイクポイントを対応すればよい訳ではないでしょう。

動画サイトはスマートフォンを横向きにして動画をみることを想定して横向きのレイアウトも必要になります。

 

また、メディアサイトは文章を読みやすくすることを想定しなければなりません。

スマートフォンの横向きの状態であれば、文字を左から右へ目で追う距離が長くなり、目が疲れやすくなるため、横向きのデザイン自体が必要ないこともあります。

扱うコンテンツやレイアウトに合わせてブレイクポイントを設定することが大切です。

 

横並びと縦並びスタイルを変えられるタグとその違い

ここでは、それぞれのスタイルを変換できるタグについてみていきましょう。

 

display

要素の横並び・縦並びを制御するには「display」要素を使用します。

displayはp {display: block}やspan {display: inline}のように使いましょう。

 

取得できる値

  1. block p、div、ul、h1〜h6などのタグの初期値はコレ
  2. inline a、span、imgなどのタグの初期値はコレ
  3. inline-block
  4. none

他にもタグはあるものの、この4つから覚えていきましょう。

ほとんどのタグはblockかinlineで初期値が決まっているものの、ブラウザごとに異なるため、表示崩れを防ぐ場合、値の意味を理解して指定しなければなりません。

例えば、以下のようなリストのHTMLがある場合、<li>の要素のレイアウトを制御する必要があります。

<ul>
    <li>TOP</li>
    <li>ABOUT</li>
    <li>CONTACT</li>
</ul>
li{
  list-style:none;
  background-color:#73BDFA;
  padding:16px;
  margin:8px
}

この状態であれば、ul,li要素に対して指定がされていなくdisplay:blockが割り振られて横並びができません。

横並びにするためにCSS3から追加された要素のflexを用います。

displayプロパティにflexと設定することで要素がFlexboxとなり、子要素の配置を縦並び、横並び問わず簡単にコントロールできます。

Flexboxの基本

<ul class="flex-container">
    <li>TOP</li>
    <li>ABOUT</li>
    <li>CONTACT</li>
</ul>
.flex-container{
		display:flex;
}

Flexboxレイアウトを使用する場合には、CSSファイルで親要素(コンテナ)にdisplay:flexを指定します。

display:flexを指定するのは、親要素なので間違えないようにしましょう。

これで横並びにするところまではできました。

 

画面サイズを変えて縦並びスタイルにしてみよう

こんどはスマートフォンの時に横並びから縦並びに変更します。

デスクトップの画面とスマートフォンの画面で同じ要素の見せ方を変更する場合、メディアクエリを用いましょう。

 

メディアクエリとは

メディアクエリとは、Webページのスタイル(見栄え)を記述するCSSの仕様の一つで、表示された画面環境に応じて適用するスタイルを切り替える機能です。

一つのページで複数の異なる表示環境に対応するレスポンシブWebデザインを実現可能です。

今回はスマートフォンのみメディアクエリで個別にスタイルが効く指定で記述しましょう。

.flex-container{
		display:flex;
}

@media screen and(max-width:767px){
flex-container{
		display:block;
}

※ウィンドウサイズ767px以下で.flex-containerのdisplay:flexがdisplay:block;で上書きされます。

これははじめにPCの横並びにするレイアウトをSPで縦並びに変更する前提でデスクトップファーストで記述しているものの、現在はモバイルファーストの方が圧倒的に多いです。

モバイルファーストで記述する場合は、逆にデスクトップでのサイズの時に↓のような記述が必要です。

.flex-container{
		display:block;
}

@media screen and(min-width:768px){
flex-container{
		display:flex;
}

※ウィンドウサイズ768px以上で.flex-containerのdisplay:blockがdisplay:flex;で上書きされます。

Flexboxが使いこなせるようになれば基本的なレイアウトは全て対応できるようになるでしょう。
メディアクエリも応用してスマートフォン、PCに最適なレイアウトのサイトを作成してください。

 

執筆してくれたメンター

メンターKY

受託制作などを5年経験し、フリーランスデザイナーに。

ヒアリングから提案・デザイン・チームマネジメントまで対応。

現実的なデザインを心がけています。

 

大石ゆかり

HTMLで横・縦に並べるレスポンシブデザインを上手に使う方法も分かりやすくて良かったです!

田島悠介

ゆかりちゃん、これからも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。