CSSは奥が深い
スタイルシートを語るには、このホームページでは紹介しきれないほどで、 CSSだけに特化したサイトを立ち上げなければいけないと思うのですが、 ホームページを作る上で気をつけなければならない基本的なことを中心にお伝えして行きます。
Mozilla Firefoxで、スタイルシートを確認する
時々、ネットサーフィンをしているとレイアウトが崩れているホームページにであうことがある。
ブラウザチェックをしていないと気づかないことが多い。
それとアフィリエイトサイトなどを作っている方は、商品titleタグを<h1>で書かれている人が多い。
SEOの為と察しますが…。
<h1>のデザインもきちんと指定しないと下の行にはみ出してしまいます。
vertical-alignの使い方
テーブルに画像やテキストを配置するときに重宝します。
上揃えか下揃えで統一感があり見栄えもくなります。
| vertical-align （縦方向） |
vertical-align:baseline; … （先頭行のベースライン揃え） |
|---|---|
| vertical-align:top; … （上揃え） | |
| vertical-align:middle; … （真ん中揃え） | |
| vertical-align:bottom; … （下揃え） |
カラム落ちを防ぐタグ
ブログで記事を投稿していると、記事コンテンツの幅より大きな画像をアップした場合、IE6.0でカラムが落ちてしまうことがあります。カラム落ちとは、段がずれが生じてしまうことです。これを防ぐためには、
ｆｌoatしている親ボックスにoverflow:hidden;を追加すると良いです。
スタイルシートのトラブル（コメントの文字化け）
スタイルシートのコメントが文字化けする場合は、スタイルシートの一行目に文字コード宣言を入れてみよう。
@charset "UTF-8";
@charset "shift_jis";
などです。
テキストの左右を揃える
テキストを左寄せにすると左は揃うのだが、右側が揃っていない。
そこで以下のタグを使うことで、右側もテキストが揃います。
｛text-justify: distribute; text-align: justify;｝
色々なブラウザでデザインがどう反映されているのか確認しよう
自分のパソコンでは問題なく表示されていたホームページのデザインが、他のパソコンでみたらデザインが崩れていたという経験をお持ちではないでしょうか。
ホームページをデザインをするのであれば、最低２つのブラウザでチェックしながら進行するのが望ましいと思います。
IE6.0とFirefox2.0、IE7.0もこれからどんどん増えてゆくと思われます。
そんな時、以下のサイトでブラウザチェックをし、確認することをオススメします。
チェックしたいホームページのURLを入力し、およそ30分くらい待つと結果が表示されるようになります。
このようなサービスを有料で行っているところもありますが、こちらは少し時間がかかりますが無料ですので、何度でも利用できるところが便利です。
http://browsershots.org/