トップ　>　超初心者でも分かるホームページの作り方　>　超初心者でも分かるCSSの[class]の書き方

超初心者でも分かるCSSの[class]の書き方

はじめに

初心者向けに、CSSの[class]の書き方をレクチャーします。「class」とは、「div」とかに書いて、HTML文章を装飾する時に使います。

CSSの[class]の書き方のテンプレート


div.sample1 {
	text-shadow:3px 3px 2px #0000ff;	/* 影をつける */
	text-align:center;	/* 文字を真ん中に持ってくる */
}

これは、前回作った「div」のCSSですが、「.sample1」と言うのが、書き加えられています。これを書かないと、ホームページ中の全ての「div」の設定が、同じになってしまうからです。

そして、この「sample1」と言うのを、「hp01.html」の側にも、反映させる必要があります。


<div class="sample1"><p>サンプル文章</p></div>

具体的には、「hp01.html」の中の「<div>」を「<div class="sample1">」とするだけです。これにより、ここの「div」〜「/div」のみが、「sample1」の設定になるのです。

CSSの[class]の書き方のテンプレート２


.button {
  display       : inline-block;
  border-radius : 5%;          /* 角丸       */
  font-size     : 12pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 10px 10px;   /* 余白       */
  background    : #EDDEFF;     /* 背景色     */
  color         : #7f007f;     /* 文字色     */
  line-height   : 1.5em;         /* 1行の高さ  */
  transition    : .3s;         /* なめらか変化 */
  border: 1px dotted #333333;"
}

このように、タグを指定しないで、「class」を記載することもできます。

豆知識

「class」の名前は、「sample1」に限られず、なんでも構いませんが、「.div」などは、「div.div」となってしまい、紛らわしいので避けましょう。
「class」は、文中に何度でも使うことができます。
「body」タグのCSSは、文章のほとんど全てに適応されるので、設定は、慎重に行いましょう。

前へ　　目次　　次へ

免責事項・著作権表示

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