【CSS】左に二段重ねてみる

左に二段 (basic5.css)
左にメニューとリンクの2段組。
確認ページ→XHTML+CSS実験室

ボックスの配置はこんな感じ。

メニューとリンクは右寄せ指定。
--------
#menu {
...
float:left;
...
}

#link {
...
float:left;
}
--------

メインは左寄せにする。
#main {
...
float:right /*ここはright*/;
}

確認ページ→XHTML+CSS実験室

【CSS】見出し付箋紙風

見出し付箋紙風 (basic1b.css)
h3タグの表示位置を左にずらしボーダーラインを左だけ太くして付箋紙風にしてみました。
確認ページ→XHTML+CSS実験室

一番上のheaderのところやmenuのところもちょろちょろいじったら。
だんだんいい感じになってきたような気がします。

付箋紙風にするためのポイント。
mainエリアの中のh3タグのスタイルをいろいろ指定してます。

---
#main h3{
width:300px;　<-- 幅は短めに。
position:relative; <-- 本来あるべき場所からの距離で場所を指定する。
right:30px; <-- 右端から30px左にずらしてmainエリアから飛び出させる。
background-color:#FFFFFF; <-- 背景も塗りつぶしとかないと。。mainエリアの境界線が。。
border-style:solid; <-- 境界線はフツウの線で。
border-color:#3300CC; <-- 境界線は青色で。
border-width:thin; <-- 全体は細い線で囲いましょう。
border-left-width:thick; <-- でも左側だけ太い線でね。
}
---

＊枠線の太さは数値でも指定できるみたいです。(30pxとか）

確認ページ→XHTML+CSS実験室

【CSS】ベーシック1のSnapShot

ベーシック1 (basic1.css)
確認ページ→XHTML+CSS実験室

右側の固まりにも回り込みを指定しないとこうなるらしい。

Internet Explorer6.0だとこんな。

Firefoxだとこんな感じ。

ベーシック1 (basic1.css)
確認ページ→XHTML+CSS実験室

【CSS】ベーシック1

ベーシック1 (basic1.css)
確認ページ→XHTML+CSS実験室

ごくごくオーソドックスなタイトル＋縦2段の配置。

floatプロパティでメニューを左側に固定して。
--
#menu {
width: 20%;　 <-- 全体の20%の幅に指定。
float: left;　<-- これがポイント
･････
}
--

次の要素（メイン）を右側にくるようにしました。
floatプロパティもpositionプロパティも特に指定してません。
--
#main {
width:100%; <-- ここが要注意。
･････
}
--

リンクのところで回り込みをクリアして全体を使うように指定。
--
#link {
･････
clear:both; <-- 回り込みをクリア
width:100%;
･････
}
--

何がいけないのかわかりませんがFirefoxでは目も当てられません。
ネットスケープは未確認。

確認ページ→XHTML+CSS実験室

スタイルシートの練習

スタイルシート練習用ページを作っちゃいました。
→XHTML+CSS実験室

1つのXHTMLファイルでスタイルシートを切り替えていろんなデザインで見てみよう。

という思いつきです。

最初にレイアウトとか配色とか考えるのが面白くて好きなんだけど。
それってめったにできないんだよね。。
スタイルシートもいろいろ試してみたいと思ってるんだけど。
公開しない前提だとイマイチ本気になれないんだよなぁ。。

という私の欲求不満のはけ口。

「いろんな人に読んでもらうためのページ」ではないので。
興味のない人も多いかとは思いますが。

スタイルシートを切り替えてみて楽しんでもらえるとうれしいです。