CSS

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

初心者向けにCSSで要素を横並びにしてみる実装方法について解説しています。要素を縦ではなく横に並べるやり方としてfloatを使った方法、display: flex;を使った方法、display: inline-block;を使った方法を説明します。コードと実行結果を確認しましょう。

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

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の場合の横並び

<br /> See the Pen <a href="https://codepen.io/yuka-sato/pen/vYEgJRN">floatを使った横並び</a> by Yuka Sato<br /> (<a href="https://codepen.io/yuka-sato">@yuka-sato</a>) on <a href="https://codepen.io">CodePen</a>.<br />

display: flex;の場合の横並び

<br /> See the Pen <a href="https://codepen.io/yuka-sato/pen/RwNKZjW">display: flex;の場合の横並び</a> by Yuka Sato<br /> (<a href="https://codepen.io/yuka-sato">@yuka-sato</a>) on <a href="https://codepen.io">CodePen</a>.<br />

display: inline-block;の場合の横並び

<br /> See the Pen <a href="https://codepen.io/yuka-sato/pen/axGeVL">inline-block2</a> by Yuka Sato<br /> (<a href="https://codepen.io/yuka-sato">@yuka-sato</a>) on <a href="https://codepen.io">CodePen</a>.<br />

ぜひ「横並び系CSS」を使い分けしてイメージ通りの表示を実装しましょう〜！

[PR] Webデザインで副業する方法とは

執筆してくれたメンター

ゆかちん先生

フリーランスのクリエイティブディレクター。

制作会社、インハウス、スタートアップ企業などで、グラフィックデザイン・ウェブデザイン・アプリデザイン、ウェブディレクションなどに携わってきました。

TechAcademyではWeb Designコース・ウェブディレクションコース・WordPressコースを担当しています。

CSSで要素を横並びにしてみる実装方法がよくわかったので良かったです！

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

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

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

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

CSSのリスト（list-style-image）で画像を使う方法【初心者向け】

CSSでリストに画像を使う方法について解説します。そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が...

CSS

CSSで斜めにグラデーションをかける方法を現役エンジニアが解説【初心者向け】

今回は、CSSで斜めにグラデーションを使う方法や活用方法について解説します。 CSSについて、よく分からないという方はCSSの書き方に...

CSS

CSSでiframeタグの高さを自動調整する方法を現役エンジニアが解説【初心者向け】

CSSでiframeタグの高さを自動調整する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

CSS

CSSのnormalize.cssの使い方を現役エンジニアが解説【初心者向け】

CSSのnormalize.cssの使い方について解説します。そもそもCSSについてよく分からないという方は、CSSの書き方について...

CSS

CSSで複数のidを指定する方法を現役エンジニアが解説【初心者向け】

CSSで複数のidを指定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSSについ...

CSS

CSSのhoverで別の要素の値を変更させる方法【初心者向け】

CSSのhoverで別の要素の値を変更させる方法について解説します。hoverはマウスが要素に触れている場合の処理を書くプロパティですが、別の要素を変化させるこ...

CSS

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

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

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と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

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

HTMLで複数のチェックボックスを横並びに配置する方法を現役エンジニアが解説【初心者向け】

HTMLで複数のチェックボックスを横並びに配置する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。目次CSSで要素を横並びにしてみる実装方法について実際に書いてみよう執筆してくれたメンターそもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介複数のチェックボックスを横並びに配置する方法について詳しく説明していくね！大石ゆかりお願いします！チェックボックスを実装する方法チェックボックスは、inputタグのtype属性に「checkbox」と指定することで実装できます。一般的には、HTML内で以下のように実装されます。最も簡素な例 <form> <input type="checkbox">選択肢テキスト <input type="checkbox">選択肢テキスト </form> See the Pen チェックボックスを実装する方法_最も簡素な例 by nomallica (@nomallica) on CodePen. labelタグを使用した例 labelタグを使用することで、選択肢テキスト部分でもチェックが入れられるようになります。以下のように選択肢テキストをlabelタグで囲み、for属性の値をinputタグのid属性と合わせることで実装できます。 <form> <input type="checkbox" id="check1"><label for="check1">選択肢テキスト</label> <input type="checkbox" id="check2"><label for="check2">選択肢テキスト</label> </form> See the Pen チェックボックスを実装する方法_labelタグを使用した例 by nomallica (@nomallica) on CodePen. さらにfieldsetタグでグループ分けした例 fieldsetタグでチェックボックスをグループ化した例が、以下の通りです。 inputタグにname属性を追加することで、グループとの関連付けができます。 <form> <fieldset> <input type="checkbox" id="check1" name="group1"><label for="check1">選択肢テキスト</label> <input type="checkbox" id="check2" name="group1"><label for="check2">選択肢テキスト</label> </fieldset> <fieldset>

HTML

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

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