<ul>

<li>

<ol>

list-style

<ul>
  <li>イヌ</li>
  <li>ネコ</li>
  <li>ウサギ</li>
</ul>

<ol>
  <li>サクラ</li>
  <li>バラ</li>
  <li>チューリップ</li>
</ol>

<ul class="list-container">
  <li>クッキー</li>
  <li>チョコレート</li>
  <li>アイスクリーム</li>
</ul>

ul,
ol {
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
}
ul {
  list-style-type: disc;
}
ol {
  list-style-type: circle;
}

/* 問題4. 3つ目のリストの黒丸を非表示にしてください */
.list-container {
  list-style-type: none;
}


ul,
ol {
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
}
ul {
  list-style-type: disc;
}
ol {
  list-style-type: circle;
}

/* 問題4. 3つ目のリストの黒丸を非表示にしてください */


リストを作成しよう

<!DOCTYPE html>

<html>

HTMLを始めてみよう

<head>

<title>

<meta>

<meta charset="utf-8" />

メタ情報を設定しよう

<h1>

<h2~h6>

見出しと段落を実装しよう

<link>

<span>

見出しの色を変更しよう

text-align

見出しの位置を変更しよう

font-size

font-weight

font-family

見出しを装飾しよう

letter-spacing

line-height

.test {
  font-size: 20px;
  line-height: $(1);
}

段落の字間、行間を変更しよう

<img>

<img>要素で使われる属性は多く存在していますが、その中でも$(1)属性は必須となっており、この属性では埋め込みたい画像へのパスを設定します。
また、$(2)属性は必須ではありませんが、アクセシビリティのために非常に有用で、スクリーンリーダーがこの属性に示された説明を読み上げることで、画像が何を表しているかをユーザーに伝えることができます。

width

height

画像を表示させよう

画像にリンクを設定しよう

<div>

background-color

ブロックを作成しよう

border

box-shadow

border-radius

ブロックの周囲を装飾しよう

実際のホームページ作成に使われるHTMLとCSSの応用技術を学んでいきます。
メタ情報の設定からブロックデザインまで、手を動かして実務に役立つ知識を身につけます。

「HP作成でよく使うHTML・CSSを学ぼう」レッスンの総復習クイズです。

HP作成でよく使うHTML・CSSを学ぼうの総復習クイズ

HP作成でよく使うHTML・CSSを学ぼう