30DAYSトライアル お勉強

【デイトラ】【Progate】HTML & CSS 初級・中級道場終了【30DAYSトライアル DAY6】

30DAYSトライアル

ようやく...
ようやく完了することができました!
長かったぁ。

今思い返すとしょうもないミスしてたなーとか、
色々思うところがありますが、
戒めに記録しておきます(笑)。

書いてあるのは中級編の内容です。

学んだこと・学び直したこと

paddingとmarginの違い

何回この話題出してるのって話ですが(笑)、ようやく違いが分かったような気がします。気がしてるだけかもしれませんが。

文字
ボーダー
画像

って画面上に表示されていた場合、

  • paddingは文字とボーダーの距離感。ボーダー動く
  • marginはボーダーと画像の距離感。ボーダーの位置は動かず固定

数こなしていけば、人に説明できるレベルぐらいにはなるはず!

floatが反応しない

ヘッダー作ってる時にデフォで左寄せになるから、ロゴはそのままに、ログインはfloatしてたんだけど、ログインがヘッダーを外れて下の方に。
<header>タグでちゃんと囲まれてなかったかな?って思ったけどそんなことはなく。
過去のソース見返してたらロゴもちゃんとfloatしてた。

●ロゴ
.header-left {
float:left;

●ログイン
.header-right {
float:right;

ちゃんとfloat:left;しないとダメでした。

クラス名を共通で使用

トップの幅はcontainerで制御してたんだけど、ヘッダーはまた違う名前を付けて制御しようとしてた(しかも<div class="header">とかいう名前で(笑))
おかげでヘッダーとトップ部分の幅が全然合わずになんでなんでー!ってなってたけど、下のトップ部分と同じcontainerの名前で制御してあげればずれもなくばっちり合うんだね!
なんかヘッダーとトップ部分は別物って認識があって、クラスの名前はかぶちゃいけないとかいう固定概念があったからおかしなことになってた。

<!-- ヘッダー部分 -->
<header>
<div class="header">
<div class="header-left">
<img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png">
</div>
<div class="header-right">
<a href="###" class="login">
<p>ログイン</p>
</a>
</div>
</div>
</header>
<!-- トップ部分 -->
<div class="top-wrapper">
<div class="container">

absoluteとrelativeで要素の移動と配置

だいぶ時間掛かった(笑)。
このアイコン画像の上にフォントかぶせるの。
【↓ 完成品 ↓】

最初 position:absolute;の方しか設定してなくて、アイコンにかぶさるはずのフォントがヘッダー方まで飛んで「なんでじゃ!」と思いながらうんうんうなってた。

absoluteはココがポイント

  • ウィンドウの左上を基準(起点)にして位置が移動
  • 指定した要素は高さがなくなり、浮いたような状態になる。画像などのその他の要素を無視して位置を決めてくる

relativeはココがポイント

  • 移動するときの基準が元いた位置(positionを記述する前に配置されていた場所)

absoluteとrelativeを使うときはココに注意

  • absoluteのみの指定だと私のようにうまく表示ができない。ウィンドウを起点にした移動をしたくない場合は、まず起点にしたい要素(親要素)にrelativeを記述
  • その後動かしたい要素(子要素)に対してabsoluteを記述して動かしてあげる

あともういっこ詰まったのがposition:relative;で親要素の基準値を変えた後<p>タグのtopの値を決め、文字を横にずらそうとrightの値を指定しようとしていました。
もう全然中央に配置されなくてちょこちょこpxの値を変えてたんですよね(笑)。
width : 100%;で一発で決まった時の気持ちよ。

テキストが中央寄せにならないよー

アイコン画像下のテキスト。
これを画像の真下にもっていきたくてtext-align:center;してたですけど全然中央にならなくて。。
display:inline-block;を使うのが正解だったんだけど、これに辿り着けずにめちゃくちゃ時間食いました。

displayプロパティのココがポイント

  • 今回やりたいことは『テキスト横並び』『テキストの高さを指定して移動させたい』
  • blockは要素の幅と高さを指定できる。要素は縦並び
  • inlineは要素の幅と高さを指定できない。要素は横並び
  • inline-blockは2つの特徴の間を取ったようなもので、blockは要素の幅と高さを指定でき、要素は横並び

一番苦しんだところ

やっぱり『共通のクラス名を使用して実装する』っていう考えが定着していなくて、後半これでだいぶ苦しめられましたね。
中級編が全5コースあって、全部別物みたいな感覚でコーディングしていました。

一度宣言したクラスを他の場所でも共通で使ったりする。っていう発想に中々ならなくて、無駄にクラス名を増やしてコードがめちゃくちゃ複雑になってしまうという(笑)。

1日でこの中級編道場を終わらせる勢いだったら(いや本来は4時間で終わらせないといけないのですが)「あ、あそこで使ったクラスここでも使えそう!」ってなったのかもしれないですけど、私みたいに何日も掛けてると最初にやったこととか記憶から飛んでしまう。。

仕様書に「え、ここのフォントの指示書いてないけどどうすんのよ!」って思ってたんですけど、そういうことだったんだね...って。
実際コーディングする時ってどうすればいいんだろう。
全体の仕様書見て、こことここは共通クラスで~...とかって決めるんだろうか?
そんな頭働かないよ~。。

困ったこと

スペルミスが直らない問題

『textarea』を『texaarea』と書いていた!

タグの自動生成で<texaarea>でカッコを閉じた時、</texaarea>が自動生成されたからスペルミスに気づかなくてかなり悩まされました。
便利だけどスペルミスってても自動生成されるのは困る!(笑)

フッターのスペルが『footer』なのか『fotter』なのかいまだに覚えられないー!

タグの中に処理を書かない問題

閉じ忘れというかタグを自動生成してこう⇒<aa><aa/>宣言したら改行してその下に処理を書いちゃうんですよね。
自動生成後そのタグの中に処理を書くっていうのが抜けちゃう。
結果、CSSが適用されず文字や装飾のずれが生じていたっていうのが何度かありました。

次回に向けて

次は道場上級編なのですが、1回時間測ってやってみようかなと。
4時間で終わらせる勢いで。
中級編でこのざまなのでたぶん終わらないと思うけど、時間内にどこまでできるのかを把握したい。

あと、共通でクラスを使って実装する。ということを意識してコーディングしたい。

-30DAYSトライアル, お勉強
-,

© 2021 文系女子とプログラミング