CSSコンテキスト：BFC１

<!DOCTYPE html>
<html lang="ja-JP">
  <head>
    <meta charset="UTF-8" />
    <title>ライブコードサンプル</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Roboto&family=Noto+Sans+JP&family=Noto+Color+Emoji&display=swap"
    />
    <link rel="stylesheet" href="lib/style.css" />
  </head>

  <body>
    <section>
      <header>
        <div class="title">ポラーノの広場
          <span>宮沢賢治</span>
        </div>
        <p>前十七等官　レオーノ・キュースト誌</p>
        <p>宮沢賢治　訳述</p>
      </header>
      <p>そのころわたくしは、モリーオ市の博物局に勤めて居りました。</p>
      <p>十八等官でしたから役所のなかでも、ずうっと下の方でしたし<ruby>俸<rt>ほう</rt>給<rt>きゅう</rt></ruby>もほんのわずかでしたが、受持ちが標本の採集や整理で生れ付き好きなことでしたから、わたくしは毎日ずいぶん愉快にはたらきました。殊にそのころ、モリーオ市では競馬場を植物園に<ruby>拵<rt>こしら</rt></ruby>え直すというので、その景色のいいまわりにアカシヤを植え込んだ広い地面が、切符売場や信号所の建物のついたまま、わたくしどもの役所の方へまわって来たものですから、わたくしはすぐ宿直という名前で月賦で買った小さな蓄音器と二十枚ばかりのレコードをもって、その番小屋にひとり住むことになりました。わたくしはそこの馬を置く場所に板で小さなしきいをつけて一疋の山羊を飼いました。毎朝その乳をしぼってつめたいパンをひたしてたべ、それから黒い革のかばんへすこしの書類や雑誌を入れ、靴もきれいにみがき、並木のポプラの影法師を大股にわたって市の役所へ出て行くのでした。</p>
      <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
    </section>
    <script src="lib/script.js"></script>
  </body>
</html>

/** ボックスサイズを `border-box` にそろえる */
html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
  font-style: normal;
}

/** サイトの土台を定義 */
html,
body {
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
  font-size: 16px;
  font-weight: normal;
  margin: 0;
  padding: 0;
}

ruby rt {
  text-transform: full-size-kana;
}
section {
  padding: 1rem;
  background-color: #eee;
}
header {
  background-color: #ddd;
}
.title {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 10rem;
  height: 5rem;
  background-color: #fff;

  float: left;
  margin: 1rem;
}
section p {
  text-indent: 1rem;
}

// Add your code here