どうも、チャーさんです。
この記事では、cssの書き方を書いています。
具体的にはclass、classを複数使う方法、
idについてとcss書き方についての内容なので、
この記事を読めばcssの書き方がわかるでしょう。
という事で、あなたがcssの書き方を
調べているならばこのまま下にスクロールし、
読んでみてください。
スポンサードサーチ
目次
cssの書き方class編
まずclassとは？というとこから説明すると
classとは、htmlタグにつける独自の名前です。
これをつける理由は、個別の要素に、
デザインをほどこすためです。
例えば、
<p class=”text”></p>
などのようにhtmlタグにclass=と続けて、
独自に名前をつけれまして、
このtextというclass名
(classとしてつけた単語をclass名という)
がついた場所だけデザインをするということができるのです。
textというクラス名をつけた部分だけ
赤文字になってますように、
classを使うと部分的に簡単にデザインを変更できます。
なので、要はclassとはあなたがデザインしたい部分に、
(デザインつけたいhtmlタグの場所に)名前をつけて、
その部分だけデザインを施すみたいなもの、
だと思ってください。
classの書き方
そしてclassの書き方ですが、
簡単でして、まずは、
デザインを変えたい要素(例 divタグとか)に
class名をつけましょう。
名前は半角英数字で_アンダーバー
-ハイフンなども使えます。
ちなみにclass名はわかりやすいものに
するのを推奨します。
*あとでclass名を見てもなんのデザインにしたか
わからなくなるので。
そして、class名をつけたあとは、
style.cssに .class名のように、
ドットの後につけたclass名を書きましょう。
例 <div class=”box”></div>
.box {
ここにcssかく
}
するとboxというclass名が書いてある
タグにだけ書いたcssが適用されます。
スポンサードサーチ
cssの書き方classを複数つける
でこのclassですが１つだけでなく
もちろん複数つけれます。
違うclass名を複数つける場合
例えば、
<div class=”box blue”></div>
のようにclass名の後に半角スペースを開けて
別のclass名をつけれます。
（上記は今boxとblueと２つのclass名がついてる
状態です。）
この場合、このbox とblueの両方の
class名に対しcssを書けば、両方のデザインが
適用されます。
例
.box {
width:100px;
height:100px;
}
.blue {
background:blue;
}
上記のように書けば複数のclassのcssが
<div class=”box blue”></div>に適用され、
青い正方形ができます。
同じclass名を複数回使う場合
またclassの特徴として、
同じclassを何回でも違う場所に使えます。
例えば、
<p class=”text”>テキスト１</p>
<p class=”text”>テキスト２</p>
<p class=”text”>テキスト３</p>
というようなことができまして、
こうしておけば、
.text{
color:red;
}
などとすると一括してデザインを
変更することが可能です。
実際にwebページのデザインをする際に
非常にはかどるので、よく使うことになるでしょう。
スポンサードサーチ
cssの書き方classの次はidについて
classに関連してidというのがあります。
こちらもclass同様にデザインをつけたい部分に、
名前をつけてデザインをするという使い方です。
書き方も、classと似てまして
<p id=”text”></p>のようにid=に続けて
書きます。
ですが１つclassとは違いがありまして、
idは一度書いたら他の場所には使えません。
例えば、
<p id=”text”></p>
<p id=”text”></p>
とはできないのです。
idは一度きりでして、
上記のように複数の箇所に登場させることが
できないのです。
なので、一度しか使わない場所
にidを使いましょう。
スポンサードサーチ
まとめ
という事でcssの書き方class編でした。
classはcssを使ったデザインで絶対使うので、
マスターしましょう。
またcssには今回紹介したclass以外にも
色々知っておいた方が良いものがあります。
に書いてるのでcssを上達したい場合読みましょう。
それでは、読んでもらってありがとうございました。
チャーさん
