てんぽ: CSS切り替えテンプレート

CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

CSS切り替えテンプレート

2006年07月29日(土)

以前から予告していたCSS切り替えによる典型的な段組のパターンを網羅したテンプレート(ようやくブログで試用する段階になりました)。 フォーラムでよく見かける「2カラムを3カラムにしたい(あるいはその逆)」「サイドバーの左右を入れ替えたい」という要望を簡単に実現することができます。 このテンプレではエリア変数の使用は控えめです。

とりあえずHTMLはこんな感じになっています(3カラムのHTMLのケース4)。

<div id="container">
  <h1></h1>
  <p></p>
  <form></form>

  <div id="primary">
     <h2></h2>

  </div>

  <div id="secondary">
    <h2></h2>

  </div>

  <div id="tertiary">
    <h2></h2>

  </div>

  <div id="footer"></div>
</div>

footerがちょっと浮いていて、h2の内容をどうするかというのも検討すべき課題ですが、それはひとまずおいておいて。

このHTMLに対してCSSで三段組の方法を応用して実現します。 フロートとマージン辺の関係に注意しつつ、Netscape7.1とIE6のclearできないバグも考慮します。 2カラムでは2つ目のサイドバーでclearしておくのもポイントです。

基本のスタイルに加えて、レイアウト用のCSS(全10種)を作ったら、それらのうちの1つをJavaScriptを用いて追加で読み込みます。 CSSの切り替えスクリプトをWeb上で探すと以下のようなものが見つかります。

スタイルシート切り替えスクリプト
代替スタイルシートとしてlink要素に記述しなくとも、JavaScriptファイルからCSSを追加で読み込める。OperaやSafariでは正常に動作しない模様。 再配布できる。
Alt Style
sugさん作シンプルなスクリプト。OperaやSafariでも正常に動作する。
Website Options
ページの使いやすさの向上を目的とした機能を持つスクリプト。詳細な設定が可能。

あとは10種のレイアウトすべてに対応できる基本スタイルを洗練させるだけです。ここが一番難しいのですが。

#104
カテゴリ:HTML・CSS
タグ[ CSS JavaScript HTML ]

(-0件)

コメントの投稿

トラックバック(-0件)

http://mb.blog7.fc2.com/tb.php/104-2155ecd0

<<:first-letter擬似要素とかCSS Tipsとか | その ナレーションがなければ…>>

Utilities

おすすめ

セオリー・オブ・スタイルシート (Quick Master of Web Technique)
「ボックスと視覚整形モデル」の詳細な解説が圧巻。→関連記事
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
正しい仕様の解説から実践的なレイアウトテクニックまで網羅。→関連記事
詳解HTML&XHTML&CSS辞典 第3版
信頼できる辞典型解説書の筆頭。

広告

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。