もんちゃんブログ 
この記事は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などで学んだだけだと、少ない場合もありますのでこちらを参考にしてください。
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%; }
このようにサイズ調整を行います！
クラス名はSCSSを意識してつける！
今後scssを使用していくことを考えて、クラス名を付けていくことをおすすめします。
scssとはcssの記法です。
scssについてはこちらの記事がおすすめです↓
https://arutega.jp/scss/
https://qiita.com/nchhujimiyama/items/8a6aad5abead39d1352a
最初の方はクラス名で悩み時間が取られていました…笑
様々なフォントの使用方法
デザインファイル内で使用されているフォントを使用しましょう！
Google Fonts↓
https://fonts.google.com/
そのほかの方法↓
http://www.hp-stylelink.com/news/2013/08/20130829.php
heightについて
高さを作りたいときheightで高さを作らずに、内容物のsizeとpaddingで高さを作ります。
HTMLを追加・修正した際に高さを再設定しないといけなくなりますので、メインビジュアル以外では基本的にheightは使用せず実装します。
今回はこの辺りで！
自分で調べて解決できたことや参考になったサイトはどんどんお気に入り登録していくことをおすすめします！
また忘れて調べる時にすごく便利です(*^^*)
次回からより具体的な内容をまとめていこうと思っています！
web制作、LP制作勉強中の方、一緒に頑張っていきましょー！
最後まで読んでいただきありがとうございました！
広告
