コーディング練習(1) ヘッダーとメインビジュアルを作ろう！
こんにちは、かなきち(@kanakichi0801)です
今回から、ホームページの作成に入っていきます！ しかし、これが必ずしも100%正解ではありません。コーディングにはいろんな組み方がありますのであくまで参考としてお読みください。
また、初心者向けということで以下の記事で紹介した4つHTMLのタグしか基本的に使いません。
blog.mimipen.net
ただ、最下部にHTMLをしっかり使ったコードも載せてるので、もう少しレベルを上げたい方はそちらを見てみてください。
以下の記事の続きです。先にコーディング準備は済ませておいてね！
blog.mimipen.net
準備完了という方は以下のリンクより素材をダウンロードしてください！
＞ ダウンロードリンク
※LOGOデータを入れ忘れておりました。2019.10.21より前ダウンロードされた方は、お手数ですが再ダウンロードをお願いいたします。
コーディング練習 第一回目！ヘッダーとメインビジュアルを作るよ！
こんな人に読んで欲しい
・HTMLとCSSの使い方を覚えたい方
・ホームページを作ってみたい方
・ホームページを作りたいけど、何から始めればいいかわからない方
完成コード
サンプルページ
[html]
<div class="header cf"> <h1 class="logo"><a href="./" target="_blank"><img src="./img/logo.png" alt="MiMiPEN みみぺんカフェ"></a></h1> <div class="gnav"> <div class="gnav__link"><a href="#about">ABOUT</a></div> <div class="gnav__link"><a href="#menu">MENU</a></div> <div class="gnav__link"><a href="#access">ACCESS</a></div> <div class="gnav__link"><a href="#contact">CONTACT</a></div> </div> </div> <div class="mv"> <img src="./img/mv.jpg" alt="みみぺんカフェのイメージ"> </div>
[css]
/*-------------------------------------------------------------- PARTS --------------------------------------------------------------*/ /*clearfix*/ .cf{ display: block; } .cf:after{ content: ""; display: block; clear: both; } .cf:before{ content: ""; display: block; clear: both; } /*-------------------------------------------------------------- HEADER --------------------------------------------------------------*/ .header{ width: 1040px; margin: 0 auto; padding: 26px 0 24px; } .logo{ float: left; } .gnav{ float: right; font-size: 0; } .gnav__link{ display: inline-block; margin-left: 40px; } .gnav__link a{ display: block; padding: 17px 0; font-size: 14px; color: #74859f; letter-spacing: 0.2rem; } /*-------------------------------------------------------------- MV --------------------------------------------------------------*/ .mv{ width: 1040px; margin: 0 auto; }
もっとレベルを上げて、コードを書きたいという方は、ページの下部にHTMLタグをしっかり使ったコードも載せてあるので参考してみてくださいね！
以下よりコードの説明をしていきます。
コーディング計画
コーディング手順
基本的な手順としては、以下の1 〜 3の順です。
1. ページ全体で使うスタイル(CSS)を記述
[例]
body{ background: #fff; font-size: 1.4rem; color: #333; } a{ color: #333; text-decoration: none; }
2. 各セクションを上から順にコーディング(HTML&CSS)
3. 使いまわせるパーツを作成(HTML&CSS)( 2とほぼ同時で進めていく )
このやり方は初心者向けではありません。なぜなら[1]のページ全体で使うスタイルと言われても、何が共通で使えるか分からないからです。その為、このブログでは、[2]→[3]→[1]の順でコーディングしていきます。慣れてきたら[1]→[2]→[3]の順でコーディングしてみましょう。
デザインデータを元にコーディングの流れを計画する
デザインデータはこちらを見てね！
デザインデータを元に以下のように考える。
かなきちメモ
全体をheaderで囲って、ロゴにはh1タグを使おう。ナビゲーションは gnavというclass名にして、ナビゲーションの各リンクはgnav__linkという名前にしよう。左右にそれぞれロゴとナビゲーションがあるのでFloatを使ってみよう。ナビゲーションは横に並んでるからdisplay: inline-blockを使おう…などなど。
コーディングに入る前に、計画を立てます。
ヘッダーを作る
ヘッダーHTMLコード
以下のコードをbodyタグの中に記述します。
<div class="header"> <h1 class="logo"><a href="./"><img src="./img/logo.png" alt="MiMiPEN みみぺんカフェ"></a></h1> <div class="gnav"> <div class="gnav__link"><a href="#about">ABOUT</a></div> <div class="gnav__link"><a href="#menu">MENU</a></div> <div class="gnav__link"><a href="#access">ACCESS</a></div> <div class="gnav__link"><a href="#contact">CONTACT</a></div> </div> </div>
ポイント！
ロゴにはTOPページへのリンクを記述しよう！また、サイトの大見出しにはh1タグを使おう！今回は大見出しがなかったので LOGOをh1に設定しました。
ヘッダーCSSコード
Floatの下準備
先ほどの「かなきちメモ」で、headerの中身は、左右にそれぞれロゴとナビゲーションがあるのでFloatを使ってみようと書きました。Floatは、clearfixとセットで使うと以下の記事で紹介しました。
blog.mimipen.net
clearfixを使えるようにするため、以下のコードを記述をします。
[css]
.cf{ display: block; } .cf:after{ content: ""; display: block; clear: both; } .cf:before{ content: ""; display: block; clear: both; }
Floatを指定する要素の親要素のに cfというclassを追加します。
[html]
<div class="header cf"> <h1 class="logo"><a href="./"><img src="./img/logo.png" alt=""></a></h1> <div class="gnav"> ...
大枠(.header)から指定をする
大きさを指定する
デザインデータを計ってみるとわかりますが、コンテンツ幅は1040pxです。
.header{ width: 1040px; }
中央に配置する
margin: 0 auto;を使い、要素を中央寄席にする。
.header{ width: 1040px; margin: 0 auto; }
余白を記述する
上の余白は26px、下の余白は24px。ヘッダー自体の高さを100pxにしたいので、paddingを指定します。
上下をそれぞれ指定し、左右は同じ値でいい場合は、padding: [上の値] 0 [下の値]と指定する。 今回の場合は、padding: 26px 0 24px。
.header{ width: 1040px; margin: 0 auto; padding: 26px 0 24px; }
marginとpaddingの違いや使いどころが分からない人はこちらの記事をチェック。
blog.mimipen.net
左右に配置したい要素にFloatを指定をする
ロゴを左に配置する。
.logo{ float: left; }
ナビゲーションを右に配置する。
.gnav{ float: right; }
inline-blockを使って、リンクを横に並べる
先ほどの「かなきちメモ」で、ナビゲーションにはdisplay: inline-blockを使うといいました。さっそく、並べたい要素にdisplay: inline-blockを指定します。
リンクを並べる
.gnav__link{ display: inline-block; }
display: inline-blockを指定する要素の親要素にfont-size: 0を追記する
.gnav{ float: right; font-size: 0; }
リンクの余白や肉付け
リンク同士に余白を持たせるため、marginを使用します。リンク同士の余白が40pxなので以下のように指定します。
.gnav__link{ display: inline-block; margin-left: 40px; }
margin-rightで指定するとナビゲーションの右側に余計な余白が出てしますので左に余白を持たせました。
ボタンを作る
リンク付きのボタンを作る場合は、aタグに肉付けしよう！
aタグとはユーザーがクリックする部分です。ユーザーがクリックしやすいように文字だけをリンクエリアにするのではなくその周りにもクリック領域を設けてあげましょう。
aタグを使う上での注意点
・aタグには各ブラウザで色がされているため直接指定しないと色が変わらない。
・aタグの初期値は、display: inline。
初期値がdisplay: inlineの要素は、paddingやmarginの指定ができませんので肉付け前に、display: blockを指定しましょう！
aタグに毎回色指定は面倒くさいという方は、以下の記事が良さそうですので参考にしてみてください。
> 参考リンク
上記の注意点を考慮して余白や色などを調整します。
.gnav__link a{ display: block; padding: 17px 0; font-size: 14px; color: #74859f; letter-spacing: 0.2rem; }
親要素でfont-size: 0を使っているので、子要素もフォントサイズが０になっているので、フォントサイズを14pxで指定しました。また、文字間をletter-spacing: 0.2remで調整し、色をcolor: #74859fで指定しています
ヘッダー完成コード
[html]
<div class="header"> <h1 class="logo"><a href="./"><img src="./img/logo.png" alt=""></a></h1> <div class="gnav"> <div class="gnav__link"><a href="#about">ABOUT</a></div> <div class="gnav__link"><a href="#menu">MENU</a></div> <div class="gnav__link"><a href="#access">ACCESS</a></div> <div class="gnav__link"><a href="#contact">CONTACT</a></div> </div> </div>
[css]
/*-------------------------------------------------------------- PARTS --------------------------------------------------------------*/ /*clearfix*/ .cf{ display: block; } .cf:after{ content: ""; display: block; clear: both; } .cf:before{ content: ""; display: block; clear: both; } /*-------------------------------------------------------------- HEADER --------------------------------------------------------------*/ .header{ width: 1040px; margin: 0 auto; padding: 26px 0 24px; } .logo{ float: left; } .gnav{ float: right; font-size: 0; } .gnav__link{ display: inline-block; margin-left: 40px; } .gnav__link a{ display: block; padding: 17px 0; font-size: 14px; color: #74859f; letter-spacing: 0.2rem; }
メインビジュアルを作成
メインビジュアルは要素の大きさが1040px、そして中央寄せです。.headerの部分と同じ指定を使いましょう！
[html]
<div class="mv"> <img src="./img/mv.jpg" alt="みみぺんカフェのイメージ"> </div>
[css]
.mv{ width: 1040px; margin: 0 auto; }
以上になります！
まとめ
長めの記事になってしまいましたが、いかがでしたでしょうか。少しでも参考になれば幸いです。
HTMLをしっかり使ったコード
[html]
<header class="w__base cf"> <h1 class="logo"><a href="./"><img src="./img/logo.png" alt="MiMiPEN みみぺんカフェ"></a></h1> <nav> <ul class="gnav"> <li><a href="#about">ABOUT</a></li> <li><a href="#menu">MENU</a></li> <li><a href="#access">ACCESS</a></li> <li><a href="#contact">CONTACT</a></li> </ul> </nav> </header> <div class="mv w__base"> <img src="./img/mv.jpg" alt="みみぺんカフェのイメージ"> </div>
[css]
/*-------------------------------------------------------------- PARTS --------------------------------------------------------------*/ /*clearfix*/ .cf{ display: block; } .cf:after{ content: ""; display: block; clear: both; } .cf:before{ content: ""; display: block; clear: both; } /*width*/ .w__base{ width: 1040px; margin: 0 auto; } /*-------------------------------------------------------------- HEADER --------------------------------------------------------------*/ header{ padding: 26px 0 24px; } .logo{ float: left; } nav{ float: right; } .gnav{ font-size: 0; } .gnav li{ display: inline-block; margin-left: 40px; } .gnav li a{ display: block; padding: 17px 0; font-size: 14px; color: #74859f; letter-spacing: 0.2rem; }
使ってるタグの意味
・header：ヘッダーであることを示す
・nav：ナビゲーションであることを示す
・ul：順序のないリストを表示する
・li：リストの項目を記述
先ほどheaderと同じで幅を指定して中央寄せといいました。
同じ指定の場合は使いまわせるようにしておきましょう！これをパーツ化すると言います。
.w__base{ width: 1040px; margin: 0 auto; }
次の記事がこちら↓
blog.mimipen.net
この記事がいいなっと思ったら読者登録をお願いいたします！
【ツイッターでは主に、仕事や技術系の内容をつぶやいています】
技術者の方ともっと繋がりたいっす！お気軽にフォローもお願いします！
かなきち(@kanakichi0801)
かずん(@kazoonLab)
