読んで欲しい人
HTML・CSSの基礎を学んで行き詰まっているかた
まだ、Web制作のイメージが沸かないかた
そんな初学者の方への記事です。
完成品
本を見ながら、約2時間ほどでできました。
これから、メニューのリンク先ページ（NEWSやMENU、CONTACT）を作成予定です。
経緯
わたしはドットインストールで基礎を学んだのち、模写コーディングに挑戦しました。
しかし、結果は惨敗でした。全然、できません（泣）
理解したつもりで、何一つ身についていませんでした。
そして、わたしが次に頼ったのは、「本」です。
わたしが頼った本は、「1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座」という本です。
「１冊ですべて身につく」という題名に惹かれました。
HTMLとCSSの技術を自分のものにする挑戦スタートです！
本の内容
HTMLとCSSの基礎、そして実際のサイトづくり（模写コーディング）です。
内容は、初学者にもわかるように、シンプルかつ丁寧に説明されています。
また、「すべて教える」というより「Web制作で使う知識に限定」して書かれています。
買ってよかったです。
学んだこと
リセットCSSは、WEBサイトのリンクを貼ることでも指定可能！
<link rel=”stylesheet” href=”https://unpkg.com/ress/dist/ress.min.css”>
フォントは、WEBサイトのリンクを貼ることでも指定可能！
<link href=”https://fonts.googleapis.com/css2?family=Philosopher&display=swap” rel=”stylesheet”>
CSSクラスは、他のページでも使うための「共通部品」を意識するとよい。
html { font-size: 100%;}を指定することで、各ユーザー指定のフォントサイズが基準になる。
a { text-decoration: none;} を、共通部分として最初に設定すると、後からaタグの下線を消す作業がなくなり、手間が省ける。
img { max-width: 100%;} を設定することで、画像が親要素より大きくなるのを防ぐことができる。
{ max-width: 1100px; margin: 0 auto; padding: 0 4%;}を設定して、最大幅と中央揃えの設定をしておくと、サイト全体がいい感じに整ってレイアウトが効率的にできる。
{ background-size: cover; background-position: center top; background-repeat: no-repeat;}で、大きな背景画像がいい感じにできあがる。
まとめ
ドットインストールでの基礎学習や模写コーディングに行き詰まったら、書籍に頼るのもいいでしょう。
出版社を通しているので、間違った解釈が書かれている危険がありません。
挫折しては、せっかくプログラミング学習したのにもったいないです。
答えを見ながらでもいいので、Webサイトを作ってみましょう。
一緒に一歩踏み出しましょう♪
では！
コメント