Webサイトコーディング[EASY] 02 html・body編

2023.11.13
コーディング

この記事の目次

1 <html></html>および<body></body>のhtml・cssコーディング
- 1.1 htmlコーディング
- 1.2 ブラウザで確認する
2 「html {}」および「body {}」のcssコーディング

<html></html>および<body></body>のhtml・cssコーディング

まずはWebサイト全体に該当する部分である<html></html>タグ、および<body></body>タグのhtml・cssコーディングを行いましょう。該当箇所の画像は以下です。全体ですね。

コード編集をするためVisual Studio Codeでは「index.html」の編集画面を開きましょう。
また、「html01」フォルダの中の「index.html」を、
今使用しているブラウザの別タブにドロップして開いておきましょう。

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

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

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

htmlコーディング

この段階で全体に関しては特に追加で記述することはありませんが、1箇所だけ文字列変更を行います。
ハイライトされている６行目の<title></title>タグ内の文字を、
以下の工程で書き換えておきましょう。

「ウェブデザインA」を「LEVEL EASY」に変更する。

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<title>LEVEL EASY</title>
</head>
<body>
</body>
</html>

ブラウザで確認する

書き換えができたら「index.html」を上書き保存（Ctrl + S）し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。
ブラウザのタブの文字が「LEVEL EASY」に変わっていたら成功です。

なお次のhtmlコーディングからは<header><header>タグの記述を始めますが、
8・9行目の<body><body>タグの内側に記述していきます。
ここを間違えてしまったら表示されませんよ。

「html {}」および「body {}」のcssコーディング

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

cssコーディング

CSSリセットが無事に終わって課題の提出で問題がなければ、
皆さんの手元の「main.css」には1〜39行目までCSSリセットの記述があるはずです。

今回は「main.css」の前回の記述の下に、
以下工程で❶の改行および❷❸❹❺のハイライト部分の追加記述を行いましょう。

CSSリセットの続きを改行して1行開ける。
ハイライトされている「41〜44行目」の追加記述を行う。
ハイライトされている「46〜49行目」の追加記述を行う。
ハイライトされている「51〜54行目」の追加記述を行う。
ハイライトされている「56〜60行目」の追加記述を行う。

main.css

@charset "UTF-8";

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

a {text-decoration: none;}

ul {list-style: none;}

input[type="text"],
input[type="submit"] {-webkit-border-radius: 0;}

img {
  border: 0;
  max-width: 100%;
  line-height: 1em;
  vertical-align: bottom;
  -ms-interpolation-mode: bicubic;
}

header,
nav,
menu,
article,
section,
main,
aside,
footer {
  display:block;
  margin: 0;
}

html , body {
  min-height: 100vh; /* html,bodyを画面いっぱいの高さに指定 */
  text-align: center; /* html,bodyの内側の要素の水平方向の配置を中央揃えに指定 */
}

body {
  display: flex; /* bodyの内側のレイアウトをフレキシブル（可変・柔軟）に指定 */
  flex-direction: column; /* bodyの内側の要素のレイアウトを縦に均等配置するように指定 */
}

.wrapper {
  max-width: 1024px; /* .wrapperの最大幅を1024pxに指定 */
  margin: 0 auto; /* headerの内側で.wrapperを中央揃えにする指定 */
}

p , li {
  font-size: 16px; /* p（段落）とli（リスト項目）の文字サイズを16pxに指定 */
  line-height: 30px; /* p（段落）とli（リスト項目）の行間を30pxに指定 */
  color: #666; /* p（段落）とli（リスト項目）の文字色をカラーコード#666（濃い目のグレー）に指定 */
}

プロパティ・値の解説

プロパティ・値の説明
プロパティ	指定の効果	値
min-height	指定要素の最小限の高さの指定	auto（初期値）・%・px・em vh・svhなど
max-width	指定要素の最大限の横幅の指定	%・px・emなど

min-height: 100vh;（42行目）
= html,bodyを画面いっぱいの高さに指定

htmlでのブロックの高さは文字や画像のコンテンツ情報の量で決まってしまいます。
もしコンテンツが何もない状態だったら高さ0pxになりブロックの高さを保持できません。

何もコンテンツがない状態でも高さを最小でも100%（ブラウザの表示領域の高さ）に保つために、
ページの一番外側のブロックである<body></body>タグに対し「min-height: 100vh;」を指定することで、
最小限の高さを100vh^※1に指定しています。
※1・・・vh：【CSS】vw、vh、vmin、vmaxとは？基本的な使い方 | JAJAAAN

max-width: 1024px;（52行目）
= html,bodyの内側の要素の水平方向の配置を中央揃えに指定

ブロックの横幅はコンテンツの中身が横に大きければ大きいほど横に伸び、
ブラウザに横スクロールを表示させてしまいます。

実は以前、人は縦スクロールバーにはさほどストレスを感じないが、
横スクロールバーには非常にストレスを感じるという調査結果が出たことがありました。
スマホ閲覧が主体となっている昨今ではなおのことでしょう。

今回はコンテンツ幅の大きさが「1024px」であり、
「.wrapper」という名前を付けた<div></div>タグに対して、
「max-width: 1024px」を指定することで、
横幅を1024px以上広がらないようにしています。

プロパティ・値の説明
プロパティ	指定の効果	値
text-align	指定要素の内側にある文字や画像の水平方向の配置の指定	left・right・center・justifyなど

text-align: center;（43行目）
= html,bodyの内側の要素の水平方向の配置を中央揃えに指定

「text-align」は指定要素の子要素の水平方向の配置の指定のためのプロパティです。
「text-align」というプロパティ名なので「文字に対しての指定」と思いがちですが、
文字だけではなく画像や内側に配置した<div></div>タグなどのブロックに対しても有効です。

今回は値に「center」を指定することで、
<body></body>タグの内側の要素を水平方向中央揃えに指定しています。

プロパティ・値の説明
プロパティ	指定の効果	値
display	要素の内側と外側の表示種別の指定	block・inline・inline-block・ flex・inline-flex・grid・ inline-grid・flow-rootなど
flex-direction	主軸の方向や向きを定義することにより、フレックスコンテナー内でフレックスアイテムを配置する方法を設定	row・row-reverse・ column・column-reverse

「display」は非常に奥が深いプロパティであり、
この「display」を理解することがコーディングスキル向上のポイントになります。

参考URL：display – CSS: カスケーディングスタイルシート | MDN (mozilla.org)

特に「display: block;」「display: inline;」に関しては使用頻度・重要度がともに高く、
以後の講義でじっくりと時間をとって解説をしたいと思います。

display: flex;（47行目）
= bodyの内側のレイアウトをフレキシブル（可変・柔軟）に指定

今回使用している「display: flex;」を詳しく解説した記事を2記事ほど紹介します。
以後「display: flex;」を指定したボックスを「フレックスボックス」と呼称します。

初心者向け！Flexboxを分かりやすく解説します | ウェブモエ

CSSの基本！横並びなどフレキシブルに対応する「Flexボックス」｜SEOタイムズ

この「display: flex;」はcssにおいて理解するまでが難しいもの一つですが、
「display: flex;」理解しさえすればWebサイトのレイアウトは自由自在です。

flex-direction: column;（48行目）
= bodyの内側の要素のレイアウトを縦に均等配置するように指定

なお、今回のように「display: flex」を指定して柔軟にレイアウトするよう指定し、
併せて「flex-direction: column;」でを指定すると、
後述する<footer></footer>タグを、簡単にページの一番下に配置できます。

プロパティ・値の説明
プロパティ	指定の効果	値
margin	要素の上下左右の外側の余白サイズを設定	%・px・em・auto

margin: 0 auto;（53行目）
= headerの内側で.wrapperを中央揃えにする指定

「margin: 0 auto;」はmarginという要素の外側の余白の指定を行うプロパティを使った中央揃えのテクニックです。
記述の仕方として「margin: 上下左右;」という指定になるので、
この場合は上下の余白を0にして左右の余白を自動計算（auto）にしてください、という記述になります。

「margin」そして「padding」のプロパティは非常に重要なので、以後、深く掘り下げて解説します。

プロパティ・値の説明
プロパティ	指定の効果	値
font-size	書体の大きさの指定	主に14pxや20pxなどの数値など
line-height	行間の高さの指定	主に14pxや20pxなどの数値など
color	文字色の指定	#ffffff〜#000000・色名（redやblueなど）・ rgb(0,0,0)〜rgb(255,255,255)

font-size: 16px;（57行目）& line-height: 30px;（58行目）
= p , liの文字（サイズ・行間）に関する指定

次にサイト内の主に本文部分のフォントサイズ、行間の指定です。

「font-size: 16px;」でフォントサイズを16pxに指定し、
「line-height: 30px;」で行間の高さを30pxに指定しました。

なおfontプロパティにはこの他に書体の指定や太さやスタイルの指定があります。
次回以降のコーディング課題で紹介します。

color: #666;（59行目）
= p , liの文字色に関する指定

colorは文字色の指定になります。

ブラウザで確認する

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

この時点では<body></body>タグの中身を記述していないので目に見える変更はありませんが、
コーディングを行うにおいての準備はできました。

次は<header></header>ブロックのhtmlコーディングに進みましょう。

Webサイトコーディング[EASY] 03 header編