読者です 読者をやめる 読者になる 読者になる
スポンサーリンク

なんとなくCSSを使っている人が,CSS中級者になるために (「崩れないレイアウト」のセオリー)

CSS デザイン html

CSSを「なんとなく」知っていて,「なんとなく」使っている,

というケースがある。


そういう場合,思わぬところでレイアウトが崩れ

要素の正確なポジショニングができず,

「なんとなく」ずっと悩み続けることになる。


その原因は,CSSの中級のノウハウが足りない,という点にある。


一発で正確なレイアウトができるようになろう。

そうなれば,CSS中級者だ。


以下は,CSS中級者になるためのノウハウ。

※↑自作の もくじジェネレータ で自動生成



(1)要素の分類

CSSについて欠かれた情報を読むためには,まず,要素の分類をマスターする必要がある。

そうしないと,CSSの仕様書が読めないので。


(1−1)インライン要素とブロック要素

HTMLの全タグを以下の3つに分類できるようになっておくこと。

  • ブロック要素
  • インライン要素
  • ブロック・インライン要素

以下のURLなどを読んでおく。

ブロック要素とインライン要素の一覧
http://kuruman.org/dateki/block_inline

  • ブロック要素とは、文書の骨組みです
  • inlineを直訳すると「行内」であるとおり、インライン要素は行の中の文字に論理的な意味を持たせたりします。
  • 表を示すtable要素でレイアウトを行うのは当然ながら好ましくありません。(但し、線形化して(タグを全て消し去って)も意味が通る場合は問題は起こりません。)


マークアップ言語としての XHTML 入門
http://keizai.xrea.jp/markup/markup04...

  • ブロック要素とは,「別行立てて表示される」要素のことで,通常ブロックの幅は,行幅とおなじ。
  • インライン要素とは,必ずブロック要素の中に収まらなければならない要素のこと。
  • ブロック要素の中にブロック要素が収めることはできますが,インライン要素の中にブロック要素を収めることはできません.また,本文の中にインライン要素を直接書くこともできません
  • 複数のブロック要素を横に配置する:1つのボックスの幅は 50% です.ただし,ボックスの周囲に枠線を描く場合は,枠線の厚みを考慮しなければなりませんので,ボックスを2つ並べる場合は,幅は 48% が適当


CSS によるレイアウトの考察
http://keizai.xrea.jp/markup/css0a.html

  • tableを用いると簡単に,ブロックを並べることができる.
  • しかしながら,table要素は表組みのためににのみ使われるべきである.また,アクセスシビリティや,検索エンジンの関係から,この方法は望ましくない


ブロックレベル要素とインライン要素
http://www.mozilla.gr.jp/standards/we...

  • ブロックレベル要素の特徴は、親要素の内容幅全体に広がって配置されます。つまり、ブロックレベル要素の横に他の要素は(通常フローなら)並べることができません。 このような特徴からボーダーが(見えて)ない時の様子から「改行を伴う」と言われています。
  • ブロックインライン要素」もある。見た目に関する決まり事はブロックレベル要素、文法上はインライン要素。img, input, selectなど。
  • display: inline;, display: block;とすれば、 それぞれインライン要素、ブロックレベル要素として表示される


ブロック要素を「インライン化」することもできる。
display : inline; のようにdisplay属性を操作すればよい。

「内容に合わせて,自動的に要素の幅を変えたい。しかし高さも指定したい」

という時に役立つ。

見出しと背景 〜CSSテクニック〜
http://www.stylish-style.com/csstec/b...

  • displayというのは、ブロック要素とインライン要素の切り替えを行うプロパティです。 値にinlineをとればインライン要素、blockをとればブロック要素として、本来のタグの性質にかかわらず振舞うことができます。
  • 文字数に合わせて背景をつけてくれます。

(1−2)置換インライン要素と非置換インライン要素

インライン要素には,

  • 置換インライン要素
  • 非置換インライン要素

がある。

http://34567.jpn.org/study1/css/width.html

  • img要素、input要素、textarea要素、select要素、object要素 これ以外のインライン要素が、非置換インライン要素


非置換インライン要素というのは具体的にどんな要素なんですか?
http://detail.chiebukuro.yahoo.co.jp/...

  • それを使うことで別のファイルに置き換わらない要素です。a,span,em,strong,q など,乱暴に言えば普通のテキストが入るインライン要素です。
  • 【置換】インライン要素は,img,object あたりです。


「置換インライン要素」は,前述の「ブロックインライン要素」に等しい,と考えてよい。

置換インライン要素(インラインブロック)
http://www.agr.hokudai.ac.jp/useful/u...


これらの用語は,CSSの仕様書を読む際に必要。

例えば・・・

10.3 幅及びマージンの計算
http://www.y-adagio.com/public/standa...

  • 「行内非置換要素:'width'特性は適用されない。」


CSS2 W3Cによる勧告ドキュメント
http://www.y-adagio.com/public/standa...

(2)正確なポジショニング

ブロック要素の正確な配置について。


(2−1)positionのrelative/absoluteの使い方

以下の3パターンを正確に使えるようになること。

  • relativeのみ
  • relative + absoluteの組み合わせ
  • absoluteのみ

positionプロパティのrelative、absoluteの簡単な使い方
http://www.acky.info/tips/css/00013.h...

  • relativeのみ:
    • 本来配置される位置から指定した値だけ移動する。
  • relative(absolute)とabsoluteの組み合わせ:
    • 親要素の位置が基準点となり指定した値だけ移動する。
  • absoluteのみ
    • 基準点がない場合はブラウザの左上から指定した値だけ移動する。


CSS : positionの「absolute」「relative」「fixed」のリファレンス
http://www.css-lecture.com/log/css/03...

  • absoluteを単体で使った場合は、body要素が基点。画面の左上を0 0の座標とした基点
  • relativeをかけた要素の中でabsoluteを使った場合は、relativeかけた要素の左上を0 0の座標とした基点

(2−2)DOCTYPEスイッチによるボックスモデルの解釈方法の違い

HTML冒頭のDOCTYPE宣言によって,ボックスの解釈方法が変わる

IEがQuirksモードで動作する場合,幅や高さを計算する時に,paddingやborderの太さが含まれてしまう。(本当は含めないのが正しい)


対処法:

  • widthと共に,paddingやborderを指定しない。それらに依存するようなCSSコードを書かない。

DOCTYPE宣言とDOCTYPEスイッチ - HTML・XHTML(一覧表)
http://phize.net/resource/html/doctyp...

  • DOCTYPEとブラウザの組み合わせによって,以下の3つのモードが発生する:
    • 互換モード(=Quirksモード)
    • ほぼ標準モード
    • 標準モード


2. ボックスモデルと DOCTYPE スイッチ
http://www.geocities.jp/multi_column/...

  • Quirksモードはボックスモデルを正しく解釈せず,ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう
  • DOCTYPE 宣言とはその(X)HTML のバージョンを示したものです。大雑把に言えば、
    • きちんとした DOCTYPE 宣言を持った文書なら CSS の書き方にも問題はないはず、よって仕様どおりに解釈する(Strandard モード)。
    • DOCTYPE 宣言すら持たない文書は CSS の書き方も間違っているだろう、よって間違った解釈に合わせる(Quirks モード)。
  • WinIE6 には DOCTYPE 宣言より前に何か文字列があると Quirks モードになってしまうバグがあります。つまり XML 宣言つきの XHTML の場合には、IE6 は Quirks モード、その他の新しいブラウザは Standards モードになってしまいます。
  • HTML4.01 であれば XML 宣言は不要


3. ボックスモデルバグの対処法
http://www.geocities.jp/multi_column/...

  • ボックスモデルの解釈には 2通りありました。ひとつは内容幅の外側にパディングとボーダーが足される CSS2 の仕様どおりの解釈。これを content-box と呼びます。
  • もうひとつが、width をボーダーまでの幅とする解釈。これを border-box と呼びます。
  • width とともに padding と border は指定しない。


標準準拠・後方互換モード各々の CSS 解釈の違いをまとめたドキュメントを共有
http://2xup.org/log/2007/07/27-2111

  • Internet Explorer では後方 (過去) 互換モードで border-box で解釈するので、Windows IE 6 では注意が必要です。
  • text-align は指定されたブロック要素の内部にある全てのインライン要素を水平位置を揃えるプロパティです。ブロック要素の水平位置は揃えません。Windows IE は標準準拠モード・後方互換モード共、ブロック要素の水平位置も揃えます。


なお,「ほぼ標準モード」と「標準モード」の違いについては,以下のURLなどを参照。

ほぼ標準準拠モード(Almost Standards)
http://nagomin0123.web.fc2.com/doctyp...

  • 標準準拠モード(Standards)と、ほぼ標準準拠モード(Almost Standards)の違いとして、テーブルのセル内に画像を置いた際の余白の付き方があげられます。

(2−3)要素内の高さ位置と,要素の高さ

画像のデフォルトの縦方向の表示位置と,ディセンダについて。

ディセンダとは,行のベースラインから「g」の字の下端まで。

要素内で画像が配置される高さ位置に注意。

table内に画像を隙間無く敷き詰めるには注意が必要です #1
http://www.mozilla.gr.jp/standards/we...

  • ベースライン+ディセンダ=行の下端
  • 画像の下端は,行の下端ではなくベースラインにそろう


別の話題として,要素自身の高さについて。

ブロック要素の高さは,要素内部の内容が大きいと,挙動がブラウザ依存になるので注意。

heightプロパティの注意点〜内容が大きい場合
http://www.mozilla.gr.jp/standards/we...

  • IEでは,要素の内容が優先される。
  • IE以外では,要素の高さが優先される。要素より大きな内容は要素からはみ出す。

(2−4)floatの崩れない使い方

floatは,ブロック要素を横に並べるために使う属性。

「横並びリスト」を作るときや,「サイドバー」設置時などに役立つ。

float属性を指定した要素たちの次の要素にclear属性を指定すれば,そこで横並び(回り込み)が解除される。

float
http://www6.plala.or.jp/go_west/nextc...

  • その親要素の最も左に寄せます。その要素以降に新たに左フロートのブロックボックスが現れた場合、そのボックスは前のブロックボックスのすぐ右側に配置します


floatを使用した横並びのリスト
http://www.tagindex.com/stylesheet/li...

  • このプロパティをli要素に対して設定すると、リスト項目を横並びで表示させることができます。


2−5 「float」によるCSSレイアウトの崩れを防ぐ
http://homutuku.com/beginner/250.html

  • 左右に配置したdivの次のdivへ「clear : both」で回り込み解除


floatを繰り返すとレイアウトがくずれる
http://norisfactory.com/stylesheetlab...

  • レイアウトがくずれるのは、全体を囲むボックスを繰り返す前に回り込みを解除していないせいである。
  • ただ、「HTMLは論理構造を記述し、見栄えはスタイルシートで定義する」という本来のあり方からすると、HTMLの中にレイアウトを制御する以外まったく意味を持たない要素が入り込んでくるのはやや気になる。


横並びリストを作る際の,基本的な落とし穴:

  • 横並びしている要素のwidthの合計値を100%にしてはいけない。

CSS やってはいけないこと floatとは
http://airrat.blog103.fc2.com/blog-en...

  • floatで横に並んだ要素が足して100%になってはいけない。98%以下になるように幅を指定する。
  • floatした要素にmarginやpaddingを指定してはいけない。
    • IEは"widthのサイズはpaddingとborderを含めてのサイズ"と誤認している為。


横並びリストの片方のボックスを横幅固定にして,もう片方のボックスはブラウザ横幅に合わせて広げたい場合:

ウィンドウにあわせて片側のカラム幅を可変させる
http://www.mdn.co.jp/di/articles/517/...

  • 下に落ちてしまったサイドバーのカラムを可変するカラムの横に並べるためには、「ネガティブマージン」を使う
  • 可変するカラムの左右どちらかにサイドバー分の200pxの空きスペースを用意して、そこに溢れているカラムを配置する


別の問題:

  • 横並びしている要素たちの,親要素の高さが狭くなってしまう。

その対策:

  • 中身の末尾をclearする。
  • IEでは,親要素に何かしら高さを指定する。

CSS float を使う時の注意点 ( clearfix の使い方 )
http://bowz.info/781

  • float させた div の親にあたる div 内で clear しないと表示がおかしくなる。div#main を閉じる前にクリアしないと、div#main の高さが確定しない。
  • float させる時は、width 指定を入れておくのが基本


CSSでfloatを指定したボックスを含むボックスの背景が出なくなる件
http://www.fsiki.com/archive/css-doc/...

  • floatはボックスを"浮かせる"ものなので、内側のボックスが全部浮かんでしまった場合、外側のボックスの高さはなくなってしまいます。
  • モダンブラウザ対策
    • #containerC:afterにcontentを指定すると、ボックスの中の一番最後に新たなテキストや画像を挿入することができます。
    • 挿入したものをブロック要素化し"clear: both"をかけることによってボックス内のfloatをすべて解除することができます。すると、floatしているボックスの高さに応じて外側のボックスの高さが拡張されるようになります。
  • WinIE5.0〜6.0
    • 外側のボックスに高さ(値は何でもよい)を与えると、内側のボックスのフロートに関わらずボックス高さを拡張


heightプロパティの注意点〜内容がfloat要素の場合
http://www.mozilla.gr.jp/standards/we...

  • テキスト1,float:left,テキスト2 とすると,2つのテキストはくっつく。テキスト1の終了時点で次の行にfloatされた要素がくる。
  • 浮動要素の高さもheightに含めさせる方法:
    • floatを解除してやれば、それ以降に続く要素はfloatしたブロックの下に回り込む。 つまり、内容の高さに対して影響力が出てくる


さらに別の問題:

  • 横並びしている要素たちの高さが,そろってくれない。

対策は,以下のページを参照。

floatしたdivの高さを揃える
http://scuderia-web.com/tips/xhtml_cs...

  • 高さが揃わないため、情報量が少ないdivの下に隙間が空いてしまいます。
  • padding-bottomとmargin-bottomに正負の異なる大きな値を入れて調整すればよい


ブロックレベルのカラムの高さを揃える4つの方法
http://blog.e-riverstyle.com/2009/07/...

  • display: tableを使用
  • JavaScriptで最大のheightを持つカラムを探索し,動的に全カラムの高さを変える
  • 親要素のbackground-imageで背景画像を指定し,各カラムが最下部まで伸びているように見せる
  • 各カラムの背景を表示するためのボックスをそれぞれ用意し,位置を相対指定して背景に表示させ,各カラムが最下部まで伸びているように見せる


[CSS]クロスブラウザ対応、高さの異なるカラムを揃えるスタイルシート
http://coliss.com/articles/build-webs...

  • 上記の4番目と同じ


最後に,position属性やdisplay属性との兼ね合い:

  • position:absoluteとすると,floatは強制的に無視される。
  • floatを使う場合は,基本的にdisplay:blockとなる。

CSS における display, position, float プロパティの相互関係
http://d.hatena.ne.jp/elm200/20080201...

  • 計算アルゴリズムのフローチャート


'display'と'position'と'float'の関係
http://www6.plala.or.jp/go_west/nextc...

(3)正確なテーブルレイアウト

tableは,思わぬところでレイアウトが崩れやすい。

正確なテーブルレイアウトのため,はまりやすいポイントを下記に列挙。


(3−1)列幅指定とセル内容の折り返し

テーブルのセル内容に「長い半角英数字の単語」が入ると,列の幅が崩れる件。


仕様と対策:

  • ノーマルでは,セルの中身優先。列幅が伸びてしまう。
  • table-layout : fixed; にすれば,テーブル列幅指定が優先になる。そのかわり,セルの中身が飛び出る。
    • セルの中身が飛び出してしまう件の対処法:
      • wbrタグを定期的に埋め込み折り返す。
      • wbrを埋め込む代わりに,word-break: break-all; を指定する手もある。IE限定。

文字のつきぬけの問題(連続した半角文字の折り返し)
http://www.off-soft.net/ja/develop/ht...


htmlでtdタグ内の折り返し位置を強制したいです。
http://q.hatena.ne.jp/1216109590

  • 半角英数字の連続は、英語の単語として扱われるため、通常のブラウザ指定では折り返さない仕様
  • 半角スペースを入れると、単語の区切りとみなされ折りかえります

なお,巨大なテーブルを動的に生成する場合,

サーバサイドで自動的にwbrタグを埋め込むなどの処理をすることになる。

が,テーブルが巨大だとwbr要素の数が膨大になり,ブラウザの処理速度が落ちる場合があるので注意。



また逆に,「常に内容優先とし,セル内容を折り返したくない」(列幅を内容に合わせて伸ばしたい)という場合は,
td要素に white-space: nowrap; を指定する。

セル内で自動改行させない
http://www.tagindex.com/stylesheet/ta...
http://www.tagindex.com/stylesheet/te...

  • white-space: nowrap;で,セル内で自動改行させない
  • 領域の幅を超えたテキストは、はみ出して(または横スクロールで)表示されます。


IEのtable内で white-space:nowrap を有効にする方法
http://d.hatena.ne.jp/KEINOS/20090121

  • nowrapが効かない場合は,内側にもうひとつ要素を設けてそこでnowrapにする。


IE8では特定の条件で他の要素にも影響が及んでしまうバグがある
http://fdays.blogspot.com/2009/04/ie8...


これらを使った例として,以下のようなサンプルを考える。


サンプル状況:

  • 「擬似フレーム(div要素)の中で,テーブルを横スクロールさせたい。」

HTMLのコード:

<div class="wrapper">
  
  <table>
  <tbody>
    <tr>
      <th>見出し1</th>
      <th>見出し222</th>
      <th>見出し33333</th>
    </tr>
    <tr>
      <td>データ1</td>
      <td>データ2</td>
      <td>データ3</td>
    </tr>
  
    〜〜
  
  </tbody>
  </table>
  
</div>


CSSのコード:

div.wrapper {
  /* 中身のテーブルがこのフレームの幅を超えて
     横にはみ出たらスクロールする */
  overflow-x : scroll;
  width : 200px;
}

table {
  /* 特にスタイルなし */
}

th {
  /* 見出しセルの内容は改行しない */
  white-space : nowrap;
}

td {
  /* 列幅は見出しセルに合わせる。
     データセルの内容は列幅に合わせて改行 */
  word-break : break-all;
}

これでOK。


注意したいのは,table要素に対して「table-layout:fixed;」を指定していない,ということ。

生半可な知識に基づいて何となくそう書いてしまうと,全ての列が同じ幅で表示されてしまう。


どうしてかというと,「table-layout:fixed;」は,あくまで1行目のwidth属性を見て列幅を決定するから。

この場合,1行目のth要素にまったくwidth属性が指定されていないので,

各列を均等にレンダリングしようとしてしまう。


なので,この場合「table-layout:fixed;」は不要。何とな〜くおまけで書かないように。

(3−2)列幅指定とセル結合

IEでは,テーブル中でcolspanを使ってセルを結合すると,列幅が崩れる


対処法:

  • 結合されたセルにwidthを指定する。
  • 全セルにwidthを指定する。
  • paddingを使わない。
  • ピクセル指定ではなく,%指定する。
  • COLSPANのないセルをテーブルの入れ子にする。 など

【IE6】テーブルにcolspanが入ると幅指定がずれる?
http://soudan1.biglobe.ne.jp/qa540662...

  • 結合されたセルの横幅が崩れる。
  • そのセルにスタイルでwidthを指定すれば解決する。


IE6 バグ table td colspan paddingの組み合わせ
http://okwave.jp/qa/q3344453.html

  • テーブルの1行目が全結合されている場合,IEで顕著に列幅が崩れるバグ。
  • 全セルにwidth指定すればある程度防げるが,paddingを指定するとずれる。IEでpadding指定しないほうが良い。


CSSサンプルプログ: colspan使用時のテーブル列幅指定について
http://css-el.seesaa.net/article/1498...

  • テーブルの列幅のピクセル指定+colspanの組み合わせは,レイアウトが崩れる。
  • 列幅をpxではなく%で指定すればよい。


テーブルにCOLSPANが含まれると幅の指定が効かない
http://kikky.net/pc/css_bug020.html

  • Internet Explorer6ではテーブルにCOLSPANが含まれると幅の指定がずれます。
  • どうも同じ縦列として幅が計算されレンダリングされるみたいです。


HTML,CSSバグ&回避法リスト : 幅指定をcolspan指定と組合わせた場合
http://www.keynavi.net/ja/bugh/html.h...

  • 表示速度優先 (テーブル全体が読み終わる前から表示を開始する) のために曖昧に処理されている


特に,1行目が結合されている場合は厄介。

table-layout:fixed; を適用してもだめ。

table-layout:fixedでテーブルの幅指定
http://www.tagindex.com/cgi-lib/q3bbs...

  • (col|colgtoup) 要素がないので、最初の行の各セル幅を調べる
  • 最初の行は <td colspan="3"> しかなく、かつ幅が指定されていないので、均等に 3 分割する
  • だから、後ろの行で 200-600-200 と指定しても無意味


さらなる対処法:

  • 1行目にcolspanで結合された行を持ってくる代わりに,display:none; で隠したtr要素を持ってきて,そこで各列の幅を指定する。

(3−3)列幅指定と空白セル

セル内容を空白にすると,列幅が崩れやすい。

対処法:

  • &nbsp;のように,とにかく何か入れておく。

テーブルを自由に飾ってみよう
http://support.biglobe.ne.jp/knowhow/...

  • 文章を記述しないセルには「&nbsp;」という半角スペースを表す記号を記述して、空のセルを作らないようにしてください。
  • 空のセルを作ってしまうとテーブルがくずれてしまい、思い通りのレイアウトを表示させることができません。


体裁が崩れてしまう。
http://forums.adobe.com/message/18479...

  • 空白セルでレイアウトを操作するのは、HTMLを表示するブラウザによって表示上の差異が発生しやすい

(4)微調整

設定されたプロパティを微調整する方法。

CSSとJavaScriptの連携など。


(4−1)スタイル適用の優先順位

CSSセレクタは,それぞれ「ポイント」を持っている

CSSの適用が複数箇所で行なわれている場合,このポイントが高いほうのスタイルが優先して適用される。

  • * (全称セレクタ):0ポイント
  • タグ指定:1ポイント
  • class指定:10ポイント
  • id指定:100ポイント
  • 上記の組み合わせ:各ポイントの合計値

CSSの優先順位
http://www.stylish-style.com/csstec/b...

  • CSSは基本的に後に書いたもの(読み込んだもの)が優先されるようになっていますが、そうならない場合もあり、自分の思った通りのスタイルが適用できず、困ることもしばしば。
  • CSSの優先順位はセレクタの獲得ポイントで決まる
  • ポイントはセレクタを複数並べることで加算されていく


ポイントに関係なく特定のスタイルを最優先させたい,という場合は,「! important」と宣言する。

(しかし,この宣言はIEでは後出しのスタイル宣言に負ける。)

!importantを使ったIEバグ対処法
http://wemolog.blog61.fc2.com/blog-en...

  • CSSの各プロパティを適用させる際にその優先度を高め、最優先とさせる「!important」という宣言
  • WinIEでは「後に指定したものを優先する」という方を強く解釈してしまう(!importantを無視してしまう)


!importantハック
http://css.ojaru.jp/library/important...


まとめると,設定済みのスタイルを追記によって調整したい場合,以下のようにすればよい。

  • セレクタ指定をよりいっそう複雑にすれば,そのスタイル指定のほうが優先される。
  • セレクタ指定を複雑にしたくない場合は,「! important」宣言すれば最優先される。
  • Win IEなら,同一のセレクタ指定によるスタイル宣言を追記するだけで,後勝ちとなる。

(4−2)CSS expressionとbehaviorによる微調整

「最後の手段」として,微調整のためにJavaScriptを活用する方法を知っておく。

ただし,セキュリティホールを作らないように注意。


CSSのプロパティで「expression( 〜 )」とすれば,JavaScriptを実行できる


サンプルとして,以下を a.html で保存し,IEで閲覧:

<input type="text"
 style="margin : expression( this.value = (new Date()).getTime(), 10 )"
>

マウスを動かすたびに,JavaScriptの関数が実行・評価されている。

ダイナミックプロパティ expression() のまとめ
http://useyan.x0.com/s/html/expression/

  • ブラウザクラッシュの原因になりやすい


Webサイトの高速化 ルール7 CSSのExpression()は使わない! (Yahoo! developer netoworkより翻訳)
http://www.inter-office.co.jp/content...

  • 評価回数が多いので,Webサイトの高速化の妨げになる


YSlow:ページ読み込み速度 CSS Expressions は古いIE独自の仕様なので削除
http://route58.org/2010/05/22_024426_...

  • IE8.0以降ではexpressionは使えない


expressionではなく,「behavior属性にHTCファイルを指定する」という方法によってもスクリプトを実行可。

外部スクリプトを読み込んで実行する
http://css.eweb-design.com/0814_bhb.html

expressionは,クラッシュの原因になるうえにIE8で廃止なので,基本的に使わないほうが良い


ただし,expressionには良い使い方もある。

CSS ファイルだけで IE 6 の背景に設定した png のアルファチャンネルを有効にする
http://www.yomotsu.net/wp/?p=400

  • behaviorプロパティにexpressionを設定

このように,古いブラウザの挙動を微調整するためには,CSS expressionの知識が必要になる場合もある。

(5)アフターケア

ここまでの情報を学習したら,次に何をしたらよいか。


(5−1)情報収集の方法


まずは,自分のレベルを測定しよう。

HTMLとスタイルシート(CSS)の業務スキルレベル 判別表 (5段階)
http://language-and-engineering.hatenablog.jp/entry/20110702/p1


その上で,漏れや不足を補うために,基本的なテクニックを網羅したページを一度読み込んでおくとよい。

スタイルシートテクニック 基本技(簡易リファレンス)+α/使い勝手のいい応用技
http://www.stylish-style.com/csstec/c...


スタイルシートリファレンス(目的別)
http://www.htmq.com/style/index.shtml


また,レイアウトデザインの常識(定石)も押さえておく。

デザイナーでない人のためのレイアウト入門
http://www.cremadesign.jp/dsm/design_...

  1. 近接:距離でグルーピング
  2. 整列:無意味なデコボコ撲滅
  3. 対比:重要メッセージを見出しで目立たせる
  4. 反復:エレメントを使い回して統一感


いいデザインをするための4原則
http://blog.creamu.com/mt/2009/03/4_1...

  • 上記と同じ4原則。対比を「コントラスト」と言い換えている


そして,CSSハックに関する知識を網羅しておく。

CSS Hack ライブラリー
http://css.ojaru.jp/library/index.html


また,時間を見つけて,CSS 2の仕様書を読んで把握しておくとよい。

CSS2
http://www.y-adagio.com/public/standa...


そうしたら次は,以下のようなサイトを定期的に購読する。

そうすれば,Webデザインのトレンドやネタをストックする事ができる。

Webデザインの見本帳
http://www.web-mihon.com/


コリス
http://coliss.com/


CREAMU
http://blog.creamu.com/mt/


Design Walker
http://www.designwalker.com/


かちびと.net
http://kachibito.net/

そこまで来れば,「CSS中級者」を名乗ってもおかしくはないだろう。


なお,さらにその先(単なる「CSS使い」だけでなく,本当の「Webデザイナー」)を目指す場合は,以下のサイトを参照。

プログラマが1ヶ月でWebデザイナーに転身する方法
http://d.hatena.ne.jp/yaneurao/20090318

(5−2)中級者の位置づけを理解する

CSS使いのレベルを,おおまかに3段階に分ける。

  • 初級者:簡単なスタイル指定ができる。
    • CSSプロパティの名前と値に関し,一通りの知識がある。
  • 中級者:常に,正確なレイアウト指定ができる。
    • キーワードは「正確さ」。
  • 上級者:常に,美しいデザインができる。
    • キーワードは「美しさ」「美的センス」。


正確なものを作れるのが中級者。

美しいものを作れるのが上級者。


「美しさ」以前の段階として,「正確さ」がまず必要である,という点に注意。


「思い通りのものを正確に実現する」というスキルが無い場合,美的センスは生かせない。

デザインのアイデアがあっても,そのアイデアを実現する力が無いからだ。

口先だけのデザイナになってしまう。


正確に要素をポジショニングするスキルがあって初めて,その次の段階として,「美しい配置」を論じられるようになる。

Webデザインの担当者には,この優先順位を忘れないでもらいたい。



関連する記事:

HTMLとスタイルシート(CSS)の業務スキルレベル 判別表 (5段階)
http://language-and-engineering.hatenablog.jp/entry/20110702/p1


サクラエディタのマクロで,CSSを自動整形しよう
http://language-and-engineering.hatenablog.jp/entry/20100206/p1


Webサイトの画像に文字を埋め込もうとする人がいたら,フォントのライセンス問題を知ってもらうために見せるページ (MS明朝・MSゴシックは,商用利用可能か?)
http://language-and-engineering.hatenablog.jp/entry/20111024/p1