超初心者でも分かるCSSのプロパティ

はじめに

CSSのプロパティのテンプレート

1. 「超初心者でも分かるCSSの[h]タグの書き方」で例示したCSSは、以下のようなものでした。

h1 {					/* 見出し */
	font-size: 140%;		/* フォントの大きさ指定 */
	padding: .25em 0 .5em .75em;	/* 枠線との境界幅 */
	border-left: 6px solid #ccc;	/* 左の線の指定 */
	border-bottom: 1px solid #ccc;	/* 下線の指定 */
	border-color: #800080;		/* 線の色 */
}

2. ここでは、全ての行に説明を書きましたし、基本的に英単語なので、大体意味が分かると思います。
3. 例えば、「padding」が、よく分からない時には、「padding html」などと、グーグル検索すると、解説ページが出てきます。そうして、枠線と文字との境界幅の設定の仕方を学ぶと言う流れになります。
4. 次に、「#」の後に書く「色指定」ですが、実際に「原色大辞典」などのサイトで、色見本を見て決めると良いでしょう。ここの「パルテルカラー」が、とても使い勝手が良いです。

CSSプロパティの値の変更

1. 実際に、CSSプロパティを少しいじって見ましょう。
2. 例えば、「border-bottom」を検索すると、「クイックリファレンス」と言うサイトの情報が出てきます。
3. ここでは、「1px」を「5px」に、「solid」を「double」にして見ましょう。

h1 {					/* 見出し */
	font-size: 140%;		/* フォントの大きさ指定 */
	padding: .25em 0 .5em .75em;	/* 枠線との境界幅 */
	border-left: 6px solid #ccc;	/* 左の線の指定 */
	border-bottom: 5px double #ccc;	/* 下線の指定 */
	border-color: #800080;		/* 線の色 */
}

4. すると、以下のような結果になりました。

5. 少しだけ変わりましたね。慣れるまでは、少し変えては、確認し、また変更を繰り返す方が良いでしょう。

豆知識

• CSSのコードを提供しているサイトの見本は、色がバラバラだったりするので、統一感を出す為に、色指定は、色々やってみることをお勧めします。

免責事項・著作権表示