1.cssの重要性

最初僕もサイトはhtmlでつくると考えていました。けどそれは全く違います。一度制作した人はわかりますがcssで9割作ってます。
人間で例えるなら骨がhtmlで、肉とか服とか髪の毛はcssである
サイトを作る=cssを組むと思って下さい。
それを知らないと後で痛い目を見ます。というかまともなサイトはほぼ作れません。

昆虫

3.cssブラウザ対応

コーダーにとっての一番の敵IE7とは
ネット上でサイトを構築する際に気をつけなくてはならないのがブラウザによって見え方が変わってしまう事だ。
IE6・7・8・firefox・opera・safariなど。
ただキレイに作ってもブラウザのバグで表示が変わる事も。
特にバグが多いと言われているのが、IE7である。
検索すれば多くのコーダーの嘆きと対策がでてくるはずだ。
flortバグやmarginバグは使用頻度が高い為に有名だ。
そこでどうやって対応するかというと、
* html
*:first-child+html
をcssに追記すれば回避できるバグが多い。

簡単に言えば、

.abc{
margin:10px;
}

が通常指定でさらに

*:first-child+html.abc{
margin:5px;
}

を追加すればIE7にだけ適応できるcssをつくる事ができる。

ブラウザは
IE6・7・8・firefox・opera・safariを使用できる環境を持つべきである。
IEは6・7・8が共存できるツールがあるので入れておこう。
ただ考えられる全てのブラウザの表示を全く同じに。とは考えない方がいいのかもしれない。時間がかかりすぎる上に現状不可能な可能性もあるからだ。
その対象となるターゲットの使用ブラウザを推測し、表示の差の許容範囲を決め行うべきだ。

雑草

TUKURUHITO.NET

蒲公英

2.cssの作り方

僕はhtml上でdivタグで枠を作っていくやり方をしています。
そこでdivにマークをつけます。それがクラスというやつです。
そのクラスのマークを目印にcssファイルで幅とか右詰めとかを指定していきます。
要はhtmlはマークだけで、細かい設定は全てcssでといった具合です。
言葉ではわかりにくいので画像を
(画像予定)
たとえば、htmlで


あほほい


cssで
.abc{
  width:100px; //横幅100px指定
  margin:10px; //枠の外側に10pxづつ隙間を空ける指定
  border:1px solid; //枠は1pxで実線の指定
}

となっていれば


あほほい


となります。
あほほいと同じ設定をしたければ、class="abc"を次の物にもつければ同じ設定になるし、修正は一度で済む事になります。
う~ん便利?
やってると見た目に綺麗に作れるし、なんとなく慣れてくるのでやりましょう。最初はめんどうな気もしますが。
あとは背景の指定に使う事もあります。background指定とか。詳しくは詳しいサイトで調べましょう
とほほcss(リンク予定)
htmlリファレンス(リンク予定)

ホームページ制作無料お問合せフォーム

SEO対策

デザイン

外部リンク

ホームページ制作無料お問合せフォーム

紅葉