Chapter 2　ハウ・トゥ編-Theme 010

Chapter 2　ハウ・トゥ編-Theme 010
2010/08/13(金) 18:59 ［CSS］｜→親記事へ｜

■Theme 010　CSSでリキッドレイアウトの段組を行うには？

前回の固定幅指定のをpxから%指定に変更するだけで実現できる。
しかし30%と70%のようにぴったり100%にした場合IEで表示が崩れてしまうことがある。
そのため保険をかねて28%と68%のように少し余裕を持たせた幅で指定するといい。(あんまり根本的な解決方法ではない気もするけど)
リキッドレイアウトの場合は左右に振り分けるタイプの方が扱いやすい。

ユーザーがズームなどで可変できるUIなので、あまり小さくしたり大きくした場合には見えづらくなってしまう事や崩れることがあり得るのでminとmaxのwidthを設定しておくことが推奨される。

■Theme 011　リキッドレイアウトで画像の大きさも可変にするには？

CSS2.1からimgにもwidthなどで%指定が可能なのでそれを用いる。
大きな画像の一部を切り出して表示する際はbackground-positionのプロパティを使って工夫する。

■Theme 012　リンクとして反応する範囲を拡張したい

text->padding->border->margin という感じで要素の領域が決まりますが、リンクとして機能する範囲はborderまでの範囲となっています。
リンクとして反応する範囲を増やすためにはaタグの幅や高さを大きくする必要がありますが、aタグはインライン要素なため幅などを指定することができません。
そこでdisplay:block;を使ってaタグをブロックレベル要素に変更する事で、幅の指定が可能になります。
(display:block;は何かIEでバグが多そうなのでいろいろハマりそう)

■Theme 013　文字サイズに応じて大きさの変わるナビゲーションにしたい

li要素をfloatプロパティで横に並べる際にそれを解除するためにXHTMLを書かずにやるために、clearfixというテクニックがよく使われてるらしいです。

あるブロック要素(親要素)の中身に全部floatを指定したときに、親要素の中には何もないという認識されheightが0となってしまいその要素がつぶれてしまいます。
floatされた要素分の高さを親要素にも確保するためのテクニックがclearfixと呼ばれています。

/* clearfix ハック */
.clearfix:after {
    content: ".";  /* 新しい要素を作る */
    display: block;  /* ブロックレベル要素に */
    clear: both;
    height: 0;
    visibility: hidden;/*表示はしない*/
}
/* :afterに対応してないIE向け */
.clearfix {
    display:inline-block;/*IE7とMacIE*/
}
/*ホントはここにMacIE向け追加する必要あるけどそんなの存在しない*/
/* inline-blockのままだと困る事があるので戻す */
.clearfix {
    display:block;
}

:afterに対応してるブラウザは新しい要素を作り、その要素は高さ0で表示はしませんがfloatされた要素の分の高さが親要素に伝わるので、親要素がつぶれなくなります。
display:inline-block;した瞬間にhasLayoutのプロパティ値がtrueになり、無理矢理親要素が高さを持つようになります。

その後、他のブラウザでもdisplay:inline-block;だと困るのでdisplay:block;しています。
一度hasLayoutのプロパティ値がtrueなると、その後でdisplayを変更しても維持されるそうです。

■Theme 014　文字サイズに応じて大きさの変わるタブ形式のナビゲーションにしたい

画像を使った角丸のタブメニューの作り方。
よく見かけるのは画像を2つ(左の角丸と右の角丸)用意してやるやつですが、ここでは一枚の画像から作る方法です。
使う画像はリンクの通常時とhover時とcurrentのタブを一枚にまとめたもので、これをbackground-positionでずらして表示する事でそれぞれの色を適応したタブにします。

psdも一応。(上部だけ角丸なタブ画像の作り方角丸長方形 photoshop)

画像一枚で角丸タブメニュー

実際に作ると、bodyの背景色と背景画像の背景色を合わせる必要が出てきたりします。
多分工夫すれば背景画像の背景も透過したものでできるとは思いますがCSSの記述量も増えそう。
(CSS3使いたいです)
画像一枚でやる方法で開発日記 » Blog Archive » １つの画像でタブメニューを作成のような感じのもあるが、この方法だとズームした際のことが考えられてないので崩れてしまう、そのためわざわざ1枚の画像を2回に分けて表示してる。(画像を分割してやる方法も同じ理由で分割している)

■Theme 015　文字サイズをピクセル単位の感覚で相対指定するには？

基準を62.5%(デフォルト16px想定)にしておけば14px=1.4emとか相対的に付けやすいけど、必ずしもデフォルトが16pxではないので使われてない。

■Theme 016　余分な要素を追加せずに4つの角を丸くするには？

contentプロパティを使って前後に4つ要素を加えて4つに分割した角丸を表示する方法。
どうせIEでは使えないのでCSS3でやった方がいいような感じもする

■Theme 017　長いURLの途中で行を折り返させるには？

CSS3のword-break:break-all;やword-break:break-word;でできるよって話。
IEとsafariぐらいしかまだないけど。
先行実装なのでちゃんと分別して使うべき。
(多分ここはいろいろ情報古い)

■Theme 018　CSSのどこに原因があるのかを探るには？

ボックスのボーダーを表示させて確認

borderはボックスの外側表示されるので、outlineが使えるならoutlineを使って確認。
意外とこれで崩れてる原因が分かる事がある。

style属性を使ってチェック

style属性は外部CSSより優先度が高いので、原因かも知れないところにborderなどを入れてみて確認する。(直接編集ファイルをいじるよりはFirebugなどを使ってやる方がよさげ)
同様にstyleにborderじゃなくて、zoom:1;やheight:1%;などhasLayoutをtrueにするものをいれて見たり、overflow:autoなどを入れて確認するなど、あまり推奨されてないstyle属性がデバッグ時に便利だとか。
(人によると思いますこれ)

この章はCSSの面倒臭さを見た。

→親記事（関連記事）へ