■スタイルシートの基本その２〜プロパティ(属性)と値について〜

スポンサードリンク

■スタイルシートの基本その２〜プロパティ(属性)と値について〜

前回は、「スタイルシートの基本その１〜セレクタについて〜」について説明しましてが、皆さん少しはスタイルシートで何をするか分かってきたでしょうか？

まだ、分からない人が大半かもしれませんが、もう少し辛抱強く頑張ってください。

特にアフィリエイトに挑戦しようと思っている方は､CSS編集ができるとブログの自由度が広がります。頑張っていきましょう！

今日は、「ｽﾀｲﾙｼｰﾄ(ＣＳＳ)の記述方法の基本」でもでてきましたが、

プロパティ(属性)と値について説明していこうと思います。

皆さんも自分のスタイルシートを表示して私の説明と合わせて見て下さい。

そっちの方が、分かりやすいと思います。

ランキングに参加中！←今回は、長くなるので記事を読む前に応援お願いします！

Seesaaブログ にはもう登録した？

いつも言っていますが､カスタマイズに関しては､アドバイスは致しますが､自己責任でお願いします。スタイルシートの編集をするときは、バックアップを取っておきましょう。

それでは、説明していきます。

スタイルシートの記述方法は、ｾﾚｸﾀ {属性(プロパティ) : 値}です。

この基本だけは、忘れないようにしてください。

繰り返しになるますが、

｢属性(プロパティ)｣とは､ｾﾚｸﾀに対してどのようなｽﾀｲﾙ(ﾃﾞｻﾞｲﾝ)を設定するかを示します｡

｢値｣とは､属性(プロパティ)に対してのｽﾀｲﾙの範囲をどのように設定するかを示します｡

たくさんあるのですが、ここではスタイルシートリファレンスから代表的な物だけ上げておこうと思います。

1. 高さ・幅 に関わる物
2. フォントに関わる物
3. カラー・バックグラウンド(背景)に関わる物
4. ﾃｷｽﾄ(文字の配置や行間)に関する物
5. ﾏｰｼﾞﾝ･ﾊﾟﾃﾞｨﾝｸﾞ(余白や領域間のｽﾍﾟｰｽ)に関する物
6. ﾎﾞｰﾀﾞｰ(枠線)に関する物

他の物に関しては、スタイルシートリファレンスに書いてあるので参考にしてください。本当にスタイルシートの設定は､たくさんあります。

1.高さ・幅 に関わる物

属性(プロパティ)

width ：幅を指定する。
height ：高さを指定する。

プロパティに対する値

px ：画面のピクセル数となります。(相対長単位)
% ：パーセント。画面サイズや親要素に対する割合となります。(相対長単位)
親要素とは､前回でてきたセレクタのことと思ってもらっていいです。イメージになりますが、大元の箱bodyやcontainerが親要素になります。

2.フォントに関わる物

属性(プロパティ)

font-size：フォントのサイズを指定する。

プロパティに対する値

em ：英字の「M」の高さを基準とした大きさ(相対長単位)
px ：画面のピクセル数となります。(相対長単位)
% ：パーセント。画面サイズや親要素に対する割合となります。(相対長単位)
親要素とは､前回でてきたセレクタのことと思ってもらっていいです。イメージになりますが、大元の箱bodyやcontainerが親要素になります。
pt ：ポイント(絶対長単位)。これは、閲覧者が文字の大きさを変更できなくなるのであまり使わない方がいいようです。

属性(プロパティ)

font-weight：フォントの太さを指定する。

プロパティに対する値

normal:標準の太さです。（数値で400を指定した場合と同じ）
bold:一般的な太字の太さです。（数値で700を指定した場合と同じ）
lighter:相対的に一段階細くします。
bolder:相対的に一段階太くします。

3.カラー・バックグラウンド(背景)に関わる物

属性(プロパティ）

color：文字色を指定する。
background-color：背景色を指定する。

プロパティに対する値

文字色、背景色：カラーコード(#６桁の数字)。６桁の数字を変更することによって色を変えることが出来ます。こちらのカラーコード表を参考にしてください。この他にも検索すればたくさんのカラーコード表が出てくると思います。

属性(プロパティ）

background-image：url(背景画像のURLを指定する。)

プロパティに対する値

url:背景画像のファイルのURL。背景画像のファイルがあるURLを指定して背景画像を指定することが出来ます。

4.ﾃｷｽﾄ(文字の配置や行間)に関する物

属性(ﾌﾟﾛﾊﾟﾃｨ)

text-align ：行揃えの位置･均等割付を指定する｡

ﾌﾟﾛﾊﾟﾃｨに対する値

left ：左寄せにします｡
right ：右寄せにします｡
center ：中央揃えにします｡
justify ：均等割付にします｡※正直これは使ったことありません｡

属性(ﾌﾟﾛﾊﾟﾃｨ)

line-height ：行の高さを指定する｡

ﾌﾟﾛﾊﾟﾃｨに対する値

px ：画面のﾋﾟｸｾﾙ数となります｡(相対長単位)
% ：ﾊﾟｰｾﾝﾄ｡画面ｻｲｽﾞや親要素に対する割合となります｡(相対長単位)
親要素とは､前回でてきたｾﾚｸﾀのことと思ってもらっていいです｡ｲﾒｰｼﾞになりますが､大元の箱bodyやcontainerが親要素になります｡

5.ﾏｰｼﾞﾝ･ﾊﾟﾃﾞｨﾝｸﾞ(余白や領域間のｽﾍﾟｰｽ)に関する物

これがｽﾀｲﾙｼｰﾄで一番わかりにくいと思います｡私もかなり苦労しました｡しかし､ﾚｲｱｳﾄをする時これは､とても大事です｡自分のｽﾀｲﾙｼｰﾄを色々と編集していくうちにわかってくると思います｡

ｲﾒｰｼﾞとしては､ﾏｰｼﾞﾝは､ｾﾚｸﾀとの隙間です｡これを小さくとれば､ｾﾚｸﾀ同士がくっつきます｡

ﾊﾟﾃﾞｨﾝｸﾞは､ｾﾚｸﾀの中の余白です｡これを小さくとれば､文章がきちきちに詰まるので窮屈な印象を与えると思います｡

属性(ﾌﾟﾛﾊﾟﾃｨ)

margin ：ｾﾚｸﾀとのｽﾍﾟｰｽを指定する｡(上下左右すべて均一に)
margin-top：上ﾏｰｼﾞﾝを指定する
margin-bottom：下ﾏｰｼﾞﾝを指定する
margin-left：左ﾏｰｼﾞﾝを指定する
margin-right：右ﾏｰｼﾞﾝを指定する

ﾌﾟﾛﾊﾟﾃｨに対する値

px ：画面のﾋﾟｸｾﾙ数となります｡(相対長単位)

属性(ﾌﾟﾛﾊﾟﾃｨ)

margin ：ｾﾚｸﾀの中の余白を指定する｡(上下左右すべて均一に)
padding-top：上ﾊﾟﾃﾞｨﾝｸﾞを指定する
padding-bottom：下ﾊﾟﾃﾞｨﾝｸﾞを指定する
padding-left：左ﾊﾟﾃﾞｨﾝｸﾞを指定する
padding-right：右ﾊﾟﾃﾞｨﾝｸﾞを指定する

ﾌﾟﾛﾊﾟﾃｨに対する値

px ：画面のﾋﾟｸｾﾙ数となります｡(相対長単位)

■また、marginやpaddingは四方を一気に設定する事もできます。

順番は、上、右、下、左です。

具体的には、以下のようにします。サイズは、自分の好きなように調整してください。

padding(margin):5px 5px 10px 15px;

6.ﾎﾞｰﾀﾞｰ(枠線)に関する物

borderﾌﾟﾛﾊﾟﾃｨは､ﾎﾞｰﾀﾞｰのｽﾀｲﾙ･太さ･色をまとめて指定する際に使用します｡ ｽﾀｲﾙ･太さ･色のうち､指定する値を任意の順序でｽﾍﾟｰｽで区切って記述します｡

borderﾌﾟﾛﾊﾟﾃｨでは､ﾎﾞｰﾀﾞｰのｽﾀｲﾙ･太さ･色について上下左右ﾊﾞﾗﾊﾞﾗの指定をすることはできません｡ 上下左右のﾎﾞｰﾀﾞｰを異なったものにする場合には､ border-top､ border-bottom､ border-left､ border-right､ または border-colorで指定してください｡

属性(ﾌﾟﾛﾊﾟﾃｨ)

border ：ﾎﾞｰﾀﾞｰのｽﾀｲﾙ･太さ･色を上下左右まとめて指定する
border-top：上ﾎﾞｰﾀﾞｰを指定する
border-bottom：下ﾎﾞｰﾀﾞｰを指定する
border-left：左ﾎﾞｰﾀﾞｰを指定する
border-right：右ﾎﾞｰﾀﾞｰを指定する
border-color：ﾎﾞｰﾀﾞｰの色を指定する

ﾎﾞｰﾀﾞｰｽﾀｲﾙの値

none：ﾎﾞｰﾀﾞｰは表示されず､太さも0になります｡表のｾﾙなどのﾎﾞｰﾀﾞｰが重なり合う場合は他の値が優先されます｡これが初期値です｡
solid：1本線で表示されます｡
double：2本線で表示されます｡
dashed：破線で表示されます｡
dotted：点線で表示されます｡

ﾎﾞｰﾀﾞｰ太さの値

px ：画面のﾋﾟｸｾﾙ数となります｡(相対長単位)
ｷｰﾜｰﾄﾞで指定：thin（細い）､medium（普通）､thick（太い）｡ｷｰﾜｰﾄﾞで指定する場合､実際に表示される太さはﾌﾞﾗｳｻﾞにより異なります｡

ﾎﾞｰﾀﾞｰ色の値

ｶﾗｰｺｰﾄﾞ：#000000などの６桁の数字で色指定をします｡

今日は､かなり長くなってしまいましたが､この基本は､とても大事です｡｢習うより慣れろ｣で何とか頑張ってください｡

ランキングに参加中！←応援お願いします！

■スタイルシートの基本その２〜プロパティ(属性)と値について〜

ブログは読むだけでも楽しいですが、自分で作るともっと楽しくなること間違いなし。登録はこちらから簡単にできます→→ Seesaaブログ

スポンサードリンク

最後まで、読んで頂いてありがとうございます。お気に入りに追加してくれたら嬉しいです。
→→

RSSをRSSリーダーに登録しても便利だと思います。