最強?無料Seesaaブログで簡単にホームページ作成!

目次
■初めての方は、「まずはじめに」の後に、トップページをご覧下さい。お勧め記事を集めました!
  その後は、ご自分の好きなところを読まれて大丈夫です。
トップまずはじめにブログ入門編Seesaa活用方法基本的な使い方SeesaaカスタマイズQ&Aお問い合せ
ランキングCSSHTMLアフィリエイトおすすめ本便利フリーソフトブログ紹介資産運用精神論足跡
Topスタイルシート(CSS)>スタイルシートの基本その2〜プロパティ(属性)と値について〜

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

スポンサードリンク

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

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

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

今日は、「スタイルシート(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:背景色を指定する。
プロパティに対する値
文字色、背景色:カラーコード(#6桁の数字)。6桁の数字を変更することによって色を変えることが出来ます。こちらのカラーコード表を参考にしてください。この他にも検索すればたくさんのカラーコード表が出てくると思います。

属性(プロパティ)
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などの6桁の数字で色指定をします。
今日は、かなり長くなってしまいましたが、この基本は、とても大事です。「習うより慣れろ」で何とか頑張ってください。

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

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

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

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

■人気記事ベスト5
トラックバック、コメントをする時の注意
コメントする時、ブログを持っている方はできるだけホームページアドレスを書いて頂きたいです。みんながどんな風にブログを使っているか知りたいです。宜しくお願いします。
特に、質問される方は、名前に自分のブログのリンク貼ってください。
リンクがない場合は、基本的に返事をしないつもりです。私一人で運営しておりますので、ご理解の程よろしくお願いします。

当サイトでは「トラックバック」歓迎します。ただし、相互リンクをして頂きたいと思います。
相互リンクがなく記事と関連があると判断した場合は、こちらからもトラックバックさせて頂くつもりです。お互いにとって有意義なものにしていきましょう!


トラックバックについて、まだよく分かってない方は、こちらで説明していますので参考にされてください。

特に
■記事と全く関連がないと判断される物
■「宣伝」「誘導」「誹謗中傷」を目的とした物
■リンク切れの場合
と判断したものにつきましては、「削除」させて頂こうと思いますのであらかじめご了承下さい。
同様に「コメント」も削除させて頂きます。
コメントへの返事の確認には、便利なブログコメントチェッカーを利用してください。
この記事へのコメント
ケンジさん、どうも。
なんとか貼り付けできました。毎日新しい発見があり、自分のブログをデザインしていくことは楽しいです。ケンジさんのブログ、ほんと助かります。今回の件もありがとうございました。引き続き勉強していきます。
ほんと株式に関わるブログ多いですよね。ただ、僕の場合は競うというより、まずは自らの備忘録、振り返りに利用していきたいと思ってます。「継続は力なり」で。

追伸:欲張って「恋愛物」のブログも立ち上げたのですが(今回記載のURL)、そちらの方が読んでいただきやすいみたいです。
Posted by Katsu at 2005年04月01日 13:59
Katsuさん、こんにちは。

私の拙い説明で分かって頂けてよかったです。

「継続は力なり」まさにその通りですね。
頑張って続けられてくださいね。
私も負けないように頑張りたいと思います。

追伸、もう一つのブログ拝見させて頂きました。
こういった関係のブログは初めてだったので
ちょっと興味をそそられました。

話は変わりますが、もしよかったら私のサブブログ
「アフィリエイトならSeesaaBLOGでしょ!」(名前にリンク貼っています。)
も覗いて頂けたら、ちょっとしたお小遣い稼ぎに役に立つと思います。
時間があるときにでも見てやって下さい。

今後とも宜しくお願いします。
Posted by Seesaa大好きケンジ(管理人) at 2005年04月01日 14:48
「たぬきのしっぽ」というオンラインCSSエディタを作りました。
ベータ公開中ですが
CSSに詳しい方CSSで先鋭的なデザインをされている方に試していただき、
改良点等ご指摘をいただければうれしいです。
よろしくお願いします。
http://styletanuki.seesaa.net/
Posted by PET at 2005年04月01日 16:11
はじめまして、PETさん。

コメントありがとうございます。

こんなのを作れてとても尊敬いたします。
私の記事の中でスタイルシートに関して、間違っていたり
誤解を招く恐れがある時は、コメントしていただきたいです。

今後とも宜しくお願いします。
Posted by Seesaa大好きケンジ(管理人) at 2005年04月01日 16:29
早速評価していただきありがとうございます。ぺこりです。
ヘルプ等書いていかないとわかんないですよね。
こちらこそ今後ともよろしくお願いします。
Posted by PET at 2005年04月01日 16:32
はじめまして。
ブログを始めたばかりで、右も左も全くわからない、
みわねこと申します。
特にスタイルシート(CSS)に関しては全くお手上げの状態です・・・。
ブログのテキストの行間をあけて読みやすくする、ということすら出来ずに半泣きでした。
結局、今回はツレに頼み込んで、こちらのページを参照させて頂き、問題を解決させて頂きました。
ありがとうございました。
Posted by みわねこ at 2005年04月09日 18:38
はじめまして、みわねこさん。

コメントありがとうございます。

> ブログのテキストの行間をあけて読みやすくする、ということすら出来ずに半泣きでした。
> 結局、今回はツレに頼み込んで、こちらのページを参照させて頂き、問題を解決させて頂きました。

拙い説明で申し訳ありません(汗)
スタイルシートの説明は、なかなか難しく私もどうやったらいいか悩んでいるところです。

これからは、もう少し具体的に説明していこうと思っていますので、
少しでも理解していただけたら幸いです。

今後とも宜しくお願いします。

追伸、ブログ拝見させて頂きました。
なかなか独自路線を歩いてらっしゃいますね。
これがブログのいいところだと思います。
自分の好きなことを好きな時に書く。
これからも、独自路線で頑張ってください!
Posted by Seesaa大好きケンジ(管理人) at 2005年04月09日 18:39
ケンジさん 今日もこんにちはぁ〜

今日もケンジさんのブログに入り浸りです(笑)

3.カラー・バックグラウンド(背景)に関わる物
で説明されている

『画像URL』ってどうすればわかりますか?
素材屋さんから「画像を名前を付けて保存」で持ち帰った物を背景にしてみたいと思ってるんです。

自分のブログに画像をアップロードしました。
こーピーボタンを押したら

<img src="http://damedame-ningen.seesaa.net/image/83n815B83g.gif" alt="ハート.gif" width="200" height="200" />

ってなったので


background-image:url(http://damedame-ningen.seesaa.net/image/83n815B83g.gif
って入力しましたがダメでした。

画像のURL はこれじゃないって事ですよね。

いつか教えて下さい。

追伸、今だにどんな本を買えば良いか悩んでます。
ケンジさんが紹介している
一番右の本
【スタイルシート スタンダード・デザインガイド―SEO/ユーザビリティ/アクセシビリティを考慮した実践的HTML&CSSデザイン術】が良いかなぁ〜。って思ってます。

本探しだけで疲れてしまいます(苦笑)
Posted by ちゃむ at 2005年05月12日 11:02
ちゃむさん、こんにちは。

もしかしたら、
background-image:url(http://damedame-ningen.seesaa.net/image/83n815B83g.gif);
にすれば、できるかもしれません。

文末に;を付けてみてください。

追伸
おすすめ本で紹介している本は、
「HTML&CSSマスターブック」だけ
私が自分の目で見ています。
関連本は、私が自分で見たわけではないので
なんともいえないです。
勘違いさせていたら、すいません。
アマゾンでよく売れている本みたいなので
悪くはないと思います。
ただ私の印象では、結構内容が多くて難しいそうだなという印象を受けます。
レビューなどを参考にしたらいいと思います。
アマゾンに行ったら本を読んだ感想を書いている人がいます。

後、時間があるときにHTML、CSSに関する本を
一度本屋で立ち読みしてもいいかもしれませんね。
Posted by Seesaa大好きケンジ(管理人) at 2005年05月12日 17:49
こんにちはヽ(*^^*)ノ

ケンジさんに教えていただいた通りにやったら出来ました〜(≧∇≦)

でも、元々のスタイルシート「ダイアリー」とは合わない気がして、全部の背景を
http://damedame-ningen.seesaa.net/image/83n815B83g.gif);
にしよう!と思って

containerのbackground-image:urlと
bannerのbackground-image:urlを

http://damedame-ningen.seesaa.net/image/83n815B83g.gif);にしてみてプレビューで確認したら、
記事の部分に元々のダイアリーのブルーが横じま状態に出てしまいました(涙)
他のbackgroundも変えないとダメってことですよね。

なので、今はbodyだけ変えてみました。

やっぱケンジさんはすごいですねヾ(@~▽~@)
質問に的確に答えてくれるし〜♪
自分ではわかっていても人に教えるのって難しいのに。尊敬しちゃいます。

本のことですがアマゾンのレビュー読んでるんですが、そのレビューで使われてる用語とかわかんなかったりするので、
ケンジさんのおっしゃる通り 本屋さんで立ち読みしてみます。

いつもケンジさんには、救われています。
本当にありがとうございます。
ガッテン♪
Posted by ちゃむ at 2005年05月13日 11:11
こんにちは、ちゃむさん。

そんなに誉めて頂いて恐縮ですm(_ _)m
私もまだまだ勉強中です。

ガッテンしていただけて嬉しいです。

CSSは、結構細かく設定しないとうまくいきませんが、
うまくいったときは、気持ちいいですよね。

少しずつ、頑張ってください(^_^)
Posted by Seesaa大好きケンジ(管理人) at 2005年05月13日 15:33
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス: [必須入力]

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※半角英数字のみのコメントは投稿できません。
この記事へのトラックバック
この記事へのTrackBack URL
http://blog.seesaa.jp/tb/2717566
※スパム対策のために管理人が承認したトラックバックのみ表示させて頂いています。
すぐに表示されないからといって連続で送る必要はありません。
※半角英数字のみのトラックバックは受信されません。

このページのトップへ▲
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。