スタイルシートを使ったカラムレイアウト：シルバーアクセサリー屋の知ったかぶり
ホームページの定番レイアウト、段組の基本について
ホームページ作成のテツガク：シルバーアクセサリー屋のウェブ知識
ホームページのレイアウトの定番といえば段組を使ったものです。
図のように2列の段組で、左側にホームページのメニュー、右側に本文(コンテンツ)を配置したい場合、
どうしますか？
HTMLだけでこのレイアウトを実現しようとすると、フレームやテーブルを使わなければ無理ですが、
スタイルシートを使えば簡単です。
HTMLファイルに書くソースは、
<div id="menu">メニュー</div>
<div id="contents">本文</div>
コレだけです。分かりやすくする為に余計なものは省いてあります。
idと書いてあるのはセレクタです。idの部分はclassを使ってもかまいませんが、
1つのhtmlファイルで一回しか使わないので、classよりもidにしておいた方が分かりやすいと思います。
そしてスタイルシートには、
#menu{position:absolute; top:0px; left:0px; width:(メニューの横幅);}
#contents{margin-left:(メニューの横幅);}
とだけ書けばいいのです。
positionは要素の配置方法を決める属性で、 absoluteを使って絶対位置で指定しています。 topとleftの値を0にして、メニューをブラウザ画面の一番左上に持ってきています。 メニューの横幅は、自分のページに合った数値を入れればよいでしょう。 つまり#menu部分のスタイルシートは、「横幅〜のメニューをブラウザの一番左上に配置する」ということを言っているわけです。
#contentsの部分のスタイルシートは、「本文の左側にメニューが入るように、横幅分だけスペースを空ける」ということを言っています。
スタイルシートの本
XIPはシルバーアクセサリーとジュエリーを販売するだけのネットショップではなく、 宝飾に関連する様々な情報をお届けするホームページです。
シルバーアクセサリーやジュエリー作成の初心者向けに作り方のポイントなどを解説した「虎の巻」
リングやペンダントなどを作るのに必要なツールを画像付きで紹介する「道具図鑑」
シルバーアクセサリーやジュエリーに関する情報交換を行う掲示板「XIP-BBS」
話のネタぐらいにはなるかも？という宝飾やジュエリーに関する「マメ知識と雑学」
他にも、シルバーアクセサリーやジュエリーの作り方を解説した本の紹介や、 宝飾に関する用語を網羅した「用語辞典」などのコンテンツがあります。
大切な人へのプレゼントや、自分へのご褒美などにXIPのシルバーアクセサリーとジュエリーはいかがでしょうか？
シルバーアクセサリーとジュエリーに関する情報はXIPから
汁場は、シルバーアクセサリーを作る人を応援するサイトです。管理人が作ったシルバーアクセサリーを公開しています。 一部のシルバーアクセサリーに関しては、作り方の解説もついています。(といってもごく簡単なものですが) シルバーアクセサリーの作成を始めたばかりの頃に立ち上げたサイトなので、稚拙な箇所が多いですが、 少しでも参考になる部分があれば幸いです。
シルバーアクセサリーとジュエリーに関する情報交換用の掲示板(XIP-BBS)に書き込まれたスレッドの中から、 シルバーアクセサリー作りに役立ちそうなものを抜粋、編集してあるのでそちらもご覧下さい。 世界に一つしかない、自分だけの逸品を手作りで作りませんか？ シルバーアクセサリーの作り方を知りたいなら汁場へ行こう
