Sponsored Link
この記事の目次
html00の訂正
前回提出した課題の確認をして必要があれば間違った点を訂正していきたいと思います。
まずはVisual Studio Codeを起動し、「Ctrl + K → Ctrl + O」で前回作った「html00」フォルダを選択して開き、
エクスプローラーパネルにある「index.html」「style.css」をダブルクリックして編集モードで開いてください。
(不明の場合・・・起動とフォルダ準備手順)
今回の提出物の訂正点が以下です。
- 記述が違う・多い・足りない
- 終了タグの位置が違う
- マークアップできていない
- 提出ファイルが違う
また、指示以上の記述をしてくれていた最優秀コードを紹介します。
- 最優秀記述
訂正したらindex.htmlをCtrl + Sして一旦Visual Studio Codeを閉じておきましょう。
Flexboxでレイアウトの練習をしよう
今回は前回学んだばかりのFlexboxを使ってレイアウト練習で遊んで課題提出にしたいと思います。
それぞれの課題をForkし、課題に取り組んで保存して提出しましょう。
まずはCodePenにログインしておきましょう。
課題の手順
それぞれの課題の手順は以下。
- CodePenのページをウィンドウの右上のリンクをクリックして開く。
- ①で開いたページのPenをForkする。
- それぞれの指示にあるコーディング課題を行う。
- ShareしてURLをコピーし、フォームにて提出する。
以上です。
課題「レイアウトで遊んでみよう」
今回は以下3件の課題を使ってレイアウトで遊んでみましょう!
課題1 Flexbox逆さ積み木
課題を行ったら、CodePen課題画面右下のボタンを「Share→Copy Link」の順にクリックしてコピーしたURLを提出しましょう。
課題2 Flexbox入れ子レイアウト
課題を行ったら、CodePen課題画面右下のボタンを「Share→Copy Link」の順にクリックしてコピーしたURLを提出しましょう。
課題3 位置固定レイアウト
課題を行ったら、CodePen課題画面右下のボタンを「Share→Copy Link」の順にクリックしてコピーしたURLを提出しましょう。
課題の提出
では課題の提出を行いましょう。
今回は上記3件すべてのURLをShareからコピーして、フォームの入力枠にペーストして提出してください。
- Forkした課題PenそれぞれのURLを、Share→CopyLinkからコピーする。
※3件ともURLが違うため、それぞれのURLをコピーしてください。 - 下記フォームの該当の入力枠に❶でコピーしたURLをペーストする。
※3件ともURLが違うため、それぞれのURLを貼り付けてください。
では、以下のフォームの必要項目に記入を行い、送信を行ってください。
通常通り、提出期限は来週の授業開始までとします。
まとめ
いかがでしたか?
世の中のWebサイトは上記の3つのレイアウトをさらにカスタマイズして実現しているものも多いです。
Flexboxを扱えるようになると一気にレイアウトの表現が広がってレイアウトが楽しいですよね。
そして、皆さん自身は意識していないと思いますが・・・、
今回のレイアウトの理解が問題なくできていたら、確実にコーディングスキルが向上している証拠です。
