ピュアチャ〜ジ

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

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

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


[ピュアチャ〜ジ]

はいどうも!

今日も作業進めました!

 

【今日進んだところまでのHTML】

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

 

【HTML1】

今日はまっさらな状態から始めたので、DOCTYPE〜のところも記述しました!

ただ、これは絶対記載するのでテンプレとしてメモっておけば問題なさそうです。

 

今日の気づき

特に意味を持たないかたまりを<span>で定義すること

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

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

 

【CSS1】

@charsetの宣言もテンプレでいけるので、メモで記録しておきます。

HPを表示させた時に表示されるリセットCSSは未だに謎ですが、とりあえずコピペで大丈夫っぽいのでとりあえず今はこのまま前に進もうと思います。笑

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

 

【CSS2】

ヘッダーの記載がちょっと悩みましたが、

縦幅=height+paddingの上下の和 ってことがわかりました!

今までは、height=縦幅だと思ってたんですが、それだけではなくpaddingも足してあげることでheightを算出できるんだって学びになりました!

 

ロゴの「京都の学生向け〜」って文字と「NEST hair」との文字間は、line-height: 1;にして行間をなくし、「NEST hair」にmargin-topを設定することによって文字間を指定することができました!

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

 

【CSS4】

①header nav ul li a:hover {

↑これで記載した際、インライン要素のaの文字からマウスが外れてしまうと装飾が適用されません。実際は、liタグを設定しているブロック要素の上にマウスが来た際、そのaタグに装飾をしたい場合は以下を記述します。

header nav ul li:hover a {

hoverの位置を変更してliタグの右側に置くことで変更ができます。

②①だけだと、下線が追加されるだけなので、下向きの三角形も追加する必要がありました。背景として、下向きの三角形を追加する記述もする必要があります。

center bottom の部分で、「中央の下部分」という記載です。

liタグはブロックタイプなので、三角が文字のかなり右側にいってしまうためdisplay: block;で、インラインタグの要素も持ちつつブロックタイプとして指定する必要があります。

今回は画像の形や大きさも考慮しheight: 36px;の指示でちょうどになりましたが、これは使う画像によっても変化するんだなと学びになりました。

 

aタグにつけているheight: 26px;について。

aタグと下線の距離を取るため、高さの指定を行なっていますが、通常インライン要素のaタグは高さの指定はできません。高さの指定をするにはブロック要素にする必要があるため、display: inline-block;として、インライン要素でありつつブロック要素であると言う指定をしています。

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

【CSS5】

mainimageについて。マージンも境界線を設定した後に、最初heightとして設定されていた310pxではちょっと写真よりもちょっと大きくなっていました。写真サイズを見て、その高さ(290px)に設定しなおして、ぴったり納めました。

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

 

 

今日の作業はここまでです!

夜に中華を食べて、いい感じに復活できました!笑

 

それでは皆様、良い夜を〜