CSSについて教えて下さい。

どのブラウザでも想定通りに表示される様にフルCSSで作成を考えています。
コーディングが初めての経験になります。
初心者が陥りやすいミスなどありますでしょうか。
ブラウザチェックはどうすれば効率的でしょうか。

作成の際の注意点や参考サイトを教えて下さい。

回答の条件
  • URL必須
  • 1人2回まで
  • 13歳以上
  • 登録:2010/11/22 03:34:55
  • 終了:2010/11/29 03:35:06

回答(7件)

id:a-kuma3 No.1

a-kuma3回答回数4462ベストアンサー獲得回数18412010/11/22 07:47:33

ポイント18pt

# コメントが付けられないので、回答レベルでは無いのだが...


これは、ひとことで答えるのはすごく難しいよ。

コーディングが初めてとか、あまり関係ない。

コメントを付けられるようにしておいた方が、いろいろネタをもらえると思うな。


一応、回答めいたことも書いておく。


最初にはまるのは、IE6 だと思うな。

最新じゃないブラウザをどこまで対応するかを最初に決めておいた方が良い。


最終的には、ブラウザがどう対応しているかが問題なので、まとめサイトよりは、各ブラウザのページを見るようにした方が良い。

http://msdn.microsoft.com/en-us/library/ms531207.aspx … Internet Explorer

https://developer.mozilla.org/en/CSS_Reference … Firefox, Mozilla

などなど

id:kaz No.2

kaz回答回数200ベストアンサー獲得回数422010/11/22 08:42:22

ポイント17pt

ブログのデザインに少し手を入れる、といった程度ではなく、

ブラウザ間でズレの無いコーディングをゼロから行う場合、

具体的な現象や対処法も大切ですが、

HTML の「ブロック要素」と「インライン要素」を強く意識する事をおすすめします。

それぞれを単純に言うと下記のような内容で、

ブラウザ間のズレは、主にブロック要素の取り扱いの違いで発生します。


ブロック要素:ページの左右まで見えない箱を持つパーツ(前後が改行される)

インライン要素:行の中にポンと置けるパーツ


とは言え、実際にコーディングを行わずに理解できるといった物でもないので、

まずは下記を読んで「とりあえずこうなのか」とだけ理解できたら、

実際のコーディングに進んでください。


ブロックレベル要素とインライン要素 - Web標準普及プロジェクト

http://www.mozilla.gr.jp/standards/webtips0015.html


そして、上記の説明ページでも行われていますが、

何か疑問があった際は該当の要素にボーダー(枠線)をつけて、

その要素が、目に見えない部分でどう振る舞っているのかを観察するクセをつけてください。

※ボーダーは、たとえ 1px の細い線でもレイアウトに影響を与える場合がありますので、

 ボーダーをつける事で大きく崩れてしまう場合、ボーダーではなく背景に色をつけてください

Firedox 用の「Firebug プラグイン」または、Safari にある「Web インスペクタ機能」は、

ページ中の要素を選択し、そのパーツがどうなっているかを観察できますので、

(上に書いた、ボーダーをつけて確認する行為が簡単に行える)

どちらかを必ずインストールしておきましょう。(個人的には Safari がおすすめです)


ここをおさえずに、手っ取り早い対処法(いわゆるハック)だけを使っていくと、

ここを直したらこっちがおかしくなる、規模が大きくなると訳がわからない、といった

取り扱いの面倒なコーディングに陥る羽目になります。



具体例の前に、まずは CSS のレイアウトサンプルをダウンロードしてみて、

それを教材に上記をつかむ事が大切だと思いますが、

そういった第一歩から、実際に CSS を書くときまで、

何かとつきまとうバグとして margin2倍バグ・width バグ・hasLayout バグの3つを挙げておきます。


IE6でfloatしたボックスのmarginの値が2倍になるバグの対処方法 - Webデザイナーの為の情報Blog「CSSMAKER」

http://www.cssmake.com/2008/05/ie6floatmargin2.html


ADP: IE6のwidth解釈バグ対処法

http://adp.daa.jp/archives/000265.html


IEでのCSSのバグを回避するhasLayout

http://coliss.com/articles/build-websites/operation/css/143.html

id:otaxa No.3

Otaxa回答回数25ベストアンサー獲得回数82010/11/22 10:30:36

ポイント17pt

最も最良の方法はブラウザごとに違いそうな表現を避けることです。

下記のサイトでは各ブラウザのバージョンごとに対応状況を示してくれています。

スタイルシートリファレンス


上記のようなサイトで、対応ブラウザが少ないものやIE6以前に対応してなさそうなものなどはできるだけ使わないのが良いと思います。

でないと、余計な記述が増えてメンテナンスが面倒になったり想定通りに表示されなかったりして、

そういうことに頭を悩ませる時間が非常に苦痛かつ無駄になります。


なので、もし時間的な余裕があるのなら、

上記のサイト内をひととおり見て「どういうことができるのか」を知り、

「どういう場面に使おうか」ということをメモや頭でまとめてからコーディングすると良いと思います。


動作確認にはWindowsであればIE5~9の表示を一度に確認できる「IETester」が便利です。

(サイトは英語ですがインストール時に日本語化できます)

IETester


また、Firefoxならば各バージョンのポータブル版をダウンロードして確認できます。

Firefox Portable


それ以外のブラウザについてはとりあえず最新バージョンを実際にインストールして確認するのが確実です。

IE6をメインにコーディングすればだいたいのブラウザで問題ないと思いますが、もう少し先進的なことをする場合はIE7をメインにしてもいいかなと思います。

(IE6はYahoo!JAPANもサポート終了宣言してるので。)


確実に多くのブラウザで動作するようにするには、どうしてもWindowsとMac(あればLinuxも)の実機が必要になります。

もしそういう環境がない場合は、かなりの数のブラウザで動作確認用にスクリーンショットを撮ってくれる

という便利なサービスが参考までに良いです。

スクリーンショット.jp

BROWSER SHOTS

URLを送信してスクリーンショットが見れるようになるまでしばらくかかるので「コーディングしながらリアルタイムに確認」というようなスピーディなことはできません。

また、もちろんWeb上にない(ローカルの)ファイルのスクリーンショットは撮れませんので逐一Web上にアップロードする必要があります。



いずれにしても、やっているうちに必ずIEでのバグとかに突き当たると思いますw

そういう場合「仕様なのでしょうがない」と諦めて他の方法を探すか、

特殊な方法(「条件分岐コメントタグ」や「CSSハック」など)で回避するかの判断が重要で、

その記述が本当に必要かどうかは常に意識した方がいいと思います。

また、うまく動かないことに頭を悩ますということも経験として非常に重要なので、トライ&エラーの数ほど技術は上達していきます。


ちなみに余談ですが「フルCSS」という表現は、わからなくもないですがあまり的確な言葉ではない気がします。

かといって他に良い表現は見つかりませんが。

id:Galapagos No.4

Galapagos回答回数963ベストアンサー獲得回数892010/11/22 10:58:41

ポイント17pt

まず、サポートするのブラウザとバージョンを決める必要があります。

一般論としては

  • IE7以降
  • Firefox3.0以降
  • Safari4以降
  • Opera9以降

で十分だと思います。

これ以外に、スマートフォンや携帯に対応させるかどうかも決めておいてください。


次に使うCSSのバージョンを決めます。

CSS3 Propertiesを見れば分かるようにIEはCSS3に対応していません。そこで、CSS2.1に準拠することを考えます。

それでも、CSS Browser Supportを見れば分かるように、IEが対応していないセレクタがあります。注意してください。


これらを留意した上でCSSをコーディングしたら、W3C CSS Validation Serviceでバリデーションチェックします。

チェックがクリアできたなら、次に、実際のブラウを使ってチェックしていきます。


少々古い内容ですが、ブラウザによる差異についてはこの書籍が参考になります。

必携 HTML/CSS/JavaScript Webブラウザー互換性辞典 (インプレスの辞典)

必携 HTML/CSS/JavaScript Webブラウザー互換性辞典 (インプレスの辞典)

  • 作者: 佐藤 和人
  • 出版社/メーカー: インプレス
  • メディア: 単行本

id:yoroshikudesu No.5

yoroshikudesu回答回数38ベストアンサー獲得回数52010/11/22 11:15:18

ポイント17pt

・一番注意すべきは「paddingとmargin」です。これを考えずにクロスブラウザは不可能なので、まずこれだけは理解すべき。「クロスブラウザ、padding、margin」あたりで検索しましょう。CSSファイルの冒頭に、

* { margin: 0;

padding: 0;}

を記述し、それ以降の要素についてPaddingとmarginを個々に設定すべきと思います(色々いじって行って、余白をそれぞれのブラウザがどう理解しているか分からなくなった場合、ブロック要素にそれぞれ背景色を付けたりするとパッと分かります)。

・インライン要素・ブロック要素というものがあって、CSSで位置の調整をする場合などに、非常に重要な概念になります。これを理解しましょう。何かをセンタリングしたいだけでも理解が必要になる概念です。正直、飾り付けなどは、後でどうにでもなります。

・firefoxでちゃんと表示されるページ作成→IEで表示されるページ作成 という流れでチェックします。その他ブラウザはその後の確認でも大丈夫です。メジャーだからとIEを基本に考えてしまうと、非常に特殊なものに合わせる事になってしまい、コードと表示の整合性を確認しづらくなります。

・IEはバージョンによって表示が大きく異なるけれど、IEを多数共存するのは難しいので、IETesterというソフトをお勧めします。複数バージョンのIEの表示を確認出来ます。スクリーンショットhttp://screenshots.jp/というページでMacの表示なども確認出来ます。

・全ページ共通となるCSS部分と、ここのページのみにあてはめたいというようなCSS部分を、ファイルで分けましょう。後から後悔する事になります。

・「クロスブラウザ デザイン」あたりで検索すれば、クロスブラウザで実現できるデザインテクニックがいっぱい出て来ます。最初は、意味不明かもしれませんし、全然クロスブラウザじゃ無いテクニックもあると思いますけど。

・最初からハックを使おうなどと考えない事です。本当に。ハック無しで共通の表示を出す方法、あるいはその限界を知る事が大切です。ハックは理解した人が取る最後の手段。「これをこうする為にどうしてもこの記述が必要」という理由を理解出来ないうちに使うと、後でコードを微調整する時に、困る事になります。

id:kou32rr No.6

kou32rr回答回数197ベストアンサー獲得回数82010/11/22 21:23:49

ポイント17pt

既に回答されている方々がおっしゃっている通り、

一言では言えないほどミスしがちな点は多々あります。

まずは正しいコーディングを行い、スタイルを適用させることを心がけたほうが良いと思います。

ブラウザは私はfirefoxで一旦作ったのちに、IEのチェックをしています。

以下、まとまりないですが参考までに。

参考サイトではないですが参考図書を。

「プロとして恥ずかしくないWEBレイアウトの大原則」で検索されたものを以前参考にしていました。

今となっては古い本ですが、基本原則は今も変わりありません。

便利ツールをご紹介します。

http://code.google.com/p/ie7-js/

これを入れれば、ie7のバグを取り除けるというものです。

「css リセット」で検索してみることもお勧めします。

id:tama213 No.7

tama213回答回数486ベストアンサー獲得回数302010/11/23 12:33:58

ポイント17pt

browsershotsを使えば、手軽に多くの環境・ブラウザ・バージョンでのチェックが可能です。

http://www.css-freelibrary.com/cssbrowsercheck/

使い方はこのあたりを参考にしてください。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません