ウェブデザイン演習 第07回 - ウェブデザイン演習 | WordPress・jQuery・HTML・CSSのスニペット集 WEBCRE8TOR.COM

WEBCRE8TOR.COM

ウェブデザイン演習 第07回

前回は、<header></header>から<footer></footer>までの役割、それぞれのHTMLタグのHTMLへの記述方法について説明を行いました。

今回は、HTMLタグを記述する上で理解が必要な「ブラウザ幅」と「コンテンツ幅」、「ブロック」と「入れ子」、そして「インライン要素（display: inline;）」と「ブロック要素（display: block;）」について説明を行い、さらにコーディングでは各ブロックのHTMLタグを追加していきます。

ひとまずテキストエディタを起動して「index.html」「main.css」ファイルを開いてコーディングの準備を行ってください。

手順は以下。

  1. テキストエディタを起動する。
  2. 上部メニューより「ファイル > フォルダーを開く」で「html」フォルダを選択し「フォルダーの選択」をクリック。（参考：VSCode | フォルダを開く/フォルダを閉じる）
  3. 左のエクスプローラーメニューの「html」フォルダから「index.html」「main.css」を開く。

さらに日本語化です。

  1. ウィンドウ左側の拡張機能アイコンをクリックする
  2. 検索窓に「Japanese」と打ち込む
  3. 2番目くらいに出てくる「Japanese Language Pack for Visual Studio Code」をクリックする
  4. 拡張機能詳細画面の「install（インストール）」ボタンをクリックする
  5. Visual Studio Codeを再起動する

以上です。
まず今後、何回かにわたって構築するWebページの完成形を見ておきましょう。

lesson07_mihon

こんな感じになります。

ブラウザ幅とコンテンツ幅

今回の講義では聞きなれない言葉も出てきます。
まず、「ブラウザ幅」と「コンテンツ幅」について説明します。
これに関してはもはや言葉のまま。

lesson07_width

ブラウザ幅はブラウザで見る横幅の100％の大きさ。
コンテンツ幅は実際にコンテンツが表示されている領域の大きさ。
今回は理解を深める上でこの二つのキーワードがとても重要になってきます。

インライン要素とブロック要素

HTMLタグにはインライン要素とブロック要素というものがあります。
各セクションのタグの役割を一通り理解したら、次はインライン要素とブロック要素のことを知りましょう。

ブロック要素は「縦に積まれていくもの」

ブロックレベル要素は、見出し・段落・表など、文書を構成する基本となる要素で、一つのブロック（かたまり）として認識されます。 ブラウザでの表示も一つのかたまりとして扱われることが多く、一般的なブラウザでは前後に改行が入ります。 ブロックレベル要素には、以下のものがあります。 <address>、<blockquote>、<center>、<div>、<dl>、<fieldset>、<form>、<h1>-<h6>、
<hr>、<noframes>、<noscript>、<ol>、<p>、<pre>、<table>、<ul>

引用元：https://www.htmq.com/htmlkihon/005.shtml

ブロック要素とは、例えばHTMLに<div></div>タグを追加すると横幅100％でブロックが生成されるHTMLタグのことです。<div></div>タグの閉じタグの下にさらにもう一つ<div></div>タグを追加すると、先ほど<div></div>タグによって生成されたブロックの横に回り込むことなく、下にもう一つ横幅100％のブロックが生成されます。

つまり、記述したものから順に縦に積まれていくのがブロック要素になります。
ちなみに、前回紹介した<header></header>から<footer></footer>は全てブロック要素に該当します。

インライン要素は「横に並んでいくもの」

インライン要素は、主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われます。 例えば、<p>要素の中の<strong>要素のように、段落のなかの一部を強調するような使われ方をする要素です。 一般的なブラウザでは前後に改行が入らず、文章の一部として表示されます。

インライン要素には、以下のものがあります。 <a>、<abbr>、<acronym>、<b>、<basefont>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、
<em>、<font>、<i>、<img>、<input>、<kbd>、<label>、<q>、<s>、<samp>、<select>、
<small>、<span>、<strike>、<strong>、<sub>、<sup>、<textarea>、<tt>、<u>、<var>

引用元：https://www.htmq.com/htmlkihon/005.shtml

記述したものから順番に横に並んでいくのがインライン要素です。

インライン要素とブロック要素は何が違う？？

これを噛み砕いて説明すると以下のようになります。

　 ブロック要素 インライン要素
高さ
（height）		 保持される 保持されない
横幅
（width）		 指定しない限り100% 指定してもしなくてもauto
背景画像 サイズ通り描画される サイズ通り描画されない

以下の図を見てみましょう。

❶ではHTMLのマークアップを行い、その結果❷がモニターに表示されます。
どこに何が適用されてどのようになっているかをわかりやすくするため、❸には現在このテキストに、どのタグがどこに適用されているのか？を表しています。

lesson06_block-inline

インライン要素のままでは背景画像は描画されない

例えばインライン要素にCSSを使って背景画像を指定しても、
高さと横幅を保持しないインライン要素のままでは、
背景画像を正確に描画することができません。

先週、サイトのグローバルナビゲーション<nav></nav>セクションはリストでマークアップする、と解説しましたが、グローバルナビゲーションはボタン画像などにすることが多いので、<a></a>タグに画像や背景画像が必要です。

でも、参考記事の内容や上述した内容の通り、<a></a>タグはインライン要素です。
インライン要素には正しいサイズで背景画像がつけられません・・・。
この問題、どうしたらいいでしょう？？

・・・インライン要素に背景画像をつけるには、
インライン要素をブロック要素に変えてしまえばいいんです。
下のコードを見てみてください。

CSS

/* こうなっているものを・・・*/
a {
  display: inline;/* inline = インライン要素のこと（※記述されているわけではない） */
}

/* こうすればいい！！*/
a {
  display:block;/* block = ブロック要素のこと */
}

この方法では、インライン要素にdisplay: block;を指定しています。
display: block;の指定を行うと、インライン要素をブロック要素に変更することができ、
それにより横幅と高さが保持されるので背景画像を正しく描画してくれるということです。

実際にコーディングしないと違いが理解しにくいブロック要素とインライン要素

とまぁここまで説明しましたが、違いを理解するのは難しいですよね。
実際説明する側も積み重ねた経験によって感覚で理解しているものであるため、いざ誰かに説明するとなると、経験を増やして感覚で理解して、としか教えてあげられないものではあります。

少しずつコーディングを行っていきますので、その中で慣れてなんとなく「こういうものかな」と感じてもらえたらいいなと思います。

HTMLの記述（#container・header編）

<div id=”container”></div>の記述

ではまずはindex.htmlにHTMLコードを記述します。
前回終了の時点で、以下のような記述になっていると思います。

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<title>ウェブデザイン演習</title>
</head>
<body>
</body>
</html>

まずはモニターで表示されている部分の一番大きな枠を生成します。
名前は「container（コンテナ）」にしましょう。

<body></body>タグの内側に、以下のハイライトされている9行目・10行目の<div id=”container”></div>のコードを記述しましょう。

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<title>ウェブデザイン演習</title>
</head>
<body>
  <div id="container">
  <!-- / #container --></div>
</body>
</html>

lesson07_container

この<div id=”container”></div>がWebサイトの表示部分の一番大きな枠で、
ページ全体を覆っているブロック（ブラウザ幅）になります。

どんどん内側に書いていきます。

<header></header>の記述

今度は<div id=”container”></div>の内側に、以下のハイライトされている10行目・11行目の<header></header>セクションのコードを記述しましょう。

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<title>ウェブデザイン演習</title>
</head>
<body>
  <div id="container">
    <header>
    </header>
  <!-- / #container --></div>
</body>
</html>

lesson07_header

ここはサイトのヘッダーで、左寄せのロゴマークと右寄せのお問い合わせブロックを記述している部分です。<header></header>の横幅はサイトの100％の横幅（ブラウザ幅）です。

<header></header>の中に<div class=”container”></div>を入れて中央揃えのブロックを生成

次は<header></header>セクションの内側に<div></div>タグを一つ追加します。
以下のハイライトされている11行目・12行目の<div class=”container”></div>のコードを記述しましょう。

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<title>ウェブデザイン演習</title>
</head>
<body>
  <div id="container">
    <header>
      <div class="container">
      <!-- / #container --></div>
    </header>
  <!-- / #container --></div>
</body>
</html>

lesson07_class-container

上の画像のように<header></header>セクションの内側に追加した<div class=”container”></div>はコンテンツ幅の大きさになっていて、その役割は「左寄せ・右寄せしたロゴ・お問い合わせのブロックをWebサイトのコンテンツ幅のまま中央揃えする」ことです。

実は、<header></header>セクションのすぐ内側にロゴや電話番号のコーディングを行っても、レイアウト上、コンテンツ幅を保持して綺麗に両端揃えにすることができず、ブラウザ幅のままロゴは左に、お問い合わせは右側に寄るだけです。

lesson07_centeroff

ブラウザ幅の大きさの<header></header>の内側に、コンテンツの幅を保持するためにコンテンツ幅の大きさに指定された<div class=”container”></div>というブロックを内側に入れ、さらにCSSで中央揃えすることでこのレイアウトを実現しています。

HTMLの基礎中の基礎「ブロック」と「入れ子」

さて、ここまで記述を行いましたが、idやらclassやら中央揃えやら・・・なんのこっちゃですよね？
おそらくチンプンカンプンだと思うので、簡単に説明します。

id（#）は一度だけ、class（.）は複数回使うもの

今回<div></div>タグに「container」という名前をつけて記述しましたが、
同じ名前の<div></div>タグでも、一つは「一番外のブラウザ幅のブロック」、
もう一つはコンテンツ幅で中央揃えするためのブロックで2種類存在していますね。

<div id=”container”></div>と<div class=”container”></div>は、
同じ名前を持っていても全くの別ものです。

大原則は、
idと指定しているものは、同一ページ内で一度だけ使うもの。
classと指定しているものは、同一ページ内で複数回使う可能性があるもの。

と、覚えてください。
そういった理由から、今回のコーディングで一度しか使わない大外枠にはid、
中央寄せなど他のブロックでも使うものはclassと指定しています。

idとclassは本当に重要なのでしっかり覚えておきましょう。
idとclassを間違えてコーディングしてしまうとレイアウト崩れの原因になります。
ちなみにidとid、classとclassなどの重複をしなければ同じ名前でも問題ありません。

ブロックと入れ子の原理

HTMLでのレイアウトの基礎中の基礎のポイントは二つ。

ブロックと入れ子です。

まず今まで記述した<div id=”container”></div>などは一つの箱（ブロック）だと思ってください。
今回記述したものは、箱の中に箱を入れて、その中にさらに箱を入れた状態です。

まず、ブラウザ全体のサイズ（高さ100％・横幅100％） と同じサイズの箱（<div id=”container”></div>）を作ります。

lesson07_box1

次に一番大きな箱（<div id=”container”></div>）と横幅が同じ箱（<header></header>）を中に入れます。

lesson07_box2

一番大きな箱と同じ大きさなので、つまりブラウザの横幅100％のサイズです。

今度は、横幅をコンテンツ幅のサイズに設定した箱（<div class=”container”></div>）を入れます。

lesson07_box3

上の画像では仮に1,000pxに指定してありますが、
ブラウザのサイズより小さければどんなサイズでも表示できます。

しかしそのまま置いてしまうと箱は左側に寄ってしまいます。
そのため、CSSを使って箱を真ん中に揃う指定を行います。

こうしてブロックに親子関係を作り「入れ子構造」にしていくことで様々なレイアウトを作ることがブロックと入れ子の原理です。

ここまでの各ブロックの説明

 画像を使ってもう一度説明します。

lesson07_container

ページの全体を覆っているのが<div id=”container”></div>です。
これが一番大きな箱です。

lesson07_header

その中にロゴやお問い合わせのブロックがある<header></header>という箱を入れて、

lesson07_class-container

その中に中央寄せのための<div class=”container”></div>という箱を入れました。

これでページ最上部の入れ子の構造が出来ました。
今回は<header></header>セクションの記述はここまでですが、次回以降はロゴのブロックを左寄せに、お問い合わせブロックを右寄せにして、さらに入れ子の構造を作っていきます。

HTMLの記述（nav・article・footer編）

ではコード記述の続きをします。
現状では<div id=”container”></div>という大外枠を作り、その中に<header></header>セクション、さらにその中に<div class=”container”></div>を入れた状態でしたね。どんどん記述していきましょう。

<nav></nav>の記述

Webサイトのグローバルナビゲーションに使用される<nav></nav>セクションを記述します。
<header></header>セクションの閉じタグの下を改行して、以下のハイライトされている14行目・15行目の<nav></nav>のコードを記述しましょう。

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<title>ウェブデザイン演習</title>
</head>
<body>
  <div id="container">
    <header>
      <div class="container">
      <!-- / #container --></div>
    </header>
    <nav>
    </nav>
  <!-- / #container --></div>
</body>
</html>

lesson07_nav

次回以降はこの<nav></nav>セクションの内側に、リストのグループである<ul></ul>タグ、さらにその内側にリストの項目である<li></li>タグを記述します。ここでは<div></div>タグによる中央揃えを行わず、
<ul></ul>タグと<li></li>タグへのCSSの指定だけで中央揃えに挑戦します。

<article></article>の記述

Webサイトのメインコンテンツのブロック、<article></article>セクションを記述します。
<nav></nav>セクションの閉じタグの下を改行して、以下のハイライトされている16行目・17行目の<article></article>のコードを記述しましょう。

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<title>ウェブデザイン演習</title>
</head>
<body>
  <div id="container">
    <header>
      <div class="container">
      <!-- / #container --></div>
    </header>
    <nav>
    </nav>
    <article>
    </article>
  <!-- / #container --></div>
</body>
</html>

lesson07_article

次回以降<article></article>も<div class=”container”></div>のようにコンテンツ幅での中央揃えを行いますが、メインの記事部分を左寄せ、前回解説した<aside></aside>を右寄せにします。
左右に寄せる際にちょっとしたコツが必要になりますので、その点を解説します。

<footer></footer>の記述

Webサイトのフッター部分である<footer></footer>セクションを記述します。
<article></article>セクションの閉じタグの下を改行して、以下のハイライトされている18行目・19行目の<footer></footer>のコードを記述しましょう。

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<title>ウェブデザイン演習</title>
</head>
<body>
  <div id="container">
    <header>
      <div class="container">
      <!-- / #container --></div>
    </header>
    <nav>
    </nav>
    <article>
    </article>
    <footer>
    </footer>
  <!-- / #container --></div>
</body>
</html>

lesson07_footer

<footer></footer>はWebサイトの一番下に位置していることが多いため、
レイアウト上、メインコンテンツのボリュームなどの影響を最も受けてしまうものです。

龍弥デザインでは、フッターに背景画像を使っていて、
必ずブラウザの最下部に位置していないと画像が途中で切れて違和感が生じてしまいます。

例えばメインコンテンツのボリュームが極端に少ない場合・・・
コンテンツの高さが足りずに<footer></footer>がせり上がってきてきてしまいます。
そうなると、背景画像を設定していれば画像は途中で切れてしまいます。

<footer></footer>を必ず最下部に配置させるように、
CSSだけで解決するテクニックがあるのでそれも今後の講義で解説していきます。

HTMLの記述のまとめ

ここまで記述を行ってきました。最終的には以下のようになっていると思います。

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<title>ウェブデザイン演習</title>
</head>
<body>
  <div id="container">
    <header>
      <div class="container">
      <!-- / #container --></div>
    </header>
    <nav>
    </nav>
    <article>
    </article>
    <footer>
    </footer>
  <!-- / #container --></div>
</body>
</html>

このコードの中で一文字でも間違っていると正しく表示されません。
間違っていないかよく確認して、次回「えぇ？？なんで？？」ってことにならないようにしましょう。

RELATED POSTS関連記事

WEBCRE8TOR.COM

SEARCH

PAGES

CATEGORY

ARCHIVE

LINK

CLOSE