【WEB制作練習①】趣味レベルで作ったサイトで学んだこと

ども、Shinです。

いい加減にWEBサイトを実際に作ってみたいので、こちらのサイトを参考にして練習してみました。

そのときの奮闘記録を残しておきます。

(コードを掲載しようと思いましたが、体裁が悪いのでやめておきます。)

HTMLですね。

クラスとIDの使い分けがピンとこなかったので調べました。

クラスは重複して同じ名前を使ってもいいとのこと。同じような処理を行うときはクラスで同じ名前で設定してあげればいい。

逆にIDの場合は、固有の名前しかつけることができない。同じ名前をもう一度使うことができないから注意が必要。

文法ミスでもないのに、CSSに反映できないときがあったので模索してみた結果。

htmlからCSSへLinkで中継するときのパスをミスっていた模様です。

最初は「style.css」とパス指定していましたが、「/style/style.css」が正解でした。Udemyで習っていたときは前者で指定していたので気づくのに手間がかかりました。

忠実にCSSをコーディングしていましたが、謎の余白に悩まされました。

ググってみたところ「marginとpaddingを0にすると良い」と書いてあったのでbody要素に入れ込んでみたところ、余白が消えました。

消えたのはいいものの、若干お手本サイトと違うのが気になりましたが、ここは考えても拉致があかないのでそのまま続行します。

サイトを作成するときはデフォルトで入っている邪魔な値を削除する必要があります。

余計な値が初期値で入っていると理想通りのレイアウトを作ることができないことがあるので、そのためにリセットCSSを組み込みました。

テンプレでコピペできるリセットCSSがあるので今回は当該ページにあるリセットCSSを利用しました。

今回の企画の所感

やはり実践でコーディングした方が記憶に残りますね。

最初は写経しながら覚えて、2度目は何も見ずに記述しました。自分の頭の中で考えると「ここはこうだからこれがいるよな」的な思考ができるから上達速度がグンと早いです。

まだJSではなくてCSSで止まっているので、さらに磨きをかけて早くJSを組み込んだWEBを制作したいです。

また、ずっとサイト作りも大変なので次回はPythonでも触ってみようと思います。

お疲れ様でした。

（執筆時間：25min）