ウェブデザインA 第13回

ウェブデザインA 第13回

2025年01月10日 /最終更新:2025年01月10日

効率的なhtml・cssコーディング作業を可能にするEmmetという機能を紹介します。

ウェブデザインA 第13回

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

爆速&効率的なhtml・cssコーディングを可能にするEmmet機能

html・cssコーディングは「文字列を1文字ずつ全て打ち込む=コーディング」と思っている人がとても多いのですが、
ほとんどのウェブデザイナーやコーダーは、そのような非効率なことは行いません
今回は効率的なhtml・cssコーディング作業を可能にするEmmetという機能を紹介します。

HTML・CSSはEmmetで爆速コーディングを行おう!

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

それでは今日のコーディングを始めていきましょう。

前回の続きの「LEVEL NORMAL」を完成させましょう、
引き続きのスマホ対応やjQueryプラグインを使用したスライドショーのコーディングになります。
なお可能な限り習得したばかりのEmmet機能を使ってコーディングを行ってみましょう。

今回は以下の最大2件の記事の学習を行います。

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

[コーディングの実践:NORMAL] 04 jQueryプラグインでスライドショー実装編

課題の提出

「LEVEL NORMAL」のコーディングを行った「html02」フォルダのデータを提出しましょう。
提出用に「html02」フォルダをまるごとzip形式で圧縮してください。

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

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

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

以上です。

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

なお、こちらのフォームに提出できるのは「zip形式で圧縮したファイルのみ」です。
zip形式以外のファイルだと送信の際にエラーが出て送信ができませんので、
必ず「html02」フォルダをまるごと圧縮してzip形式で提出してください。

ウェブデザインA 第13回 LEVEL NORMAL 課題提出フォーム

なお提出期限は、次回の授業開始前までとします。