【旧課題】ゼロからサイトを作ってみよう③初級編

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

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

【旧課題】コーディング練習編

DAY 1

【旧課題】ゼロからサイトを作ってみよう③

引き続きHTML/CSSを書いて、デイトラアプリの簡易版サイトを作るライブコーディング授業を行っていきます。

今日は「画像の上に文字を載せる」「スマホ用のレスポンシブ対応」まで行っていきましょう！

TIPS

サイトのファーストビューなどで、画像の上に文字を載せるのはよく使われるレイアウトですよね。

ぱっと見、複雑そうなレイアウトですが「background-image」を使えば簡単に実装できます！

コピペ用テキスト

それでは最後にスマホ用にレスポンシブ対応していきましょう！

レスポンシブWebデザイン(Responsive Web Design, RWD)は、パソコン、タブレット、スマホなど、どんな大きさのデバイスでも見やすいWebサイトにするためのものです。

2007年のiPhone（スマホ）登場以降は、対応が必須になっているので、必ず使えるようになりましょう！

ポイントはメディアクエリとブレイクポイントです。

レッスンの中ではブレイクポイントは768pxのみですが、他にもいくつかメジャーなブレイクポイントが存在するので、ぜひ調べてみてください！

それでは、初めてのサイト制作お疲れ様でした！！！

ゼロから1週間でここまでできるようになったのは本当にすごい。1週間たくさんインプットしてきたので、明日から2日間は復習に当てましょう。