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

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

Upload: gishu-azami

Post on 17-Jul-2015

706 views

Category:

Design


3 download

TRANSCRIPT

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

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

生明 義秀

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

0.ご受講の準備

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

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

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

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

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

2. CSSの外部ファイル化

3. リセットCSSの利用

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

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

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

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

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

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

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

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

• HTMLとCSSを混在させない

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

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

2. CSSの外部ファイル化

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

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

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

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

3. リセットCSSの利用

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

実習2.

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

補足説明3.

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

質疑応答4.

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

おまけ。いろいろ

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

登壇者について

❖主な仕事

• アートディレクター

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

• Webクリエーター

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

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

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

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