ヘッダー、フッターをCSSでデザインに合わせて装飾してみよう！【超初心者向けHTML講座8】

nori

　どうもフリーランスプログラマのTakaです。

　さて、今回でこのプロジェクトも8回目になりましたが、前回で一応HTMLのマークアップコーディングに関してはひと通り完了したので、今回はcssファイルを作成し、HTMLと紐づけてデザインに合わせて装飾していきたいと思います。

前回の記事を参照したい場合は下記の関連記事を参照してください！

関連記事

HTML実制作編！ヘッダーとフッター周りのコーディング！【超初心者向けHTML講座6】

　どうもフリーランスプログラマのTakaです。 　さて、これまでHTMLの基礎的なことから、制作にあたって必要な最...

　なお、これまでHTMLに関しては概要やタグの意味から役割まで少し詳しく説明してきましたがCSSに関しては、長くなってしまうこともありあまり説明してきませんでした。今回から実際にCSSコーディングをしていきますが、わからないところもあるかもしれませんので、その際はコメントに残していただければと思います。

ここまでのおさらい

　まずは、ここまでの本プロジェクトのおさらいですが、本プロジェクトで作成するサンプルページはこちらになります。

　そして、少し長くなりますが前回まで作成したindex.htmlファイルのソースは下記のようなコードになっています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CodeCaster</title>
<meta name="description" content="HTMLの学習用サンプルページになります。" />
<script src="https://use.fontawesome.com/1f771ca475.js"></script>
</head>
<body>
<header>
<section>
<h1><a href="/">CODECASTER</a></h1>
</section>
<nav>
<ul>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">PROFILE</a></li>
<li><a href="#">SKILL</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</header>
<!-- /header -->
<main>
<article>
<section>
<div>
<p><img src="assets/images/profile.png"></p>
<h2>TAKA</h2>
<p>FREELANCE WEB DEVELOPER<br>Located in Tokyo</p>
</div>
</section>
<section>
<div>
<h3>PORTFOLIO</h3>
<div>
<a href="#">
<div class="thumbnail"></div>
<dl>
<dt>CLIENT1</dt>
<dd>CLIENT1様のコーポレートサイトを作成しました。</dd>
</dl>
</a>
<a href="#">
<div class="thumbnail"></div>
<dl>
<dt>CLIENT2</dt>
<dd>CLIENT2様の社内システムを開発、構築しました。</dd>
</dl>
</a>
<a href="#">
<div class="thumbnail"></div>
<dl>
<dt>CLIENT3</dt>
<dd>CIENT3様のキャンペーンサイトを作成しました。</dd>
</dl>
</a>
</div>
</div>
</section>
<section>
<div>
<h3>PROFILE</h3>
<p>フリーランスのWebプログラマーとして国内を中心に活動。フロントエンドからバックエンドまで幅広い対応範囲を強みとして、大手企業から個人まで多くのクライアントを持つ。また、個人プロジェクトとしてWebサービスの開発、ブログの執筆、Youtubeの発信等、積極的に活動中。</p>
</div>
</section>
<section>
<div>
<h3>SKILL</h3>
<div>
<section>
<h4>プログラミング</h4>
<div>
<ul>
<li>HTML &#043; CSS</li>
<li>JavaScript</li>
<li>PHP</li>
<li>JAVA</li>
<li>Python</li>
<li>Swift</li>
</ul>
</div>
</section>
<section>
<h4>アプリケーション</h4>
<div>
<ul>
<li>XD</li>
<li>Photoshop</li>
<li>Illustrator</li>
<li>AfterEffects</li>
<li>Python</li>
<li>Swift</li>
</ul>
</div>
</section>
</div>
</div>
</section>
<section>
<div>
<h3>CONTACT</h3>
<p>お気軽にお問い合わせください。</p>
<ul>
<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-envelope" aria-hidden="true"></i></a></li>
</ul>
</div>
</section>
</article>
<!-- /article -->
</main>
<!-- /main -->
<footer>
<small>Copyright &copy; 2020 CODECASTER</small>
</footer>
<!-- /footer -->
</body>
</html>
view raw index.html hosted with ❤ by GitHub

　今回はこちらのソースコードにidやclass名を追記しつつ、cssファイルを別途作成して進めていきたいと思います。

CSSファイルを用意

　では、まずCSSを用意していきましょう。本連載の6回目の記事の中でも紹介しましたが、本プロジェクトの最終的なファイルおよびディレクトリ構成は下記の通りとなっています。

codecaster
├── assets
│   ├── css
│   │   ├── reset-min.css
│   │   └── style.css
│   ├── images
│   │   ├── portfolio_1.png
│   │   ├── portfolio_2.png
│   │   ├── portfolio_3.png
│   │   └── profile.png
│   └── js
│   └── script.js
└── index.html
view raw codecaster hosted with ❤ by GitHub

　上記に倣って、今回は「reset-min.css」と「style.css」の２つのcssファイルを用意していきます。

style.cssファイルを作成

　まずは、「assets」ディレクトリを作成して、その中に「css」ディレクトリを作成します。

　続いて、エディターを開いて「style.css」というファイル名で、今作成した「assets/css」ディレクトリの中に保存します。

reset-min.cssファイルをダウンロード

　続いて、リセットCSSであるreset-min.cssをダウンロードして、style.cssを同じく「assets/css」ディレクトリに保存します。

タブが開く場合はそのままファイルを自分のPCに保存しましょう

リセットCSSとは？

　ちなみに、このreset-min.cssファイルは基本的にはいじりません。では、なぜダウンロードしたのかというと、マージン等のブラウザ毎に設定されている独自の初期のスタイル設定をリセットする役割を果たしてくれるからになります。

このリセット処理をやらないとブラウザによって変なマージンができたり見た目に支障が出てきてしまうので必ずブラウザの設定の差異はリセットしておきましょう！

　ちなみに、このリセットCSSはいくつかあるのですが、今回はYUIのリセットCSSを使いたいと思います。

YUIとは、Yahoo! UI Libraryの略だよ

　また、そもそもブラウザってなんだっけ？と思った方は、下記の記事で解説しているのでそちらを改めて参照してみてください。

関連記事

5分で分かる！HTMLとは何？その概要を説明！【超初心者向けHTML講座1】

　どうもフリーランスプログラマのTakaです。 　このブログでもこれまでプログラミングについて備忘録やハウツー系の...

CSSの読み込み

　上記の２つのCSSファイルを保存したら、index.htmlファイルを開いてそれぞれ下記のようにhead内で読み込んでおきましょう。

<head>
<meta charset="UTF-8">
<title>CodeCaster</title>
<meta name="description" content="HTMLの学習用サンプルページになります。" />
<link rel="stylesheet" type="text/css" href="assets/css/reset-min.css" />
<link rel="stylesheet" type="text/css" href="assets/css/style.css" />
<script src="https://use.fontawesome.com/1f771ca475.js"></script>
</head>
view raw index.html hosted with ❤ by GitHub

読み込む際は必ずリセットCSSから読み込んでください！順番が逆になってしまうとリセットCSSがstyle.cssで上書きされてしまう可能性があります

html全体の共通スタイルを設定

　では、少し前置きが長くなってしまいましたが、実際にCSSコーディングをしていきたいと思います。

　では、style.cssを開いてコーディングしていきましょう。まずは、下記のようにhtml全体に共通のスタイルを適用したいと思います。

html,body {
background-color: #fff;
font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
font-size: 16px;
letter-spacing: 1px;
}
view raw style.css hosted with ❤ by GitHub

　ここで設定しているのは見て分かると思うのですが、「ページ全体の背景」、「フォント」、「フォントサイズ」、「文字間」の4つになります。

　背景は「#fff」としていますが、これは16進数のカラーコードである「#ffffff」の略になります。これで白色を設定することができます。この16進数のカラーコードはPhotoshopやXD等のツールを使うことで割り出すことができます。

　フォントスタイルは明朝スタイルのフォントスタイルを設定しています。いくつかフォントを指定していますが、左から順番にそのフォントをブラウザが探してくれ、PCに存在する最初に見つかったフォントで表示してくれます。

　その他、フォントサイズは16pxで、文字間は1pxを指定しています。

　上記のスタイルは、htmlとbodyタグに適用することでページ全体の大枠のスタイルとして設定することができます。

ヘッダーの装飾

　続いて、ヘッダー部分のコーディングをしていきたいと思います。

　ヘッダーは下図のような見た目になっているので、このデザインに合わせてCSSで装飾していきたいと思います。

　ソースコードは下記にようになります。

header {
position: fixed;
display: flex;
justify-content: space-between;
align-items: center;
width: calc(100% - 40px);
height: 60px;
padding: 0 20px;
background-color: #fff;
}
header h1 a {
color: #00B496;
}
header nav ul {
display: flex;
}
header nav ul li {
margin: 0 25px;
font-size: 14px;
}
view raw style.css hosted with ❤ by GitHub

　ここでは、以下4つのタグにそれぞれスタイルを適用しています。

スタイルを適用しているタグ

  • header
  • header h1 a
  • header nav ul
  • header nav ul li

　まず、「header」全体、それからheaderの中に内包されているh1タグの中のaタグ、それからnavタグの中のulタグとその中のliタグにスタイルを個別に適用しています。

　ちなみに、「header h1 a」のように、スペースを空けて指定していますが、このように指定することでピンポイントでスタイルを適用することができます。これはheaderの中のh1タグの中のaタグのみに適用することになります。

例えば、これを「a」タグのみで指定するとこのページの全てのaタグにスタイルが適用されることになるよ

header

　それでは、それぞれのタグに適用しているスタイルを上から順に簡単に説明をしていきたいと思います。

　まずは、headerになりますが、まず始めに「position」プロパティで「fixed」を指定しています。positionプロパティにfixedを指定することでヘッダー全体をページ最上部に固定しています。

　次に、「dispaly」プロパティに「flex」を指定して、子要素を横並びにしています。ここではヘッダーの中にあるロゴとグローバルナビゲーションの２つのブロックを横並びにしています。

　続いて、「justify-content」プロパティに「space-between」を指定して、flexで横並びになったコンテンツの位置がそれぞれ両端にくるようにしています。この指定によって、ロゴとグローバルナビゲーションが両端に位置するようになります。

　さらに、「align-items」プロパティに「center」を指定して、flexで横並びになったコンテンツが縦幅のちょうど真ん中に位置するように設定しています。これによりロゴとグローバルナビゲーションがヘッダーの縦幅中央にくるようになります。

　次に、「width」で、コンテンツの横幅をしていますが、ここでは「calc」という関数を利用しています。「calc」は「caluclation」の略になり、演算をしてくれる関数になります。ここでは横幅100%から両サイドの余白20px分を引いています。

　続いて、縦幅を「height」プロパティで60pxに設定しています。

　先ほど、横幅をwidthでした際に余白分の40pxを引きましたが、「padding」プロパティで両端に20pxずつの余白を作ってあげます。

　最後に、背景を「background-color」で白色に指定しています。

header h1 a

　header全体のスタイルを適用したら、続いてヘッダーの中の要素に個別にスタイルを適用していきます。まずは、「header h1 a」ですが、aタグはリンクになるので各ブラウザであらかじめ青色等にフォントカラーが設定されています。これをデザインに合わせて「color」プロパティを指定して緑色に設定しています。

header nav ul

　続いて、グローバルナビゲーションも横並びにしたいので、「header nav ul」タグにも「display」プロパティに「flex」を指定します。これでグローバルナビゲーションもデザインのように横並びになります。

header nav ul li

　次に、横並びにしたグローバルナビゲーションに余白を作るために「margin」プロパティに「0 25px」を指定しています。これにより右と左の両端に25px分の余白ができます。

　さらに、「font-size」に14pxを指定して、グローバルナビゲーションの各リンクのフォントサイズを14pxに設定しています。

　ここまでやったら、この状態で一度index.htmlファイルを開いてみましょう。

　現時点だとレイアウト自体はデザインのような見た目になったと思いますが、ロゴとグローバルナビゲーションに下線が付いていると思います。これもデフォルトの初期CSS設定のひとつでテキストリンクには下線が付くブラウザが多いです。

　そこで、この下線を消すために新たにスタイルを適用したいと思いますが、今回のデモサイトでは下線が必要になる箇所はないので、ページ全体にaタグから下線を消すようにスタイルを適用してみたいと思います。

　ページ全体のaタグということになるので、下記のようにaタグにスタイルを適用するようにします。

a {
color: #000;
text-decoration: none;
}
view raw style.css hosted with ❤ by GitHub

　スタイルの内容としては、「text-decoration」に「none」を指定することでリンクの下線を消し、ついでに「color」プロパティでリンクのテキスト色を黒色に設定しています。

　ここまでスタイルを適用したらデザインのような見た目になるかと思います。

フッターの装飾

　続いて、フッターの装飾もこの段階で先にしておきましょう。フッターはコピーライトのみのシンプルな構成になっているのでfooterに下記のようにスタイルを適用するだけでデザインのような見た目になるかと思います。

padding: 20px 0;
background-color: #1A252F;
color: #fff;
text-align: center;
}
view raw style.css hosted with ❤ by GitHub

　具体的には「padding」プロパティで上下に20pxずつの余白を持たせて、「background-color」で背景、「color」でテキストの色をそれぞれ指定して、「text-align」プロパティに「center」を指定することでコピーライトを中央せにしています。

　これでフッターに関してもデザインと同じような見た目になったのではないかと思います。

まとめ

　ということで、今回からCSSを使ってHTMLをデザインに合わせて装飾していくということで、今回は手始めにヘッダーとフッターをCSSを使ってレイアウトの調整と色味等の調整をしてみました。

本記事のまとめ

  • CSSファイルの用意
  • リセットCSSはブラウザの初期スタイルをリセットする役割
  • HTML全体に適用するスタイルの設定
  • ヘッダーにスタイルを適用
  • フッターにスタイルを適用

　てことで、次回はメインコンテンツ部分をデザインに合わせてCSSで装飾していきたいと思います。それでは今回はここまで！また！

　次の記事は下をクリック。

関連記事

メインエリアをCSSで装飾してみよう！【超初心者向けHTML講座9】

　どうもフリーランスプログラマのTakaです。 　前回ヘッダー、フッター周りのCSSコーディングをし、ヘッダーとフ...

お仕事のご相談・ご依頼
お気軽にお問い合わせください！

お仕事の依頼はこちら

こちらの記事も読まれています

シェアありがとうございます！

著者プロフィール

Taka

東京、奄美大島を拠点にサーフィンとスノーボードが好きなフリーランスのWebクリエイターです。普段はプログラム書いたりデザインしたり映像作ったりしています。いろいろな人の話しを聞くのが好きなので、このブログを通して多くの人と繋がりが出来たら嬉しいです。noteとInstagramもやっているのでフォローしてくれたらありがたいです！

プログラミングの記事一覧へ

他のブログも見る

人気記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です