まだホームページのデザインでTableタグを使いますか？
W3Cが策定したcssと呼ばれるスタイルシートを使って、ｗebデザインしてみるのはどうですか？
スタイルシート/cssを活用すればより細かいレイアウトを行ったり、ｗebデザインを統一したりできます。
ホームページはもちろんブログテンプレートの見栄えをカスタマイズするにも、強力かつ便利なスタイルシート/cssを活用しない手はありません。
スタイルシート/cssの基本や使い方を無料で紹介いたします。
『1歩！スタイルシート』コンテンツ
スタイルシートに関する最新記事
スタイルシートですべての方向に同じボーダーを引く。
一般的に境界線を引く場合、上下左右すべてにバラバラな設定をすることは稀です。 そんなことをするとかえって見にくくなってしまうからです。 スタイルシートで上下左右の四方向に同じボーダーを引くにはborderプロパティを使います。
スタイルシートでボーダーを個別に指定する
スタイルシートを使ってボーダーを指定する際に、ボーダーの方向と書式をピンポイントで指定することもできます。
ボーダーの種類・色・幅をスタイルシートで指定する。
『スタイルシートでボーダーをひく』では、 border-topなどのプロパティを使って、上下左右のボーダーに対してそれぞれ境界線の種類や色、幅を指定していました。ここでは、 線の種類/色/幅の別に各方向の設定をまとめる方法を紹介します。
スタイルシートでボーダーを引く
HTMLを使って枠線を引くには、tableタグを重ねて設定するなど非常に長くHTML文を書く必要があります。 スタイルシートを使って要素のパディングの外側に境界線を引けば、HTMLをスリム化することが出来ます。
パディングをまとめて設定する。
スタイルシートでパディングを設定するでは、 マージンを上下左右を指定する方法を述べました。しかし、4方向のマージンをいちいち設定せずに、まとめて指定してしまうことができます。
スタイルシートでパディングを設定する
ボックスモデルの三要素の一つパディングをスタイルシートを使って設定してみましょう。パディングって何？って人は、 ” ボックスモデルとは何だろう？”を確認してください。マージンが段落間のスペース幅を設定しているのに対し、 パディングはボーダーから内容までのスペース幅を設定します。
マージンをまとめて設定する。
スタイルシートを使ってマージンを設定するでは、 マージンを上下左右を指定する方法を述べました。しかし、4方向のマージンをいちいち設定せずに、まとめて指定してしまうことができます。
スタイルシートでマージンを設定する。
Webページのデザイン上、段落間の間を空ける際にbrタグなどを使うと、思うようなデザインが出来ないことがあります。 このようなときに、スタイルシートのマージンを使ってうまく設定しましょう。
ボックスモデルとは何だろう？
ブロックレベルやインライン要素は、Webページのなかで長方形の領域を作ります。
このような領域を「ボックス」と呼びます。
CSS/スタイルシートを使って、背景をまとめて設定する。
背景の設定をスタイルシートでコントロールできるようになると、Webページのデザインがぐっと締まってきます。 画像を入れるにしろ、背景色を変えるにしろ、Webページにオリジナリティをだすには必須ですね。
