見出し付箋紙風 (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実験室