ウェブデザインA 第04回

前回はcss文書ファイルのコーディングの基本的な考え方と記述方法を解説し、
WebサービスのCodePenのアカウント開設と、CodePenを使ったコーディング練習、
および課題提出方法の説明と課題提出を行いましたね。

前回の欠席者

ウェブデザインAでは前回までの内容の理解がないうえでは今後の授業進行に支障があるため、
必ず、CodePenのアカウント開設と、課題提出方法の説明と課題提出を行ってください。
詳しくは前回の授業内容を確認して下さい。

ウェブデザインA 第03回

今回はコーディングを行う上で覚えてほしい以下のキーワードについて理解します。

• 内側・外側
• 親要素・子要素
• 囲う

また前回CSSコーディングの中で一瞬だけ登場した「Emmet」に関して解説していきたいと思います。

CodePen提出課題の修正

前回提出した課題の確認をしていきたいと思います。
以下のリンクからCodePenにログインしてYour Workを開き、提出済みの課題コードを開いてみましょう。
※前回「Fork」したコードしか表示されません

Your Work – CodePen

コード編集画面右下の「Comments」ボタンをクリックして私からのコメントを確認してください。

手順は以下。

1. CodePenログイン手順を参考にCodePenにログインする。(※ログイン済みの場合は不要)
2. 提出済みの課題のPenを開く。

今回の提出物の訂正点が以下です。

1. CSSの入力枠の最後の行に「*/」を入れている。
   ※これはコメントアウトの表記なので不要です。
2. HTMLで閉じタグ「</p>」を記述していない。
3. CSSで「}」を記述していない。
4. Forkしておらず編集した内容ではない。
5. 提出URLを間違っており、CodePenトップページや元データ(脇坂作成データ)を提出している

コーディングの基礎 「内側・外側」「親要素・子要素」「囲う」という言葉の意味

前回同様に重要なポイントからお話しましょう。
絶対に念頭に置いてほしい最低限の概念として「内側・外側」「親要素・子要素」「囲う」の意味を理解してください。

[コーディングの基礎] 「内側・外側」「親要素・子要素」「囲う」という言葉の意味

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

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

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

まとめ

前回紹介したCodePenを使って練習する場合にも、いざ本番でコーディング作業を行う際にも有効なEmmetを紹介しました。
次回以降、Emmetを使ったコーディングを行い、簡単なウェブサイトを作ってみましょう。