実技　スマートフォンサイト作成実習②

-本日のアジェンダ-

1限目
実技　スマートフォンサイト作成実習②
ページのソースを表示

2限目
実技　スマートフォンサイト作成実習②
ハンバーガーメニューについて

3限目
実技　スマートフォンサイト作成実習②
課題制作

4限目
実技　スマートフォンサイト作成実習②
課題制作

5限目
実技　スマートフォンサイト作成実習②
課題制作

本日のテーマ

他サイトを参考にしましょう

WEB制作では、他サイトからソースを参考にさせて頂くことがよくあります。
※ソースを参考にすることであり、全く同じ見た目で「パクる」とは違います。

google chromeでのソースの見方

• 右クリック＞検証
• 右クリック＞別名で保存
• 右クリック＞ページのソースを表示

下記のページのソースを参考にハンバーガーメニューを作って見ましょう。

CSSでハンバーガーメニュー（ナビゲーションドロワー）の見本

ハンバーガーメニューの解説

メニュー(#global-menu)は、通常見えていて、画面幅960px以下で非表示になります。

#global-menu{
    display:block;
}
@media only screen and (max-width: 960px){
	#global-menu{
		display:none;
	}
}

メニュー(#nav-drawer)は、通常非表示で、画面幅960px以下で表示されます。

#nav-drawer{
    display:none;
}
@media only screen and (max-width: 960px){
	#nav-drawer{
		display:block;
	}
}