4月26日 -模写コーディング-
１．今日の目標
isaraの模写、コーディングのやり方について学ぶ
２．結果・感想
模写コーディングを実際に始めようとしたら、まずcssの読み込みのタグを忘れた。あんなに何回もやったはずなのに、悲しい。でも忘れても調べればすぐ出てくるから問題なし。悲しむより前に進もう。きっとこの意識が大事。その次に迷ったのがコーディング先の画像をどこから得るか。まず検証のelementsで画像のタグを探し、そこにマウスを重ねるとimgのファイルがどこに入ってるか見えたのでsourcesの該当ファイルを探したらあった。保存もできた。これ一個一個保存していくの大変だなぁと思った。他にも大変なことが色々出そうなのでとりあえず先人の知恵を借りようとネットで効率よく模写する方法を検索。
検索上位に表示された「はにわまん」さんのお力(知恵)を借りる。あ、素材一括ダウンロードできる機能あるらしい。ありがたい。参考にさせて頂いたサイトはツイートなど、その方に少しでも恩返し出来るように努力していきたいと思う。色んな方のサイトで勉強していて、自分も成長してるし、自分のPCも成長しているように感じる。特に今回追加した拡張機能でChromeが急成長を遂げた気がする。成長を感じられるのはすごく嬉しい。
背景画像の相対パスの設定で、どうしても画像が読み込めなかった。検証をみるとerrorで画像がありませんと表示されている。index.htmlにて画像を指定すると表示される。なぜだ…とgoogleを漁った。heightが設定されていますか？っていう項目が多く出た。それはされている。悩んだ結果たどり着いた答えが、相対パスの指定間違い。HTMLに記載する場合は同じ階層のimgフォルダに入れていたが、CSSはCSSフォルダに入れていたので階層をひとつあげなければいけないのだった。階層の違い、意識しないとまたハマるから気を付けよう。残念ながらChrome拡張機能はローカルでは利用不可らしい。そりゃそうか。
オンラインのページをコーディングしてて、オフラインで作ったページを表示させてたら、なぜかheight:500px;で同じにしているのに明らかに高さが違う。でも検証でheightは同じだ。どうして？まぁ気にしないで取り組むか。とスルーして取り組んでいた。結果、ディスプレイの表示倍率が違うことに気付いた。そりゃpx同じでも違う高さに見えるわ。なんかミスがあっても中々いい状態に戻せない。これが経験不足ってやつか。
11:45から4:00まででisaraのセクション2つ(background-colorがorangeの所まで)完成。完成度は個人的に十分満足のいく出来栄え。headerはまだ作ってない。セクション2を途中まで作ってる時に気付いた。だからセクション1のmargin:topをheader分開けて作業している。慣れていないからか、時間がすごくかかる。header,footer入れて20セクションくらいあるから、まだまだ道のりは長そうだ。ショーヘーさんがtwitterでつぶやいていたgoogleの資格についても興味があり、知識全然ないけどGAIQに挑戦してみたいと思っている。あいまに出来れば挑戦したい。SEOにも興味を持っている。
３．学んだことの書き出し
検証のelementsにサイトで使われているimgが入っている
コーディングルールの設定
①フォントは調べてもOK
(えっ、はてなブログってサイトのタイトルでURL貼れるんだ！すご。)
フォントサイズ、フォントファミリー、色、行間
マウスを重ねると
②素材の利用OK
Image Downloader - Chrome Web Store
背景で使われている画像はこのツールでは保存されない
③幅の計測OK
Page Ruler Redux - Chrome Web Store
要素の幅などは検証でも確認可能
④色の取得OK
ColorPick Eyedropper - Chrome Web Store
色の情報を取得する
⑤ソースコードの確認は基本NG
どうしても分からない場合にはちらっと見てヒントにしてもOK
⑥値は大まかでOK
目的はデザインを見ただけで、HTML、CSS、JavaScriptで実現できるかどうか
あれ、JavaScript分かってないや。勉強しなきゃ。とりあえず今回はHTML、CSSまで模写するということで。
⑦ブレイクポイントはそれっぽくでOK
コーディングの流れ
①HTML構造を作る
②CSSでデザインを当てる(レスポンシブ化対応も行う)
③JavaScriptで動きをつける(今回はこれはスキップして、模写コーディングが一段落したらJavaScriptを学ぼうと思う)
※各フェーズで時間を計測しておく。自分がどこに時間がかかっているのかが見えてくる
コーディング後のチェック
①デザイン構成に大きなずれはないか
ページ全体のキャプチャを取得して比較する
Nimbus Screen Capture: Screenshot, Edit, Annotate – 🦊 Firefox (ja) 向け拡張機能を入手
Photoshop(ブラウザでも可)で2枚画像を並べて大まかに確認する
Photoshopの知識がまだないのでブラウザでウインドウ２つで並べようと思う。
PCサイズ(1440px)、タブレットサイズ(768px)、スマホサイズ(375px)の横幅でそろえて取得すると比較しやすい
②スムーズにレスポンシブ化されるか
③動きは再現できているか
マウスホバー時、クリック時、JavaScriptで仕組みを作った場所など
④タグのエラーはないか
WEBコーディング用のテンプレートを作成して、コーディングする度にアップデートさせると次のコーディングに繋がっていく。
サイトを選ぶときは、新しい知識が１つは身に付きそうだという観点で選ぶ。
font-family,colorはbodyに書いておくと楽
background-position:center(背景画像を寄せる)
image-rendering(画像の拡大、縮小の方法)
vertical-align(インライン要素とテーブル要素に対して、行の中でのテキストや画像の縦方向の揃え位置を指定する)
背景画像を文字のwidthにそろえたい場合はdisplay:inline-blockを使う
margin:top left&right bottom
４．明日の課題
isara模写続き、GAIQ
５．参考URL
WEBサイトをコーディング模写するやり方と使用するツール
