ピュアチャ〜ジ

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

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

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


[ピュアチャ〜ジ]

はいどうも!

 

今日も作業をしましたので報告です!

 

【擬似クラスの使い方】

a:hover = マウスが上にかぶさった時

a:active = マウスを押している時

 

アンカーリンクを指定し、さらにどういうアクションをしているかという指示です!

マウスを上にかざした時とかボタン押した時とか、表示が切り替わるWebサイトってありますよね、そのスキルを手に入れました!笑


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

 

【子孫コンビネータの使い方】

このタグで行くと、ulタグは2箇所ありますがid属性がredのliに対してだけ文字色を赤色にするっていう指示です!

これはタグ見ればなんとなくわかりました。

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

 

【二つのセレクタに対して同じ装飾をする場合】

セレクタセレクタの間に「,」を記載することで2種類(3種類)のセレクタに対して同じ装飾をすることができます!これだとthとtdですね!

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

 

【リストタグの最初と最後だけ別の指示を出す場合のタグ】

first-childだと最初のタグに適用

last-childだと最後のタグに適用

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

 

【打ち込んだコード】

t

【作成したページ】

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

float: left; = 左から寄せる指示

border-left: = 左側に境界線を表示する指示

border-right: 一番右側は境界線が表示されないため、リストタグの最後という意味のlast-childという擬似クラスを記載しその部分だけ右側に境界線を表示

 

 

今日はこんな感じです!

 

ちょっとご飯に行ってきて、帰宅後もう一度作業をしようかなと思っています。

(お酒が出るから戻ってこれるだろうか、、、w)

 

強く心を持ち行ってきたいと思います!笑

 

今日は、ここまで!