プログラミング復習帳〜その1〜

この記事はweb制作を学んでいる際に、自分が調べて学べたことや、メンターさんに指導をもらったことを自分の復習としてまとめています。

Progateをやった後や、コーディングで悩んだ方の参考になれば嬉しいです。

また、他の方のブログ記事をたくさん記載させて頂いています。
いつも参考にさせていただいており、感謝いたします！！

学習中であり不完全なところも多くありますので、気になる所があれば先輩方にアドバイスをいただけると嬉しいです！

今回はその1との名前の通り、初めてメンターさんにいただいた課題に取り組む際の学びをまとめていきます。
Progateを終えたばかりの方や、初めて模写コーディングを行う方にぜひ読んでいただきたいです！

ポイント1 まずはとことん調べる！！

ポイントと言いながら、当たり前のことを書いていますが、自分がスキルを習得したくて学んでいるためここは欠かせないポイントだと思います。
しかし、メンターさんについてもらっていることは、非常に心強いですね！
調べても解決できないことや、実装できたものの不安なことはメンターさんに確認することが大切ですね！
私も初めて沼にハマってしまった時に、「悩めば悩むほどしんどくなることもあるので、早めに助け舟を出しますよ」とコメントをいただき、非常に助かりました…

それでは、内容に入っていきます！

復習帳

XD・Photo shopを使ってみる

最初に課題としてXDファイルをいただいたのですが、そこでまず引っかかってしまいました。
XDとは…？？
と言うような感じでしたが、Adobeが使える環境ではあったので、調べてインストールしました。

「画像の書き出しをしてHTMLの作成を進めてください」
とのこと。
“HTMLの作成”はわかるけど、”画像の書き出し”とは？？
と言うような私と同じ状態の方におすすめなのがこちらです↓

https://haniwaman.com/photoshop-coding/#i-2

https://haniwaman.com/xd-coding/

https://guuten.net/photoshop-coding/

このお二方の記事でファイルから必要な情報を得ることができるようになりました。

reset.cssについて

reset.cssはProgateなどで学んだだけだと、少ない場合もありますのでこちらを参考にしてください。

リセットCSSは何を使う？　比較と使い方

HTML要素を学ぶ

HTMLを書いた経験が少ないと、どうしてもdivを多用しがちになってしまいます。
divは意味を持たないレイアウト用の要素となりますので、様々な役割も持つHTML要素を使用しましょう！

section
article
figure figcaption
time
strong
dl dt dd
ol li
nav
main
aside
などなどたくさんありますので使いこなしていきましょう！
（私もまだまだdivを多用しがちです…）
全部divではダメなのか〜(´Д` )っと思っていますが、やはり意味を持つ要素を使用する方がいいのでしょうかね？
まだまだ勉強中です！！

またsection articleなどについてはこちらの記事がおすすめです↓

https://qiita.com/piotzkhider/items/faffbc4a107e7e495998

またGooglemapを埋め込む際はiframeを使用する。

imgにて画像を表示した際のサイズ調整はimg自体にwidthで指定するのではなく
p { width:500px; }
p img { width:100%; }
このようにサイズ調整を行います！