確認テスト: HTML テキストの基礎

基本的な HTML の動物

このページの最初の段落です。当施設の動物たちをご紹介します。

ラマ

私たちのラマはリストアイテムが大好きだ。ウェブページでそれらを見つけると、同様に甘いもののように貪り食う。そのたびに舌なめずりをするのだ。

ガラガラヘビ

狡猾なガラガラヘビはページ上を這い回り、アンカーを道として使用して素早く移動し、獲物に忍び寄るのが好きだ。

body {
  background-color: white;
  color: #333333;
  font:
    1em / 1.4 "Helvetica Neue",
    "Helvetica",
    "Arial",
    sans-serif;
  padding: 1em;
  margin: 0;
}

h1 {
  font-size: 2rem;
  margin: 0;
}

h2 {
  font-size: 1.6rem;
  margin: 0;
}

* {
  box-sizing: border-box;
}

h1,
h2 {
  color: purple;
}

p {
  color: gray;
  margin: 0.5em 0;
}

<h1>リストの観察</h1>

<p>次の私の好きな野菜のリストを順序なしリストに変換してください。</p>

キュウリ
ブロッコリー
アスパラガス
ピーマン

<p>次の指示を番号付きリストに変換してください。</p>

まずドアをノックする
尋ねられたら、合言葉を言う
5 秒以上待つ
取っ手を回して押す

p {
  margin: 0.5em 0;
}

ol {
  border: 2px solid purple;
}

ul {
  border: 2px solid orange;
}

ol,
ul {
  padding: 5px 20px;
  border-radius: 4px;
}

<h1>高度な HTML の動物</h1>

ラマ
背が高く、毛むくじゃらの四足動物。尖った耳を持つ。乗れることもあるが、不機嫌でよく唾を吐く。リストアイテムが大好き。
ガラガラヘビ
とても大きな絞め殺し蛇。アンカーの道を素早く移動し、獲物に忍び寄る。
カバ
彼の説明は底知れない。

h1 {
  color: purple;
}

dl {
  color: gray;
  margin: 0.5em 0;
}

dt {
  font-weight: bold;
  color: purple;
}

<h1>強調と重要性</h1>

<p>
  私が大切にしているものは二つ — 音楽と友達です。いつか、友達には互いに、そして私の音楽にも関心を持ってもらえるかもしれません。
</p>

h1,
strong {
  color: purple;
}

p,
em {
  margin: 0.5em 0;
}

em {
  color: gray;
}