HTMLパーツからHTMLタグへ 【サイドバー編】
ども、サンデーアマグラマーNorimakiです。
かなり前に終わったフッター編ですが、その後、メルマガ発行準備
などで、間が開いてしまいました。今回からはサイドバー編です。
例の如くおさらいをしておきましょう。
現在、取り上げているテーマはこちら。
「HTMLに変更を加えることなく、スタイルシートだけを変更する
だけでデザインが変えられるテンプレート」
でもって、HTMLテンプレートを４つのパーツに分けています。
・ヘッダー
・フッター
・サイドバー
・メイン部分
この４つですね。で、今回はサイドバー編。
で、サイドバーは次の要素に分けられます。
・メニュータイトル
・メニュー（リンク）
・コンテンツ（文章等）
・メニュー以外のリンク等（ランキングやリンク等）
こんな感じなんですが、実際はこれ以外の要素もあったりします。
それをどこまで今回の要素として含めるかということは非常に難しい
問題だったりします。
とりあえず今回は上記の要素について考えてみます。
サイドバーは２カラムの場合は１つですが、３カラムの場合は
２つあるので、それらについて範囲を決定する必要があります。
まず、サイドバー全体の範囲を設定するのに、
<div id="Sidebar">～</div>
こんな感じで設定します。で、２つのサイドバーの範囲を設定
するために、上記のタグの中に次のように設定します。
<div id="LeftSidebar">～</div>
<div id="RightSidebar">～</div>
ということで、これらを合わせて次のような感じになります。
<div id="Sidebar">
<div id="LeftSidebar">～</div>
<div id="RightSidebar">～</div>
</div>
．．．．．となるはずですが、これだとちょいとまずいんですよね。
スタイルシートで２カラム、３カラムなどの段組をする場合、Floatなる
もので段組をするんですが、上記のように、２つのサイドバーを１つの
divタグで括ると、面倒な方法を取らなければいけなくなるんですよね。
というか、僕が上手い方法を知らないだけだと思うんですが。
なので、範囲を設定する枠組みについては「メイン部分」と絡めて
説明することにします。なので、今回はちょいと置いておいて下さい。
今回は「今までのやり方ではサイドバー部分は上手く行きませんよ」
ということをご紹介しました。
スタイルシートで段組ってのが面倒くさい部分の１つですね。
HTMLを変えずに、１カラム、２カラム、３カラムをどう使い分けるのか
ということを次回、ある程度整理してご紹介したいと思います。
実は出来るかどうか、現時点ではまだ分かってなかったりします（汗）。
ではでは。
Norimakiでした。
【追記】
この後色々いじってみて、何とかできそうだということになりました。
HTMLパーツからHTMLタグへ 【サイドバー編２】でご紹介して
います。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ
かなり前に終わったフッター編ですが、その後、メルマガ発行準備
などで、間が開いてしまいました。今回からはサイドバー編です。
例の如くおさらいをしておきましょう。
現在、取り上げているテーマはこちら。
「HTMLに変更を加えることなく、スタイルシートだけを変更する
だけでデザインが変えられるテンプレート」
でもって、HTMLテンプレートを４つのパーツに分けています。
・ヘッダー
・フッター
・サイドバー
・メイン部分
この４つですね。で、今回はサイドバー編。
で、サイドバーは次の要素に分けられます。
・メニュータイトル
・メニュー（リンク）
・コンテンツ（文章等）
・メニュー以外のリンク等（ランキングやリンク等）
こんな感じなんですが、実際はこれ以外の要素もあったりします。
それをどこまで今回の要素として含めるかということは非常に難しい
問題だったりします。
とりあえず今回は上記の要素について考えてみます。
サイドバーは２カラムの場合は１つですが、３カラムの場合は
２つあるので、それらについて範囲を決定する必要があります。
まず、サイドバー全体の範囲を設定するのに、
<div id="Sidebar">～</div>
こんな感じで設定します。で、２つのサイドバーの範囲を設定
するために、上記のタグの中に次のように設定します。
<div id="LeftSidebar">～</div>
<div id="RightSidebar">～</div>
ということで、これらを合わせて次のような感じになります。
<div id="Sidebar">
<div id="LeftSidebar">～</div>
<div id="RightSidebar">～</div>
</div>
．．．．．となるはずですが、これだとちょいとまずいんですよね。
スタイルシートで２カラム、３カラムなどの段組をする場合、Floatなる
もので段組をするんですが、上記のように、２つのサイドバーを１つの
divタグで括ると、面倒な方法を取らなければいけなくなるんですよね。
というか、僕が上手い方法を知らないだけだと思うんですが。
なので、範囲を設定する枠組みについては「メイン部分」と絡めて
説明することにします。なので、今回はちょいと置いておいて下さい。
今回は「今までのやり方ではサイドバー部分は上手く行きませんよ」
ということをご紹介しました。
スタイルシートで段組ってのが面倒くさい部分の１つですね。
HTMLを変えずに、１カラム、２カラム、３カラムをどう使い分けるのか
ということを次回、ある程度整理してご紹介したいと思います。
実は出来るかどうか、現時点ではまだ分かってなかったりします（汗）。
ではでは。
Norimakiでした。
【追記】
この後色々いじってみて、何とかできそうだということになりました。
HTMLパーツからHTMLタグへ 【サイドバー編２】でご紹介して
います。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ