WEBCRE8TOR.COM中国短期大学情報ビジネス学科 メディア科目ブログ
[コーディングの実践]LEVEL EASY
実践編

[コーディングの実践]LEVEL EASY

2025年02月12日 ／最終更新：2025年02月13日

divタグを使った基本的なレイアウトを行い、コーディングの順番を身に付けましょう。

[コーディングの実践]LEVEL EASY
1 2 3 4

div#headerタグのhtmlコーディング

編集画面を「index.html」のタブに切り替えましょう。
該当箇所の画像は以下です。

ではdiv#headerタグのブロックを作るため、以下の作業を行ってください。

  1. <body> (開始タグ・10行目)の下を改行し、以下の②の文字列を打ち込み、行末で[Tab]キーを押す。
  2. #header>.wrapper>h1.logo{LEVEL EASY}+ul>li*2>a[href=”#”][Tab]
  3. 展開したコードの2つの「<li><a href=”#”>○○<a></li>」の○○部分を、
    次の④のようにそれぞれ以下に書き換える。
  4. 1つ目・・・TOP / 2つ目・・・PROFILE
  5. Ctrl + Sする。

今回出てきた以下のEmmet記法を使いこなせば、複雑な入れ子構造でも簡単・簡潔な記述で展開することができます。

>

Emmet記法にある「>」は親子関係を作りつつタグを展開する際に使用します。今回のように「#header>.wrapper>h1.logo」という記述の場合「div#headerタグの子要素にdiv.wrapperタグを、さらにその子要素にh1.logoタグを展開」という意味です。

+

Emmet記法にある「>」は兄弟関係を作りつつタグを展開する際に使用します。
今回のように「.wrapper>h1.logo+ul」の場合「div.wrapperタグの子要素にh1.logoタグとulタグを同レベルの階層に展開」という意味です。

li*2

Emmet記法にある「ul>li*2」とは「liタグをx2回記述する」という記述の仕方です。5回なら「*5」、10回なら「*10」と、展開する要素数を「*」を使って操作することができます。

ブラウザで確認する

ブラウザを開いてF5キーしてみましょう。
「LEVEL EASY」「TOP」「PROFILE」などの文字列が表示されたら問題ありません。

div#headerタグのcssコーディング

編集画面を「style.css」のタブに切り替えましょう。

div.wrapperのcssコーディング(Emmet記法)

該当箇所は以下です。

  1. p , li {}の記述を改行し、以下の②の文字列(セレクタ+波括弧)を打ち込む。
  2. div#header {}
  3. {と}の間を改行し、以下の④の文字列(セレクタ+波括弧)を打ち込む。
  4. div.wrapper {}
  5. ④の{と}の間を改行し、次の⑥-❶・⑥-❷の文字列を打ち込み、それぞれ行末で[Tab]キーを押す。
  6. ❶df[Tab] ❷jcsb[Tab]
  7. Ctrl + Sする。

df

display: flex; / プロパティ・値解説

jcsb

justify-content: space-between; / プロパティ・値解説

h1.logoのcssコーディング(Emmet記法)

該当箇所は以下です。

  1. 先ほど記述した「justify-content: space-between;」を改行し、以下の②の文字列(セレクタ+波括弧)を打ち込む。
  2. h1.logo {}
  3. {と}の間を改行し、以下の④の文字列を打ち込み、行末で[Tab]キーを押す。
  4. p10-20+fsz14+lh30px+c#fff+bg#393939[Tab]
  5. Ctrl + Sする。

p10

padding: 10px 20px;

fsz14

font-size: 14px; / プロパティ・値解説

lh30px

line-height: 30px; / プロパティ・値解説

c#fff

color: #fff; / プロパティ・値解説

bg#393939

background: #393939;

ulのcssコーディング(Emmet記法)

該当箇所は以下です。

  1. h1.logo {}の記述を改行し、以下の②の文字列(セレクタ+波括弧)を打ち込む。
  2. ul {}
  3. {と}の間を改行し、以下の④-❶・④-❷の文字列を打ち込み、それぞれの行末で[Tab]キーを押す。
  4. ❶df[Tab] ❷gap[Tab]
  5. ④-❷のgapプロパティは値が展開されないため、値に「10px」と打ち込む。
  6. Ctrl + Sする。

df

display: flex; / プロパティ・値解説

gap

gap: ; / プロパティ・値解説

li aのcssコーディング(Emmet記法)

  1. 先ほど記述した「color: #393939;」の記述を改行し、以下の②の文字列(セレクタ+波括弧)を打ち込む。
  2. li {}
  3. {と}の間を改行し、以下の④の文字列(セレクタ+波括弧)を打ち込む。
  4. a {}
  5. {と}の間を改行し、以下の④-❶・④-❷の文字列を打ち込み、行末で[Tab]キーを押す。
  6. db+p10+c#393939[Tab]
  7. Ctrl + Sする。

db

display: block; / プロパティ・値解説

p10

padding: 10px;

c#393939

color: #393939; / プロパティ・値解説

ブラウザで確認する

ブラウザを開いてF5キーしてみましょう。
「LEVEL EASY」が画面左にレイアウトされグレー背景の白文字に、
「TOP」「PROFILE」が画面右にレイアウトされ横並びに表示されたら問題ありません。
完成予想図に少し近づきましたね。どんどん進めましょう。

1 2 3 4

RELATED POST関連記事

© 2025 RYU-YA DESIGN.

PAGE TOP
offcanvas