Sponsored Link
まずはスマホ出席で出席登録を行ってください。
今回の4桁の認証コードは「 」です。
この記事の目次
[レイアウト練習]フレックスボックスレイアウト
横並び上下中央配置編
今回は前回学んだフレックスボックスの復習です。
学んだ内容を活用して横並び上下中央配置編のレイアウトを実際に作ってみましょう。
3カラムレイアウト編
今回はもう一つ、今回学ぶフレックスボックスの予習です。
3カラムレイアウト編のレイアウトを実際に作ってみましょう。
フレックスボックス・margin&paddingが分からなくなったら
今後、フレックスボックスを使ったレイアウトやmargin・paddingが分からなくなってしまったら、
上記の記事や以下のフレックスボックス、margin・paddingの記事を確認してレイアウトの練習を行ってみましょう。
Webサイトコーディング[EASY]section#blogタグのhtml・cssコーディング
それでは今日のコーディングを始めていきましょう。
Visual Studio Codeで「html01」フォルダ・ファイルを開く
では「Visual Studio Code」 を起動しましょう。
次に、Visual Studio Codeを開き、ようこそ画面に「html01」フォルダごとドロップし、
編集する「index.html」「main.css」のファイルをダブルクリックで開いておきましょう。
「html01」フォルダ内の「index.html」をブラウザにドロップして開いておきましょう。
今回は最後の1件の記事の学習を行います。
以下の記事をCtrl + クリックください。
これにてLEVEL EASY完成!
これにてLEVEL EASYのコーディングは完成しました。
お疲れ様!よく頑張りました。
ここから「スマートフォン対応」や「スライドショー」、
さらに「スクロールアニメーション」や「背景動画」を実装していきましょう。
課題の提出
まずは1件目「LEVEL EASY」のコーディングを行った「html01」フォルダのデータを提出しましょう。
提出用に「html01」フォルダをまるごとzip形式で圧縮してください。
「html01」フォルダをzip形式で圧縮
まず、「html01」フォルダ圧縮の手順は以下。
- 「html01」フォルダを右クリックして、「送る」→「圧縮(zip形式フォルダー)」を選択してzipファイルを作る。
- 圧縮したzipファイルのファイル名を「学籍番号_level_easy」に変更する。
以上です。
zip圧縮したファイルをフォームから送信
なお、こちらのフォームに提出できるのは「zip形式で圧縮したファイルのみ」です。
zip形式以外のファイルだと送信の際にエラーが出て送信ができませんので、
必ず「html01」フォルダをまるごと圧縮してzip形式で提出してください。
なお提出期限は、1週間後の授業開始前までとします。
世の中にはもっとおもしろくてわくわくする案件がある
これで1つのページが出来上がりましたね。
基本的には、この工程の全て、もしくは部分的なコーディングを、
制作するページ分だけ繰り返すのがコーダーの仕事です。
当然全く同じ内容のコーディングはあり得ないので、
その時々に制作するページデザインに沿った最適な記述でページのコーディングを行います。
今回のページデザインを見ればわかるかもしれませんが、
このデザインは基本部分での記述が必要なコーディングのみ行ったものになります。
世の中にはもっともっとおもしろくてワクワクするようなプロジェクトがあり、
そのデザインを世界に発信するためにウェブデザイナーやコーダーがコーディングを行なっています。
意外に地味で泥臭い仕事と思うかもしれませんが、その意義は計り知れません。
そして自分自身にとっても、ほとんどの場合が経験がない実装を行うことになり、
案件を一つこなすたびに自分の成長を感じられます。
基本デザインのコーディングは完了しましたので、ここからは少し発展的な内容になります。
