CSS HTML Javascript

マークアップ

HTMLでマークアップをしていきます。

  • 全体のマークアップ
  • メニューのマークアップ
  • 中身のコンテンツのマークアップ

全体のマークアップ

・前回まででCSSのファイルとJavaScriptのファイルを読み込むことができたと思います。

・今回はHTMLのマークアップを進めていきたいと思います。

・全体像としてはまず全体をdivで囲みその中にメニューのリストとそれぞれのムニューの内容をコンテンツとして作っていきます。

・まず全体を囲むdivから作っていきましょう。クラス名はcontainerにしていきましょう。

・この中にそれぞれのコンテンツを作っていきます。

メニューのマークアップ

・メニューを作っていきます。

・ulで全体を囲みその中に一つ一つのリストであるliを書いていきます。このときulにはクラスをつけておきましょう。今回はわかりやすいようにmenuでいいでしょう。

・次にulの中にliを書いていきます。3つ作っていき、それぞれサイトの概要、サービス内容、お問い合わせという項目にしていきます。

・さらにクリックができるようにaタグを付けておきましょう。ただページを移動したいわけではないのでhref属性は”#”にしておきましょう。

・こんな感じですね。

   <ul class="menu">

      <li><a href="#">サイトの概要</a></li>

      <li><a href="#">サービス内容</a></li>

      <li><a href="#">お問い合わせ</a></li>

    </ul>

中身のコンテンツのマークアップ

・次に中身のコンテンツをマークアップしていきます。

・これはメニューをクリックしたら所定の位置に現れるコンテンツのことですね。

・これも最初に設定したdivの中で書いていくようにしてください。つまりcontainerの中でmenuの後に書いていきましょう。

・コンテンツについてはsectionタグを使っていきます。

・サイトの概要の中身を書いていきます。今回は簡略化するためにサイトの概要と書いておきます。

・次にクラス名ですがコンテンツなのでcontentとしておきましょう。

・後は他サービス内容よお問い合わせも同様に作っていきコンテンツの内容だけを書き換えてあげればおkです。

・こんな感じですね。

<section class="content">

      サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。

    </section>

    <section class="content">

      サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。

    </section>

    <section class="content">

      お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。

    </section>

・このときコピーしたいコンテンツをドラックしてmacOSの場合はshift + option + 下矢印で同じ内容をコピーすることができます。

・便利な機能なので活用してみてください。

3つのコンテンツができてその下にdivの閉じタグがきていればおkです

-CSS, HTML, Javascript