この記事は、「架空プロジェクトを通してシステム開発とドキュメント作成を体験してみる（2022 Late）」の記事の一部です。

概要

簡単な問合せフォーム機能付きのコーポレートサイトを作成していきます。
トップページと問合せフォームページの2ページからなるサイトを作ります。

最終的には以下のような構造のページを作成しますが、フロントエンド開発1では、まず、基本の枠組みとトップページを完成させます。

フロントエンド開発全行程完了時のイメージ

完成イメージ

完成イメージは下記のような感じ。

画像は動的に変わるので見た目は読み込みの度に変わります。

作業フォルダ作成

websiteというフォルダを作成して進めていきます。
作業フォルダを置きたい場所まで移動してフォルダを作成します。

ここでは一旦デスクトップに移動してデスクトップ上に作成しています。

cd ~/Desktop  #デスクトップに移動
mkdir website

トップページ作成

index.html準備

トップページはindex.htmlという名前で作成します。

これは、慣習でindex.htmlがルートURL（https://xxxx.com/ とか）でアクセスされた際に表示するデフォルトファイルになっているからです（Webサーバの設定等で変更できます）。

VSCodeでwebsiteフォルダを開いて、websiteフォルダ内にindex.htmlを作成します。
手作業で作成するか、下記コマンドを実行して作成します。

windows PowerShellの場合、touchコマンドが使えません。New-Item index.htmlのようにcdをNew-Itemに置き換えて実行してみてください。

cd website
touch index.html

作成できたらVSCodeを開きます。

code .

ピリオドがあるのをお忘れなく。ピリオドは「自分が今いるディレクトリ」という意味です。

開いたらindex.htmlをクリックして右側に表示します。

HTMLの基本構造

HTMLの基本テンプレートを記述します。
この構造はルールみたいなものなので深く考えず、はじめはコピー&ペーストしてください。

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSite</title>
</head>

<body>

</body>

</html>

それぞれのタグの意味を解説します。

キーワード	解説
!DOCTYPE html	これからHTMLを記述するよという宣言
lang="ja"	このHTMLページは日本語で書かれていることを明記
head	このHTML全体の定義を記述するためのタグ
meta	サイトの情報を検索エンジンやブラウザに伝えるためのタグ。name属性で示された項目の内容をcontent属性に記載する
viewport	ブラウザの表示領域
width=device-width, initial-scale=1.0	表示幅はデバイスの幅、表示倍率は1.0倍
title	サイトやページにタイトルをつけるためのタグでブラウザのタブで表示される

この状態でブラウザで確認するとブラウザタブにタイトルが反映されているのがわかりますが、bodyタグには何も記述していないので、真っ白な画面が表示されます。

ナビゲーションバー

ナビゲーションバーを作成していきます。
ナビゲーションバーは、ページ上部に表示し、トップページと問合せページのページ移動をスムーズにするために設置します。
ここでは、まだ問合せページができていないので画面遷移はできませんが、デザインを整えて、問合せページができたらページ遷移ができるようにしておきます。

index.htmlの編集

bodyタグの中にnavタグを設定して行きます。
navタグにはclass属性をつけています。

class属性は、主にCSSでスタイルを適用する要素のグループを指定するために設定します。Id属性でもCSSスタイルで使えます。Idは一意ですがclassは複数の要素に設定できます。

aタグのhref属性を指定することで指定したURLへリンクをつけることができます。
CONTACTは未作成ですが、あとで「contact.html」を作成するので./contact.htmlを指定しておきます。

contact.htmlはまだないので、クリックすると「ファイルにアクセスできませんでした」と表示されます。

index.html

	<!DOCTYPE html>
	<html lang="ja">

	<head>
	    <meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>WebSite</title>
	</head>

	<body>
+	    <nav class="nav">
+	        <ul>
+	            <li><a href="./index.html">WebSite</a></li>
+	            <li><a href="./index.html">TOP</a></li>
+	            <li><a href="./contact.html">CONTACT</a></li>
+	        </ul>
+	    </nav>
	</body>

	</html>

コピペ用

<nav class="nav">
    <ul>
        <li><a href="./index.html">WebSite</a></li>
        <li><a href="./index.html">TOP</a></li>
        <li><a href="./contact.html">CONTACT</a></li>
    </ul>
</nav>

キーワード	解説
nav	サイトの主要なナビゲーションを表すタグ
ul,li	箇条書きをレイアウトするタグ。ulとliはセット
a	href属性を設定して他のURLへリンクをつけるタグ

これでページを確認するとこのようになっています。

スタイル調整

style.cssを作成してスタイルを調整します。
新規作成でファイル名を指定するか、コマンドでtouch style.cssとしてファイルを作成します。

動作確認でも触れましたがCSSとはCascading Style Sheetsの略でウェブのスタイルを指定するための言語です。HTMLファイルと合わせて利用する言語で、HTMLで指定された要素に対してそれぞれスタイルを指定することができます。

index.htmlで読み込み

index.htmlでstyle.cssを読み込んで、style.cssに記述した内容がindex.htmlに反映されるようにします。

index.html

	<!DOCTYPE html>
	<html lang="ja">

	<head>
	    <meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>WebSite</title>
+	    <link rel="stylesheet" href="./style.css" />
	</head>

	<body>
	    <nav class="nav">
	        <ul>
	            <li><a href="./index.html">WebSite</a></li>
	            <li><a href="./index.html">TOP</a></li>
	            <li><a href="./contact.html">CONTACT</a></li>
	        </ul>
	    </nav>

	</body>

	</html>

style.css編集

記述できたらstyle.cssにナビゲーションバーのデザインを記述していきます。
背景色をダークグレーに指定します。

色の指定は「blue」「red」などのキーワードを指定する方法もありますし、 16進数カラーコード（#aabbcc）や RGB （rgba( 255, 255, 255, 0.5)）、 HSL （hsl( 207, 100%, 86%);）といった方法で設定できます。下記では16進数で記述していますが、#aabbccのような場合#abcと省略して記述することができます。今回も#666666のため、#666と省略して記述しています。

style.css

.nav {
    /* 背景色設定 */
    background-color: #666;
}

保存して確認します。

背景色が付きました。

ただ、上下左右に指定していない余白ができているので原因を調べます。
右クリック＞「検証」で検証画面を開き、elementsタブで原因となる要素を確認します。

chromeを前提として記述しています。ブラウザによって検証画面の出し方は異なります。

bodyタグに対して、「user agent stylesheet」で設定している要素が効いているようです。
「user agent stylesheet」とは各ブラウザがデフォルトで設定しているスタイルのことです。
cssファイルで設定していないスタイルが効いているなと思った場合は「user agent stylesheet」が効いていることがあるので確認してみてください。
bodyの余計なスタイルが適用されないように余白をリセットします。
ついでにフォントもブラウザごとに異なるもので表示されてしまうので、統一できるように設定しておきます。

style.css

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

こういった記述をリセットCSSと呼びます。自分で定義する場合もありますが、専用のCSSファイルがいろいろ公開されています。

保存して確認します。

左右の余白はなくなりましたが、まだ、上部の余白が残っているので確認します。

すると、ナビゲーションをリスト表示するためのulタグが影響していることがわかります。
余白を取りながら、ulタグのスタイルも編集していきます。

style.css

.nav ul {
    /* 表示幅を90%に */
    width: 90%;
    /* フレックスボックス化 */
    display: flex;
    /* 先頭のポチをなくす */
    list-style: none;
    /* 余白の自動調整 （上下の余白は0、左右は自動調整）*/
    margin: 0 auto;
    /* 高さを50pxに指定 */
    height: 50px;
}

保存して確認します。横並びになりました。

aタグのスタイルを編集して、文字色やリンクの上下余白をつけていきます。

style.css

.nav a {
    /* アンダーライン削除 */
    text-decoration: none;
    /* 文字色設定 */
    color: #fff;
    /* 内側余白を上右下左の順で設定 */
    padding: 10px 20px 10px 0px;
    /*ブロックにする */
    display: block;
    /* 文字を大き目に設定 */
    font-size: large;
}

.nav a:hover {
    /* マウスオーバーした時の文字色を設定 */
    color: #aaa;
}

保存して確認します。

WebSiteにマウスオーバー時

トップ

トップには画像と、画像の上にサイトのメインメッセージを表示します。
画像は手元にある画像を利用してもいいですが、テキストでは https://picsum.photos のAPIを利用して、ランダムに画像を表示させます。

以前はunsplash source APIを使っていましたが、2021年11月より非推奨となったためhttps://picsum.photos へ変更しました。

トップ画設定

トップ画像とメインメッセージが入るスペースをnavタグの下に追加します。
headerタグを使って記述しています。

headerタグはheader要素（冒頭となる見出しや概要）に使われることが多いです。

index.html

	<!DOCTYPE html>
	<html lang="ja">

	<head>
	    <meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>WebSite</title>
	    <link rel="stylesheet" href="./style.css" />
	</head>

	<body>
	    <nav class="nav">
	        <ul>
	            <li><a href="./index.html">WebSite</a></li>
	            <li><a href="./index.html">TOP</a></li>
	            <li><a href="./contact.html">CONTACT</a></li>
	        </ul>
	    </nav>
+	    <header class="top">
+	        <h1 class="top_msg">bluecode, Lifestyle developer.</h1>
+	    </header>
	</body>

	</html>

コピペ用

<header class="top">
    <h1 class="top_msg">bluecode, Lifestyle developer.</h1>
</header>

キーワード	解説
header	冒頭となる見出しや概要、ナビゲーションによく使われる
h1	そのページの最上位の見出しを記述するタグ

保存して確認します。
デザインが何も追加されていないので、一行メッセージが追加されたのみです。

スタイルを調整

style.cssにスタイルを追加していきます。
トップの画像はクラス名topの背景として画像を入れるようにします。

https://picsum.photos　からランダムに画像を取得する場合、URLの後ろに希望の画像サイズ (幅と高さ) を追加するだけです。

コメントはそれぞれの要素の説明です。実際のコーディングでは不要です。

style.css

/* トップ */
.top {
    /* 背景にpicsum.photosから取得した画像を設定 */
    background-image: url("https://picsum.photos/1000/300");
    /* 画像をいっぱいに表示 */
    background-size: cover;
    /* 表示する高さを画面の40％に */
    height: 40vh;
    /* 表示幅を画面の90%に */
    width: 100%;
    /* フレックスボックスを指定*/
    display: flex;
    /* フレックスアイテムを使って両端から中央に配置*/
    justify-content: center;
    /* フレックスアイテムを使って上下から中央に配置 */
    align-items: center;
    /* テキストの配置を中央揃えに */
    text-align: center;
}

メッセージは白文字にします。

style.css

.top_msg {
    /* 文字色を白に */
    color: #fff;
}

保存して確認します。

コンテンツ部分

今回はコンテンツを細かく追加しませんが、コンテンツを表示させるスペースを作ります。

コンテンツスペース設定

htmlにコンテンツを表示するスペースを追加します。
トップ画にはmainタグを使います。
mainタグの中でsectionタグを使って区間を区切ります（今回は一つですが複数のsection（コンテンツ）が設定される可能性を考慮しておく必要があります）。

キーワード	解説
main	文書の主要な内容が入るタグ
section	コンテンツが複数入る場合など、区間を分けるタグ
p	テキストの段落を表す
h2	サイトのh1の次に上位の見出しを記述するタグ

index.html

	<!DOCTYPE html>
	<html lang="ja">

	<head>
	    <meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>WebSite</title>
	    <link rel="stylesheet" href="./style.css" />
	</head>

	<body>
	    <nav class="nav">
	        <ul>
	            <li><a href="./index.html">WebSite</a></li>
	            <li><a href="./index.html">TOP</a></li>
	            <li><a href="./contact.html">CONTACT</a></li>
	        </ul>
	    </nav>

	    <header class="top">
	        <h1 class="top_msg">bluecode, Lifestyle developer.</h1>
	    </header>
+	    <main>
+	        <section class="content">
+	            <h2>websiteの最新情報</h2>
+	            <p>最新の情報をご案内します。</p>
+	        </section>
+	    </main>

	</body>

	</html>

コピペ用　

<main>
    <section class="content">
        <h2>websiteの最新情報</h2>
        <p>最新の情報をご案内します。</p>
    </section>
</main>

保存して確認します。

スタイルを調整

スタイルを調整して、左右の中央に来るように配置していきます。

style.css

.content {
    width: 90%;
    margin: 0 auto;
    text-align: center;
}

フッター

ブラウザの下部にフッターを配置します。
このコンテンツではフッタースペースを設定するのみですが、実際にサイトを作る場合では各ページのリンクを用意してサイトマップを設置したりすることで、UXが向上したり、サイト内リンクが増えることでSEO対策となる部分です。

footerタグの設定

index.html

	<!DOCTYPE html>
	<html lang="ja">

	<head>
	    <meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>WebSite</title>
	    <link rel="stylesheet" href="./style.css" />
	</head>

	<body>
	    <nav class="nav">
	        <ul>
	            <li><a href="./index.html">WebSite</a></li>
	            <li><a href="./index.html">TOP</a></li>
	            <li><a href="./contact.html">CONTACT</a></li>
	        </ul>
	    </nav>

	    <header class="top">
	        <h1 class="top_msg">bluecode, Lifestyle developer.</h1>
	    </header>
	    <main>
	        <section class="content">
	            <h2>websiteの最新情報</h2>
	            <p>最新の情報をご案内します。</p>
	        </section>
	    </main>

+	    <footer class="footer">
+	        &copy; 2022 bluecode, inc. All Rights Reserved.
+	    </footer>
	</body>

	</html>

コピペ用

<footer class="footer">
    &copy; 2022 bluecode, inc. All Rights Reserved.
</footer>

保存して確認します。

スタイル調整

フッターのスタイル

footerのスタイルを調整します。

style.css

.footer {
    background-color: #666;
    height: 60px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

保存して確認します。

フッター自体のスタイルはいいですが、コンテンツが少ないため、フッターが中央部分に表示されてしまっています。
フッターの位置を下部に来るように指定します。
footerにposition:stiky;を設定することで、footerの親要素内で固定値を取るようになります。footerの親要素はbodyなので、bodyに高さ100%を指定し、bodyの親要素htmlも高さ100%を指定します。
footerは表示領域の上から100%の位置（一番下）に設定しておきます。

style.css

+    html {
+        height: 100%;
+    }

    body {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
+       height: 100%;
    }

    .footer {
        background-color: #666;
        height: 60px;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
+       position: sticky;
+       top: 100vh;
    }

コピペ用

html {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    height: 100%;
}
.footer {
    background-color: #666;
    height: 60px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: sticky;
    top: 100vh;
}

保存して確認します。

コンテンツとフッターの間にスペースができて見やすくなりました。
トップページの開発は完了しました。
フロントエンド開発2では問合せフォームを実装していきます。

最終的なコード

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSite</title>
    <link rel="stylesheet" href="./style.css" />
</head>

<body>
    <nav class="nav">
        <ul>
            <li><a href="./index.html">WebSite</a></li>
            <li><a href="./index.html">TOP</a></li>
            <li><a href="./contact.html">CONTACT</a></li>
        </ul>
    </nav>

    <header class="top">
        <h1 class="top_msg">bluecode, Lifestyle developer.</h1>
    </header>
    <main>
        <section class="content">
            <h2>websiteの最新情報</h2>
            <p>最新の情報をご案内します。</p>
        </section>
    </main>


    <footer class="footer">
        &copy; 2022 bluecode, inc. All Rights Reserved.
    </footer>


</body>

</html>

style.css

html {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    height: 100%;
}

.nav {
    /* 背景色設定 */
    background-color: #666;
}

.nav ul {
    /* 表示幅を90%に */
    width: 90%;
    /* フレックスボックス化 */
    display: flex;
    /* 先頭のポチをなくす */
    list-style: none;
    /* 余白の自動調整 （上下の余白は0、左右は自動調整）*/
    margin: 0 auto;
    /* 高さを50pxに指定 */
    height: 50px;
}

.nav a {
    /* アンダーライン削除 */
    text-decoration: none;
    /* 文字色設定 */
    color: #fff;
    /* 内側余白を上右下左の順で設定 */
    padding: 10px 20px 10px 0px;
    /*ブロックにする */
    display: block;
    /* 文字を大き目に設定 */
    font-size: large;
}

.nav a:hover {
    /* マウスオーバーした時の文字色を設定 */
    color: #aaa;
}

/* トップ */
.top {
    /* 背景にpicsum.photosから取得した画像を設定 */
    background-image: url("https://picsum.photos/1000/300");
    /* 画像をいっぱいに表示 */
    background-size: cover;
    /* 表示する高さを画面の40％に */
    height: 40vh;
    /* 表示幅を画面の90%に */
    width: 100%;
    /* フレックスボックスを指定*/
    display: flex;
    /* フレックスアイテムを使って両端から中央に配置*/
    justify-content: center;
    /* フレックスアイテムを使って上下から中央に配置 */
    align-items: center;
    /* テキストの配置を中央揃えに */
    text-align: center;
}

.top_msg {
    /* 文字色を白に */
    color: #fff;
}

.content {
    width: 90%;
    margin: 0 auto;
    text-align: center;
}

.footer {
    background-color: #666;
    height: 60px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: sticky;
    top: 100vh;
}

まとめ

HTMLはWebページの基本構造を記述する
CSSはWebページのデザインを記述する
- HTMLよりCSSの方が記述量が多い
- 立派なデザインが存在していても、CSSで表現できないと意味がない（Webデザイナはデザイン＋HTML/CSS/JavaScriptができないとだめ）
- 最近では、UIの複雑化により動きを含めたデザインができないとだめなため（これにはJavaScriptをゴリゴリ書く必要があるため）、フロントエンドエンジニアという言葉も使われて久しい

ドキュメント作成視点での考察

デザインやレイアウトについての記述をどこにどう記述すべきか？
HTML/CSS/JavaScriptに関連した内容を記述すべきか？どこにどう記述すべきか？
そもそもシステムのフロントエンドをWebとすることは記述すべき？

関連コンテンツ

次：フロントエンド開発２
前：開発環境の整備と動作確認