1-05HTMLとCSSでレイアウトを組んでみよう

2020-08-14

前回はWebサイトのレイアウトについて説明しました。今回はHTMLとCSSを使ってWebサイトのレイアウトを実際に組み立ててみましょう。

今回は、この見本のページを作っていきます。

図：今回作る見本のサイト

ファイルの準備

VS Codeを開いて、Command + N で新しいファイルを作成します。

続いて Command + S でファイルを保存します。よく使う項目の一番上に表示されている家のアイコンを選択し、developフォルダを選択します。

（※HTMLとCSSを使ってみようを受けていない方は、developフォルダを作成してください。）

developフォルダに移動したら、新規フォルダをクリックして、作成したフォルダにn-aquariumという名前を付けます。

フォルダが作成できたら、n-aquariumを選択して移動しましょう。

移動ができたらindex.htmlと名前をつけて保存をします。

ファイルの保存ができたら、VS Codeでhtml:5と打ち込んで、Tabキーを押しましょう。

図：最初のひな型になるコード

最初のひな型となるコードが展開されました。

ヘッダ情報

HTMLファイルにはヘッダ情報という、表示される文章とは別に、文書のタイトル・言語の設定・デバイス別の見え方・検索エンジンやSNSでの見え方を設定する部分があります。

作成したひな型には4〜7行目に<head>タグで囲われている部分があります。ここがヘッダ情報です。

※ヘッダーとヘッダ情報は似ている言葉ですが、意味が全く違うので注意しましょう。

エンコーディングの記述

4行目に<meta charset="UTF-8″>という記述があります。これはエンコーディングと言って、コンピューターが書かれている文字をどういうルールで読み取るかというルールを指定したものです。このエンコーディングの指定を間違ってしまうと、文字がめちゃくちゃになって表示される文字化けという現象がおきます。

図：文字化けしてしまった場合の表示

VS Codeでひな型を展開した場合は<meta charset="UTF-8″>が自動的に記述されますが、別の方法でページを作成した際は、必ずこれが抜けていないか注意しましょう。

viewportの設定

5行目に<meta name="viewport" content="width=device-width, initial-scale=1.0″>という記述があります。これはviewport（ビューポート）というもので、画面の表示領域を設定するものです。これを設定しておかないと、スマートフォンではPCで表示される横幅に合わせて、画面を縮小して表示してしまいます。いくつか設定項目があるのですが、ほとんどの場合はVS Codeで展開された<meta name="viewport" content="width=device-width, initial-scale=1.0″>で大丈夫なので、細かい解説は割愛します。

タイトルの記述

7行目に<title>Document</title>という記述があります。これはHTMLとCSSを使ってみようでも出てきたもので、ブラウザのタブの部分に表示するタイトルを指定するものです。Documentという文言を、N水族館に書き換えましょう。

図：タイトルの記述

上書き保存をして、次に進みます。

ヘッダーを作ってみよう

ページのヘッダー部分のHTMLを記述していきます。ヘッダー部分は<header>というHTMLタグで囲っていきます。

VS Codeで、<body>タグの下にheaderと記述します。

図：headerと入力

Tabキーで Emmet を利用できます。それではTabキーを押してHTMLを展開しましょう。

図：展開後のheader

続いて<header>と</header>の間に.headerInnerを記述してTabキーで展開します。

図：.headerInnerを記述

<div>というタグにclass="headerInner"がついて展開されました。

図：展開されたheaderInner

<div>タグは文章構造としての意味はなく、「かたまり」「グループ化」を意味するタグです。このあとスタイルを整えるにあたって今回は用意しました。

タグを打ち込まずに.headerInnerのようにclassを指定して展開すると、自動的に<div>タグにclassが入った状態で展開されます。

ロゴの配置（テキスト）

続いて<div class="headerInner">と</div>の間にh1.logo{N水族館}と記述してTabキーで展開します。

図：<h1 class="logo">N水族館</h1>が展開される

<h1 class="logo">N水族館</h1>が生成されます。

<h1>タグは「見出し1」という意味で、ページの中で最も１番大きな見出しという意味です。サイトの名称や、記事のタイトルに利用されます。

h1.logoのようにタグに続いてclassを書いて展開すると、<h1 class="logo"></h1>という風にclassが入ったタグが展開されます。

{ }（波括弧）で囲うと、その前に指定したHTMLタグで { } の中身が囲われます。

ナビゲーションとリンクの作成

<h1 class="logo">N水族館</h1>の下に、nav.globalNav>a{お問い合わせ}と記述して展開します。

図：展開されたコード

タグを > と付けて続けて記述すると、前に記述されたタグの入れ子状態で生成されます。今回は<nav>タグの中に<a>タグが入った状態で生成されました。

<nav>タグは「ナビゲーション」という意味を持っています。ナビゲーションは1個とは限らないので、ここではclassでglobalNavと命名することで、ここがグローバルナビゲーションであることを明示しました。

<a>タグは「ハイパーリンク」を指定するタグです。href=""のダブルクオーテーションの中には、リンクしたい先のページのURLを入力します。今回のサンプルではお問い合わせページは作りませんので、仮で https://www.google.co.jp/にしておきましょう。<a href="https://www.google.co.jp/">お問い合わせ</a>という風になります。

図：ハイパーリンクを記述しました

ここで上書き保存をして、Chromeでindex.htmlファイルを開いてみましょう。

図：タイトルと問い合わせリンクが表示されました

お問い合わせをクリックするとgoogleにページが移動します。

コンテンツを作ってみよう

ヘッダーのマークアップができたので、続いてコンテンツを書いていきます。

</header>の下にmainと記述をして、Tabキーを押して展開します。

図：mainタグを展開しました

<main>タグは、主要なコンテンツという意味を表します。

<main></main>の間に.mainInnerと記述して、Tabキーを押して展開します。さらに展開された<div class="mainInner"></div>の間にarticleと記述して、Tabキーを押して展開します。コードが展開されたら改行をして整えましょう。

図：mainタグを展開しました

<article>タグは、独立したコンテンツという意味を表します。

<article></article>の間にsection>h2+pと記述して、Tabキーを押して展開します。

図：sectionタグなどを展開しました

h2+pの中にある + は隣接した状態でタグを展開してくれる記号です。section>h2+pで展開すると、<section>タグの中に、<h2>と<p>を入れて展開するという形になります。

<section>タグは章や節といった文章のかたまりを表します。<h2>タグは「見出し2」という意味で、ページの中で2番目に大きな見出しという意味です。<p>は段落を意味するタグです。

作成した<section>の中に文章を流し込んでいきましょう。

見出し：N水族館とは？
段落：N水族館は、VR・AR・プロジェクションマッピング・モーションキャプチャーなどの最先端技術を取り入れ、ネットとリアルを融合させた次世代の水族館です。展示面積は世界最大規模で、さまざまな海の魚や海の動物達を間近で見ることができます。大迫力の巨大水槽や、独自の特殊効果を取り入れたイルカのショーなど、子供から大人まで楽しめる施設になっています。

文章をまとめて選択したいときは、該当の文章の上にマウスのカーソルを乗せて3クリックすると選択することができます。まとめて選択が出来たら「Command + C」でコピーしましょう。

これを繰り返して、残りの2つの文章を追加しましょう

見出し：VR HMDをかぶって海の中へ
段落：用意されたVR HMD（ヘッドマウントディスプレイ）をかぶると、まるで巨大水槽のど真ん中にいるかのような状況が再現されます。モーションキャプチャーによってお客様の動きを読み取り、巨大水槽の中を自由に動き回ることが可能です。また時間帯によっては魚たちに餌付け体験が出来たり、お客様同士でゲームを楽しむことも出来ます。

見出し：バーチャルキャストによるイルカのショー
段落：イルカのショーには、人間ではなくN水族館オリジナルのバーチャルキャストが登場します。また、手元のスマートフォンからコメントやアクションを送信すると、リアルタイムに演出に反映され、インタラクティブなイルカショーを楽しむことができます。音楽や照明などの演出は毎回ランダムに生成されるため、見るたびに違う内容が上映されます。

図：文章などを流し込んだ様子

これでコンテンツの部分が完成です。上書き保存をしてChromeを更新して確認しましょう。

フッターを作ってみよう

一番下に表示するフッターを書いていきます。

</main>の下にfooterと入力して、Tabキーを押して展開します。

図：footerを展開した様子

<footer>〜</footer>には著作権情報を記載します。<footer>と</footer>の間に.footerInner>smallと打ち込んでTabキーで展開しましょう。

コピーライトを記入しよう

続いて© N水族館 2018と打ち込みます。

<small>タグは免責・警告・著作権などの注釈や細目を表すタグです。smallは日本語で「小さい」という意味ですが、HTMLタグでは「小さい」という意味ではなく、前述の意味合いで使われます。

©と書いた部分はブラウザ上では「©」として表示されます。HTMLでは特殊な文字を出力するときは、& と指定のコードと ; で記述します。

index.htmlを上書きして、Chromeを更新しましょう。

図：footerにコピーライトを記述しました

レイアウトを整えよう

HTMLでの記述が出来たら、続いてCSSでレイアウトを整えていきましょう。

外部CSSファイルの読み込み

Command+Nで新しいファイルを作成し、style.cssという名前をつけて、index.htmlと同じ場所に保存します。

index.htmlの<title>N水族館</title>の下にlinkと記述してTabキーで展開します。

図：linkを展開しました

外部CSSとして先ほど作成したstyle.cssを読み込むように、href 属性にstyle.cssを指定します。

図：外部CSSとしてstyle.cssを読み込む

きちんと外部CSSを読み込めているか確認するため、以下のようにstyle.cssに記述をして保存をし、Chromeを更新して確かめてみましょう。

h1{
    color: red;
}

このように文字が赤くなっていればOKです。

図：CSSの読む込みを確認

うまく表示されていない場合は以下の点を確認してみましょう。

index.htmlとstyle.cssは両方とも保存されているか
index.htmlとstyle.cssは同じ場所に保存されているか
style.cssのファイル名が間違っていないか
CSSの記述にミスがないか

読み込みの確認ができたら、記述した内容を一旦削除して、以下の記述をしてください。

body{
    margin: 0;
}

ブラウザでは<body>に対してあらかじめmarginというCSSプロパティが設定されています。marginというのは要素と要素の間の余白を調整するためのCSSプロパティです。今回は必要がないので 0 に指定して余白をなくしておきます。

ヘッダーのレイアウトを整える

ヘッダーのレイアウトを整えてみましょう。まずはヘッダーに背景色を指定します。

header{
    background: #eeeeee;
}

これでヘッダーがグレーになります。

図：ヘッダーの背景色にグレーを指定しました

ここでは色をカラーコードというもので指定しました。カラーコードとは、Web上で色を表現する際に用いられる6桁のコードのことです。

図：モニターに色を表示する仕組み

図：カラーコードの仕組み

カラーコードはPhotoshopのカラーピッカーや、HTMLカラーコードのようなサイトで調べることができます。

図：Photoshopのカラーピッカー

次にヘッダーの中にある<div class="headerInner">に横幅と高さを指定して、位置を中央寄せにします。

.headerInner{
    width: 650px;
    height: 100px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

widthは横幅、heightは高さを指定するCSSプロパティです。フォントと同じで「px」で指定をします。
marginをautoに設定すると、要素を左右中央に配置することができます。
display:flexは要素を横並びにしたり、伸長・収縮させることができるCSSプロパティです。
justify-contentとalign-itmesは、displayをflexにした場合の細かい設定です。

図：ヘッダーのレイアウトを調整しました

コンテンツのレイアウトを整える

コンテンツのレイアウトを整えましょう。コンテンツの横幅に余白を持たせて、ヘッダーの中身の横幅と合わせます。.headerInnerと同じように、横幅を650pxで指定をし、marginをautoにします。

.mainInner{
    width: 650px;
    margin: auto;
}

図：コンテンツの横幅を、ヘッダーの中身の横幅と合わせました

フッターのレイアウトを整える

フッターのレイアウトを整えましょう。フッターはヘッダーと同じグレーの背景色を指定して、文字を中央に寄せます。

footer{
    background: #eeeeee;
}
.footerInner{
    text-align: center;
    margin-top: 50px;
    padding: 30px;
}

図：フッターのレイアウトを調整しました

横幅が可変するようにする

先ほどヘッダーとコンテンツの横幅を650pxに指定しました。これをスマートフォンで見てみると、右側が見切れてしまいます。

図：画面サイズが650pxより小さいと、はみ出てしまいます

そこで、.headerInnerと.mainInnerで指定したwidthをmax-widthというCSSプロパティに変更します。また、.headerInnerと.mainInnerで同じCSSプロパティと値を指定している部分を１つにまとめてみましょう。

それぞれのwidthとmarginを削除します。そして.headerInnerと.mainInnerを , で区切って、max-widthとmarginを指定します。CSSでは、指定したい要素を , で区切ると、複数の要素にまとめてプロパティと値を指定することができます。また、スマホの横幅のときに余白がないと不格好ですので、paddingというCSSプロパティで余白をつけてあげましょう。

.headerInner,.mainInner{
    max-width: 650px;
    margin: auto;
    padding: 0 20px;
}

上書き保存をして、Chromeで確認してみます。

図：スマホに対応したレイアウト

これでページが完成しました。

paddingとmarginの違いについて

paddingとmarginは余白を指定するCSSプロパティですが、それぞれ役割が少しだけ違います。

marginは要素と要素に間をあける役割
paddingは要素の中身に余白をあける役割

図：paddingとmarginの違い

今回出てきたHTMLとCSS

HTML

要素	説明
head	文書に関する全般的な情報（メタデータ）を内包する要素。タイトルやスタイルシートへのリンクなども内包される。
meta	任意のメタデータ（文字エンコーディングやviewportなど）を提示する。
title	文書の題名を定義し、ブラウザーのタイトルバーやページのタブに表示する。
header	文章や該当のセクションの導入部分・ナビゲーションのグループであることを示す。見出し、ロゴ、検索フォーム、作者名などを含めることができる。
main	文書内の主要な内容を表す。
footer	文書や該当のセクションの著作者に関する情報、関連文書へのリンク、著作権情報等を表す。
h1,h2	見出し。1〜6段階で表すことができる。
nav	現在の文書内の他の部分や他の文書へのナビゲーションリンクを提供するためのセクションを表す。
a	別のウェブページ、ファイル、同一ページ内の場所、電子メールアドレス、または他のURLへのハイパーリンクを作成する。
article	記事であることを表す。内容が単体で完結するもの、例えば投稿・新聞や雑誌の記事・ブログのエントリーなどを表す。
section	1つのセクションであることを表す。セクションとは意味や機能のかたまりのことで、文書内の一部のこと。
small	免責・警告・法的規制・著作権・ライセンス要件などの注釈や細目を表す。
div	汎用的に使えるひとかまりとしての定義

CSS

プロパティ	値	説明
margin	pxや%で指定	マージン余白に関する指定を行う。
padding	pxや%で指定	パディング余白に関する指定を行う。
background	色や画像URLで指定	背景に関する指定を行う。
width	pxや%で指定	横幅を指定する。
max-width	pxや%で指定	横幅の最大値を指定する。
height	pxや%で指定	高さを指定する。
display	block,inline,flexなど	要素の形式（ブロック・インライン・フレックスなど）を指定する。
justify-content	start,end,centerなど	要素の形式がフレックスの場合に、左右の揃え位置を指定する。
align-items	start,end,centerなど	要素の形式がフレックスの場合に、上下の揃え位置を指定する。
text-align	left,right,centerなど	行揃えの位置や均等割付を指定する。

完成版サンプル

今回学習した内容の、htmlファイルとCSSファイルが入っています。

サンプルファイルのダウンロード

ファイルのダウンロード方法

上記のサンプルファイルのダウンロードをクリックします。

図：ダウンロードページ

リンク先のページ内にある、Download をクリックします。

図：クリックの場所

授業で使用するファイルのダウンロードは、すべてこの手順で行います。覚えておきましょう。

ダウンロードしたzipファイルを展開すると、以下のようなファイルが入っています。

コーディングの確認に利用しましょう。

n-aquarium（フォルダ）
- index.html
- style.css

GitHub Pagesについて

GitHubは「ギットハブ」と読み、ソースコードを共有することができるWebサービスです。

GitHub pagesは、GitHubが提供するホスティングサービスです。Tips

GitHubについては、プログラミング入門コース第2章「準備しよう」で詳しく解説しています。
GitHubを自分でも使ってみたいひとや、仕組みを知りたいひとは、こちらで学習できます。
GitHubについて確認する

2020-08-14

Posted by エスパパの娘