サイトにサイドバーを追加する方法と注意したい事

公開：2019.09.17 更新：2019.09.17

こんにちは、木彫り猫です。

サイト制作に欠かせないサイドバー。いくらスマホ主流になったといっても、さすがにぐらいには用意しておきたいものですよね？

今回は、そんなサイドバーの追加方法からレイアウトのちょっとした計算方法まで解説していこうと思います。

追加方法

サイドバーを作る方法はとても簡単です。

HTMLファイルの<main>タグの外側に<aside>タグを追加するだけでOKです。<aside>タグを開いてから閉じるまでが、サイドバーの要素になります。

まあ作っただけではもちろんスタイリングはされないので、そこは自分でfloatを使うなりしてやるしかないですね。

そういう面もあって確かに、いまだに<main>や<aside>を使わずに<div>要素がごちゃごちゃしてるサイトもありますが、<main>と<aside>はHTML5の新規追加要素でありGoogleが推奨しているタグですので、正しく使ってあげれば、SEO面でも効果を発揮するでしょう。

サイドバーの定番である、プロフィールを追加したイメージがこちらです。内容は……大事ですね。

前準備

さて、前例のイメージが最たる証ですが、サイドバーはいきなりつけようと思ってもろくなことになりません。

今回はそこも解説していこうと思います。

表示崩れ

そもそもこれはサイドバーに限った話ではないですが、コードを削ったり、加えたりという作業をするともちろんサイトのレイアウトが崩れます。もし開発中にお客さんがサイトを見に来たら、「なんだこれ！？」状態でしょう。

これを防ぐには、[display:none] を使いましょう！

このCSSプロパティは対象要素を存在しないことにできます。これをあらかじめ書いておいて、開発する時にだけChromeの検証機能で、displayプロパティを外せばいいのです。

これで誰に迷惑を掛けることもなく開発にいそしめますね！

レイアウト計算

サイドバーを作るには、そのサイズ比の計算も忘れてはいけません。

端末サイズによらずレイアウトを組むには、CSSの単位を%にするのがいいでしょう。調べたところ特に多いのはメイン：サイドが33%：66%の比率のサイトでした。

自分で作る時に参考にしてみてください。

まとめ

今回は、サイドバーについて解説してみました。

ちなみに当サイトのサイドバーは絶賛開発中ですので、完成したらつくことでしょう。まあ、いつになるかは分かりませんが……。

それでは！

関連する記事

関連記事エリアをプラグイン使って導入してみる