この記事では、前回の記事で制作したヘッダーデザインをレスポンシブ対応して、スマホで綺麗に表示する手順を紹介します。
ヘッダーだけだと寂しいので、前回の記事の後半で紹介した、全画面デザインのファーストビューをレスポンシブ化していきます。
今回のゴールはこちら
サンプルページ
レスポンシブイメージ
前回の記事を見てない方は、下記リンク（前回記事）からソースをコピペしておくとスムーズに読み進める事が出来ます。対象の全ソースは記事後半にあります。
それでは早速レスポンシブ対応していきましょう。
レスポンシブ化する大まかな手順
大まかな概要は下記の通りです。
ひとつずつ丁寧に説明していきますので、しっかり自分のモノにしていってくださいね。
- スマホサイズでPCメニューを非表示にする。
- ハンバーガーメニューボタンを設置
- スマホ用メニューを追加
- スマホメニューのアニメーション追加
- 動作確認
ハンバーガーメニューをタップすると、SPナビゲーションが表示する仕組みは「jQuery」を使って実装します。
初学者の方や、これからウェブデザインを始める方にとって、難しいかもしれませんが、わずか数行ですので諦めずにチャレンジしてみてください。
細切れにソースを見るのが面倒は人は、記事後半に全ソース載せてるので、そちらをご覧ください。
それではいきましょう
スマホサイズでPCメニューを非表示にする
メディアクエリでブレイクポイントを設定する
いきなり難しい言葉が出てきましたが、心配いりません。
ブラウザの横幅が「何ピクセル以下」になったら「スマホ用のCSS」が効くようにするかを決めているだけです。
今回は、ブラウザの横幅が「640px以下」の時に、スマホ用のCSSを効くようにしたいので、次のように指定します。
コードは、前回記事の後半に記載してあるCSSの続きから書いてください。
@media screen and (max-width: 640px) {
ここにスマホ用のCSSを書いていきます
}
ココでつまずきそうなら「ただの決まり文句」だと思って、ひとまずコピペして次に進みましょう。
PC用のナビゲーションメニューを非表示にする
スマホサイズの時は、PCメニューは不要なので「display: none;」で非表示にしましょう。
@media screen and (max-width: 640px) {
.pc-nav {
display: none;
}
}
試しにブラウザの横幅を小さくしてみてください。PCナビが非表示になれば成功です。
ハンバーガーメニューを作る
それでは、スマホメニューの定番、ハンバーガーメニューボタンを作ります。良く見かける「三本線」のあれです。
ただ、少しモダンな雰囲気にしたいので、3つ目の線は少し短めにしましょう。
HTMLにハンバーガーメニューのコードを追加する
まずは、3本線のメニューボタンを入れるボックスを作ります。
実際にボックスは表示されないので想像しにくいですよね。次の画像の黄色の点線のように、3本線を入れるボックス（箱）を作るイメージすです。
ボックスには「id」で「hamburger」という名前を指定しておきましょう。
そしてその中に「span」タグを一つ追加します。この「span」タグは、3本線の真ん中の線になります。
こちらもCSSと同じく、前回記事の後半で紹介したHTMLに追加していきます。
<header>
<h1>
<a href="/">RICO NOTES</a>
</h1>
<nav class="pc-nav">
<ul>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICE</a></li>
<li><a href="#">COMPANY</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
<div id="hamburger">
<span></span>
</div>
</header>
CSSでハンバーガーメニューの見た目を整える
さて、CSSでハンバーガーメニューボタンを綺麗に整えましょう。
CSSのコードは「PCメニューを非表示にするコード」の下に追加していきます。
まずハンバーガーメニューを入れるボックスの「大きさ」や「配置を」決めます。
横幅は「30px」、高さは「25px」にしましょう。
#hamburger {
position: relative;
display: block;
width: 30px;
height: 25px;
margin: 0 0 0 auto;
}
注目ポイント2つ
1つ目は「position: relative;」
2つ目は「margin」の値に設定した「auto」
親要素の「header」に「display: flex;」が指定してある場合、子要素はスペースを開けたい方向のマージンに「auto」を指定すると、ググっと押し出されます。
左側にマージン「auto」を指定したので、これでハンバーガーメニューはググっと右端まで押し出されます。
ハンガーガーメニューの真ん中の線をデザイン
span要素にCSSを当てて、高さ2pxの白い線を作りましょう。
配置はハンガーメニューの真ん中。コードは次の通りです。
#hamburger span {
position: absolute;
top: 50%;
left: 0;
display: block;
width: 100%;
height: 2px;
background-color: #fff;
transform: translateY(-50%);
}
注目ポイントは2つ
1つ目は「position: absolute;」
2つ目は「transform: translateY(-50%);」
ハンガーガーメニューの線の高さは「2px」、ポジションで「top: 50%;」を指定しただけでは、中心から「2px」下にずれている状態です。
「translateY(-50%);」を指定すると、その要素の高さの「50％分」を上にズラす事ができます。spanの高さが2pxなので、半分の高さ1px上にズレてくれる分けです。
テキストで理解は難しいので、次の画像で把握してもらえると。
ハンバーガーメニューの上線と下線を作る
擬似要素「::before」「::after」を使い、上線と下線を作っていきます。
擬似要素とは、要素の「最初」と「最後」に「子要素」を追加する事ができるプロパティーです。ウェブ制作で頻繁に登場するので、感覚だけでも掴んでおきましょう。
- 「::before」がハンバーガーメニューの上線
- 「::after」がハンバーガーメニューの下線
になります。コードはこちらです。
#hamburger::before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background-color: #fff; } #hamburger::after { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 70%; height: 2px; background-color: #fff; }
重複しているコードが多く、まとめて書くのがセオリーですが、分かりやすいように別々に書いています。
注目ポイントは3つ
1つ目は「content: ‘ ‘;」
擬似要素「::before」「::after」は、「content」にテキストや記号を追加して、文字や装飾を加えるというのがオーソドックスな使い方で、シングルクォーテーションの間に「テキスト」なり「記号」なりを記載して、要素の前後にコンテンツを追加する事ができます。
今回は、文字や記号を表示する分けではないので、シングルクォーテーションの間は空「’ ‘」にしましょう。その他のコードは、真ん中の線「span」に当てたCSSとほぼ同じです。
2つ目は「display: block;」
3つ目は「width: 70%;」
ちょっと難しく感じたかもしれませんが、定番な使い方なので、ゆっくりでも慣れていきましょう。
スマホ用のメニュー項目を作成
次に、ハンバーガーメニューをタップしたら表示される、スマホ用のナビゲーションを作っていきます。
HTMLでスマホのナビゲーションをコーディング
コードは次の通りです。
「PCメニュー」と「ハンバーガーメニュー」の間に追加します。
<nav class="sp-nav">
<ul>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICE</a></li>
<li><a href="#">COMPANY</a></li>
<li><a href="#">CONTACT</a></li>
<li class="close"><span>閉じる</span></li>
</ul>
</nav>
スマホのナビゲーションをCSSで装飾
CSSのコード量が多く難しく見えますが、ひとつずつ見ていくとシンプルです。
ナビメニューは今風に、全画面で表示したいので「高さ」は「100vh」を指定しています。
.sp-nav {
z-index: 1;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
display: block;
width: 100%;
background: rgba(0, 0, 0, .8);
transition: all .2s ease-in-out;
}
注目ポイントは2つ
1つ目は「z-index: 1;」
前面に表示したいので「1」を指定します。
2つ目は「transition」
今回は「ハンバーガーメニュー」と「閉じる」を押した時に、ナビメニューを「表示・非表示」するアニメーションに利用します。
詳細説明をすると、非常に長くなるため、表示・非表示を「0.2秒」でアニメーションさせるコード、と簡単に解釈しておいてください。
スマホメニュー項目の見た目を調整
スマホメニューの項目を綺麗に整えいきましょう。
閉じるボタン一旦後回しにして各項目を装飾していきましょう。
.sp-nav ul {
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
.sp-nav li {
margin: 0;
padding: 0;
}
.sp-nav li span {
font-size: 15px;
color: #fff;
}
.sp-nav li a, .sp-nav li span {
display: block;
padding: 20px 0;
}
注目ポイントは2つ
1つ目は「FlexBox」
デフォルトでは、子要素が横並びになるように「flex-direction」に「row」が設定されているので、「column」を指定し、縦並びにします。
次に親要素の「上下中央」に配置するために「justify-content」「align-items」には、どちらも「center」を指定しましょう。
2つ目は「padding」
各項目の「a」タグと、閉じるボタンの「span」に「padding」を指定し余白をしっかり確保しましょう。
閉じるボタンを装飾する
考え方はシンプルです。
擬似要素「::before」「::after」を使い、2本の線を作成。それぞれ逆方向に45度ずつ傾けているだけです。
手順は、まず「バツ印」の配置の基準にする「.close」クラスに「position: relative;」を指定し、「before」「after」でバツ印を配置します。
コードは次の通りです。
/*基準となるli要素*/
.sp-nav .close {
position: relative;
padding-left: 20px;
}
/*バツ印線1*/
.sp-nav .close::before {
content: '';
position: absolute;
top: 50%;
left: 0;
display: block;
width: 16px;
height: 1px;
background: #fff;
transform: rotate( 45deg );
}
/*バツ印線2*/
.sp-nav .close::after {
content: '';
position: absolute;
top: 50%;
left: 0;
display: block;
width: 16px;
height: 1px;
background: #fff;
transform: rotate( -45deg );
}
擬似要素それぞれに「position: absolute;」を指定し、「top: 50%;」のところに配置。ここまでは、ハンバーガーメニューの線と同じです。
ここから「45度ずつ傾けて」バツ印を作っていきます。
「rotate」はその名の通り、要素を回転させる事ができます。
それぞれ45度ずつ、回転させたいので
- beforeには時計回り45度「45deg」を指定
- afterには反時計回り45度「-45deg」を指定
このままだと「バツ印」とテキストの「閉じる」が、重なってしまうので、親要素の「.close」クラスに「padding」でスペースを確保しましょう。
スマホメニューを一旦非表示にする
ハンバーガーメニューをタップするまでは「ナビゲーション」は消しておきたいので、一旦非表示にしましょう。
「.sp-nav」クラスに、「opacity」と「位置」を変更するコードを追加します。
.sp-nav {
z-index: 1;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
display: block;
width: 100%;
background: rgba(0, 0, 0, .8);
transition: all .2s ease-in-out;
opacity: 0;
transform: translateY(-100%);
}
translateY(-100%)
またtransformが出てきました。ハンバーガーメニューの真ん中の線の時と同様ですね。
今回は要素の「高さ」の「100%分」上にズラすという解釈です。
「opacity」に「0」を指定したので、これでスマホメニューは「透明かつ、画面の外に出ている」状態になります。
jQueryでメニューのON・OFFを制御する
まずjQuery本体を読み込みます
今回はCDN版を使います。
下のURLから公式サイトにアクセスし、下記画像の青枠の箇所をクリックしてください。モーダルが立ち上がるので「バージョン2.2.4」のコードをコピーして「index.html」のheadにペーストしましょう。
そしてそのすぐ下に、スマホナビゲーションの「表示・非表示を制御する」コードを書きます。コードは次の通りです。
<head>の閉じタグの直前に追加しましょう。
<!-- jQueryの読み込み -->
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<!-- スマホナビの表示・非表示 -->
<script>
$(function() {
const hum = $('#hamburger, .close')
const nav = $('.sp-nav')
hum.on('click', function(){
nav.toggleClass('toggle');
});
});
</script>
jQueryの基本は「どの要素？」に「何を？」する
という指示を書くのが定番になります。まず前半の次のコードを見てみましょう。
どの要素？の部分を変数に入れる
const hum = $('#hamburger, .close')
const nav = $('.sp-nav')
非常に長くなるので、詳しい説明は省きますが
変数 = 数値やコード入れる箱
と解釈してください。ものすごく雑な定義ですが、今回の趣旨はココではないのでこの程度で大丈夫です。
上のコードで「箱」にあたるのは
- hum
- nav
humとnavにそれぞれ、「要素」を格納していきます。
- humには「ハンバーガーメニュー」と「閉じるボタン」
- navには「スマホのナビメニュー」
スマホメニューを表示・非表示する処理を書く
コードの後半部分です。
次は「何を？」させるかを書いていきます。
hum.on('click', function(){
nav.toggleClass('toggle');
});
先ほど作った箱（変数）を使いつつ、処理を書いていきます。
ここは逆に言葉で書くととてもシンプルです。
「navに入れた要素」に「toggleというclass」を「足したり・消したり」する
こんな動作になります。
jQueryの書き方については、趣旨がブレるのでまた別の記事で詳しく説明していきますね。
何となくでも、コードの流れを把握しておいてもらえれば大丈夫です。
もう終盤です、頑張りましょう。
toggleClass用のclassを書く
ひとつ前に出てきた
「toggleというclass」を「足したり・消したり」するで出たきた
「toggle」というクラスをCSSに書いていきましょう。
.toggle {
transform: translateY( 0 );
opacity: 1;
}
先ほどのjQueryのコードは
このクラスをナビメニューに「付けたり」「削除」して、表示・非表示をコントロールするためのモノです。
「opacity」に「1」
を指定して、位置と透明度をリセットしています。
メインビジュアルを微修正して完成
あとは、メインビジュアルの両サイドに余白を少し足して、文字サイズを調整して完成です。
.main-visual {
padding: 0 4%;
}
h2 {
line-height: 1.6;
text-align: center;
}
以上で完成です。
上手く動作してますか？
念のタメ全コードを載せておきます。
別記事でさらにフェードインを加えてお洒落にする方法も解説しているので、ぜひご覧ください。
HTMLとCSSで作るレスポンシブヘッダーの全コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex,nofollow">
<title>HTMLベーステンプレート</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<script>
$(function() {
const hum = $('#hamburger, .close')
const nav = $('.sp-nav')
hum.on('click', function(){
nav.toggleClass('toggle');
});
});
</script>
</head>
<body>
<header>
<h1>
<a href="/">RICO NOTES</a>
</h1>
<nav class="pc-nav">
<ul>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICE</a></li>
<li><a href="#">COMPANY</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
<nav class="sp-nav">
<ul>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICE</a></li>
<li><a href="#">COMPANY</a></li>
<li><a href="#">CONTACT</a></li>
<li class="close"><span>閉じる</span></li>
</ul>
</nav>
<div id="hamburger">
<span></span>
</div>
</header>
<div class="main-visual">
<h2>WEB DESIGN <span>IS</span> YOUR FUTURE</h2>
</div>
</body>
</html>
@charset "utf-8";
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #e6e6e6;
letter-spacing : 0.2em;
}
header {
padding: 30px 4% 10px;
position: fixed;
top: 0;
width: 100%;
background-color: transparent;
display: flex;
align-items: center;
}
h1 {
margin: 0; padding: 0;
font-size: 20px;
}
a {
text-decoration: none;
color: #fff;
}
nav {
margin: 0 0 0 auto;
}
ul {
list-style: none;
margin: 0;
display: flex;
}
li {
margin: 0 0 0 15px;
font-size: 14px;
}
.main-visual {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: url('main_visual.jpg') top center / cover no-repeat;
}
h2 {
margin: 0;
font-size: 30px;
font-weight: normal;
color: #fff;
}
.sp-nav {
display: none;
}
@media screen and (max-width: 640px) {
.pc-nav {
display: none;
}
.sp-nav {
z-index: 1;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
display: block;
width: 100%;
background: rgba(0, 0, 0, .8);
opacity: 0;
transform: translateY(-100%);
transition: all .2s ease-in-out;
}
#hamburger {
position: relative;
display: block;
width: 30px;
height: 25px;
margin: 0 0 0 auto;
}
#hamburger span {
position: absolute;
top: 50%;
left: 0;
display: block;
width: 100%;
height: 2px;
background-color: #fff;
transform: translateY(-50%);
}
#hamburger::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background-color: #fff;
}
#hamburger::after {
content: '';
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 70%;
height: 2px;
background-color: #fff;
}
/*スマホメニュー*/
.sp-nav ul {
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
.sp-nav li {
margin: 0;
padding: 0;
}
.sp-nav li span {
font-size: 15px;
color: #fff;
}
.sp-nav li a, .sp-nav li span {
display: block;
padding: 20px 0;
}
/*-閉じるアイコンー*/
.sp-nav .close {
position: relative;
padding-left: 20px;
}
.sp-nav .close::before {
content: '';
position: absolute;
top: 50%;
left: 0;
display: block;
width: 16px;
height: 1px;
background: #fff;
transform: rotate( 45deg );
}
.sp-nav .close::after {
content: '';
position: absolute;
top: 50%;
left: 0;
display: block;
width: 16px;
height: 1px;
background: #fff;
transform: rotate( -45deg );
}
.toggle {
transform: translateY( 0 );
opacity: 1;
}
.main-visual {
padding: 0 4%;
}
h2 {
line-height: 1.6;
text-align: center;
}
}
まとめ
今回紹介した、HTMLとCSSで作るレスポンシブヘッダーは、とても多くのサイト制作で活躍してくれる、ベーシックなものです。
初学者の方や、初めてweb制作をする方にとっては、つまずく箇所も多いかと思います。
この記事でどうしても分からない部分があれば、お問い合わせください。
もう少し分かり易く、冗長的にならずに説明できればよかったんですが、私も記事の書き方をもっと勉強していきますね。
かなり長くなってしまいましたが、少しでもみなさまのお役に立てていれば幸いです。
それでは！
