htmlやcssの次に覚える、脱初心者のための実践コーディング

HTMLやCSSの次に覚える、脱初心者のための実践コーディング

生明 義秀

0.ご受講の準備

実践Webコーディングの8つの基本1.

実践Webコーディングの8つの基本

1. HTML（文書構造）とCSS（視覚デザイン）の完全分離

2. CSSの外部ファイル化

3. リセットCSSの利用

4. CSSシグネチャーの利用

5. idセレクターを基本としたスタイル指定

6. ボックスモデルレイアウトの適用

7. clearプロパティー、clearfixのスニペット化

8. 装飾用画像の、非マークアップ

実践Webコーディングの8つの基本

1. HTML（文書構造）とCSS（視覚デザイン）の完全分離

• HTMLとCSSを混在させない

実践Webコーディングの8つの基本

2. CSSの外部ファイル化

• 基本的に、CSSファイルを使用する

• CSSファイルが複数になる場合は、HUB（集約中継）ファイルを用意する

実践Webコーディングの8つの基本

3. リセットCSSの利用

• 要素の視覚デザイン設定を均一化したものを、基本とする

• リセットをしない状態も知ること

実践Webコーディングの8つの基本

4. CSSシグネチャーの利用

• HTMLファイルが複数になるサイトでは、（最初から）使用する

• CSSのファイルや、idセレクタ、classセレクタを増やさない配慮である

実践Webコーディングの8つの基本

5. idセレクターを基本としたスタイル指定

• idセレクターを基本指定とし、classセレクターを共通指定として適用

実践Webコーディングの8つの基本

6. ボックスモデルレイアウトの適用

• ボックスモデルレイアウトを基本とし、positionプロパティーでの「ハメゴロシ」レイアウトを基本としない

実践Webコーディングの8つの基本

7. clearプロパティー、clearfixのスニペット化

• あらかじめ、clearプロパティーやclearfixのclassセレクタで呼び出せるよう用意して、スニペット化しておく

実践Webコーディングの8つの基本

8. 装飾用画像の、非マークアップ

• 画像データは、情報構造として明示（マークアップ）するもの以外は、CSSで表示する

• CSSで表現できる装飾は、画像で用意しない

実習2.

補足説明3.

質疑応答4.

おまけ。いろいろ

登壇者について

❖主な仕事

• アートディレクター

• グラフィックデザイナー

• Webクリエーター

• 講師（東京デザインプレック研究所，ストリートアカデミー etc.）

• CI・VIなどのブランディング、広告戦略などのコンサルテーションも受け付けています。お気軽にご相談ください。

Thanks.ありがとうございました。