ネットビジネスをはじめよう! > CSSスタイルシート

CSSスタイルシート

ホームページをCSSを使ってデザインしてみましょう。

CSSとは、Cascading Style Sheets(カスケーディング・スタイルシート)の略で、ホームページのデザイン的要素に対して指定をします。

具体的には、文字、背景、リスト、行間、ライン、画像などの装飾を一括して管理を行います。

スタイルシートには、直接タグに記入する場合と、それぞれのhtmlページに書く場合(内部スタイルシート)と外部にCSSファイルを置く場合(外部スタイルシート)があります。個々のページに外部スタイルシートを適用する文を一行書くことにより、すべてのページを外部スタイルシートで総括できるようになります。

このカテゴリでは、CSSでちょっとした見栄えを良くするテクニックや、CSSの困ったを解決するための小技を私の備忘録を兼ねて紹介しています。

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でカラムが落ちてしまうことがあります。カラム落ちとは、段がずれが生じてしまうことです。これを防ぐためには、
floatしている親ボックスにoverflow:hidden;を追加すると良いです。

スタイルシートのトラブル(コメントの文字化け)

スタイルシートのコメントが文字化けする場合は、スタイルシートの一行目に文字コード宣言を入れてみよう。

@charset "UTF-8";

@charset "shift_jis";

などです。

テキストの左右を揃える

テキストを左寄せにすると左は揃うのだが、右側が揃っていない。

そこで以下のタグを使うことで、右側もテキストが揃います。

text-justify: distribute; text-align: justify;}

色々なブラウザでデザインがどう反映されているのか確認しよう

自分のパソコンでは問題なく表示されていたホームページのデザインが、他のパソコンでみたらデザインが崩れていたという経験をお持ちではないでしょうか。

ホームページをデザインをするのであれば、最低2つのブラウザでチェックしながら進行するのが望ましいと思います。
IE6.0とFirefox2.0、IE7.0もこれからどんどん増えてゆくと思われます。

そんな時、以下のサイトでブラウザチェックをし、確認することをオススメします。

チェックしたいホームページのURLを入力し、およそ30分くらい待つと結果が表示されるようになります。

このようなサービスを有料で行っているところもありますが、こちらは少し時間がかかりますが無料ですので、何度でも利用できるところが便利です。

ブラウザごとにデザインをチェックしてくれるサイト
http://browsershots.org/