プログラミング初心者の60日間チャレンジ【41~45日目】

プログラミング日記

プログラミング初心者の60日間チャレンジ【41日目】

Webサイト模写 その1

参考書なしのWebサイト模写のはじまりです。模写対象サイトは『Airbnbでおうち、アパート、お部屋をシェアしよう』です。まずは、サイト構成図とレイアウト図から作ります。構成&レイアウトが理解できれば、ググりながらコードを書ける!と思っていたのですが、なんだかしっくりいきません。

『bootstrapで作成されている』というヒントはありますが、それはCSSの話で、先に考えるべきなのは、HTMLなのでは?と、いろいろ不安になってしまいました。HTMLから構成を開始する、ような気がしている初心者です。

 

プログラミング初心者の60日間チャレンジ【42日目】

Webサイト模写 その1

HTML構成をスマホ版のビューから行いましたが、うまくいきません。スマホ版とPC版と見比べて、HTML構成を考え、CSSにとりかかる、という手順で試してみようと思いました。

作戦変更後、サイト構成を分析です。すぐに、つまずきました。HTMLイメージができないので、試しに見た目だけで分析していたら、何かコツが掴めそうな予感。タブレット&スマホも、見た目で分析してみます。

 

プログラミング初心者の60日間チャレンジ【43日目】

Webサイト模写 その1

スマホ版の構成分析をしていきます。ノートに書き込みをしつつ、自分テンプレートに変換できるように挑戦です。構成分析がうまくできれば、HTMLとCSSはググりまくるだけ(のはず)。

と考えて、作業をしていたのですが、課題のWebサイトの分析中に気になることが出てきました。『base.CSS』はPC版が良いのか、スマホ版が良いのか、です。気になってしまったので、先に、いろいろ調べて考えた結果。モバイルファーストで作った方が、書き込むコードが少なくなるようなので、baseはスマホに決めました。

 

プログラミング初心者の60日間チャレンジ【44日目】

Webサイト模写 その1

tabletの構成分析です。その後、baseスマホ版からHTMLを考えます。HTMLからCSSの順で作成するのだと思い込んでいましたが、Web見た目からHTMLとCSSを同時進行させる、方式が、私にはまとめやすいかもしれません。

base、tablet、pcの分析完了後、勢いに乗ったままで、base構成図に思いつく限りのHTMLをメモりました。HTMLを考えながら困ったのが、h1~h6の適切な使用方法とid値の命名規則です。初心者だからこその疑問を大切にして、勉強に生かしていきます。

 

プログラミング初心者の60日間チャレンジ【45日目】

Webサイト模写 その1

h1~h6の使い方を確認して、構成図に入れ込みます。id値は『冗長なく、わかりやすく』をモットーにして、割り振りを決めていきます。構成図が出来上がれば、コードを書いて動かすだけです。

h1を修正し、id値を設定し、HTML構成のイメージをつかみました。ヘッダーと浮遊タイルの表現方法がわからないのですが、まずは、試して書いていこうと思います。iconとimageはサイズを整えて保存しました。あとは実行あるのみです。