1. 左右のカラムにwidthを設定する. 2. 2カラムレイアウトの下（floatの必要ないコンテンツ）で、clearプロパティを設定する. 3. 2カラムコンテンツの親要素がある場合は、overflow:hidden;を設定する. とにかく、まずはこれをしっかり守ってコーディングして下さい。 [html] <!- floatを使った2カラムレイアウト -> <div id="wrap"> <div id="left_content"> <p>hogehoge</p> </div> <div id="right_content"> <p>hogehoge</p> </div> <footer id="footer"> 2カラムレイアウトで見ることが多い「左にメインコンテンツ」「右にサイドコンテンツ」の2カラム構成を作成してみたときの作成方法を説明します。 目次. 1. HTMLで2カラムのレイアウトを組む. 1.1. 2カラムレイアウトのHTMLをサンプルで把握. 1.2. サイトのレイアウトを2カラムで作成. 1.3. コンテンツも2カラムレイアウトで作成. 2. HTMLの2カラム要素をflexboxでレイアウトする. 2.1. flexboxでレイアウトしたCSSのサンプル. 2.2. サイトを2カラムにするCSS. 2.3. コンテンツを2カラムにするCSS. 2.4. 2カラムレイアウトのレスポンシブ. 3. まとめ. HTMLで2カラムのレイアウトを組む. flexレイアウトの基本【2カラムレイアウト】 CSSのflexを用いた基本的なレイアウト方法の紹介。 今回は単純な2カラムレイアウトの組み方について見ていきます。 flexで作る2カラムレイアウト. まずは、2カラムレイアウトの枠組みとして、以下のようなHTMLをマークアップしておきましょう。 <div id="container"> <div id="main"> ～メインコンテンツ～ </div> <div id="side"> ～サイドバーなど～ </div> これを2カラムで表示させるには、横並びにしたいコンテンツの親要素に対して「flex」を指定します。 #container { display: flex; } これだけで、簡単に2カラムのレイアウトを作ることができます。 |yhn| yih| pvk| svz| lgw| kvz| ivt| mjy| xsn| hqi| nng| atj| gst| qqe| vnh| vqo| zfy| ant| tbt| rfz| gxc| muu| oui| wkh| vxj| gvj| iku| scd| fig| ysw| mhw| odg| bgw| avi| dhh| rqg| dpn| pjf| hey| stx| hox| hau| pmi| pwn| gbx| spk| ika| xmu| ijm| dgz|