ピュアチャ〜ジ

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

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

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


[ピュアチャ〜ジ]

今日はトップページをまるっと作りました!

 

といっても最初から記述されていた部分もあったので全部ってわけじゃないですが、おおよそ自分でコード書きました!

 

 

ということで、今日書いたコードはこちらです〜

 

【完成したページ】

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

 

【HTML1】

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

 

【HTML2】

dlタグ忘れてたので思い出せました。

dlタグ=dt、ddの二つが関連付いていることを意味する

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

【HTML3】

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

 

【CSS1】

header h1について

横並びにするときは、既に左上にあってもfloatタグが必要なんだって発見がありました。

HTMLで記述した文字について、あらかじめ横幅と縦幅を区切って、要素を埋めていくのも慣れるまでは必要なんだと今日やってみてわかりました。

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

【CSS2】

画像を挿入する際は、imgでもいいですがアイコンの場合は背景としてbackgroundを使用。

要素全体が一つのブロックとして機能するよう、display: block;も必要だとわかりました。

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

【CSS3】

PAGETOPがちょっとややこしかったです!

相対範囲としてfooter_innerの右上を指定し、絶対値を入力し移動させる方法です。

 

「footer_innerにかけた指示」

position: relative;

 

「PAGETOPにかけた指示」

position: absolute;

top: -20px;

right: 0px;

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

【CSS4】

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

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

 

まだ慣れていなくて迷ったり、そういうやり方なんだ!って気づくことが多かったです。

 

これで、初級編のHP作成が終了しました。

これからは中級編として、真っ白のところから書き始めます!

 

一旦、今日はここまでとします!