Hobby > デザイン実験室 > Arrange

ここでは要素にたいして指定できるfloatやpositionプロパティを使った表現プロパティの組み合わせや配置の仕方で実現できるものを扱っています.

Arrangeページのスタイルシート
arrange.css(utf-8の読み書きできるエディタが必要です)

角丸ボックス1


四隅や背景に画像を指定することで角丸ボックスを表現する手法がよく取られますが,この角丸ボックスは5つのボックスを位置をずらして配置することで表現しています.画像が無くても実現できるのがいいところですが,中に入れる要素の大きさや角丸の細かさなどを計算して位置指定をしなければならないなどのデメリットもあります.作っておいてなんですが,たぶん画像を用意した方が楽です.

対応ブラウザ:IE6,IE7,Firefox2,Safari3,Opera9

[XHTML+CSS]

jump to pagetop

角丸ボックス2

角丸ボックス

角丸ボックス


DIVを並べまくった角丸ボックス1とは作り方が違って,インライン要素のSPANをブロック要素に変換して作ったボックスの上下部分でボックスの内容を挟むことで実現しています.ここだと<span class="boxtop">と<span class="boxbottom">がそれにあたります.中に入る要素のheightを調整すると丸みの程度を変更することができます.丸みの部分はSPAN要素の左右マージン.上部分ではマージンの小さい方から大きい方へ,下部分ではマージンの大きい方から小さい方へ並べます.注意しなければならないポイントはboxtopとboxbottomにoverflow: hidden;を設定しておくこと.これが無いと丸みの制御ができませんでした.

対応ブラウザ:IE6,IE7,Firefox2,Safari3,Opera9

[角丸ボックス2]のXHTML+CSS

jump to pagetop

定義リストの調整

[定義ワード123456789]
テキストが長くて折り返されることになってもDD要素の行頭がそろうことを示すために無駄に長いテキストを書いています.
[定義ワード987654321]
テキストが長くて折り返されることになってもDD要素の行頭がそろうことを示すために無駄に長いテキストを書いています.

指定が何もない場合はDT要素とDD要素とが改行と左マージンで区別されることになりますが,DT要素に"float: left;"を指定すると上のようになります.またDD要素の行頭をそろえるために"text-indent: -5em;"と"margin-left: 15em;"を指定しています.1つだけ注意するところはDT要素の幅.ちゃんと指定しておかないと表示がぐちゃぐちゃになります.

対応ブラウザ:IE6,IE7,Firefox2,Safari3,Opera9

[定義リストの調整]のXHTML+CSS

jump to pagetop

ボーダーのスタイルを組み合わせる

solid: 直線

groove: 隆起+陰影

inset: 陥没+陰影

outset: 隆起+陰影

double: 二重線

dashed: 破線


上に並べたように,要素に指定するボーダーにはいくつか種類があります.それぞれに特徴があっておもしろいですが,違う線種を組み合わせてちょっと趣向を凝らすともっとおもしろくなります.例えばinsetまたはdoubleとsolidの組み合わせで色を変えてしまうと次のようになります.

左がinset,下がsolid

左がdouble,上がsolid


つまり斜めの切れ込みが入れられるわけです.

対応ブラウザ:IE6,IE7,Firefox2,Safari3,Opera9

[ボーダーのスタイルを組み合わせる]のXHTML+CSS

jump to pagetop

ジャギーの表現

このパラグラフの周囲がジャギーになっています.

指定した要素にwidthプロパティで幅を明示しておくのがポイントです.後はボーダーのスタイルをdashed,ボーダーの色と背景色を同色で指定するだけでこのようなジャギー(っぽいもの)ができあがります.ボーダーの幅を広げることでジャギーの細かさが変わります.親要素のdivと子要素のpにボーダーと背景色をばらけさせているのはクロスブラウザ仕様にするための設定です.

Lettersで紹介しているドロップキャップと組み合わせるとこんな感じになります.組み合わせとは言っても<span class="outside"><span class="inside">・・・となってマークアップが複雑になっていますしCSSの調整もだいぶ面倒にはなります.こちらも.outsideにボーダー,.insideに背景色という設定にしていますが,さらにもうひと工夫.ドロップさせるためのfloatプロパティ対策としてpositionプロパティを使い.insideを絶対位置表示にしてあります.ちょっと面倒ですが修飾手段としてはポップな感じがしてけっこうおもしろいのではないかと思います.もちろんドロップキャップの背景に画像を使えば,わざわざこんな面倒なCSSを書かなくてもOKですけれども.

対応ブラウザ:IE6,IE7,Firefox2,Safari3,Opera9

[ジャギーの表現]のXHTML+CSS

jump to pagetop