1p
トップ > 超初心者でも分かるホームページの作り方 > 超初心者でも分かるCSSのプロパティ

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

初心者向けに、CSSの「プロパティ」をレクチャーします。「プロパティ」とは、大雑把に言えば、CSSの「{}」の中で使う英語の文字のところのことです。

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

  1. 超初心者でも分かるCSSの[h]タグの書き方」で例示したCSSは、以下のようなものでした。
  2. 
    h1 {					/* 見出し */
    	font-size: 140%;		/* フォントの大きさ指定 */
    	padding: .25em 0 .5em .75em;	/* 枠線との境界幅 */
    	border-left: 6px solid #ccc;	/* 左の線の指定 */
    	border-bottom: 1px solid #ccc;	/* 下線の指定 */
    	border-color: #800080;		/* 線の色 */
    }
    
    
  3. ここでは、全ての行に説明を書きましたし、基本的に英単語なので、大体意味が分かると思います。
  4. 例えば、「padding」が、よく分からない時には、「padding html」などと、グーグル検索すると、解説ページが出てきます。そうして、枠線と文字との境界幅の設定の仕方を学ぶと言う流れになります。
  5. 次に、「#」の後に書く「色指定」ですが、実際に「原色大辞典」などのサイトで、色見本を見て決めると良いでしょう。ここの「パルテルカラー」が、とても使い勝手が良いです。

CSSプロパティの値の変更

  1. 実際に、CSSプロパティを少しいじって見ましょう。
  2. 例えば、「border-bottom」を検索すると、「クイックリファレンス」と言うサイトの情報が出てきます。
  3. ここでは、「1px」を「5px」に、「solid」を「double」にして見ましょう。
  4. 
    h1 {					/* 見出し */
    	font-size: 140%;		/* フォントの大きさ指定 */
    	padding: .25em 0 .5em .75em;	/* 枠線との境界幅 */
    	border-left: 6px solid #ccc;	/* 左の線の指定 */
    	border-bottom: 5px double #ccc;	/* 下線の指定 */
    	border-color: #800080;		/* 線の色 */
    }
    
    
  5. すると、以下のような結果になりました。
  6. プロパティ
  7. 少しだけ変わりましたね。慣れるまでは、少し変えては、確認し、また変更を繰り返す方が良いでしょう。

豆知識



前へ  目次  次へ

免責事項・著作権表示

情報が古かったり、間違っていることなどによる損害の責任は負いかねますので、ご了承ください。

Copyright (C) SUZ45. All Rights Reserved.