HTML/CSSのコーディング教材を公開【ヘッダー編】

htmlcssコーディング練習header編

https://remublog.net/wp-content/uploads/2019/02/kurohamu04.jpg

今回から実際にコードを記述していきます

まずは、ヘッダー部分から作っていきますよ!

今回の概要

  • 所要時間:40分
  • 使用言語:HTML&CSS
  • 内容:ヘッダー部分を制作する

CSSのフレックスボックスなどを使って実装していきます。

わかりやすく解説しますので、安心してください。

エディタにhtmlとcssの雛形を制作する

まずは、前回の制作した『コーディング練習』のフォルダをVScodeで開いてみましょう。

Vscode→ファイル→開く→デスクトップにあるコーディング練習

Vscodeでフォルダを開く

HTMLの雛形を記述する

開いたら、index.htmlにHTMLの雛形を記述していきます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio site</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
  <p>hello world</p>


</body>
</html>

冒頭の<!DOCTYPE html>は、今からHTMLを書きますよーというおまじないです。

<html lang=”ja”>は、日本語のサイト作りますよ、という宣言です。

その下、主な構成としては、headとbodyの二つの要素に別れています。

  • head
    Webサイトに表示されない部分について記述。
    ゲームの設定を決めるようなイメージです。
  • body
    Webサイトに表示される部分について記述。
    ゲームのキャラクターやグラフィックを決めるイメージです。

HTMLの雛形に当たるので、現段階はbody要素には何も記述を加えていません。

そして、head要素には、次の事柄を書いています。

  • <meta charset=”UTF-8″>
    文字化けなどを防ぐことができます。
  • <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    レスポンシブ対応させるための文言です。
  • <title>Portfolio site</title>
    タイトルです。Webサイト毎に変わります。
  • <link rel=”stylesheet” href=”style.css”>
    cssを読み込みます。

これでhtmlの雛形は終了です。

もう少し詳しい解説を知りたいという方は、『HTMLの雛形(準備中)』をご覧ください。

そして、index.htmlhello worldが表示されるかどうか確認しましょう。

デスクトップ→コーディング練習→index.htmlをクリック

ブラウザでindex.htmlを表示させてみましょう。

真っ白の背景に、hello worldと表示されていれば成功です。

CSSの雛形を制作する

HMLTが完了したら、CSSを記述しましょう。style.cssに記述します。

コピペでOK

/* ベース */
* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}
body {
    margin: 0;
}
h2, h3 {
    font-weight: normal;
}
a {
    text-decoration: none;
		transition: all 0.5s;
		cursor: pointer;
}
a:hover {
    opacity: 0.6;
}
p {
    font-size: 14px;
}
li {
	list-style: none;
}
button {
	border: none;
	cursor: pointer;
	outline: none;
}

上記のコードは、コーディングしやすくするためのCSSです。

広い意味での、リセットCSSと呼ばれるCSSです。

私のCSSはオリジナルですが、normalize.cssという有名なリセットCSSも公開されています。

ヘッダーの役割を確認する

ヘッダーの記述を進める前に、ヘッダーの役割をおさらいしておきます。

  • ナビを表示し、情報にアクセスしやすくする
  • お問い合わせができるようにする

今回のWebサイトは主な二つの役割を持っています。

ナビを表示し、情報にアクセスしやすくする

ヘッダー部分にナビゲーションが置いてあることで、必要な情報にいつでもアクセスできます。

サイト訪問者が欲しい情報をすぐに入手できるため、サイトの利便性を向上できます。

お問い合わせができるようにする

ヘッダー部分にお問い合わせボタンを設置することで、お問い合わせ量を増やせます。

ヘッダー部分は最も目立ち、スクロールしてもついてきます。

そのため、お問い合わせボタンを設置しておくことで、訪問者の相談率を上げられます。

ヘッダーのHTML部分をコーディングする

それでは、実際にヘッダー部分をコーディングしていきましょう。

まず、pタグで囲んでいたhello worldを消去します。

index.htmlのbodyタグ以下から、headerのコードを記述してください。

<body>
<!-- ここから記述 -->
	<header>
		<div class="header-container">
			<div class="header-logo">
				<h1><a href="/">Portfolio site</a></h1>
			</div>
			<nav>
				<ul class="contents-table">
					<li><a href="#home">Home</a></li>
					<li><a href="#about">About</a></li>
					<li><a href="#service">Service</a></li>
					<li><a href="#works">Works</a></li>
					<li><a class="contact-btn" href="#contact">Contact</a></li>
				</ul>
			</nav>
		</div>
	</header>

注目ポイント

  • h1タグの活用
    webページで1回しか使えません。ロゴなどに使用しましょう。
  • aタグのhref=”/”の意味
    クリック時、index.htmlに戻ることを意味します。
  • navタグの活用
    navタグはナビゲーション専用のタグです。
  • aタグのhref=”#〇〇”の意味
    クリック時、webページ内のid=”〇〇”へ移動します。

ブラウザチェック

ブラウザで立ち上げたhello worldが消えて、上記のようになっていれば成功です。

ヘッダーのCSS部分をコーディングする

次に、CSS部分を調整し、表示を綺麗にしていきます。

style.cssに下記のコードを記述していきましょう。


/* ヘッダー */

header {
    background-color: white;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

まずは、header全体のCSSを整えましょう。

注目ポイント

  • position: fixed;
  • top: 0;
  • z-index

この3つのcssを組み合わせることで、固定ヘッダーを作ることができます。

positonとtopでwebサイトの上部に固定し、z-indexで上に重ねています。

次は、以下のコードを書き足しましょう。

.header-container {
	width: 90%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 80px;
}
.header-logo {
	color: #3480e3;
	cursor: pointer;
}
.header-logo h1 {
	font-size : 32px;
}

注目ポイント

header-containerで指定したFlexBoxがとても重要です。

  • display: flex;
  • justify-content: space-between;
  • align-items: center;

まずは、それぞれもコードの意味を言語化してみます。

  • display: flex;
    要素を横並びにする
  • justify-content: space-between;
    どのような横並びにするかを指定。
    今回はspace-betweenなので、両端に配置
  • align-items: center;
    横並びの要素を、同じ高さにする

つまり、図にすると以下の通りです。

次は、以下のコードを記述します。

header a:visited {
	color: #3480e3;
}

このコードは、aタグをクリックした後の色を指定するCSSです。

ナビゲーションをクリックしても色合いを損ねない様に調整しています。

次は、以下のコードを記述します。

ul.contents-table {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.contents-table li {
	cursor: pointer;
}
.contents-table li {
	margin-right: 20px;
}
.contents-table li:last-child {
	margin-right: 0px;
}

contents-tableに再度flexboxが出現しました。

今回はcontents-table内のli要素を横並びにしています。

複雑ですが、原理はheader内のロゴとnavを横並びにした時と変わらないです。

注目ポイント

注目ポイントとは:last-childです。

.contents-table li:last-child {
	margin-right: 0px;
}

このコードで、liの一番最後の部分のmargin-rightを0にしています。

last-childは指定した要素の一番最後を指定する時に使えます。

<ul class="contents-table">
 <li><a href="#home">Home</a></li>
 <li><a href="#about">About</a></li>
 <li><a href="#service">Service</a></li>
 <li><a href="#works">Works</a></li>
 <li><a class="contact-btn" href="#contact">Contact</a></li>
</ul>

今回のHTMLでいえば、liタグの最後、class=”content-btn”のliが指定されています。

最後に、コンタクトボタンを制作してヘッダーは完成です。

a.contact-btn {
	padding: 15px 40px;
	background-color: #e53167;
	color: white;
	border-radius: 30px;
	font-size: 16px;
}
a.contact-btn:visited {
	color: white;
}

以上を通して、以下の様なwebサイトが制作できていたら完成です。

ブラウザチェック

次回:HTML/CSSのコーディング教材を公開【hero編】

お疲れ様でした。

次回はHTML/CSSのコーディング教材を公開【hero編】(準備中)となっています。

所要時間は1時間、ぜひ挑戦してみてください。