TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS CSSで複数行のdtとddを横並びにする方法【初心者向け】
オーダーメイドコース
icon
icon
CSS

CSSで複数行のdtとddを横並びにする方法【初心者向け】

初心者向けにCSSで複数行のdtとddを横並びにする方法について解説しています。dl・dt・ddタグは定義リストと呼ばれる要素で用語の後に説明が続く形で使います。今回はdtやddタグを横並びにする方法について学びます。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

CSSで複数行のdtとddを横並びにする方法について解説します。

dt要素とdd要素を改行させないcompact属性ががHTML5から廃止されたので、CSSで調整する必要があります。

そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。

 

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

 

田島悠介

今回は、CSSに関する内容だね！

大石ゆかり

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

田島悠介

CSSで複数行のdtとddを横並びにする方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

dtとddを横並びにする方法

<dl><dt><dd>を使う「定義リスト」の記述方法は、

<dl>
<dt>タイトル</dt>
<dd>内容<dd>
<dt>タイトル</dt>
<dd>内容<dd>
</dl>

というように、タイトルと内容を連続して書くことになります。そのため、【タイトル】と【内容】を横並びにしたいとき、テーブルのような書き方ができなかったり、floatさせても、clearfixを書く場所がなかったりと、少し困ることがあると思います。

そんなとき、横並びにする方法の一つ、「float: left;」と「margin-left」を使うと、実現することができます。

<dt>にfloat: left; を与えてフロートさせ、そこで高さを失った<dt>の分だけmargin-leftを与えるというやり方になります。

このやり方であれば、内容が複数行になっても、体裁が崩れることなく表示することができます。

 

実際に書いてみよう

まず、Webサイトの更新情報をコーディングすることを想定して、HTMLを書いてみましょう。

そして、<dt>にfloat:left、<dd>にmargin-left（ここでは80pxくらいがちょうど良さそうです。）をCSSに書いてみると、

HTML

<dl>
  <dt>9月20日</dt>
  <dd>xxが追加されました。<br>
  複数行でも崩れません。</dd>
  
  <dt>9月20日</dt>
  <dd>xxが追加されました。</dd>

  <dt>9月18日</dt>
  <dd>Webサイトをリニューアルしました。</dd>
<dl>

 

CSS

dt{
  float: left;
}

dd{
  margin-left: 80px;
}

横並びが実現しました。

 

この記事を監修してくれた方

和田 祥子（わださちこ）
フリーランスのWebデザイナー7年目です。Ruby勉強中。

テニスと音楽とビールが好きです。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

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

大石ゆかり

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

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

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

CSSでテーブルの枠線を消す方法と注意点【初心者向け】現役エンジニアが解説

CSSでテーブルの枠線を消す方法と注意点について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
CSS

CSSでnth-of-typeとnth-childの違いを現役エンジニアが解説【初心者向け】

CSSのnth-of-typeとnth-childの違いについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説しま...
CSS

外部ファイルを読み込む！CSSで@importを使う方法【初心者向け】

CSSで外部ファイルを読み込む際に役立つ@importの使い方について解説します。 ファイル分割してCSSの記述をする時などに知っておくと便利な知識です。...
CSS

CSSでセレクトボックスを修飾する方法【初心者向け】

CSSでセレクトボックスを修飾する方法について解説します。セレクトボックスはフォーム要素のことで他にテキストフィールドやテキストエリアなどがあります。 そ...
CSS

SassとLESSを扱う！CSSのプリプロセッサの使い方【初心者向け】

CSSのプリプロセッサの使い方について解説します。CSSプリプロセッサでは、CSSにはない変数やネスト構造でのコーディング、また関数や四則演算も行うことが出来ま...
CSS

使いながら解説！効率良くコーディングできるSassとは【初心者向け】

CSSを簡単に書くための言語Sassについて解説しています。 Sassを理解するためにはまずCSSの知識の理解が必要となりますので、CSSの理解が進んでい...
CSS

あわせてよく読まれている記事

CSSで要素を横並びにしてみる実装方法を現役エンジニアが解説【初心者向け】

CSSで要素を横並びにしてみる実装方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をみていきましょう。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 要素を横並びにしてみる実装方法について詳しく説明していくね！ 大石ゆかり お願いします！   CSSで要素を横並びにしてみる実装方法について 基本的にhtmlは通常では、要素は左上からブロック状に積まれていきます。 これを横並びとすることができるCSS実装方法についてみていきましょう。   要素を横並びにしてみることにより得られる効果はどんなところで活用できる？ 縦並びレイアウトだけのデザインでは、ページの長さが非常に長くなってしまいます。 そういったページはユーザーのニーズにそったものとはいえず、多くの読者はページから離れていくでしょう。 要素を横並びにしてみる効果としてわかりやすいのは、横幅の広いPC画面でのグローバルナビゲーションです。 PCの画面内の横幅は広く、横にたくさんスペースを取ることができます。 限られた画面上のファーストビュー（画面冒頭に表示される領域）において、コンテンツへの導線を隠すことなく配置できるため、横並びの表現を有効に使用することができるでしょう。   横並び系CSSは3種類 横並び系CSSはよく使われるものに3種類あります。 また、どれを使っても表示される結果は同じです。 要素によって横並びCSSの使い分けができれば、効率よく美しいシンプルなソースコードが書けるようになるでしょう。 メインエリアとサイドバーなどの大枠　=> float 同じ要素の繰り返し box系は => flex ナビゲーション内の文字レベルの横並びは => inline-block このように使い分けをすると良いでしょう。   ここまでのまとめ よく使う横並びCSSは3種類あります。（float、flex、inline-block） 表示位置によって柔軟に使い分けができると、コーディングがよりきれいに書けるでしょう！   実際に書いてみよう floatの場合の横並び See the Pen floatを使った横並び by Yuka Sato (@yuka-sato) on CodePen. display: flex;の場合の横並び See the Pen display: flex;の場合の横並び by Yuka Sato (@yuka-sato) on CodePen. display: inline-block;の場合の横並び See the Pen inline-block2 by Yuka Sato (@yuka-sato) on CodePen. ぜひ「横並び系CSS」を使い分けしてイメージ通りの表示を実装しましょう〜！   [PR] Webデザインで副業する方法とは執筆してくれたメンター ゆかちん先生 フリーランスのクリエイティブディレクター。 制作会社、インハウス、スタートアップ企業などで、グラフィックデザイン・ウェブデザイン・アプリデザイン、ウェブディレクションなどに携わってきました。 TechAcademyではWeb Designコース・ウェブディレクションコース・WordPressコースを担当しています。   大石ゆかり CSSで要素を横並びにしてみる実装方法がよくわかったので良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので参加してみてください。
CSS

HTMLとCSSで横並びレイアウトの表示方法を現役エンジニアが解説【初心者向け】

今回はHTMLとCSSを使用して横並びレイアウトの表示をする方法を、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 HTMLとCSSを使用して横並びレイアウトの表示をする方法について詳しく説明していくね！ 大石ゆかり お願いします！   活用場面 Webサイトのカラムやグローバルナビゲーションなどのメニューには、横並びのレイアウトが活用されています。Webの黎明期には、テーブルコーディングと呼ばれる手法で、おもにtableタグだけで横並びのレイアウトが実現されていました。 しかし、ブラウザの技術がCSS2.1規格に対応してからは、displayとfloatを用いた横並びのレイアウトが確立しました。一般的によく見かけるWebサイトのレイアウトは、CSSのプロパティであるdisplayとfloatを用いた手法で構築できます。   displayの使い方 HTMLのタグは、おもに要素のモデル(型)として「ブロックレベル要素」と「インライン要素」に分かれています。 HTML <div> <p>テキスト0番</p> <p>テキスト1番</p> <p>テキスト2番</p> <p>テキスト3番</p> <p>テキスト4番</p> </div> プレビュー divタグの内部に、pタグが0番から4番までの合計5個あります。これらのタグは、「ブロックレベル要素」です。CSSで装飾を行う場合、ブラウザで縦並びとして表示され、幅と高さや余白などを柔軟に設定できます。 一方の「インライン要素」は横並びに表示されるもので、幅と高さや余白などの適応に制限があります。この「ブロックレベル要素」を以下のようにCSSの記述にすると、「インライン要素」として横並びにし、幅と高さや余白などの設定を「ブロックレベル要素」と同様に操作することが可能です。 CSS div p {   display: inline-block; } プレビュー また、先ほどの「ブロックレベル要素」のタグを「インライン要素」に変更することもできます。 CSS div p {   display: inline; } プレビュー 上記の「ブロックレベル要素」のタグを「インライン要素」に変更する、単純に「インライン要素」のタグを記述した場合の表示は同じです。 HTML <div> <span>テキスト0番</span> <span>テキスト1番</span> <span>テキスト2番</span> <span>テキスト3番</span> <span>テキスト4番</span> </div> プレビュー   [PR] Webデザインで副業する方法とはfloatの使い方 前述のdisplay: inline-blockの手法は、各種の古いブラウザでは表示の結果が異なってしまうため、古いブラウザの表示の結果では、floatで横並びが実現されています。このfloatには、値としてleftもしくはrightを指定することで、「ブロックレベル要素」を指定方向に寄せてから後述の要素を回り込ませることが可能です。 HTML <main> <div class="left-column">左カラム</div> <div class="right-column">右カラム</div> </main> CSS main div { margin: 0; /* 要素の外側の余白を0に定義 */ padding: 0; /* 要素の内側の余白を0に定義 */ } .left-column {   float: left;
CSS

HTMLで複数の画像を均等に横並びする方法を現役エンジニアが解説【初心者向け】

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;を指定することで、次のように横並びの表示が可能になります。 See the Pen inline-block by マインクラフトゲームアプリプログラミング学校 (@programjp) on CodePen.   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;を指定することで、次の表示のように横並びの表示が可能になります。 See the Pen float by マインクラフトゲームアプリプログラミング学校 (@programjp) on CodePen.   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.のような連番を表示できます。 See the Pen flex by マインクラフトゲームアプリプログラミング学校 (@programjp) on CodePen. [PR] Webデザインで副業する方法とは画像間の隙間を均等に保つ方法 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>
HTML

HTMLで画像を横並びした時にレイアウトがずれる原因と対処法を現役エンジニアが解説【初心者向け】

HTMLで画像を横並びした時にレイアウトがずれる原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 画像を横並びした時にレイアウトがずれる原因と対処法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 画像を横並びにする方法 画像を横並びにする際の注意点 レイアウトがずれる原因と対処法   画像を横並びにする方法 HTMLとCSSで画像を横並びにする方法はいくつもの方法があります。 まずは、floatを使用する方法です。 全てを左側に浮かせるようにしていく方法であり、画像が３つある場合には一つずつの画像要素にcssでfloat:leftを記述していきましょう。 (htmlファイル) <ul> <li><img src="test1.png"alt="オレンジ"title="オレンジの四角形"id="image1"></li> <li><img src="test2.png"alt="黄色"title="黄色の四角形"id="image2"></li> <li><img src="test3.png"alt="緑"title="緑のの四角形"id="image3"></li> </ul> (cssファイル) li { float: left; } 次にinlineを使用する方法です。 基本的にはブロックの要素の中で利用し、inline要素にすることで横並びにすることが可能です。 (cssファイル) li { display: inline; } inlineと似ているものの、inline-blockを使用する方法は使い勝手が良い方法です。 幅と高さやマージンなども個々に指定が出来るため便利だといえます。 (cssファイル) li { display: inline-block; } 他にはtable-cellを使用する方法もみていきましょう。 画像全てを横並びに置く領域を親要素としてdisplay:tableとします。 そして各要素に対し、table-cellを当てるようにします。 (htmlファイル) <div id="test"> <ul> <li><img src="test1.png"alt="オレンジ"title="オレンジの四角形"id="image7"></li> <li><img src="test2.png"alt="黄色"title="黄色の四角形"id="image8"></li> <li><img src="test3.png"alt="緑"title="緑のの四角形"id="image9"></li> </ul> </div> (cssファイル) #test{ display: table; } li { display: table-cell; }   [PR] Webデザインで副業する方法とは画像を横並びにする際の注意点 画像を横並びにする場合には、「どうしても横並びにしたいにしたいのか」、「画像サイズを調整して配置するのか」などを検討しながら、使用するCSSプロパティを選択していくことが必要となります。 また、パソコン上での表示だけではなく、タブレットやスマートフォンのような小さな画面で表示する場合にはどのように表示したいかを想定しておかなければなりません。 また、ブラウザによっては表示がうまくできないものもあります。 以前のIEではinline-blockがきちんと表示できないバージョンも存在しており、現在のIEではinline-blockが使用できます。 古いバージョンでの表示される可能性がある場合には注意が必要です。   レイアウトがずれる原因と対処法 表示する画像をサイズを認識していなければなりません。 パソコンで表示する場合には1000px程度のブラウザに表示することを想定し、画像３枚であれば横幅を300px程度に大きさを調整しておくとミスが減少します。 また、floatを使用する場合には画面幅が狭くなると、後の画像が前の画像の下側にずれ込みます。 どうしても横並びにしたい場合はdisplay:table-cellを使用すると画像は切れてしまうものの、横並びに表示可能です。   他の対処法としてはcssで＠mediaを使用し、レスポンシブデザインとする方法です。 横幅が768px以上のブラウザ画面の場合はパソコンで表示したい配置に、横幅が320px以下の場合にはスマホで表示したい配置に、中間はタブレットで表示する配置にしましょう。 このようなレスポンシブに対応したスタイルを記述しておき、画像サイズは「100%」などの、各ブラウザサイズに対応した記述することで画面崩れがなくなります。   画像サイズや要素の幅をピクセルで固定する場合には、他のブラウザサイズでの見え方も考慮に入れたサイズにしておくことが必要です。   執筆してくれたメンター 木村勇土 TechAcademyの現役メンター。 現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。 WordPressを中心とした自社のWebサイトの修正などを行なっている。   大石ゆかり HTMLで画像を横並びした時にレイアウトがずれる原因と対処法がよく分かったので良かったです！ 田島悠介 ゆかりちゃん、これからも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
HTML

CSSで画像とテキストを横並びにする方法【初心者向け】

CSSで画像とテキストを横並びにする方法について解説します。 そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 CSSで画像とテキストを横並びにする方法について詳しく説明していくね！ 大石ゆかり お願いします！   画像とテキストを横並びにする方法 画像やテキスト要素を横並びにする方法は多種ありますが、 その中で多く使われる方法をご紹介いたします。 display:inline display:inline-block 上記の要素はブロック要素と使い分けができwidthやheightを指定でき横並びの レイアウトを実現することが出来ます。 display:table table要素と同じ振る舞いができ、要素が増えても段落ちせず、自動で調整をいれたい場合に使用します。 最後にfloatを使って画像とテキストを回り込みをさせ横並びのレイアウトにすることも可能です。 実際に書いてみよう display:inline-blockで要素を横並びにすることが出来ます。divをインラインすることにあまり意味は感じられないと思います。 ですが、横並びのグローバルナビのリストを横並びにすれば、floatを使わないで横並びが再現できます。 HTML <ul> <li><a>navi①</a></li> <li><a>navi②</a></li> <li><a>navi③</a></li> <li><a>navi④</a></li> <li><a>navi⑤</a></li> </ul>   CSS ul { overflow: hidden; letter-spacing: -.5em; } li { display: inline-block; width: 20%; vertical-align: middle; letter-spacing: 0; text-align: center; }
CSS

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

HTMLで横・縦に並べるレスポンシブデザインを上手に使う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   そもそも、HTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 横に並べる・縦に並べるスタイルを使ってレスポンシブデザインを上手に使う方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 端末と画面サイズの関係性 ブレイクポイントの見極め 横並びと縦並びスタイルを変えられるタグとその違い 画面サイズを変えて縦並びスタイルにしてみよう   端末と画面サイズの関係性 PC／モバイルに最適化したデザインをする際、別々の端末ごとにデザインを作成できれば話は難しくないでしょう。 しかし、端末のデバイスサイズは多様化し、端末別にデザインを作成することは現実的ではありません。 現代では画面サイズにブレイクポイントを設定し、ブレイクポイントとブレイクポイントの範囲内でシームレスに変動するデザインを作成するのが主流です。   [PR] Webデザインで副業する方法とはブレイクポイントの見極め 例えば、フロントエンドのコンポーネントライブラリとして、世界的に有名なBootstrap4では5つが存在します。 スマートフォン(縦) スマートフォン(横) タブレット デスクトップ 大画面   Bootstrapは広い範囲で対応を求められているので5つの細かいブレイクポイントを設定しています。 しかし、必ずしも全てのブレイクポイントを対応すればよい訳ではないでしょう。 動画サイトはスマートフォンを横向きにして動画をみることを想定して横向きのレイアウトも必要になります。   また、メディアサイトは文章を読みやすくすることを想定しなければなりません。 スマートフォンの横向きの状態であれば、文字を左から右へ目で追う距離が長くなり、目が疲れやすくなるため、横向きのデザイン自体が必要ないこともあります。 扱うコンテンツやレイアウトに合わせてブレイクポイントを設定することが大切です。   横並びと縦並びスタイルを変えられるタグとその違い ここでは、それぞれのスタイルを変換できるタグについてみていきましょう。   display 要素の横並び・縦並びを制御するには「display」要素を使用します。 displayはp {display: block}やspan {display: inline}のように使いましょう。   取得できる値 block p、div、ul、h1〜h6などのタグの初期値はコレ inline a、span、imgなどのタグの初期値はコレ inline-block 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を学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい HTMLを学習していて、このように思ったことはありませんか？ テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
HTML

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS CSSで複数行のdtとddを横並びにする方法【初心者向け】