デイトラのロゴ

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

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

【旧課題】コーディング練習編
DAY 1
【旧課題】ゼロからサイトを作ってみよう①

さて、今日からはいよいよサイト制作に入ります！

最近は様々なプログラミング学習サイトがありますが、実務では使わないコーディング方法で書かれていたり、「なぜそう書くのか」を説明してないものが多いです。

デイトラでは、出来るだけ実務に近い形でHTMLやCSSの書き方を学んでいきます！

ここからの3日間は動画を使って、デイトラアプリの簡易版サイトを作るライブコーディング授業です。

完成形はこちら↓（PC版）

まずはコーディング練習に必要な画像やreset.cssを入れた↓の練習素材をダウンロードしてください。

練習素材
練習素材のダウンロードはこちら

ダウンロードできたらダウンロードしてきたzipファイルを解凍してください（解凍しないとLive Serverは起動できませんよ！）zipファイルの解凍の仕方が分からない方は調べましょうね！

解凍できたら、Tips01から動画を見ながら、ステップごとにコーディングを進めていきましょう！

TIPS

01.コーディング準備編

本格的にコードを書き始める前に、HTMLの型やreset.cssの役割、コーディング前にやるべきことについて解説しておきます！

スムーズにコーディングできるかどうかは、書き始める前の準備で決まります！

「準備編なんか見なくていいよ」と侮らずに、必ずチェックしてくださいね！

02.headerを作ろう（HTML完成まで）

それではコーディングを始めていきましょう！

まずはheaderのhtmlを書き上げるところまで。ただ動画を見るだけじゃなく、必ず実際に手を動かしてくださいね！

headerに記述するテキストは↓をご利用ください！

コピペ用テキスト
  • 30DAYSトライアル
  • デイトラとは
  • コース一覧
  • お問い合わせ

03.「clear」の使い方と「class」を細かく付ける理由について

初心者がよく躓くポイント、それがfloatです。

特に「floatさせたら親要素の高さが0になってズレる」ってミスは誰もが通過する道だと思うw

そんなミスと対策が解説された図解があるので、困ったらこれ見ましょう！

04.思い通りの見た目にならない時にまず確認するべきポイント6つ

初心者のうちは「見本通りに書いたはずなのに、なぜか思い通り見た目にならない」というトラブルに何度も出くわすと思います。

そんな時はまず以下の6つのポイントを確認してください。

  1. コロン( : )とセミコロン( ; )を間違えていないか
  2. 全角スペースが入っていないか
  3. つなげる文字を書き忘れてないか。例えば、アンダーバー( _ )　ハイフン( - )　ドット( . )　など
  4. 「閉じタグ」の数が不足してないか
  5. classを定義するときに「ドット( . )」を書き忘れてないか
  6. 単純なスペルミス

この6つのうち、閉じタグ不足・コロンの間違い・単純なスペルミスは、DAY4で入れたVS Codeのプラグイン「Code Spell Checker」が教えてくれます。

全角が入っている場合も、プラグイン「zenkaku」が教えてくれます。

VS Codeはどんな時もちゃんとヒントをくれています！なんて便利なんだ！！
あとは使う側の問題です。

「思い通りの見た目にならない」と思ったら、エラーが出ていないかチェックしながら、6つのポイントを確認しましょう！

05.headerの完成！（CSS完成まで）

長かったheaderもついに完成です！最後まで作り切りましょう！

※動画の編集時に、「.header-title」のcssを記述したシーンまでカットしてしまいましたm(_ _)m
以下に「.header-title」に当てたスタイルを記述しておきますので、このクラスのみ↓のコードをご利用ください。

コピー.header-title {
  font-weight: bold;
  font-size: 24px;
}

それでは、解説をどうぞ！

お疲れ様でした！
無事headerも完成し、「自分で作れた！」という達成感を持てたのではないでしょうか。

その達成感や「楽しい」という感覚が継続にはとても大切なので、明日からも楽しくコードを書いていきましょうね！

06.書いたはずのCSSのクラスが反応しない時の対処法

「書いたはずのCSSのクラスが反応しない」 きっとこれから何度も経験するでしょう。

なかなか原因が分からず「自分は絶対に悪くない！ChromeかVS Codeのバグだ！」と思いたくなることもあるはずですw

そんなときはぜひ↓を試してみてください！


コピーしたセレクタを反応しないクラスのセレクタに置き換えてみましょう！それでうまくCSSが反映されるようなら、自分のクラスの指定の仕方が間違っています。

「ドット( . )」が抜けてないか、ハイフン( - )とアンダーバー( _ )を間違ってないか、クラス名の綴りを間違えてないかをまずチェックしましょう！