HTML&CSS

初心者が模写コーディングを開始するための準備まとめ

ProgateのHTM&CSSコースは一通りやったので、Webページの模写コーディングに取り掛かりました。

参考にさせて頂いたサイト

HPCode – はにわまんさん

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

模写コーディングのルールやfontや色、サイズを計測するChromeの拡張機能を参考に参考にさせていただきました。

模写コーディングではフォントとかまで全く同じものを作るというよりも、実際にコーディングしながら構成や配置を学んでいくことだと思うので、フォントや色にはこだわりすぎずに何となく合ってたらOKっていうように進めていこうと思います。

もちろんはにわまんさんのサイトで紹介されているChromeの拡張機能はインストールしてフォントとかは調べながらやるつもりですけどね。そこにはこだわりすぎないっていうイメージです。

HikoPro Blog – HikoProさん

https://hikopro.com/mosha-site/

模写コーディング向けのサイトの紹介で、まずは復習がてらProgateのHTML&CSS道場コースの上級編のページからスタートして、LP、ブログ、コーポレート型のサイトを難易度毎に紹介してくれています。

とりあず自分もProgateのHTML&CSS道場コースの上級編のページの模写を始めましたが、悲しいかな今の自分には中々手強いです・・・。

まだまだdivの範囲やclassの単位などがしっくりこなきてない気がしてます。この辺は焦らず模写コーディングしながらどんどん吸収していくしかないですね。

模写コーディング環境

エディタにはVisual Stadio Code(以下VSCODE)を使用してます。動作確認ははMAMPでWebサーバーをローカル環境に構築して確認してましたが、VSCODEでパチパチしてブラウザに移動してリフレッシュってのが面倒だったので、VSCODEの拡張機能をインストールしてリアルタイムでプレビューができるようにしました。

インストールした拡張機能はLive Server

Live ServerはVSCODEに簡易的なローカルサーバーを立てることができる拡張機能で、html、cssファイルを更新するとブラウザを自動的に更新してくれます。

Live Serverのインストール、起動方法

VSCODEの「EXTENSIONS」でLive Serverを検索し、インストールします。

あとは動作確認したいhtmlファイルを開いて、ウインドウの右下にある「Go Live」をクリック。

ブラウザで「http://127.0.0.1:5500/」が起動されてページが表示されます。

あとはhtml、cssをゴリゴリと編集していけば、自動でブラウザのページも更新されていきます。

まとめ

・模写コーディングではフォントや色にこだわりすぎない。

・VSCODEの拡張機能「Live Serve」をインストールするとリアルタイムにプレビューが確認できて効率UP。

ABOUT ME
Jyu2
ソフトウェア会社(SIer)で10年以上勤務のシステムエンジニア|ポケットWiFi使用歴2年以上|ポケットWiFi+αで快適でお得なインターネット環境を構築するための情報を発信|その他、IT情報やWebサービス、アプリ、ガジェットなどの情報を発信|自分と他の人のカバンの中身を紹介するメディア「カバンの中身ラボ(https://kaban-no-nakami-labo.com/)」も運営しています。 ポケットWiFi選びに迷ったらTwitter、お問合せフォームからご連絡ください。