サイト模写練習:2日目～複数列に分けてテキスト表示

今日の重要だなと思ったポイントを書きます。

こんな感じで、テキストを複数の列に分けて表示させる際に便利なコードがあったので自分用にメモっときます。

結論から言うと、複数列にしたい文章全体をflex_divで囲って、そこからさらにそれぞれ列毎にfirst_div、second_div….と指定していく感じです。CSSでそれぞれのdivでの詳細を設定できるので、使い勝手は良いと思います。

文章は、airbnbのサイトから引用しました。

コードは以下の通りです。

HTML

<div class=”flex_div”>

    <div class=”first_div”>

      <h2  style=”text-align:center” class=”size2″ ><b>Airbnbでホストするこれだけの理由</b></h2>

      <p style=”text-align:center”>どんなお家やお部屋でも、Airbnbなら簡単かつ安全にシェアでき、世界中の旅好きな仲間とつながれます。 予約可能日から料金、ハウスルール、ゲストとの交流程度まで、すべて自分で決めることができます。</p>

    </div>

    <div class=”second_div”>

      <h2 style=”text-align:center” class=”size3″><b>困った時も安心</b></h2>

      <p style=”text-align:center”>万一に備えるUS$1,000,000の財物補償、US$1,000,000の賠償責任保険が全予約に自動付帯。ホストのみなさまと建物・家財の安全をお守りするため全力で取り組んでいます。</p>

    </div>

</div>