デイトラのロゴ

Webアプリ開発コース初級編

WEBサイトとミニアプリを作れるようになろう

【旧課題】コーディング練習編
DAY 1
【旧課題】HTML/CSSコーディング復習①

それではHTML/CSSのコーディングの復習として、今度は出来るだけ動画を見ずにゼロからコーディングしてみましょう！

改めてDAY5で使った練習素材を解凍して、headerのコーディングから始めてみてください。



目標は4時間で完成です！

今日2h、明日2hの合計4hで完成を目指してください。
もし4時間で完成しなくても諦めないで！復習しながら進めましょう。

TIPS

01.コーディング初心者のためのTips

実務でコーディングするときは

  • まずHTMLで全体（またはキリのいいブロックまで）を書き上げる
  • CSSを付けつつデザイン通りに調整していく

という順でコーディングするので、今回はできればHTMLを書き上げてからCSSを書くという手順で挑戦してみてください！

02.HTMLを先に書くとき意識すべきこと3つ

  • 完成形をイメージしてブロックを作る
  • どこに何のスタイルを当てるか設計しつつ書く
  • レスポンシブも見越してブロックを整理する

これをクセづけるとコードが綺麗になっていくので、レスポンシブにする時なども軽く追記するだけで済むようになります！

03.「パーツ分け」の考え方

「具体的にはどうやってパーツ分けすれば良いんですか？」という方のために、パーツ分けの見本画像も載せておきますね。

①〜⑥までのブロックを、一つ一つ分解して見ていきます。

  1. コンテンツ幅が揃ってるからcontainerクラスがあるといいかもな🤔
    横幅960pxくらいでmargin: auto;にしとこう（これ気づけたらもうコーディング中級者！）
  2. メニューバーはcontainerクラスの中でfloatでいけそう！
  3. ファーストビューsectionはwidth: 100％;にbackground-imageで画像表示かな？その中にcontainerクラスを入れれば良さげ
  4. h2タイトルとwidth: 50%;くらいで画像とテキスト左右並べか...。またfloatでいいかな
  5. img＋テキストの横並びブロックが3つあるからflex使うかー
  6. ここは全部中央揃えで良さげ。inputがあるからformもいるなー


ここまでできれば、もう8割は完成したも同然です❗️設計書がある状態なので、あとは図面通りに作るだけ。

このレイアウトを考える作業は、実務でも重要な行程です。ぜひいまのうちから手を動かす前に「パーツ分け」をするクセを付けましょう！

いつも通勤中に見てるサイトを頭の中で分解するとかでもOK。それだけでコーディング力は爆上がりします！スキマ時間でもできる練習なので、ぜひやってみて下さい。