ウェブデザインA 第12回

ウェブデザインA 第12回

2024年12月20日 /最終更新:2024年12月20日

スマートフォンやタブレット対応で最適な手法、レスポンシブWebデザインについて解説します。

ウェブデザインA 第12回

まずはスマホ出席で出席登録を行ってください。
今回の4桁の認証コードは「 」です。
また「Visual Studio Code」 を起動しておきましょう。

授業評価アンケート

ここで、当科目の授業評価アンケートの回答のお願いです。
5分程度時間を取りますので、回答をお願いします。解答方法は以下。

授業評価アンケート

CodePenの登録

順番が大きく前後してしまいましたが、みなさんのCodePenの登録を行いましょう。
PCを使うと制限にかかってしまう可能性があるため、今回はスマートフォンで登録を行います。
スマートフォンのカメラで以下のQRコードを読み取り、スマートフォンでCodePenを開きましょう。

CodePenのアカウント作成方法

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

現在スマートフォンへの表示最適化対応を行う手法で主流になっているのが、
今回解説する「レスポンシブWebデザイン」というものです。
以下の記事をCtrl + クリックください。

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

Webサイトコーディング[NORMAL]のhtml・cssコーディング

それでは今日のコーディングを始めていきましょう。
今回からは「LEVEL NORMAL」の、主にスマホ対応のコーディングになります。
今回は以下の最大3件の記事の学習を行います。

[コーディングの実践:NORMAL] 01 準備・確認編

[コーディングの実践:NORMAL] 02 JavaScriptでドロワーメニュー実装編

[コーディングの実践:NORMAL] 03 CSS3 Media QueriesでレスポンシブWebデザイン対応編

次回はメイン画像ブロックをスライドショーに書き換えるコーディング

今回はここまで。
次回はメイン画像ブロックをスライドショーに書き換えたいと思います。