ISARA[イサラ]模写終盤。ディセンダとは?sectionにheightを指定する必要ある?

f:id:gharuto:20200610094727j:image

プログラミング学習始めて7ヶ月ちょっと。

現在ISARAの模写中です。

進み具合はこんな感じ↓

f:id:gharuto:20200609222140p:plain
isara.life模写制作LP
f:id:gharuto:20200609222156p:plain
isara.life模写制作LP
f:id:gharuto:20200609222210p:plain
isara.life模写制作LP
f:id:gharuto:20200609222226p:plain
isara.life模写制作LP
f:id:gharuto:20200609222240p:plain
isara.life模写制作LP
f:id:gharuto:20200609222252p:plain
isara.life模写制作LP
f:id:gharuto:20200609222306p:plain
isara.life模写制作LP
f:id:gharuto:20200609222320p:plain
isara.life模写制作LP
f:id:gharuto:20200609222332p:plain
isara.life模写制作LP

 

約10日間で結構進みました。

後は「よくある質問」のアコーディオンと、フッターだけです。

 

ディセンダとは?

ディセンダについて少し説明します。

ここ↓

f:id:gharuto:20200609222528p:plain
isara.life模写制作LP

 

黄色い線の部分は画像なのですが、画像の下に微妙に余白ができてますよね。

これが、ディセンダとよばれるやつです。

ディセンダとはインライン要素の下に出来るわずかな余白で、

なぜ出来るかと言うと、アルファベットのgとかyってaやbに比べると少し下にはみ出てますよね。

その分の余白が取ってあるんです。

(ディセンダとは、日本語で「高い所から降りる、下る]などの意味です。)

画像もインライン要素なのでディセンダが出来てしまいます。

これを無くすには、vertical-align:bottomを指定します。

 

sectionてheightを指定する必要ある?

今まではsectionごとにheightを指定していたのですが、

ふと「heightって指定する必要ある?」と思いました。

要素って、中身の量によって自動的に高さが伸び縮みしますよね。

だから別にsectionにheightを指定しなくても、ちゃんと上下にpaddingを指定していれば同じ見た目になるんですよね。

特にレスポンシブデザインの事を考えると、heightを指定せずに中身の量によって伸び縮みした方がいいんじゃないか?

ということで、sectionにはheightを指定するのをやめました。

 

感想。

イサラの模写もあとちょっとです。

始めた時は「めちゃくちゃ長いな~」と思っていましたが、少しずつ少しずつ積み重ねていき、気づけば後少し。

前半は時間かかりましたが、後半は要領をつかみ進みが早くなりました。

これが終わったら、次はイサラのレスポンシブデザインをやろうかと思ってます。

まだまだいっぱい模写をしなければなりません。

今は下積みだと思い頑張ります。

1年経てばだいぶ成長してるでしょう。

 

テックアカデミー無料体験はこちら↓

 
TechAcademyの無料体験
 

コメント

タイトルとURLをコピーしました