ウェブデザインA 第13回

Webサイトコーディング[LEVEL EASY] その3

引き続き、実用的なレイアウトのWebサイトコーディング[LEVEL EASY]を行ってみましょう。
ひとまずVisual Studio Codeを起動しておきましょう。

前回は4ページ目の「div#mainimgタグおよびimgタグのcssコーディング」までの作業を終えました。
今回は以下の記事の4ページ目の「div#profileタグおよびh2タグのcssコーディング」から完成まで学習を行います。
以下の記事を開いてみましょう。

[コーディングの実践]LEVEL EASY

課題提出

今回は「html01」フォルダをまるごとzip形式で圧縮し、
圧縮ファイルのファイル名を「学籍番号 LEVEL EASY」に書き換えて提出してください。

「html01」フォルダをzip形式で圧縮

てまず、「html01」フォルダ圧縮の手順は以下。

1. 「html01」フォルダを右クリックして、「送る」→「圧縮(zip形式フォルダー)」を選択してzipファイルを作る。
2. 圧縮ファイルのファイル名を「学籍番号 LEVEL EASY」と変更する。

以上です。

zip圧縮したファイルをフォームから送信

演習06 html01コーディング課題提出フォーム

なお提出期限は、1週間後の授業開始前までとします。

どうしても覚えてほしい!レスポンシブWebデザイン

スマートフォンやタブレット対応で最適な手法、レスポンシブWebデザインについて解説します。
現在スマートフォンへの表示最適化対応を行う手法で主流になっているのが、今回解説する「レスポンシブWebデザイン」というものです。

以下の記事を別タブで開いてCtrl + クリックください。

[コーディングの応用] どうしても覚えてほしいスマートフォン対応!レスポンシブWebデザイン(RWD)

次回はスマートフォン表示未対応の「LEVEL EASY」をレスポンシブWebデザインを使って対応しましょう。
また、WebサイトのトップページによくあるJavaScriptのスライドショーを実装してみましょう。