サイドバーの簡単な作り方2通り・HTMLとCSSの設定方法

サイドバーの作り方を簡単に教えます。コピペして使えるようにHTMLとCSSのソースを示します。 フレームを使う方法と使わない方法の両方について解説します。

フレームを使ったサイドバーの作り方

まずはフレームを使った方法から。 iframeタグを使ってサイドバーを実装します。この方法は共通部分であるサイドバーを外部ファイルにするので管理がしやすいです。 ホームページ初心者の方にお勧めします。

フレームありのHTMLの設定

HTMLのbody部分にiframeタグ(下のコード)をコピペしてください。

<iframe id="side" scrolling="no" frameborder="no" src="sidebar.html">IFRAME 機能を有効にして下さい</iframe>

フレームありのCSSの設定

共通CSSに下のコードをコピペしてください。数値は好きな値に直してください。 これは右サイドバーの場合です。サイドバーを左側にしたければrightをleftにしてください。

#side{width:280px;height:900px;float:right;margin-bottom:20px;}

次もCSSです。 フッターにはclear:both;を設定しましょう。これがないとフッターの位置がおかしくなります。 常識ですが念のため。

#footer{clear:both;}

sidebar.htmlの設定

読み込まれるサイドバーを作ります。基本的には普通のページと同じです。 自己紹介(プロフィール)やおすすめ記事へのリンクを貼っておきましょう。 sidebar.htmlはiframeタグのsrcで設定したファイルです。もちろん自分で好きな名前に変えることができます。

<a href="test.html" target="_parent">サイドバーからのリンク</a>

サイドバーからのリンクには、target="_parent"を忘れないでください。これがないとフレームの中だけがリンク先にジャンプします。

フレームを使わないサイドバーの作り方

フレームを使わないサイドバーの実装方法もあります。全てのページにサイドバーを直接書き込む方法です。

メリットはページの読み込みが早いことです。デメリットは手動でやった場合にコピペがめんどくさいことです。 当サイトは管理人が自作したCMSを使っているのでページにサイドバーを直接書き込んでいますが、普通のレンタルサーバーで運用するならフレームを使ったほうが楽です。

フレームなしのCSSの設定

以下はCSSのコードです。数値は好きな値に直してください。

#main{display:inline-block;vertical-align:top;width:700px;}
@media screen and (min-width: 1024px){#side{display:inline-block;vertical-align:top;width:340px;}}
@media screen and (max-width: 1023px){#side{display:none;}}

難しいことはやっていません。display:inline-block;とvertical-align:top;を使うと要素を横に並べることができます。 これを利用してサイドバーを作っているだけです。widthを設定しないとうまくいかないので注意しましょう。

「media screen」で「レスポンシブWEBデザイン」に対応しよう

CSS3より導入されたメディアクエリ(Media Queries)を使います。 上のコードを見てもらえれば何となく分かると思いますがユーザーの環境に合わせてスタイルを変えています。 サンプルでは画面の横幅が1023px以下の時にサイドバーを消しています。

フレームなしのHTMLの設定

HTMLは記事の本文の部分とサイドバーの部分を並べて書くだけでよいです。簡単ですね。

<div id="main"></div>
<div id="side"></div>


Google+ はてブ

こちらの記事もどうぞ

かつてMinerGateで掘れた仮想通貨まとめ
仮想通貨のマイニングプール、MinerGateでは様々な種類のコインをマイニングできます。中にはほとんど知名度がないコインもあり、持っていると値上がり(又は上場...この記事を読む

動画の一部分だけを切り抜いて保存できるフリーソフト「Moo0 動画カッター」
自分で撮影した映像などを編集する時に、無料の動画編集ソフトを使っている人は多いと思います。動画編集ソフトは、動画と動画をつなぐことが出来たり、文字を挿...この記事を読む

無料で使えるおすすめ画像編集ソフトまとめ
自分で撮影した写真をカッコよくアップしたいとき、美肌に見せたいとき、優秀な画像編集ソフトが有るととても便利です。最近の画像編集ソフトは、操作もとてもシ...この記事を読む

画面キャプチャーソフト「WinShot」
私がオススメするフリーソフトは画面キャプチャーソフトの「WinShot」です。画面のキャプチャーする為のソフトなのですが、Windows 95・98・Me・NT・2000・XPに対...この記事を読む

「フリービデオボリュームブースター」でビデオファイルの音量を増やそう
ビデオ撮影したけどボリュームが小さいどうしよう?YouTubeにアップロードしたり、ブログやツイッターで紹介する目的で、ビデオ撮影をする人はますます増えていま...この記事を読む

簡単にゲームが作れる無料オーサリングツール「ライブメーカー」
…――ライブメーカー。有限会社ヒューマンバランスが提供するフリーソフトです。ライブメーカーはお手軽にアドベンチャーゲームやノベルゲームが作れるオーサリ...この記事を読む

温度でファンの回転速度を調整するソフト「SpeedFan」
最近映画を観るようになったせいで、PCの使用時間が極端に増えました。電源を落としている時間がほとんど無いくらいの状態です。長時間使っているとキーボードや...この記事を読む

おすすめ無料テキストエディタまとめ
パソコンで打ち込んだ文字をファイル化して保存したり、中身を編集したりできるのは、プログラムであるテキストエディタのおかげです。Windowsの場合は基本搭載さ...この記事を読む

CD・DVD両対応のライティングソフト「CDBurnerXP」
CD-R やDVD-R などのメディアを使ってファイルをやり取りする際、あなたはどのようなライティング・ソフトを使っているでしょうか。これらディスク媒体のメディア...この記事を読む

音程や速度を変更できるフリーソフト「聞々ハヤえもん」
「聞々ハヤえもん」は音楽の音程や速度を自然に変えられるオススメのフリーソフトです。有料であってもおかしくない様々な優れた機能を備えています。ソフトを起...この記事を読む

管理人について

金子

プログラミング歴9年、欲しいソフトは全部C言語で自作。C以外にもアセンブラ、JavaScript、VBScript、HTML、CSSが使える。

趣味はプログラミング、パソコンの改造、囲碁。モスバーガーと日高屋が大好き。最近、仮想通貨のマイニングにハマっている。

おすすめ

人気記事