初めてLPコーディングしてみて
初めてのLPデザインを終え、ついにコーディング！
躓いては解決するをとにかく繰り返しまくったので、今回学んだこと、躓いたポイントをまとめることで、皆さんの学習の一助になりましたら〜幸いです！
学んだこと
⚫︎デフォルトでmarginが指定されてることがある！
今回コード書き始めて、
「なんだっ！絶妙に2~3pxくらい余白があるぞ…！」
とツイートしたら、
「あ〜デフォでmarginついてるから、margin:0;指定しないとね」
とAiちゃまに教えていただきました。
ほほ〜そうなんですね！初知りメモメモ。
⚫︎背景をグラデーションにする
前回フラットデザインとマテリアルデザインについて書きましたが、今回FVの背景デザインにグラデーションを使用することになりました。
グラデーション設定方法はこの記事で読めます
グラデーションの向きや角度も簡単に指定することができるんです〜！
⚫︎ボタンをaタグで実装する
ボタンは画像を貼り付けて、画像に対してaタグをくっつけるものだと思ったのですが、aタグでボタンも作れるんですね−！
.cta a{
color: #333;
display: block;
width: auto;
height: auto;
font-size: 3.6rem;
letter-spacing: 0.05em;
text-align: center;
text-decoration: none;
background-color: #F3BD00;
margin: 0 auto;
position: relative;
top: 0;
border-radius: 5px;
box-shadow: 2px 4px 0px #7C6100;
padding: 3rem;
}
⚫︎プロフィールのように画像を小さく丸く切り抜く
⚫︎要素の上に要素を重ねて配置する方法
2つの要素A,Bがあって、
AをBの上に配置したい場合は、z-indexを使えば楽々でしたー！
A{
`position:relative;`
`z-index: 0;`
}
B{
`position:relative;`
`z-index: 1;`
}
を指定する
躓きPOINT
position:relativeで子要素を移動させた時に生じる余白を消す
position:relative;で画像を移動させたら、元々画像が配置されていた位置に余白ができてしまいました。
そこで調べてみると、
position:relative;を使用した場合
要素は元の位置から指定された距離だけ移動しますが、元の位置はそのまま残ります。つまり、要素の実際の位置は移動しますが、スペースは元の位置を占有し続けます。
だそうです…！へ〜初知り。
position:absoluteはスペースは元の位置を占有しないので、
親要素にposition:relative;を指定して、
子要素にposition:absolute;を指定すれば、余白を消すことができました〜！⭐️
⚫︎口コミをスライダーで表示させた時に、次のコンテンツが侵食して余白が入ってしまった。
width:100%;を指定したり、margin:0;を指定したりしても無くならなかったこの余白。解決方法は・・・
mainタグで囲んでmainタグにoverflow:hidden;を入れる！
bodyに入れてしまうとそもそもスライダー機能が発揮できないので、bodyに入れるのではなく、mainタグで囲むのがポイントだそうです、！素晴らしすぎる大発見…！
この大発見をご教示してくださったM・N氏からの解説を貼り付けます！
M・N氏より
overflow:hidden;について
はみ出しとかスクロールを制御する時に使うって認識ですー。
bodyにいれちゃうと、画面内にはみ出さないように制御するのでスクロールできなくなっちゃうのですよねー。
特定の要素にいれると、その親要素の範囲（今回はbody）からのはみ出しを制御するだけなので、ページ全体（body）のスクロールには影響しないってゆう。
なんとありがたいお言葉。今回はこの言葉のおかげで記事がバシッと締まりましたな〜(((o(ﾟ▽ﾟ)o)))
まとめ
まだまだ知らないことだらけだ〜〜〜と思いますが、こんな感じで毎回知識を貯めていけば、もっとコーディングがスムーズになるんだろうなと！明るい未来がチラ見えしました！
わからないことはまず調べてインプット、そして得た知識をアウトプット。
徐々にできてきてるので、引き続き頑張ります！
次回はセレクタの並び方やコードの美しさにも気をつけたいなと思っております！
最後までお読みいただきありがとうございました〜！