プログラミングの勉強をしはじめて2ヶ月とちょっと。
ちゃんと勉強し始めてからはだいたい1ヶ月たたないくらい。
ドットインストールでのHTMLとCSSの講座もだいたい一通りは見終わりました。
動画で学習するのはいいんですが、コーディングは一切していなかったので何かしらしないとと思い、サイトの模倣をしてみました。
模倣といってもそのサイトのHTMLとCSSのファイルをダウンロードして…とかしてしまうと一切何もしないまま模倣ページは完成してしまいます。
なので、
ページ上部から右クリック→検証でデベロッパーツール開いて参考にしつつコーディング
みたいな感じで進めていきました。
デベロッパーツールからコードを解析するわけですが、解析したら結局そこからコードを書き写すことになるわけですが、全くコーディング経験のない自分からしたらこれでも苦戦しましたし、いろいろと勉強にもなりました。
具体的にどのように学習したかとか、身についたこととかいろいろ書いておきます。
学習方法とか
学習時のスキル
7月から累計した勉強時間は33時間、うちHTML/CSSに割いた時間は15～20時間くらい。
学習は主にドットインストールの講座。HTML/CSSあわせてだいたい100講座くらいは消化している状況。
ただ、実際にページをコーディングした経験は全くなし。
HTMLは知識をまとめるために練習用ページを解説して少しだけコーディングした経験はあり。
模倣サイト
クラウドワークスで『HTML コーディング』で仕事依頼を探すと、依頼に『参考ページ』のURLを載せているものがある。これくらいのレベルのページの作成をお願いします、な意味合いで載せられているものが。
コーディング経験無し、学習時間20時間ほどの自分でもできそうなものを採用。
実際に模倣コーディングしたサイトがこちら。
1ページ完結のサイトです。
実はフッターにいろいろ別ページへのリンクがありますがそれは今回は除きました。
内容はともかく、基本さえおさえていれば模倣できそうなレベルと思ったので選定。
模倣にかかった時間
着手から完成まで14時間かかりました。
模倣サイトを見るとわかるかと思いますが、けっこう長かったです、ページが。
スクロールしてもしてもまだ終わらない的な。
そうとしても、やはり時間がかかったのは最初というのもあったかもしれません。
進めているうちにどんどん勝手がわかってきてスピードはあがっていきましたね。
途中長くてバテてきてる感じもありましたが。
学習成果
コーディングの基本的な流れがわかった
漠然とした感想ですが、何よりも実感したことです。
コーディングの流れの基本がだいたい掴めた。
基本divタグにクラスを与えてCSSで文体決めてったりとか。
全体をdivタグで囲って、そこに付与したクラスについてCSSで文体決めて、その中にでまた要素要素をdivタグで囲ってクラス付与してCSSで文体書いて……、みたいな基本的な流れがわかったことが、個人的にはとても大きかった。
もちろんサイトのコーディングの流れは他にもたくさんあるかと思いますが、『少なくともこんな感じでつくっていけばサイトができあがる』みたいな例を一つ作りながら体感できたことがよかったかと思います。
インプットだけだと全然身につかなかった部分なので、この点に気づけただけでも今回の模倣実習は大きな収穫でした。
サイトコーディングの暗黙の了解みたいなものも体感できた
上記のコーディングの流れと被る部分もあるかもしれませんね。
参考書には載ってなくてもサイトコーディングする上で暗黙の了解なんだろなーってこととかもあるのかなーと思いました。
例をいくつかあげます。
・赤線太字とか大文字、アンダーラインとか文章を強調するのに使うであろう書式はCSSで記述しておいて、文中で使う際はHTMLでspanタグにCSSで記述した書式と結び付けられたクラスを付与
・図や難しそうな表記、特殊な文字を使うときはパワポ（？）で作成したスライドを画像データにして貼り付ける
・表や図の雛形もほとんど画像であらかじめ用意しておく。フォトショでなくてもパワポで十分
ザッとあげるとこんな感じです。なかなか日本語だと伝わりにくいですね。
あと、講座とか専門書には書くまでもないようなことに気づいたり。
コーディングファイルを追記するたびChromeで確認してましたが、デベロッパーツールのpaddingとかの領域の数字とコードで指定した値が違うし、実際に表示崩れが起きてるな、と思ったらChromeのページ表示倍率が100%でなかったり。
コーディング確認の際はページの表示を100%にしましょう！
こんなこと初歩的すぎて誰も専門書にもネットにも書いてくれてなさそうですが、自分はこれで1時間近く悩みました…。
これ以外にもいろいろあるんでしょうけどアウトプットを重ねないとわからないかと。
コーディング速度の向上
まだ20時間の勉強と16時間の実習しかしていない身でしたが、コーディング速度は実習を進めるにつれどんどん早くなりました。
もしかしたらまだまだ初心者なのでコーディング速度が早くなる余地もまだまだあるのかも。いい言い方をすると『まだまだ伸びしろがある』といった状況。
このパターンだとここのdivタグの固まりをコピペ編集でいいな、とか。
楽できる箇所を覚えていくわけです。これは大事。
あと、こんなツールあれば楽だなと気づいたり。
https://www.nishishi.com/soft/elad/
※にししさまのHPより。他にもいろいろなフリーソフトも作成されています。ラノベも出版されててびっくり！
行の文頭文末に一括で文字を追加できるツールです。
文章を先に考えておいてあとから文末にbrタグを追加したら文章のコーディングはコピペでOKに。
こういうのもインプットだけの段階じゃ絶対に気づかんかったと思うなー
以上が『サイト模倣』をやってみて得たこととかになります。
思ったより時間がかかりましたが、それ以上に得るものがあったと思います。
勉強時間20時間でHTML/CSSの基礎をなぞった程度なら、全然サイト模倣はできると思います。
力がつくのでおすすめです。
このサイト模倣はしばらく続けてみようと思っています。
同型サイトでもいいけど、次は企業の公式HP的なのを模倣してみようかと考え中。
どうせならいろいろなサイトをコーディングしてみたほうが力がつきそうな気がします。
 | スラスラわかるHTML＆CSSのきほん 第2版 [ 狩野 祐東 ] 価格:2,138円 |
コメント