まずはスマホ出席で出席登録を行ってください。
今回の4桁の認証コードは「 」です。
Sponsored Link
前回は、「ブラウザ幅」と「コンテンツ幅」、
そして「インライン要素」と「ブロック要素」について解説しました。
今回は「id・class」についてとその記述方法、「ブロック」と「入れ子」、
そしてどうしても覚えてほしい「margin」と「padding」について解説します。
この記事の目次
htmlタグの名前（識別子）「id・class」とは
id（#）とはページ内で一度だけ使う。
class（.）はページ内で複数回使うもの。
htmlタグには「id」そして「class」と呼ばれる名前（識別子）を付けることができます。
今回は<header></header>タグの入れ子の<div class=”wrapper”></div>タグを例にとり解説を行います。
<div></div>タグに「class=”wrapper”」という文字列があるよね
<div class="wrapper">
～ここにコンテンツ～
</div>先に言ってしまうと<div class=”wrapper”></div>タグは、
ブロックをコンテンツ幅で中央揃えするために使用しています。
大原則として・・・、
idと指定しているものは、同一ページ内で一度だけ使うもの。
classと指定しているものは、同一ページ内で複数回使う可能性があるもの。
と、覚えてください。
LEVEL EASYのコーディングではそういった理由から、
それぞれ一度しか使わない「PROFILE」「BLOG」の<section></section>タグにはidと、
中央揃えなど、他のブロックでも複数回使うものはclassと指定しています。
idとclassは本当に重要なのでしっかり覚えておきましょう。
idとclassを間違えてコーディングしてしまうとレイアウト崩れの原因になります。
ちなみにidとid、classとclassなどの重複をしなければ同じ名前でも問題ありません。
idとclassの書き方。
ではidとclassのCSSでの記述方法について説明します。
idとclassの違いについて簡単に説明しましたが、htmlでの記述ルールがあるように、
cssにもidとclassのそれぞれの記述ルールがありますので記述例を見ながら説明します。
idの書き方
まずhtmlでのidの記述方法は以下になります。
前提として、id指定しているものは同一ページ内で一度だけ使うもので、id名を重複させてはいけません。
htmlでのidの記述例
<section id="profile">
～ここにPROFILEのコンテンツ～
</section>
<section id="blog">
～ここにBLOGのコンテンツ～
</section>htmlでのidの記述方法は、開始タグのセレクタ名のあとに半角スペースを1文字分あけ、
「id=”英字のid名”」と記述します。上記の例では<section></section>タグに「profile」とidを付けています。
cssでのidの記述例
#profile {
width: 100%;
}cssでのidの記述方法は「#◯◯」とセレクタの頭にシャープをつけて指定を行います。
classの書き方
次にhtmlでのclassの記述方法は以下になります。
class指定しているものは、同一ページ内で複数回使う可能性があるもので、
必要ならば、複数回にわたりあらゆる場所で使用することができます。
htmlでのclassの記述例
<div class="wrapper">
～ここにコンテンツ～
</div>htmlでのidの記述方法は、開始タグのセレクタ名のあとに半角スペースを1文字分あけ、
「class=”英字のclass名”」と記述します。上記の例では<div></div>タグに「wrapper」とclassを付けています。
CSSでのclassの記述例
.wrapper {
width: 1024px;
margin: 0 auto;
}今回のCSSコードのセレクタは「.wrapper」ですね。
cssでのclassの記述方法は「.◯◯」とセレクタの頭にピリオドをつけて指定を行います。
idとclassの命名に関して。
今回はidの名前を「profile」、classの名前を「wrapper」にしていますが、
以下のルールさえ守れば名前はなんでも構いません。
- 日本語を使わず半角英数字のみを使用。
- 記号を使うのなら「-」（ハイフン）もしくは「_」（アンダースコア）を使用。
- ①や□など機種依存文字は使用しない。
- スペースは使用しない（全角および半角）。
- 1文字目は数字を使用しない。
ブラウザに正しく認識されない場合がありますので命名ではこの5点を必ず守りましょう。
htmlの基礎中の基礎「ブロック」と「入れ子」
さて、前回は<html></html>・<body></body>および<header></header>ので記述を行いましたが、
今回はidやらclassやら中央揃えやら・・・皆さんがあまり触れたことがないキーワードがたくさん出てきます。
ブロックと入れ子の原理。
htmlでのレイアウトの基礎中の基礎のポイントは二つ。
ブロックと入れ子です。
まず今まで記述した<body></body>や<header></header>などのブロック要素のhtmlタグは、
一つの箱（ブロック）だと思ってください。
今回記述したものは、箱の中に箱を入れて、その中にさらに箱を入れた状態です。
まず、html文書内に<body></body>タグの記述を行ったことによって、
ブラウザ全体のサイズ（横幅100％・高さ100％） と大きさの箱（<body></body>）が作られました。
次に<body></body>タグの入れ子で<header></header>タグを記述したことにより、
その箱（<body></body>）の中に、同じ横幅の<header></header>という箱が表示されています。
一番大きな箱と同じ大きさなので、つまりブラウザの横幅100％のサイズです。
さらにその箱の中に、横幅を1024px（コンテンツ幅）にした<div class=”wrapper”></div>という箱を入れて箱の中で中央に配置します。
上の画像では仮に1024pxに指定してありますが、
ブラウザのサイズより小さければどんなサイズでも表示できます。
しかしそのまま置いてしまうと箱は左側に寄ってしまいます。
そのため、cssを使って箱を真ん中に揃う指定を行います。
こうしてブロックに親子関係を作り「入れ子構造」にしていくことで様々なレイアウトを作ることがブロックと入れ子の原理です。
前回のまで記述した各ブロックの説明
ページの全体を覆っているのが<body></body>です。
これが一番大きな箱です。
その中にロゴやグローバルナビゲーションがある<header></header>という箱を入れて、
その中に中央揃えのための<div class=”wrapper”></div>という箱を入れました。
これでページ最上部<header></header>タグの入れ子の構造が出来ました。
なお<header></header>タグでは、子要素を柔軟にレイアウトさせる「display: flex;」を指定し、
併せて、子要素を均等配置かつ両端揃えにできる「justify-content: space-between;」を指定しました。
これで「<div class=”wrapper”></div>」の中で、ロゴのブロックを左寄せに、
<nav></nav>のグローバルナビゲーションのブロックを右寄せにし、
簡単に2カラムレイアウトを実現することができました。
次回以降、<main></main>タグではさらに入れ子の構造を作っていきます。
どうしても覚えてほしいプロパティ！「margin」と「padding」
コーディング開始前から「margin」および「padding」はたびたび出てきていますが、
この二つのプロパティは必ず理解をしておかないと適切なコーディングは不可能だと考えてください。
marginやpaddingはボックスの外側と内側の余白の指定のためのプロパティです。
marginは指定要素と周りの間の距離、paddingは指定要素の内側の距離です。
下に画像と一覧表を用意したので見てみましょう。
| margin-top | ブロックの外側上部の余白 |
|---|---|
| margin-bottom | ブロックの外側下部の余白 |
| margin-left | ブロックの外側左部の余白 |
| margin-right | ブロックの外側右部の余白 |
| padding-top | ブロックの内側上部の余白 |
|---|---|
| padding-bottom | ブロックの内側下部の余白 |
| padding-left | ブロックの内側左部の余白 |
| padding-right | ブロックの内側右部の余白 |
この通り、marginやpaddingに「-top」や「-bottom」などと付け足すことにより、
どの向きの余白なのかを指定することができます。
今回の場合、<footer></footer>タグの内側にある<div class=”wrapper”></div>タグは、
内側上下左右の余白を20pxずつとっていることになります。
なお、marginプロパティとpaddingプロパティは使用頻度がかなり高いです。
むしろ指定を行わないことの方が珍しいかもしれません。
それでは今日のコーディングを始めていきましょう。
今回は以下の2件の記事の学習を行います。
次回は<main></main>タグのコーディング
今回はここまで。
次回は<main></main>タグのコーディングを行います。
