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

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

 

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

 

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

 

 

目次

• 端末と画面サイズの関係性
• ブレイクポイントの見極め
• 横並びと縦並びスタイルを変えられるタグとその違い
• 画面サイズを変えて縦並びスタイルにしてみよう

 

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

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

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

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

 

[PR] Webデザインで副業する学習方法を動画で公開中

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

例えば、フロントエンドのコンポーネントライブラリとして、世界的に有名な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を学習中の方へ

これで解説は終了です、お疲れさまでした。

• つまずかず「効率的に」学びたい
• 副業や転職後の「現場で使える」知識やスキルを身につけたい

HTMLを学習していて、このように思ったことはありませんか？

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！