CSS Nite in Nagoya 2007、CSS Nite in Osaka、CSS Nite Vol.18でアンケートにご協力いただいた中で「CSSに取り組む際に最初につまずいたところはどこですか?」という設問に対する回答をシェアします。
5月11日追記： 益子貴寛（サイバーガーデン）さんからコメントいただきました。
ざっくり見たところと、以下の3つ
- 概念（考え方）
- レイアウト（特にfloat）
- ブラウザ互換
が特につまずいた（つまずく）ポイントのようですね。
- 入れ子状のdivにつけるmargin・padding。
- 各ブラウザによるmargin・paddingの認識の違い。
- 複数ブラウザでの統一。
- CSSの記述場所→勝手にヘッダー。
- 各ブラウザによる表示の崩れ。
- class名、id名の管理。
- 勝手にclassを作る。
- フロートの挙動の違い。
- divの使い方。
IDとクラスの違い。
クラスが多くなりすぎないようにするなどCSSを作る前の準備。 - ブロック要素のレイアウト。
IEとFirefoxの表示の違い。 - インポートの設定。
ブラウザによる表示の違い。
Mac IE5.2の標示の崩れ。 - Macで段組みが崩れるところ。
- 各ブラウザの表示の違い。
- padding。
- ブラウザ互換。
- マージンとボーダーとパディングの違いがピンとこなかった。
idとclassの違いが分からなかった。
IEとその他のブラウザの表示の違いに苦労した。
プロパティを知らない故に、解決方法がわからない。
ドキュタイプスイッチの解釈の違いにとまどった。 - id、class、子孫セレクタを複合で使ったときの優先順位。
- ブラウザのバージョンによって書き方を変えなければならないこと。
- どこまでCSSで表現するか。いまだに分からないので毎回悩みます。
- ブラウザ依存、バグ、対応ブラウザのサポート範囲。
- ブラウザ毎に表示が違うこと。
- ハック。
- padding等のブラウザごとの解釈の違い。
- MX2004を使っていましたので、デザインビューでの表示崩れにはつまずきました。
- 名前の決め方。
HTMLに入れていたときのファイルごとのCSSをどう外すか。
レイアウト。 - ボックスのmargin・paddingの関係。
- Dreamweaver上で正しく表示されない。
バックスラッシュが書けない。 - 記述が間違っていることに気づかず、何度プレビューしてもデザインがかわらないこと。
- 段組み。
- Win IE5、5.5、Mac IE5.xの存在。
マークアップが上手にできず、divまみれになったこと。 - OS、ブラウザ、バージョン間の問題。
- 各ブラウザに対応させること。
- ブラウザ毎に共通する記述とそうではない記述の違い。
- DreamweaverでCSSをつくると、長くなり読みずらい。
- 参考書が間違っているとき。
- 大規模なサイトを作成したこともなく、他の人の作ったサイトを修正するということもないので、その必要性自体がまだ想像でしかない。
初めにサイト全体の構築がなされていないと、CSS自体の有効な作り方ができない。 - boxモデル。レガシーブラウザの対応
- 各種ブラウザでの表示の違い。
- IEとFirefoxの表示の違い。
- 設定の分け方を効率よくすることをしなければならなかったと後で気づいた。
- 今でもつまずいてます。
- IEのdiv。
- 管理の方法。
- DWのレビューと実際のブラウザ表示が異なってしまって、レビューからの調整ができなかったこと。
- float関係。
- idとclassを混在させた時のCSSの適用優先順位がよく分からなかった。
- レイアウト。
- 使い方。
- clear:bothがうまくきかないことがあって、なかなか修正できなかった。
余白などの計算。 - 段組の組み方。
margin・paddingの設定が上手くできなかった。 - 文字間を指定するとMac IEでレイアウトが崩れること。
ブラウザごとのバグにどう対応するか。 - テーブルを使わずにレイアウトすること。
- margin・paddingの設定。
セレクタについての理解。 - floatの使い方。
- ブラウザごとの対応をするのに、スムーズにいかなかった。
- IDとクラスの違い。
IDやクラス、タグなどの呼び名（DreamweaverでIDやクラスを設定しようとするときに表示されるダイアログボックスに確か3つくらい入力欄がありますが、それぞれが何か良く分からなかった)。 - レイアウト（縦3分割にするとか、左寄せメニューをするとか...)。
- CSSはフォントのみ使用しているので、まだつまずいていないです。
- ブラウザハック（細かく設定しなくてはいけない面倒臭さ）。
- デザイナさんから届くテーブル in テーブル in テーブル...なデザインをどこまで調整できるか。いつも中途半端であきらめることになるので勉強しています。
- ブラウザ間によるCSS指定のエラーが最初ですね（特にIE、Firefox）。
特にレイアウトが弱いです（実は今でも苦手...)。 - 記述方法。
- float:leftを使いすぎて崩れていた。
- :hover :link :visitedの順序を間違えて反映されなかったりとか。
- 子孫セレクタのあたり...継承のまわり（思うように継承されない）。
- ブラウザ別の表示の違い。
- 文字宣言。
- 現在、文字関係と簡単なCSSしいか利用していないため問題はないです。
- 取り組む前なので、まだつまずいていないです。
- ブラウザごとのバグ。
- HTMLと混同する。
- 左右中央に配置する方法が分からなかった。
- tableレイアウトからの移行
ブラウザによって使用できないものが多く難しい。 - IE対策。
- 初心者なので、つまずいてばかりです。
- ブラウザ互換。
ハック
宣言 - ボックスモデル。
- レンダリング、ブラウザ上とは見え方がまったく違うことが多々あったこと。
- CSS自体のしくみ。
- ハック
フロート
回り込み解除 - どこに書いていいのか分からなかった。外部ファイルで作るのか、ページの上部、それともページ内？「人それぞれやり方がある」と言われていたので困りました。
- backgroundの重ね順。
- CSSに対する考え方の全体像。
取り組むべき優先順位の付け方。 - idとclass。
- ブラウザ互換。
- 概念をつかむのに時間がかかってしまった。
- ブラウザによる表示の違い。
- HTMLとの記述方法の違い。
- idとclassの違いを理解すること。
(X)HTMLの知識が不完全なままCSSを先に学んだためDIV病にかかった。 - 親子関係の > 記号がIEでサポートされていなかったこと。
命名規約をどうするか。 - 見た目とイメージの差（感覚と論理の差）。
いまだにつまずいて転んだままです。 - float。
- id、classの使い分け。
margin・paddingの使い分け。
classの設計と計画。 - フルスタイルシートによるレイアウト。
- idとclassの違い。
3分割以上のレイアウト。 - テーブルレイアウトの考え方からフローレイアウトへ。
マークアップ言語の基礎や重要度。
ブラウザ別のバグ。 - 人材！コスト！
- positionを使ったレイアウトで思い通りになりませんでした...。
- float関連。
- リンクの貼り付けについて。
- ブラウザによる解釈の違い。
- 同じ事を実現するにしても方法がいろいろあり、その中で最も合理的な方法がどれかということ。
あと、ブラウザ対策。 - CSSハック。
- HTMLをあまり知らずに、CSSを使用したため、痛い目に！！
- レイアウトの崩れ、特にブラウザ間の。
- 段組。
- CSSの概念。
- 初めはページ内記述だったので、HTMLと比べて必要性、有用性がよく分かりませんでした。外部CSSリンクにして快適です。
- 整理ができず、数が増えすぎ収集がつかなくなる。
- レイアウト崩れ。
- 各ブラウザで表示が違う。
- ブラウザによってまったく見え方が違うこと。最初にCSSを知ったときは、メインブラウザにしていたNetscapeにほとんど対応していなかったので、すぐにCSSを使うことをやめた。実際に使うようになったのは、それから5年後くらいになる。
- ブラウザ間の互換性。
- ブラウザによるボックス解釈の違いを知らないまま、CSSレイアウトに突入してしまったので、なぜIEとFirefoxでこんなに表示が違うのか、と泣きたくなった。
- ブラウザによって違うレイアウトの調整。
- 3カラムデザイン。
- 全体像がわからず、いきなりCSSを書き直したので、とても困りました。
- 使い方。
- 回り込み。Boxの配置。
- 画像で呼び出すときに、リンクが上手くつながらなくて苦労しました。
- 元々テーブルレイアウトだったので、CSSに切り替えるときに苦労しました。
- クロスブラウザ（ブラウザチェックに時間がかかってなかなか前に進まなかった）。
構造設計をしっかり考えずに、divやclassがいっぱいのサイトができあがってしまった。
MXではCSSの再現性がよくないので苦労した。 - ブラウザのハックなど。
- CSSレイアウトについて。
- 各ブラウザの特徴＋クセを知ること。
- CSSレイアウト。
- IEのBox問題。
- ブラウザ間の表示の違い。
- 概念。
- IE！（怒）。
- width、hight、ブラウザの見え方が違うことがプレビューするまでわからない（DW）。
- idとclassがある。
- ブラウザを変えると違うシロモノになる。
- フォントサイズのブラウザ別の指定方法。
正しいマークアップ（どこにどのタグを使用するかが明確に分からなかったので）。 - floatでのレイアウト。
- ブラウザによって表示が違うところ。
- 「親フレームにfloatを入れないと（フッタがない場合）背景がしたまで表示されない」事。
IE5/5.5の表示方法について。 - ブラウザ間の互換性、バグ。
- フリーレイアウト風のコーディング。
- ボックスモデルの解釈。
- 社内のスキルの統一をはかるのが難しいので、仕事としては取り組みづらい。
クライアントが更新作業を行う場合には導入しづらい。 - IEと他のブラウザとのボックスレイアウト。
- すっきりと効率の良い記述。
- 最初から...。
- レイアウト。
- レイアウト組み。
CSSハック。 - IE6以下のボックスモデル。
- スタイル名、構造などの仕様決めが難しい。
- プロパティが重複する。
- 子孫セレクタの記述。
- まだまだ始めたばかりなので、色々ありすぎます。
- Doctypeスイッチ。
- レイアウトのフロート解除。
- ブラウザごと、OSごとの対応（ハックを調べて適用→修正→確認の繰り返し）。
手打ちにしてから逆に楽になった（DW MX2004は使えなかったので...。なので、8にも手が出ません）。 - フロート関係。
IEと、他のモダンブラウザとの表示の違い等。 - float。
IE対策。 - レンダリングの違い。
- margin・paddingの使い分け。
- IE、Safariでも問題がなく、ハックを使わないで制作した時。
DWとブラウザの見え方の違い。 - ブラウザごとの解釈。
複雑なレイアウト。 - ブラウザとDreamweaverのデザインビューで、レンダリングが大きく異なる。
- コーディング
divが増えてしまう。 - IEとNetscapeのマージンの違い。
- 概念
- ブラウザ間の再現性のコントロール
- ブラウザの表示
- クロスブラウザ対策
- id、classでのスタイルの優先度が違って、うまく適用できないことがあった。
入れ子構造になってるとき、外側からきちんと順を追って書かないと、ポジションがおかしくなり、かなり悩んだ...。 - 各ブラウザへの対応
- floatの扱い
- clearfix
- クラスの名前づけ
- IEとFirefoxのズレ
- Font関係
- ボックスモデル
float、clear - ボックスモデルの把握
マージンの上下の相殺
floatによる段組 - ブラウザによる表示の違い（widthにボーダーとパディングを含めるか、含めないか）。
- ブラウザ間の表示の違い
- すぐ忘れた
- ブラウザによるマージンの違い
- ブラウザ差違
- float
- floatの考え方
- フロート、ポジショニング
- ブラウザごとの文字サイズの違い
- ブロック構造
- フロート（コーポネントをいくつか組み合わせたときに、フロートの仕方、考え方がよく分からなくなりました。）
- ブラウザごとにレンダリングが異なるところ。
- テーブルから考えを変えるのにとまどった。一旦覚えてしまうとこちらの方が楽しい。
- ブラウザ対応
ハックの手法 - CSSで再現できないデザイン
- dirのclear
- 段組みのやり方。
- ブラウザの差（Verとかも知らずに最初はIE5.5でした。後でFirefoxを見て...）。
- 綴り間違い、margine...などで表示が不具合が出て、単純なミスを発見するのに時間がかかった。
- ブラウザ対策
- プログラミング知識が必要ではないかと心配だった。
- floatレイアウト
- ブラウザごとにレイアウト表示が異なるのとを調整するところ
- どうしたら、思い通りのレイアウトになるのか解らなかった。
- クラス、IDの継承の関係。
- 書式・構文・概念
- 昔でありますが、構造の理解ですかね。元々SGMLをやっていたので、さほど抵抗がなかったですけど。ハック系の情報が無かったときにはかなり苦労しました。
- ボックスの回り込み（float）
- 細かく定義づけをしすぎて訳が分からなくなった
- id・classのネスト ブラウザ毎の崩れ
- パディングとマージンの解釈の違い。
- 記述のルールや全体的な概念的なものがつかみきれないといったところ
- 本を読んで作るのは出来るのですが、その応用についてわからなかった。
- まだ、本格的に使っていない。
- ブラウザごとの解釈の違い
- ブラウザによる表示の違いへの対処など。
- 最近、勉強を始めたばかりですが、今まで使用してきたテーブルレイアウトとの考え方の違いと難易度が気になっています。
- 段組み
- テーブルレイアウトからボックスレイアウトへの移行。
- class と id の使い分け
- ブラウザによる見え方、認識の差異。
- 各ブラウザ間の調整（CSSハックの使いどころについて）。共同作業に適したID/クラス名のつけ方について。冗長なCSSの管理方法について。
- ブラウザ毎による解釈の違い
- 段組レイアウト手法につまづきました。
- 書き方。
- パーツ分けというかグルーピング。さらに名前の付け方
- 前過ぎて覚えていません。
- 要素名を代表的なもの以外をなんてつけたらいいのか ルールがあるような、あとでわかりやすくするための名前のつけかた
- ブラウザのバグ
- ブラウザによる表示の違い
- レイアウト組みなど最初にどこから考えたらいいのかがわからなかった。
- floatです。またtableで組むくせから抜けだすのが大変でした。
- ブラウザ毎の違いやバグ
- ・HTMLでのテーブルレイアウトのように、CSSで自由にレイアウトする事・ブラウザによって挙動が異なる点
- 「IE6とFirefoxにおけるpaddingとmarginの解釈の違い」など、ブラウザによって異なる表示になるところ
- floatを使用した際のバグや解除方、ブラウザによる表示の違い。
- 自分の起こしたデザインのコーディングをするとき
- Webブラウザの種類・バージョンによって異なる、CSSの実装状況や見え方などの特徴をよく理解すること。テーブルで組んでいた従来のコーディングとの概念の違いの理解。
- レイアウトの表示で、フルで外部スタイルシートにてデザインすると、崩れてしまってコードのブラウザ表示で実際見てみないとどうにもならなくなる所が面倒で、DWを使わずにコーディングしてしまう事もしばしばありました。
- floatまわりやfloatを使ったときのmarginの設定
- IEのバグです
- marginとpaddingの違い
- ドリームウェーバーで作業する上では、プレビューがちゃんと反映してないところですね。
- ブラウザのレンダリングとDreamWeaverのデザインビュ－の間に差があること
- 特に思い当たりません。Web標準の考え方がしっくり来ましたし、テーブルレイアウトの不毛さに
- float
- 余白とマージンの関係…。floatの後のクリア…。
- 初期化しなければならないところ
- ブラウザによっての違い。
- ブラウザ間の解釈の違い
- 3カラムのレイアウト
- Dreamweaver右メニューにある「タグ」等のツールメニューの使い方がわかりにくかったです。（今でもですが）
- プロパティを覚えること
- ブラウザによる表示の違い
- ブラウザによってレイアウトが崩れた点
- ブラウザごとの表示の差異フロート部分の表示崩れ
- 最初はブラウザによる違いですかね。
- ブラウザ間での、表示の違い（例）IEとFirefoxとの解釈の違いなど
- 段組レイアウト等のレイアウトの位置決めだったと思います。
- idとclassの優先順
- レイアウト関連。特にfloatまわりの制御。
- レイアウト。float
- float。あと、記述ルールが未だに曖昧。
- MXを使っていたので、8に比べてCSSの機能が無く、手打ちが基本でした。
- レイアウトする時、いきなりIEのマージンのバグにやられた記憶があります。
- ブラウザでの表示のくずれ
- IEとFirefoxで見え方がちがうところ、また、手打ちでやっていたので、スペルミスとかです。
- 基本的にmacOS9を使用して制作していたという事・・・ハード面です
- HTMLとCSSを別々にみなければいけないところ
- フォントサイズ
- どちらかというとActionScriptやC言語を使う側なので「シンタックス」が妙に感じるところ。AS、JavaScript、C、PHPは似ていると思うのですが。。。そういう視点で見るとCSSはスッと体に入ってこないです。
- boxの概念
- 指定が重複してどちらがどちらか判らなくなった。
- 本通りに組んでも上手くいかない。やたらとスペースが空く。
- ボックスの高さがつぶれてしまい、
- ブラウザ毎の解釈の差
- IEのバグ
- ブラウザ間での解釈の違い
- XHTMLの十分な理解がない状態でのCSSコーディングなど根本的なところをおいてCSSの実装というところに目を向けていたこと。
- 何から、設計していけばいいのか。余白の考え方、優先順位、ブラウザによるレンダリングの違い
- 段組（ブラウザによって落ちる・印刷時に落ちる）
- ブラウザでのバグによるレンダリングの違い。
- あまり覚えていませんが、・ブラウザのバージョンによるボックスモデルの解釈の違い・ブラウザごとのレンダリングの相違などかな?
