ピュアチャ〜ジ

広告代理店のディレクターを辞め、マレーシアに飛び立ちました。ふわふわ生活して、やっぱり収入を上げて豊かに人生にしたい!と思いプログラミング学習を始めました!フリーランスまでの道のりを描くブログです

Webデザイン勉強50日目の成長報告!

こちらのWebサイトは移転しました。


[ピュアチャ〜ジ]

はいどうも!

 

あ〜50日目か!50ってなんか強い数字ですね

5っていいな。

はい、どうでもいいです。笑

 

今日の作業進捗報告です!

 

ついにCSSに突入しました!いよっ!

CSS=文字の装飾

f:id:terushi-diary:20191010212922p:plain

このように記述します。

セレクタ、プロパティ、値の順番

 

f:id:terushi-diary:20191010213129p:plain

CSSの記述の基本!

 

【@charset "UFT-8";】

 何の文字で記述するか!これがないと読み込みできなかったりするみたいなので必須です!

 

 【@import "import.css";】

 cssファイルをcssにインポートするときのタグです

 あんまり使わないみたいです

 

f:id:terushi-diary:20191010213528p:plain

f:id:terushi-diary:20191010213534p:plain

f:id:terushi-diary:20191010213541p:plain

↑リセットCSSです。

1枚目は範囲の横幅や上の部分に余白があるんですが、これをなくしてくれるCSSです。

「リセットCSS」でググればたくさんでるらしく、それをコピペして貼り付けただけなので意味はわかっていませんが動画でも解説なかったので大丈夫っぽいです。笑

 

f:id:terushi-diary:20191010213817p:plain

f:id:terushi-diary:20191010213824p:plain

f:id:terushi-diary:20191010213830p:plain

上の画像2枚を表現するためのCSSがこちらです。

 

【*】

 全てが対象ということを表現するセレクタ

 margin、paddingで画像の余白を無しにするという意味です。

 list-styleをnoneで、liタグのスタイル(・)をなくす指示。

 

【header h2】

 ヘッダータグのh2という意味。

 text-align: center;  =真ん中揃え

 

【header nav ul li a】

 ヘッダータグのナブタグの中のユーエルタグの中のリストタグの中のAタグの意味

 ↑カタカナわかりづらいw

 text-decoration: none;   =   文字の下線を消す指示(ブラウザでaタグに下線という指示を出しているため、それを消す)

 

【section#activity】

 セクションの中のアクティビティタグにのみ指示を出すタグ。

 #の後ろにはHTMLで記述しているid名を記述する

 

こんな感じ!

フォントサイズとかカラーは省きました!

カラーとサイズの前にはtextって文字の記述はいらないんですが、デコレーションとはアラインはtextがいるのがちょっとややこいんですが、なれるんですかね!

文字サイズと色は、当たり前すぎてtextいらねえだろ!みたいなノリなのかな?w

 

 

今日の作業はここまで!お疲れ様でした!