Hobby > デザイン実験室 > Letter

ここでは文字装飾について扱っています.cssファイルは以下のファイルをダウンロードしてご覧いただくか,各項目の[XHTML+CSS]をクリックして確認してください.

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

影付き文字 1

Experiments & Practices

Experiments & Practices

Experiments & Practices


filterプロパティを使わずにドロップシャドウを表現するものです.文字を少しずらして絶対配置し,色を変えることで実現できます.またz-indexプロパティで重ね合わせる順序を指定しています.絶対配置のせいで,そのまま指定するとページのとんでもないところに表示されてしまうため,格納ボックスdrpshdw-help(名前は何でもよい)に"position: relative;"を指定して表示位置を制御する必要があります.

対応ブラウザ:IE6,IE7,Firefox2,Safari3,Opera9 » [XHTML+CSS]

jump to pagetop

影付き文字 2

Experiments & Practices

Experiments & Practices

Experiments & Practices

これもドロップシャドウなんでしょうか.ちょっとポップな感じになるかな.いや,サイケな感じか?font-sizeやfont-weightを変えると表情がかなり変化します.色具合だとかを変えて,本当は浮き出ているような表現にしたかったのですが,どうもうまくいかず.どうにもならなそうなのでこのまま公開します.

基本的にはその1と同じ発想ですが,これは位置だけでなく大きさも変えているので調整が面倒になります.何が面倒かというと文字の大きさが変わる分,letter-spacingとword-spacingの2つのプロパティで各文字の位置を調整しなければならないところ.これが死ぬほど面倒くさいです.しかも文字サイズやフォントが変わるとせっかくの調整が水の泡になるという悲しい結果に.一文字ずつspanタグでくくるか何かすると厳密にできそうですが,それはそれで面倒でしょうねぇ.

もしやるのであれば,フォントファミリをmonospace,大きさや位置の調整はpxではなくてemでやると若干やりやすくなると思います.

対応ブラウザ:フォントファミリ・文字サイズ次第 » [XHTML+CSS]

jump to pagetop

ボーダーによる装飾

左の枠線のみの装飾

左と上の枠線による装飾

左右の枠線と背景色

そのまま使うと無味乾燥なH要素ですが,ちょっと手を加えれば見栄えがよくなりますし,左右のマージンの取り方や色の指定を工夫することでわかりやすいインターフェースを提供できます.別にH要素でなくても応用の利くものなので,例えばBLOCKQUOTE要素を装飾して引用部分をわかりやすくするとか,いろいろな方法があると思います.

対応ブラウザ:IE6,IE7,Firefox2,Safari3,Opera9 » [XHTML+CSS]

jump to pagetop

罫線を引く

 この文章自体がサンプルです.SPAN要素に"border-bottom: 1px solid #444;"を指定することで罫線を引いていますが,最終行だけは文字列と同じ箇所までしか線が引かれないので,すべての行に線を引きたい場合は別途P要素で指定する必要があります.またブラウザの設定によっては一番下の罫線が2重に表示されてしまう場合があります(ここの設定はIEに合わせています).

 線のスタイルを選ぶ時に注意しないといけないのは,border-styleにdottedやdashedで罫線を引こうとするとどうしてもずれてP要素とSPAN要素の枠線が重なる部分が出てしまうこと.このせいでsolidでしか使えません.

対応ブラウザ:IE6,IE7,Firefox2,Safari3,Opera9 » [XHTML+CSS]

jump to pagetop

アンカーの装飾

PDFファイルへのリンク

サイト外へのリンク

各要素に背景画像を設定し,paddingで重ならないように調整します.特に派手な印象にはなりませんがpdfファイルが急に開くのは時として迷惑なことがありますから,そういったことを避ける効果,また見たときのわかりやすさは確保できるでしょう.左に表示させたければ"background:url('画像へのパス') top left;",右に表示させたければ"background: url('画像へのパス') top right;"です.(リンク先はどちらもテスト用の画像です)

ちなみにCSSセレクタを正しく解釈してくれるブラウザであれば,class名をつけずに,a[type="application/pdf"]やa[type="application/zip"]といった記述をしてもアイコンを表示させることができます.こちらの方が意味的にはわかりやすくていいでしょうね.

対応ブラウザ:IE6,IE7,Firefox2,Safari3,Opera9 » [XHTML+CSS]

jump to pagetop

ドロップキャップ

疑似クラスの:first-letterを使うことで,ドロップキャップが表現できます.が,:first-letterはIEなどで対応していない上に大きくなるだけで下に落ちません.そこで以下のように最初の文字を<span>で囲むことにします.

初の1文字目を<span>タグで囲ってfloat: left;を指定し,最初の文字を下に落としたものです.ただし,floatだけでは美しいドロップキャップにならないので少し調整が必要になります.ここでは1文字目と2文字目の間に余白を作るためにspanのpaddingを指定して調整しています.またIE6では,floatさせている要素に対して"position: relative;"を指定しておかないと消えてしまいます.

対応ブラウザ:IE6,IE7,Firefox2,Safari3,Opera9 » [XHTML+CSS]

jump to pagetop

段組を作ってみる

このカラムがサンプルになりますが,段組を表現してみようと思うと1つのカラムに納める字数やその幅などを綿密に計算した上でプロパティを決めたり,ウィンドウサイズに依存しないレイアウトを考えたりする必要があって,実現するのはなかなか面倒です.

このサンプルでは#multiColumnsという名前をつけたボックス内のP要素に"width:190px;","float:left;"の2つを指定,さらに余白を決める"margin-left:10px;"を指定して段組を表現していますが,それぞれのP要素を何字にまとめるかなどを考えなければなりません.

またサンプルを見てもわかるように要素をフロートさせると高さが合わなくなります.これを解決したい場合はCSSだけでは対処しきれない場合があるので他の手段を探さなければなりません.

ウィンドウサイズに合わせて段組の幅が変わるようにすると,以下のようになります.

以下に続く3つのP要素は,文字数指定ではなく"width:30%;"で幅を指定し,余白は"margin-left:1%;"で指定しました.これだとウィンドウサイズが変わっても右に目立った余白ができることはありません.

2つめの,このサンプルのようにレイアウトを可変にしたいときは,他にもエラスティックレイアウトが親和性があるのですが,文字の大きさによってレイアウトが(相似形で)変わることになるので調整は多少面倒かもしれません.

CSS3では段組に関するプロパティが追加される予定で,現在のところ(2007/09時点で)はgeckoとwebkitの独自拡張として利用可能です.この実装予定のプロパティが正しく動作するエンジンが出て来るようになればここらへんのことはあまり考えなくてもよくなってくるはずなので,期待していきたいところです.

対応ブラウザ:IE6,IE7,Firefox2,Safari3,Opera9 » [XHTML+CSS]

jump to pagetop