プログラミングの練習をする上でHTML/CSSの学習も行っていますが、今回は練習の一環として既存のサイトの模写をしてみました。
次回に向けての備忘録として記事にします。
やり方
厳密に「こうしなければならない」みたいなルールはないようなので、自分なりにルールを設けて取り組んでみました。
ルールは以下の通り。
- 原則ソースコードは見ない
- 要素のサイズは測ってOK
- 調べてもわからないところはとりあえず飛ばす
初めてのサイト模写なのでとりあえずサイト作りの流れを掴めれば良いとして、ルールは緩めに設定。
観光情報のポータルサイトを模写するサイトとして選びました。
各ページへのリンクが多く全ページ模写するのは大変そうだったので、トップページのみということで。
使用したツール
「Chromeデベロッパーツール」
要素の大きさを測るのに使用
クラス名もたまに参考にした
「WhatFont」
Google chrome拡張機能
サイトのフォント情報（font-size, font-weight, line-height）を調べられる
「DisigalColor Meter」
Mac標準のカラーピッカー
枠線や背景の色を取得するのに使用
「Noteshelf2」
iOSのノートアプリ
iPad pro + ApplePencilでサイト全体や要素の構造を手書きするのに使用
使用したエディタ
「Atom」
特にこだわりがあるわけではなく、プログラミングの学習サイトや動画などで勧められていたので使用
いろいろ便利な機能には手を付けておらず、ほぼ初期設定の状態
所感と覚書
思いのほか時間がかかった
元のサイトを見て要素のサイズを測りながら「Noteshelf2」に全体の構造を書き出す
↓
同じサイズや配置になるように、htmlに要素を作りそれぞれにCSSを記述
（どの要素がどこに行ったかわかるように適当に背景色をつけて確認する）
↓
各要素の中に、さらに細かい要素を配置していく
文章にするとたったの3行の作業に途方もなく時間がかかりました。
「休みの日に集中してやれば1日で終わりそうかな～」なんて始める前は思っていたけれど、その自信がどこから湧いて出たのか本気で知りたい・・・。
Split View
左に模写元のサイトを表示。
右に模写しているサイトを表示。
最初は片方にエディタ、もう片方に模写しているサイトを表示してコードを書いていたけれど、サイト同士を左右で比較できる方が見やすかったです。
テーブルのレイアウトが苦手かも・・・
どうもテーブルの中身の要素が意図したサイズにならなかったり、スタイルが反映されなかったり・・・。
テーブルを使った項目に関しては、時間をかけて調べたり試したりしても元サイトのとおりにならない部分があって、今回は諦めました。
作業時間を記録しておけばよかった
1日の作業時間を記録していなかったので、今回のサイト模写にかかった総時間がわからず。
いざ仕事として扱うことになったときに、この作業に必要な時間がわからないのは何かと困ることがあると思うので、次回から作業の進捗と総時間を記録しておこうと思います。