// ]]> ウィンドウサイズを変えてみるとわかりますがレスポンシブ対応になっています。まずは、HTMLを見ていきましょう。, headerタグ > navタグ > ulタグ > liタグで5つのナビを記述しています。, liタグに対してfloat:left;で左寄せにして、装飾のためにborderを入れています。マウスオーバーで背景色を変更。, こちらも、サンプル1同様に、ウィンドウサイズを変えてみるとわかりますがレスポンシブ対応になっています。, こちらは、navの横幅が1000pxで、ボタンがそれぞれ200pxの幅に固定されており、それぞれに違う背景画像を指定するために、それぞれのliタグにid名を付けています。そして、マウスオーバーで、背景画像を上下に移動することでアクションを見せるため、ボタンの背景画像は下のような画像を利用しています。, 見えている部分の高さが40pxで、マウスオーバーした際に画像をY方向に-40px移動。, こちらに関しては、隠しテキストを利用した記述をしているので、Googleのガイドラインに触れるかどうか微妙なところなので自己責任でこの記述方法はしてください。. メニュー5(HTMLテンプレート) 1ページParallaxテンプレートとしても使えます。 デモサイト. プログラミング, 年齢:32歳 2児の父 取得資格:第2種電気工事士 工事担任者AI.DD総合 .com Masterアドバンス☆☆ 家電エンジニアAV/生活総合 ホームページの部品作り方コーナー、今回はトップビューの左右にくっつくようなヘッダーサイドメニューとなります。, 写真はこちらを使用。 HTMLとCSSによるヘッダーサイドメニューの作り方 . [CDATA[ // 要素は、メインコンテンツとの関連性が希薄でメインコンテンツから 切り離すことが可能なセクションを表します。いわゆる「サイドバー」や、メインの記事内のコラムの部分に頻繁に用いられます。サイドバーにおいて用語の定義、あるいは関連性を持つ広告、著作者に関する情報、Web アプリケーション、ブログのプロフィール情報や関連リンクなどの情報に用います。, aside 要素の一番ありがちな誤解として、「これはサイドバーを表す要素なんだ」というのがあると思います(自分も昔そう思ってた)。仕様書に「しばしばサイドバーとして表示される」と書いていますが、この場合のsidebarというのは新聞などの印刷物における「補足記事」のことで、Webページの構造物としての「サイドバー」の事を明確に示しているわけではないのです。, ではどこで使うのかという話ですが、aside 要素は「まわりのコンテンツ(親セクション)とあまり関連性がなくてそこまで重要じゃないけど、ちょっとは関係している補足的な」コンテンツに対して利用します。, 「まわりのコンテンツ」というのが大事で、たとえば article 要素の中にある aside 要素は、そのarticleと関連づけて考えることができます。上の図では、ブログ記事の本文(article)の中にある「あんまり関係ないけど補足として入れておきたいセクション」を aside で囲っています。, またarticleの外にあるサイドバーの広告は、そのまわりのコンテンツ(親セクション=body要素=ページ全体)とやや関連性があるが重要ではないコンテンツとしてasideを用いています。, 具体的にどういったコンテンツに aside 要素を使えば良いのか、例をいくつか挙げてみました。, ブログにおいてたいていの場合サイドバーは重要ではなく、かつページ全体とやや関連性があるコンテンツだと思うので、その場合はサイドバー全体を aside 要素にするのはOKだと思います。ただし、aside 要素をスタイリングのためだけに用いるべきではありません。, また、サイドバーの中にページと全く関係ないようなコンテンツが含まれる場合は、サイドバー全体をasideで囲むのはやめて、関係あるコンテンツにのみ用いるべきです。, 広告もaside的なコンテンツでしょう。ただ、ページと全く関係ないような広告・・・たとえば、テック系のブログに表示されるギャンブル関係の広告などは関連性のあるコンテンツとは言えないかもしれません。, article内にふさわしい aside 要素としては、補足的なコンテンツ(コラム)が挙げられます。たとえば、、, ↑ これはこのブログ記事において補足的なコンテンツなので、asideで囲んでいます。ほかにも記事本文における補足的なコンテンツ、たとえば「用語の解説」とか「あとがき」的なやつもarticle内のasideとしてふさわしそうです。重要でなければですが。, Spuit(スポイト)は、奈良県在住のフロントエンドエンジニアによる個人Web制作スタジオです。高品質かつ低価格・短納期なコーディング代行サービスなどを行っています。, HTML5でつまずきやすいasideとsectionの使い方 | KAYAC DESIGNER’S BLOG. 趣味:ゲーム 読書 TV鑑賞(お笑い) 音楽鑑賞 資格集め(電気系)家電巡り 釣り 等  ある程度WEBサイトらしくなってきましたが、「ナビゲーション」を設置する事によって利便性と見栄えが良くなります。, 今回はPC画面のグローバルナビゲーションと、スマホ画面のサイドナビゲーションを記述していきたいと思います。, header要素内、メインビジュアルになっているheader classsの下に