CSS HTML Javascript

bodyの要素を書いていく

HTMLでマークアップをして、画面の大まかな見た目を作っていきます。

  • logoの作成
  • ハンバーガーメニューの作成
  • main要素の作成

logoの作成

・前回まででiconを取得することができたので今回はHTMLで必要な要素をマークアップし大まかな見た目を完成させていきます。

マテリアルアイコンを使う

・今回はモバイルファーストで作成していくのでブラウザの画面は小さめから作っていきます。

・ヘッダー要素にはロゴとアイコンをつけて下にはメインになる本文を書いていくような形に作っていくので、ロゴ、メニューアイコン、メインの本文という順番で空いていきます。

・またヘッダーになるロゴの部分とメニューアイコンはフレックスボックスで横並ぶにしたいのでdivタグで作っていきたいと思います。

・まずheaderタグを書いたあげてその中にlogoとなる部分を作ります。divタグで囲ってあげて中にh1タグでタイトルを書いた行きましょう。

・次にheaderの中にもう一つメニューアイコンを入れたいのでdivタグを書いてあげてその中に前回取得したmenuアイコンのリンクを入れてあげます。

ハンバーガーメニューの作成

・今ロゴとメニューのdivタグがそれぞれできてheaderの中に入っていると思います。

・ではそれぞれのdivを使いやすいようにclass名をつけていきます。なんでもいいのですが今回はロゴの方にはlogoとアイコンの方にはsp-menuと名前をつけてあげます。

・最後にアイコンはJavaScriptで使うので要素を取得しやすいようにid属性もつけておきましょう。アイコン本体の方にid属性を付け名前をopenとしておきます。

・closeのアイコンはとりあえずまだ使わないのでコメントとしておいておきましょう。

main要素の作成

・あとは本来のwebサイトを想定して本文も作っておきましょう。

mainタグを使ってその中にダミーテキストを書いていきます。テキストはpタグを使いましょう。

-CSS, HTML, Javascript