Webアプリ開発コース初級編
WEBサイトとミニアプリを作れるようになろう
- DAY 6ゼロからサイトを作ってみよう②
引き続きHTML/CSSを書いて、仮想スイーツショップのサイトを作るライブコーディング授業を行っていきます。
今日はメインコンテンツを作っていきましょう！
01.画面幅によってファーストビュー画像を切り替えよう！
DAY5でheaderを作った際に、CSSが見やすいようにファーストビュー画像を先に設置しました！
ですがそのファーストビュー画像の表示に一手間加えて、画面幅によって表示させる画像を切り替えられるようにしたいと思います！
pictureタグを使用しました！
このタグを使えば、任意の画面幅で画像を出し分けることができるようになります。
スマホとPCで違う画像を表示させることはよくあるので、imgタグではなくpictureタグを使いましょう。
02.メインコンテンツを作ろう 1（Aboutセクションと共通パーツ）
Aboutセクションと共通パーツについて、コーディングしていきます。
- About
- ー 当店について ー
- 当店では、素材の持つ美味しさや風味を最大限に生かし、シンプルでありながらも、素材の良さを引き出すこだわりのスイーツを提供しています。
- 自然な味わいを大切にし、素材を感じさせるスイーツで、心に残るひとときをお過ごしください。
いざ、コンテンツを書いていくぞ！と思っても、まずは一度落ち着いて完成版のサイト全体をじっくり眺めてみましょう！
「このパーツはテキストが違うけれど、それ以外は同じデザインだから、共通のCSSを当てれば良さそうだな」
というように、共通のclassをつけると良さそうな要素をピックアップしていきます。（共通パーツ化）
サイトが複雑になればなるほど、コードは長く保守しづらくなっていくものです。
今のうちに「共通パーツ」という考え方を覚えておくと、後に難易度の高いコーディングをする際に手助けとなってくれるはずです！
- 同じスタイルを何度も書かなくて済み、コードがスッキリする
- 複数の要素に同じスタイルを適応できるので、見た目のばらつきが起きない
- デザインが変更した場合も、１箇所の記述を変更すればOK
- 適切なクラス名をつければ、後から見返してもどんなパーツなのか思い出しやすい
03.メインコンテンツを作ろう 2（Menu）
次に、Menuセクションです。
- Menu
- ー 今月のケーキ ー
- ストロベリーケーキ - Strawberry cake - # 旬のあまおうトッピング
- ブルーベリーチーズケーキ - Blueberry cheesecake - # フランス産チーズをブレンド
- チョコレートケーキ - Chocolate cake - # ベルギー産チョコレート使用
Menuセクションのケーキ一覧もできました！
HTMLやCSSの書き方は「これが絶対正解！」というものはありません。
同じ見た目でも何通りもの書き方がありますので、動画で解説している書き方以外に「もっと良い書き方はないかな？」と考えてみるのもスキルアップに繋がります！
04.メインコンテンツを作ろう 3（Shop）
背景画像のあるShopセクションを作っていきましょう！
- Shop
- ー ショップ情報 ー
- ただいま、オンラインストアを準備中です。最新情報は以下より送信いただいたメールアドレスへご案内いたします。
- sample@sample.ne.jp
- SEND
共通クラスで作ったパーツだけれど色だけ変更したいということで、.section-heading-l というクラスを追加して、その新たなクラスにcolorを設定しました。
このようなクラス名の追加は、パーツの一部を変更させるときに頻繁に使われます。
元々のスタイルは継承して「バージョン違いですよ」という事を分かりやすくするために、section-heading（元のクラス名）に -l（明るいのlight）という名前をつけました。
問い合わせフォーム
続いて問い合わせフォームを作っていきます！
問い合わせフォームを実際に機能させるためにはプログラムを書く必要があります。
今の段階では、見た目を作ることにフォーカスを当てていただければOKです！
今回はformタグの中に、inputタグとbuttonタグの2つを使いました！
その他によく使うformパーツとして、textareaやselect/option、labelなどがあります。
それぞれどのように使うタグなのか調べてみてください！
また、これらのフォーム関連のタグにはbodyタグで指定したfont-familyやfont-sizeなどが適応されないので注意しましょう。セルフチェックで見落としがちなポイントです。
inputやbuttonなど、それぞれにfont-familyを適応させてください。
05.スペルミスの予防法は「気をつける」ではない！
初心者のエラー原因No.1は、「単純なスペルミス」です。
そんな時、多くの人は「こんな単純なことで引っかかるなんて...次から気をつけよう」と思って終わります。
「気をつける」は、何の予防にもならないのでアウト！そもそも今だってわざとスペルミスをしたわけじゃありませんよね。気をつけてたのにミスしたはずです。
「気をつける」では問題の解決にならないんですよ。
ここで考えるべきは、論理的な再発防止策です。問題の根本を探り、それを解決するために具体的な対策を講じてこそ、プログラマー思考というもの。
スペルミスの予防法としては、コードを手打ちするのをやめましょう。手書きで書くからミスが起きるんです。どんどんエディタの予測変換に頼ってください。
HTML/CSSの場合はEmmetのショートカット記法で書くのも有効ですね。頭の２文字程を打ってタブを押せば確実にスペルが正しいタグが出力されますからね。
楽していいんですよ！タグのスペルなんてちゃんと覚えなくていいし、早く正確なタイピングスキルもいりません。コードを手打ちしなければ、そもそもタイプミスはおきませんから。
改めて言いますが、スペルミスの対処法として「気をつける」は厳禁です。コードを手打ちするのもやめましょう。
極力エディタの予測変換とEmmetに頼るのが正しい「スペルミス」の予防法です！