2.CSS

こんにちはー。

年に1度の高熱で死んでいたやまうちです。

次はCSSですね。HTMLが文字だったのに対して、これはデザインです！

色とか並び方とか！

本当であればHTMLのところでstyleとか指定すればかけるんですけど、

めんどくさいというか見にくいから文字とデザインでしっかり分けるんです！

では早速入っていきたいのですが、

デザインを指定するときに"どこにどんな処理をするか"を指定すればいいですよね。

このときに役立つのがさっき最後にやったクラス名とタグです。

具体的には

タグ(どこの){

　　プロパティ名(何を) :値(どうするか);}

または

.クラス名{

　　　　　プロパティ名2: 値2;}

のようにしてHTMLのタグやクラス名を指定してどんなデザインをするかを決めていきます。

これで全てと言っても過言ではありません。

あとはプロパティ名を色々使い方で分類して覚えるだけです！

⑴色系

　color : #ff00ff00(16進数);

　background-color : #ff00ff00(16進数); , rgba(赤/緑/青/透明度);

　opacity : 0.0(透明)~1.0(不透明);

⑵文字系(サイズ,太さ,種類など)

　font-size : ~px;

　font-family :  ~ , "~~"(2語以上のときは""をつける);

　font-weight : 100(最も細字)~400(normal)~700(bold)~900(最も太字);

　letter-spacing : ~px

⑶配置系

　float : left , right(横に並べる) ;

　position : absolute, relative, top:~px left:~px, fixed(固定したい場合) ;

　display : block(縦), inline(横), inline-block(横), none;

　z-index:1,2... と指定でき、大きいものが上に重なる(z軸と同じイメージ)

　text-align : left/center/right; 

 文字も画像も何も指定しなければ左上からどんどん詰められていく。

そのため指定したい位置やサイズがあれば、

文字→文字の大きさ&並び方

画像(テキストボックス系)→箱の大きさ(width,height)&位置(margin,padding)

を指定する必要がある。

⑷画像系

　width : ~px(横幅);

　height : ~px(高さ);

　background-size : cover(背景を埋める様に画像を配置) , contain(はみ出した部分は切れてしまう)

⑸テキストボックス系 

　width : ~px(横幅);

　height : ~px(高さ);

　padding : 値の数で指定する場所が変化(文字の箱の内側の余白を調整)

　　　　　　　top right bottom left(4つ), top&bottom right&left(2つ), top&right&bottom&left(1つ) 

　margin : ↑同様,  autoにすると中央配置になる(文字の箱の外側の余白を調整)

　box-shadow : 水平方向の距離, 垂直方向の距離, (ぼかしの距離, 広がりの距離,) 影の色;

　line-height : ~px(~pxのテキストボックスの中央に文字が配置される);

　border-radius : ~px;

⑹変化系(カーソルに反応する,時間変化するなど)

transition : 変化の対象 変化時間;

タグ or .クラス名 : hover→カーソルが上に来た時にCSSを適用

タグ or .クラス名 : active → クリック時に変化が起きる

⑺その他

span : spanタグで囲ったものだけ限定的にCSSを適用出来る