| ホームページ作成・CSSの基本や、ロゴ作成、アフィリエイトなどについて説明しています。 | |
|
基礎編 デザイン編
運営編
その他
|
スタイルシートのプロパティ1.フォントフォントの種類フォントの種類の指定の仕方には、2通りあります。 一つは、フォントのタイプで指定する方法です。これは、相手のPCに入っている同タイプのフォントで表示する方法です。
もう一つは、フォント名で指定する方法です。フォント名は(,)カンマで区切って複数指定可能で、1番目のフォントが相手のPCにないときは2番目のフォントが表示され、2番目のフォントもないときは3番目のフォント、というように順に表示されます。 {font-family:フォントのタイプ;}
{font-family:フォント名,フォント名;} フォントのタイプと、フォント名には以下のようなものが挙げられます。 フォントのタイプ
文字サイズ{font-size:文字の大きさ;}
文字の太さ{font-weight:�A;}
�Aには以下のようなものが入ります。
斜体{font-style:�@;}
�@には以下のようなものが入ります。
文字飾り{text-decoration:�@;}
�@には以下のようなものが入ります。
2.文字位置と行間・字間文字位置の指定text-alignでは文字揃え、vertical-alignでは文字位置の上下を指定することができます。 {text-align:�@;}
�@には以下のようなものが入ります。
{vertical-align:�@;}
�@には以下のようなものが入ります。
行間{line-height:行の高さ;}
行間が文字サイズより小さいと、文字が重なってしまうので注意しましょう。 3.前景色・背景色{color:�@;}
�@には以下のようなものが入ります。
{background-color:�@;}
4.背景画像まず、画像のURLを指定します。 {background-image:url(�@);}
�@には画像のURLが入る 次に、その画像をどのように表示させるかの指定をします。 繰り返し背景画像の繰り返しに関する設定をします。 {background-repeat:�@;}
�@には、以下のようなものが入ります。
表示位置背景画像の位置を指定します。 {background-position:�@ �A;}
�@は横方向の位置
位置を固定背景画像の位置を固定すると、ページをスクロールしても動かないようにすることが出来ます。 {background-attachment:�@;}
�@には、
5.枠線と余白HTMLにはボックスという概念があり、また、すべての要素にボックスがあります。
それでは、各枠線や余白の指定の方法を説明していきたいと思います。 枠線枠線(border)の太さ、スタイル、色について指定することができます。 まとめて指定するには、 {border:�@ �A �B;}
�@には枠線の幅、�Aには枠線の種類、�Bには枠の色を入れます。
個々で指定するには、 {border-width:上 右 下 左;}
枠線の種類
{border-style:上 右 下 左;}
枠線の色
{border-color:上 右 下 左;}
このように、各プロパティについて、上から順に時計回りで指定していきます。また、各値の間には半角スペースを入れます。 全て同じ値にするときは、 {border-width:�@;}
というように指定します。これは枠線のスタイル・色についても同様です。
*�@には枠線の幅の値が入る 上下左右を個別に指定する方法もあります。
{border-top:枠線の幅 枠線の種類 枠の色;}(上の枠線)
{border-right:枠線の幅 枠線の種類 枠の色;}(右の枠線) {border-bottom:枠線の幅 枠線の種類 枠の色;}(下の枠線) {border-left:枠線の幅 枠線の種類 枠の色;}(左の枠線) 余白マージン・パディングについて説明します。 {margin:�@;}
となります。上下左右で違う幅を指定したい場合は、 {margin:上 右 下 左;}
となります。上下左右について、個別に指定したい場合は、 {margin-top:�@;}
となります。
{margin-right:�@;} {margin-bottom:�@;} {margin-left:�@;} �@には全て余白の幅が入ります。 7.回り込み画像などの回り込みを指定します。 回り込みをする{float:�@;}
�@には、以下のようなものが入ります。
以下のように記述すると、
<img src="image/gazou1.gif" alt="回り込みのテスト" style="float:left;">
これは回り込みのテストです。 次のように表示されます。
これは回り込みのテストです。
回り込みを解除するclearを用いて回り込みを解除することが出来ます。 {clear:�@;}
�@には、以下のようなものが入ります。
以下のように記述すると、
<img src="image/gazou1.gif" alt="回り込みのテスト" style="float:left;">
これは回り込みのテストです。 <p style="clear:left;">回り込みを解除します。</p> 次のように表示されます。
これは回り込みのテストです。
回り込みを解除します。 8.リスト
まとめて指定{list-style:�@ url(�A) �B;}
�@にはリストマークの種類が入ります。 各指定の順番は自由で、省略も可能です。 �@には以下のようなものが入ります。
�Bには以下のようなものが入ります。
リストマークの種類を指定{list-style-type:�@;}
�@にはリストマークの種類が入ります。 リストマークの画像を指定{list-style-image:url(�A);}
�Aにはリストマークの画像のURLが入ります。 |
�Bには字下げの位置が入ります。
詳しい種類は「まとめて指定」の欄を参考にしてください。
Copyright © 2008 ホームページ作成初心者講座 All Rights Reserved.
また、バナー以外の直リンクは禁止となっております。ご了承下さい。