ウェブデザインA 第04回

前回はcss文書ファイルのコーディングの基本的な考え方と記述方法を解説し、
WebサービスのCodePenによるコーディング練習を行いましたね。

今回はコーディングを行う上で覚えてほしいキーワードの「内側・外側」「親要素・子要素」「囲う」について理解し、
また前回CSSコーディングの中で一瞬だけ登場したEmmetに関して解説していきたいと思います。

CodePen提出課題の修正

前回提出した課題の確認をしていきたいと思います。
CodePenを開き提出済みの課題を開いてみましょう。

CodePen: Online Code Editor and Front End Web Developer Community

手順は以下。

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

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

1. 最後の行に「*/」を入れている。
   ※説明不足でした。ゴメン。これはコメントアウトの表記なので不要です。
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を使ったコーディングを行い、簡単なウェブサイトを作ってみましょう。