現在『ほんの一手間で劇的に変わる HTML & CSSとWebデザイン実践講座』を少しずつ読み進めています📖
ブログサイトの作り方など、より実践的で豊富なテクニックが紹介されていますが、『入門講座』を忘れ気味の自分には、ちょっと話が難しい。
説明は丁寧なものの、
読むのが中心で手を動かす機会が少なかったので、
書籍の練習用ブログページ（猫の飼い方）のサンプルコード（書籍購入者はコードをダウンロード可）をそっくり写経し、一から自分で書いてみました😃
※このブログはキャラクター同士の会話形式で進みます。 → 登場キャラクター紹介はこちら
最初にHTMLを丸ごと全部写経したらパーツごとの構成がわかりやすかった
まず最初に「index.html」がある階層に、
自分が写経するための「index-practice.html」を作りました。
外付けディスプレイの画面左側にサンプルの「index.html」、画面右側に写経用の「index-practice.html」を並べ、左側のサンプルを見ながら右側のファイルに写経していきます。
PCのメイン画面には写経用ファイルのプレビュー画面を表示しており、変更がリアルタイムで反映されるようになっています。
写経用ファイルに記載する内容は、
当然ながら本番と同内容なので、
すでに出来上がったCSSを読み込める状態に。
書いた部分から完成版が少しずつ出来上がるため、
「この部分がこういう風に表示されるんだ」と、
理解度が深まりました。
へぇー、こうやって真似するとやりやすいのね。
はい！ 完成コードと比較しやすいし、CSSをすぐに読み込んで1パーツずつ表示できるので、構造が理解しやすいです！！
あるく、羽もないのに舞い上がってるぞ。
もう、こういうときはやけに張り切るんだから・・・
あるくさんのおっしゃるとおり、HTMLを一度通して写すと、ページ全体の構造が頭に入りやすくなりますよ。
写経したHTMLの参照CSSをゼロから作っていく
次にサンプル版のCSS（style.css）と同じ階層に、写経用のCSS（style-practice.css）を作ります。
「index-practice.html」で書いた参照先CSSを、
新たに作った「style-practice.css」に変更すると、CSSの装飾がすべてなくなります。
読み込んだ画像とテキストが、上から順にただ表示されてるだけなので、いかにCSSで見やすく装飾されていたのかが、よくわかりますね。
この状態から自分がCSSを写経していくと、
一行書くごとにCSSが反映されていくので、
HTML写経とは違った角度で、CSS内容の反映をダイレクトに確認することができます。
HTMLとCSSを交互に書くよりも作業しやすく、理解もしやすいかなと思いました😀
CSSの参照先を変更すると、文字と画像だけになるからビックリしたよ
デザイン性がない一番シンプルな形だもんね。
それがHTMLの素の姿や。飾りを外して初めて、骨格が見えるんや。
いわゆるスッピンだな。
ここからお色直しをすることで、徐々に綺麗なページに戻るのかしら。
そのとおりです。この状態から1行ずつCSSを足していくと、どの記述が何を変えているかが一目でわかりますよ。
まとめ
・HTMLとCSS、それぞれ完成版と写経版を並べて作業することで、写経しやすい
・写経版ファイルを完成版と同じ階層に置くことで、完成版の内容（HTML／CSS）をすぐに反映できる
・HTMLとCSSを行ったり来たりしないので、集中して取り組みやすい
（続けて手を動かしやすい）
本の内容を手を動かして勉強をするうえで、
どういう風にやればいいかなと試行錯誤したら、
こんな形になった、というお話です。
わからないコード内容は
都度AI先生に聞いて確認していきたいと思います。
ではでは👋
