[コーディング] Webサイトコーディング[NORMAL – Web movie – ] 02 レイアウト配置固定編 | 中国短期大学情報ビジネス学科メディア科目ブログ WEBCRE8TOR.COM

この記事の目次

1 テンプレート部分のHTML・CSSコーディング
- 1.1 テンプレート部分のHTMLの確認
- 1.2 テンプレート部分のCSSの確認
2 Google Web Fontsの導入ためのhtmlコーディング
- 2.1 Google Web Fontsの導入ためのhtmlコーディング
  - 2.1.1 ブラウザで確認する
- 2.2 Google Web Fontsの導入ためのcssコーディング
  - 2.2.1 ブラウザで確認する
3 <header></header>のhtml・cssコーディング
4 <footer></footer>のhtml・cssコーディング
- 4.1 <footer></footer>タグ・<p class=”copyright”></p>タグのhtmlコーディング
  - 4.1.1 ブラウザで確認する
- 4.2 「footer {}」・「footer .copyright {}」cssコーディング
  - 4.2.1 ブラウザで確認する

テンプレート部分のHTML・CSSコーディング

今回、テンプレート部分は既に記述を行なっています。

テンプレート部分のHTMLの確認

まずはindex.htmlを開き、テンプレート部分のHTMLを確認しましょう。

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1 , user-scalable=no">
<link rel="stylesheet" href="css/main.css">
<title>LEVEL NORMAL - Web Movie - </title>
</head>
<body>
</body>
</html>

問題ないですか??

テンプレート部分のCSSの確認

次にcss/main.cssを開き、テンプレート部分のCSSを確認しましょう。

main.css

@charset "UTF-8";

* {
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  box-sizing: border-box;
}

a {text-decoration: none;}

ul {list-style: none;}

header,
nav,
footer {
  margin: 0;
}

html , body {
  text-align: center;
}

かなり記述を省略していますが今回のWeb動画の埋め込みに関してはこれで十分です。

Google Web Fontsの導入ためのhtmlコーディング

さっそくGoogle Web Fontsを導入していきましょう。
index.htmlとmain.cssへの記述をしながらコード上で説明します。
授業で紹介したGoogle Web Fontsの導入方法を参考に解説します。

Webフォントとは？Google Web Fontsの使い方

編集画面を「index.html」のタブに切り替えましょう。
また、「html03」フォルダの中の「index.html」を、
今使用しているブラウザの別タブにドロップして開いておきましょう。

またGoogle Chromeで「index.html」を開いた状態で「F12」キーを押すと、
「Google Chromeデベロッパーツール」が開きます。

Google Chromeデベロッパーツールの基本的な使い方をわかりやすく解説

必須ではありませんが、開発者用のツールであり使うことでより理解が深まるため、
コードを記述してからのページ更新時に適宜開くとよいと思います。
※「デベロッパーツール」を閉じるには「F12」キーを押しましょう

Google Web Fontsの導入ためのhtmlコーディング

まずは「index.html」のコーディングですので、編集画面を「index.html」に切り替えてください。
Google Web Fontsで表示されたコードをここで使用します。

6行目の<link rel=”stylesheet” href=”css/main.css”>の下を改行する
ハイライトされている7～9行目の内容を記述する。

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1 , user-scalable=no">
<link rel="stylesheet" href="css/main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text&display=swap" rel="stylesheet">
<title>LEVEL NORMAL - Web Movie - </title>
</head>
<body>
</body>
</html>

ブラウザで確認する

書き換えができたら「index.html」を上書き保存(Ctrl + S)し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。
この時点では外部からファイルを読み込んで使用するための準備を行っただけですので、
特に変化はありませんね。

Google Web Fontsの導入ためのcssコーディング

まずは「main.css」のコーディングです。
編集画面を「main.css」に切り替えてください。
Google Web Fontsで表示されたコードをここで使用します。

html , body {}の下を改行する。
ハイライトされている24～26行目の内容を記述する。

main.css

/*-- 〜上部省略〜 --*/

html , body {
  height: 100%;
}

body {
  font-family: 'Crimson Text', serif; /*Google Web Fontsで読み込んだ書体「Crimzon Text」を指定する。 */
}

これで<body></body>タグ全体にCrimson TextのWebフォントが適用されます。
部分的に適用したい場合は、適用したいセレクタの中に上記のコードを追加すればいいだけのことです。

簡単ですよね。

ブラウザで確認する

書き換えができたら「main.css」を上書き保存(Ctrl + S)し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。

変化はありませんが使用する準備はできました。
早速コンテンツを書いていきましょう。

<header></header>のhtml・cssコーディング

<header></header>タグ・<h1></h1>タグ・<nav></nav>タグのhtmlコーディング

編集画面を「index.html」に切り替えてください。
今度はメインコンテンツの内容をコーディングしていきましょう。
<header></header>タグ・<h1></h1>タグ・<nav></nav>タグを追加します。

<body></body>タグの開始タグの下を改行する。
ハイライトされている13～22行目の内容を記述する。

index.html

<!-- 上部省略 -->
<body>
<header>
  <h1>Web Movie</h1>
  <nav>
    <ul>
      <li><a href="#">TOP</a></li>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
  </nav>
</header>
</body>
<!-- 下部省略 -->

ブラウザで確認する

書き換えができたら「index.html」を上書き保存(Ctrl + S)し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。

ページの上部に「Web」という大きなテキスト、
「TOP」「ABOUT」「CONTACT」という青いリンクが表示されましたか?

この状態ですでにフォントが違うのが分かりますね。

「header {}」のcssコーディング

「header {}」と「footer {}」への一括指定と「header {}」単体の指定

では「header {}」と「footer {}」への一括指定、
および「header {}」のCSSコーディングを行いましょう。
編集画面を「main.css」に切り替えてください。

先ほど記述した「body {〜}」の下を改行する。
ハイライトされている28〜36行目・38〜44行目のコードの追記を行いましょう。

main.css

/* 上部省略 */

body {
  font-family: 'Crimson Text', serif; /*Google Web Fontsで読み込んだ書体「Crimzon Text」を指定する。 */
}

header ,
footer {
  width: 100%;
  padding: 20px; /* header {} と footer {} の内側の余白を、上下左右20pxに指定。 */
  position: fixed; /* 要素の位置を絶対配置し、かつ固定表示にする。 */
  left: 0; /* 画面左端に配置。 */
  color: #fff;
  z-index: 2;
}

header {
  display: flex; /* フレックスボックスにする */
  justify-content: space-between; /* header {} の内側のレイアウトを均等配置かつ両端揃えに指定 */
  top: 0; /* 画面上端に配置。 */
  letter-spacing: .05em; /* 文字間を1文字の5%分広げる。 */
  text-align: left;
}

この中でまだ解説していない「z-index」を解説します。

z-indexで要素の重なり順を指定。

z-indexプロパティは、要素の重なり順、つまり奥行きの順番の指定をするプロパティです。
Webサイトではコーディング上、先に記述した要素から重なり順が下(奥)になり、
後に記述するにつれ要素の重なり順が上(手前)になる、という性質を持っています。

今回デザインを制作した動画埋め込みでは、
後述する<main></main>の内側に記述する<div id=”video”></div>の動画の重なり順を最も下にし、
<header></header>タグの<h1></h1>タグ、<nav></nav>タグ、
そして<footer></footer>タグの著作権表記を上に持ってこなければいけません。

それならば、実現するためには以下のような記述の順番をにしなければいけません。

<main></main>
<header></header>
<footer></footer>

しかし表示の都合で記述を変えてしまうのは解決策とは言えず、
ページのコード記述の意味で考えるとこの順番は好ましくありません。
この場合取るべき方法は、要素の重なり順をCSSで調整することです。

そんな時に活躍してくれるのが「z-index」プロパティです。
z-indexを使って要素の重なり順を意図的に変更することができます。

参考:重ねて表示する!CSSのz-indexの使い方 | TechAcademyマガジン

参考ページにあるように、
数値が大きいほど重なり順が上(手前)に表示され、
数値が小さいほど重なり順が下(奥)に表示されます。

なお「z-index」プロパティは「position」プロパティを併せて指定しないと正常に反映されません。
「z-index」の指定がうまくいかない時は真っ先に「position」の指定を行ったかを疑ってみましょう。

ブラウザで確認する

書き換えができたら「main.css」を上書き保存(Ctrl + S)し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。

「TOP」「ABOUT」「CONTACT」が右側に寄ったけど「Web Movie」の文字列が消えた・・・?
大丈夫、実は背景色と文字色が同化しているだけでちゃんと表示されています。

「h1 {}」のcssコーディング

次にサイトのロゴである<h1></h1>タグの指定を行います。

先ほど記述した「header {〜}」の下を改行する。
ハイライトされている46〜51行目の内容の記述を行いましょう。

main.css

/*-- 〜上部省略〜 --*/

header {
  display: flex;
  justify-content: space-between;
  top: 0;
  letter-spacing: .05em;
  text-align: left;
}

header h1 {
  padding: 10px 0; /* タグ内の余白を、上下10px、左右0pxに指定。 */
  font-size: 20px; /* 文字サイズを20pxに指定。 */
  line-height: 20px; /* 行間を20pxに指定。 */
  font-weight: 400; /* 文字の太さを通常の太さに指定。 */
}

特に新しいプロパティはありませんね。
忘れてしまっていたら各プロパティの横にあるコメントを読んでみてください。

ブラウザで確認する

書き換えができたら「main.css」を上書き保存(Ctrl + S)し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。

同化してしまっているので一目では変化を確認できませんが、
サイズや太さの調整を行って読みやすく調整しました。

「nav {}」のcssコーディング

<header><header>タグには<nav></nav>、
つまりグローバルナビゲーションもありますね。

PCでは見えていても問題ないですが、スマホだと画面幅が小さくなるため、
レスポンシブWebデザインによりスマホ表示状態では非表示にしておきましょう。

先ほど記述した「header h1 {〜}」の下を改行する。
ハイライトされている53〜57行目の内容の記述を行いましょう。

main.css

/*-- 〜上部省略〜 --*/

header h1 {
  padding: 10px 0;
  font-size: 20px;
  line-height: 20px;
  font-weight: 400;
}

@media screen and (max-width: 768px) {
  header nav {
    display: none; /* モニターの横幅768pxまでは nav {} を非表示にする。 */
  }
}

display: none; = モニターの横幅768pxまでは nav {} を非表示にする

「display: none;」は要素を非表示状態にする指定です。
注意したいのはあくまでも「非表示」にするだけである点。
非表示状態を解除する場合は「none」以外の値を指定するだけです。

ブラウザで確認する

書き換えができたら「main.css」を上書き保存(Ctrl + S)し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。

開発者ツールを使ったりブラウザウィンドウを縮めて確認すれば、
横幅768pxの状態で非表示になっているのが確認できます。

「nav ul {}」「nav ul li {}」「nav ul li a {}」のcssコーディング

グローバルナビゲーションの中のリストの「ul {}」「li {}」「li a {}」にも指定を行いましょう。

先ほど記述した「@media screen and (max-width: 768px) {〜}」の下を改行する。
ハイライトされている59～61行目・63～66行目・68～72行目・74～77行目の内容の記述を行いましょう。

main.css

/*-- 〜上部省略〜 --*/

@media screen and (max-width: 768px) {
  header nav {
    display: none; /* モニターの横幅768pxまでは nav {} を非表示にする。 */
  }
}

header nav ul {
  display: flex; /* フレックスボックスにする */
}

header nav li {
  font-size: 14px; /* 文字サイズを14pxに指定。 */
  line-height: 30px; /* 行間を30pxに指定。 */
}

header nav li a {
  display: block; /* paddingを反映するためインライン要素のaタグをブロック要素に指定。 */
  padding: 5px 15px; /* タグ内の余白を、上下5px、左右15pxに指定。 */
  color: #fff;
}

header nav li a:hover {
  color: #000;
  background: #fff;
}

display: block; = paddingを反映するためインライン要素のタグをブロック要素に指定。

以前インライン要素は横幅と高さを保持できないと解説を行いましたね。
つまり「padding」を指定しても意図した表示にはなりません。
それならばインライン要素をブロック要素に変えてしまえばいいですね。

ブラウザで確認する

書き換えができたら「main.css」を上書き保存(Ctrl + S)し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。

不安になるくらい真っ白です。ゲレンデですね。

<footer></footer>のhtml・cssコーディング

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

<footer></footer>タグ・<p class=”copyright”></p>タグのhtmlコーディング

<footer></footer>タグ、そして著作権表記である<p class=”copyright”></p>を追記しましょう。

<header></header>タグの閉じタグの下を改行する。
ハイライトされている23〜25行目のコードの内容の記述を行う。

index.html

<!-- 上部省略 -->
</header>
<footer>
  <p class="copyright">© Web Movie.</p>
</footer>
</body>
<!-- 下部省略 -->

ブラウザで確認する

書き換えができたら「main.css」を上書き保存(Ctrl + S)し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。

引き続き真っ白ですが・・・実はどこに何があるか確認する方法はあります。
ブラウザを開いた状態で「Ctrl + A」してみます??どうかな??

「footer {}」・「footer .copyright {}」cssコーディング

次に<footer></footer>セクションのCSSコーディングを行いましょう。
編集画面を「main.css」のタブに切り替えてください。

先ほど記述した「header nav li a:hover {〜}」の下を改行する。
ハイライトされている79～82行目・84～87行目のコードの内容の記述を行う。

main.css

/* 上部省略 */

header nav li a:hover {
  color: #000;
  background: #fff;
}

footer {
  bottom: 0; /* 画面下端に配置する。 */
  text-align: right; /* テキストを右寄せにする。 */
}

footer .copyright {
  font-size: 11px; /* 文字サイズを11pxに指定。 */
  line-height: 16px; /* 行間を16pxに指定。 */
}

こちらにも特に新しいプロパティはありません。
「footer {}」に「bottom: 0;」を指定して画面最下部に配置、
さらに「text-align: right;」でテキストを右寄せにすることくらいですね。

「footer {}」のCSSコーディングは以上です。

ブラウザで確認する

書き換えができたら「main.css」を上書き保存(Ctrl + S)し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。

再度「Ctrl + A」で全体像を把握しましょう。特に変化はありませんね。

次は背景動画の実装を行いましょう。

Webサイトコーディング[NORMAL – Web movie – ] 03 背景動画実装編

Webサイトコーディング[NORMAL – Web movie – ] 02 レイアウト配置固定編

Sponsored Link

テンプレート部分のHTML・CSSコーディング

テンプレート部分のHTMLの確認

テンプレート部分のCSSの確認

Google Web Fontsの導入ためのhtmlコーディング

Google Web Fontsの導入ためのhtmlコーディング

ブラウザで確認する

Google Web Fontsの導入ためのcssコーディング

ブラウザで確認する

<header></header>のhtml・cssコーディング

<header></header>タグ・<h1></h1>タグ・<nav></nav>タグのhtmlコーディング

ブラウザで確認する

「header {}」のcssコーディング

「header {}」と「footer {}」への一括指定と「header {}」単体の指定

z-indexで要素の重なり順を指定。

ブラウザで確認する

「h1 {}」のcssコーディング

ブラウザで確認する

「nav {}」のcssコーディング

display: none; = モニターの横幅768pxまでは nav {} を非表示にする

ブラウザで確認する

「nav ul {}」「nav ul li {}」「nav ul li a {}」のcssコーディング

display: block; = paddingを反映するためインライン要素のタグをブロック要素に指定。

ブラウザで確認する

<footer></footer>のhtml・cssコーディング

<footer></footer>タグ・<p class=”copyright”></p>タグのhtmlコーディング

ブラウザで確認する

「footer {}」・「footer .copyright {}」cssコーディング

ブラウザで確認する

Sponsored Link

RELATED POST関連記事

Webサイトコーディング[NORMAL – Web movie – ] 03 背景動画実装編

Webサイトコーディング[NORMAL] 04 jQueryプラグインでスライドショー実装編

[コーディングの基礎] CSSの基本的な考え方と記述方法

[コーディングの応用] どうしても覚えてほしいレイアウトを簡単に組む方法!フレックスボックス(flexbox)