コーダーなら知っているべき制作時のポイントあれこれ

2009/07/06

カテゴリ：: HTML

タグ：: コーディング; HTML; CSS; ブラウザ

コーダーなら知っているべき制作時のポイントあれこれ

もうかなり前になってしまうのですが、OSCにて自分が発表した内容をまだブログに書いておりませんでした。発表しておいてなんですが…この内容はないなーと、反省。。。ですが、ブログ用に編集してまとめてみました。

ようやくまとめる時間が取れてよかった。。。

いろいろな意味でいまさらなのかもしれないですが、タイトルも変更して、あらためてまとめます。

最初はクロスブラウザとかの面でだけ考慮して書いていたので、ところどころそんな文章もありますが、基本的にコーディング時・制作時のポイントとか抑えておくべき基礎的なポイントです。

現在使われている主なブラウザ

まず、クロスブラウザに対応とか言う前に、どんなブラウザがあるか再確認。

■主なブラウザとバージョン

・Internet Explorer(IE) ５．５～８
・Firefox２～３.５
・Opera９.６～１０
・Safari３,４
・Google Chrome１,２

他にも派生ブラウザなど様々。SleipnirとかLunascapeなどなど。あと、MacIEとかも。IEだけじゃなく、様々なブラウザ使う人がいますね。ちなみに僕は、一度に複数ブラウザ立ち上げていたりして、色々利用してます…

モダンブラウザ

最新の技術を取り入れてどんどん進化していくモダンブラウザ。例えば、Firefox、Opear、Safari、Chrome…ChromeはGoogle使っている人が多いからというのと、やはり早いという理由からなのか、なんだか使う人が増えているかなという印象。

・(X)HTML,CSSはおおよそ対応済み
・(X)HTML,CSSは新しい技術の作用も…
・JavaScriptをいかに早く表示させるか

上記のような技術を取り入れ進化させて、今後もまだまだすごくなっていくはず。一応CSSとかJSにどれだけ対応しているかというものの指標として、Acid2やAcid3のようなテストもある。

ちなみにAcid3のほうで、Chrome2は100だけどリンクエラーがある様子。Safari4で満点。Firefox3で72点。Firefox3.5で93点。
Fxはそんな指標で満点を目指すより機能の向上を目指すとか。。。？

オールドブラウザ

最新のブラウザじゃない、古いなーと思うような以前のブラウザもまだまだ使っている人いますね。

例：IE5.5、MacIE、IE6...etc.

古いブラウザなのtで当然ながら下記のような状態。

・最新の技術に対応していない
・なによりレンダリングがおかしい（バグも多い）
・JavaScript遅い

まだまだいるIE6

それでも様々な要因あって、IE6を使っているという企業さんとかもまだまだいますね。パーセンテージとしてはかなり少数にはなっている様子ですが、まだ対応させておくべきかなという状態。

いつまで対応させたらいいのでしょう…IE6で見た場合はバージョンアップをお勧めしたり、JavaScriptなどで注意文を表示させるような仕組みも徐々に増えつつあったりします。

ちなみに、IE5.5とかもうほとんどないよなーなんて思っていたら、なんと会社都合でIE5.5のところもあった。。。IT関連の会社ではないのですが、パソコンを普段使わないような会社だと、大手でもオールドブラウザだったりする。以前のセキュリティ以降更新していないなどなど、そういう都合なんですね。そのままブラウジングしつつけるより、バージョンアップとか他のブラウザいれて、それようにセキュリティつけたほうがいいんじゃないかなとかおもうのですが…

ブラウザ対応はどこまで行っている？

様々なブラウザが出回っていますが、皆さんはどのブラウザにどこまで対応させておりますか？クロスブラウザ対応…なんてことを考えないで作っていた昔にサイトは、作った時まま…なんてところもまだまだあったりするのですが、IEではみれるけど…なんてサイトのままでいませんよね？

・IEのバージョンはどこからどこまで対応
・IEとFirefoxだけ対応？
・他は崩れている？

…数年前制作したサイトでは、IE以外ではまだまだ崩れているところも多いです。今後はそのようなサイトにどうかかわっていくかも重要になってくるかもしれないですね。

個人的に思うのは、IE6がなくなって、そしてオールドブラウザなんかも気にしない！なんて流れには、いつかは移行していくと思うのですが、それまではもう少しの間は、IE6までは最低限気にしなければならないでしょうね。

今後しばらくの課題

今後しばらくは下記のような対応はまだまだ必要だと思います。

・IE6、IE7への対応
・現状のサイトのIE8への対応
・以前のサイトをクロスブラウザ対応に

以前のつくり(テーブルレイアウトやIEのみ対応のCSSなど)のままだIE以外崩れているなんてケースもあるが、今後は対応させたり、リニューアルはさせていくべきかなと思います。

テーブルレイアウトはダメだとはいいませんが、メンテナンスに優れていない構造とかになっているようなケースは、修正したほうがいいかなと思います。

個人的に思う対応させておくべきブラウザ

現在様々なブラウザが出回っていますが、基本として以下のブラウザには対応させたほうがいいと思われます。

・IE6、IE7、IE8
・Firefox3
・Opera9
・Safari3
・Chrome

IE以外は最新のバージョン。

制作時のポイント

ここからが本題。

・制作ではベースブラウザはFirefox
・トップダウンアプローチによる制作
- ・よりシンプルな構造に
- ・ブロック単位でのCSS設定
・CSSリセットなどの利用
・IE6、IE7などへの対策を加えつつコーディング

全体に影響がでるようなCSSの設定ではなくて、headerやfooterなどのブロック単位のCSS設定がかぎとなる。後で述べるトップダウンアプローチという方法によって、より崩れる確立をへらしつつコーディングするのがポイント。

あとは、CSSリセットとかの利用でクロスブラウザにすばやく対応することができるようになる。もちろん使わなくてもそれはできるのだが、制作の現場においては、使ったほうが早い。各所各所でそれに対するブラウザ統一の設定をいれるよりは最初に入れておいて、気にせずにコーディングするのが、早くクロスブラウザ対応コーディングするポイントだと思う。

なぜFirefoxか

・単純に使っている人が多い
・便利なアドオンが豊富（拡張可能）
- ・Firebug
- ・Web Developer
- ・HTML Validator

Firefoxじゃなくてもいいんですが、上でもあげたような、FirebugとかHTML Validatorとか、制作時には欠かせないツールがアドオンで使える。OperaとかSafariでもいいのですが、Firefoxユーザーの方が利用者は多いので、できるならそちらを優先したほうがいいかなと思います。

ＩＥ基準はダメ

・特にIE6,IE7基準はダメ

■IEを基準にしないほうが制作がはやい

・Firefox → IE　○
・IE →　Firefoxなど　×

IE6,IE7用に作るって、他のブラウザの対応の順にすると、制作に時間が余計にかかる。だめってことはないですが、IEを優先的に対応させて制作していると、結局後々他のブラウザ用に対応させなければいけない設定をいれなければならなかったりすることがほとんどなので、基本はIEじゃないほうがいいと思う。

IE基準の制作は「もう」ダメというべきなのか、「まだ」だめというべきなのかは今後に期待です。期待？

トップダウンアプローチ？１

コーディングにおけるトップダウンアプローチとは？

ページを大枠ブロックから考えて行き、ブロックごとの細部を考えてい入れ子の少ないシンプルなマークアップにするための方法。

大枠から考えていくことで、マークアップやCSS設定のミスを少なくする方法。

ポイントは２つ

・マークアップ構造をよりシンプルに
・ブロック単位でのCSS設定を基準

以前それについてエントリーを書いているので、そちらを参照。『CSSを簡素化するためのトップダウンアプローチ』

先程も書いたのですが、ブロックごとで、そこの中でしか適応させないようなコーディングをすることによって、多くの崩れをできるだけ少なくできるというメリットがあります。

制作に時間がかかるのは…

CSSの設定で時間がかかる

・複数の場所で一つのセレクタを指定
・↑によってCSSを細かく分けすぎる

上記はよくない例です。

多くの場所に適応させるようなコーディングをしてしまうことによって、それが「崩れ」の原因となることが多いので、そうじゃなくて、ブロック単位で考えるようにしようという方法。内部からコーディングを考えて枠を付け足していくよりは、最初から枠から考えたほうがブロック単位の考え方としては早いと思う。何より全体を把握してからコーディングできるというのはメリットだと思う。

あとは、凡用として使いやすいように細かくクラスわけをしていって、必要な場所に必要なclassをあとからつけていくいう方法もできたら避けたいかなと思います。ダメというわけじゃないのですが、運用時は別な人が制作をするといったことになった場合、その凡用のclassなどを覚えるようにする、もしくはわかるようにしなければならないため、運用面でデメリットが多い。制作した人が引き続き運用も行う場合は別だけど、それでも、わかりやすいようにするには、細かくclassわけして、いろんな部分に適応させるよりは、その部分のみしか適応されないようなセレクタ指定をしてコーディングするほうが、修正などの面ではやりやすい。

表示が崩れてしまう

・CSSの設定が不足
・CSSの設定が複雑になりすぎて気づかない
・タグ名だけの指定による複雑化

たとえば下記のような例の時

あまりよくない例

<div id="sample1">
<div><p>ダミーテキスト<p></div>
</div>

div{
font-size:120%;
}

極端な例えですが、すべてのdivに適応されてしまい、それによって思わぬ表示になることも・・・divをつけた場所全部に適応されてしまうことになる。入れ子などになっていないときはいいかもしれないけど、どうしても入れ子構造にしなければならないなんて時にこのような設定にしていると、継承されてしまうプロパティのせいで、予期しない結果になってしまうなんてことにもなる。

CSS例　その２

#tagA p{
width: 300px;
height: 300px;
}

p{
width:400px;
height:400px;
}

どちらもpタグに指定している例。どちらが反映されるかわかりますよね？トップダウンアプローチでCSS設定をするセレクタも考えながら行うと、上記のようなミスとかは少なくなると思う。

トップダウンアプローチでの対策

先程まで書いてきたトップダウンアプローチで、各部分部分でCSSのセレクタをわけてコーディングするのが、クロスブラウザ対応ですばやいコーディングのポイントになるはず。
ブロック単位を基準とした、そこのブロック内専用のCSSを、各セレクタに割り当てるようにする。

div#sample1 div p{ //pに適応される
font-size:120%;
}

もう少し具体的に　１

<div id="header">
<h1><img src="images/a.png" {省略} /></h1>
<ul id="globalNav">
<li><img src="images/Nav1.png" {省略} /></li>
<li><img src="images/Nav2.png" {省略} /></li>
<li><img src="images/Nav3.png" {省略} /></li>
<li><img src="images/Nav4.png" {省略} /></li>
</ul>
</div>

たとえばこんなパーツがあるとしたら…

もう少し具体的に　２

div#header {
width:960px;
}
div#header h1{
display:block;
{省略}
}
div#header ul#globalNav{
width:960px;
}
div#header ul#globalNav li{
float:left;
{省略}
}

こんな風にセレクタを指定するほうがいい。

ページ数が多いと…

・ブロックごとの編集が必要不可欠
　（モジュール化も重要）
・他ブロックに影響しないように
・共通で変化させる部分はclassなど共通編集CSSを作ると管理しやすい

CSSリセットをしよう

タグ自体についている値をリセットすることにより、どのブラウザで見ても、基本同じように見せるために利用。ブラウザごとで違ったレンダリングをしていても、これをつかうことによって、初期の設定を同じにすることができる！

必要のないケースもあるが、各ブラウザで表示をどれも同じにする際には使用したほうがいい。（制作時間の短縮のためにも）

バグや意図しない表示を防ぐために

・プロパティと値を覚える
・各種バグや挙動を覚える
・シンプルなマークアップにする
・対策を行った設定をあらかじめ行う

あとから修正して、クロスブラウザ対応にしたりするのではなくて、最初から意図させて、どのブラウザでみても、崩れないように指定をする。

対策を行った設定とは？

■例：

・float時にはwidthを設定
・float後には必ずclear
・一番外枠になる部分にはmarginやpaddingをつけない

後から対策するのではなくて、あらかじめ対策を入れつつ作制作。バグ対策というのもあるし、floatのもともとの仕様でも、他に影響がでる可能性があるので、それの対策はしておいたほうがいい。

ここ以下は、クロスブラウザ対応のコーディングをする上では必要なことなどなどの紹介。

覚えておくべき(X)HTML関連

・block要素とinline要素
・validなHTML構造(つまり文法)

覚えておくべきCSS関連

・float関係
・position関係
・ボックスモデルの解釈
　（padding,margin,width,height,border）
・font関係

float関連はIE6でバグも多いので注意。 fontは、文字化けとかも気にする一つかもしれないけど、何よりフォントによって大きさは同じでも、横幅が微妙に違うという…IEは微妙に幅広になる。

覚えておくべきIE6関連

・hasLayoutプロパティ
・標準準拠モードと後方置換モード
　(XML宣言いれるとか入れないとか…)
・float時、floatの方向と同じmargin値が倍
・透過PNGの取り扱い

透過PNGの対処方法について知らない人は、まだまだいるということを知った昨年。IE6とかは透過処理がされない。JSなどなどで対応させるひつようがある。

覚えておくとよいハックや対策など

・clearfix(:after clear)
・_propaty:○○;
・*propaty:○○;
・* html (IE6)
・*:first-child+html (IE7)

個人的に、IEのみ対応していないなんてケースの時には、「*プロパティ:○○;」という方法を使っていることが多いです。あまりよくはないかもしれないですが、すばやくできるのでとてもいい！

最後に補足

・今後はHTML5やCSS3なども出てきてより複雑化
・基本ブラウザ以外はクライアントと要相談
・新しいブラウザがでたら、基本的にそれで見れるように
・clearfixやハックに頼り過ぎない
・JSなどAjaxでのUI関連が進歩してきているが、JS Off環境への配慮もかならず入れておく。

複雑化って書いたのですが、単に覚えることが増えますよって意味です。HTML5も今後は確実に学ぶべきポイントですね。プラス従来のXHTML。XHTML自体はなくなるわけではないので、その構造は必ず今後も覚えておくべきポイントです。HTML5になっても、そのつくりの基本は変わらないと思っていたほうがいいかなって思います。

それと今後はAjax系はますます使用頻度が増えていくと思っています。しかし、そこで進歩はしていても、中にはJSをOFFにして使っている人もいるはずです。OFFにしている人もいるってことを配慮した設計は必ず入れておくべきです。入れないと環境を作れない…なんて状況の場合が万が一出てきても、最低限「JSをONにしてください」のアナウンスくらいは入れておくなどの配慮はしておいたほうがいいです。