htmlやcssの次に覚える、脱初心者のための実践コーディング
TRANSCRIPT
![Page 1: Htmlやcssの次に覚える、脱初心者のための実践コーディング](https://reader035.vdocuments.pub/reader035/viewer/2022071815/55a8e4b11a28ab3f6a8b48cd/html5/thumbnails/1.jpg)
HTMLやCSSの次に覚える、脱初心者のための実践コーディング
生明 義秀
![Page 2: Htmlやcssの次に覚える、脱初心者のための実践コーディング](https://reader035.vdocuments.pub/reader035/viewer/2022071815/55a8e4b11a28ab3f6a8b48cd/html5/thumbnails/2.jpg)
0.ご受講の準備
![Page 3: Htmlやcssの次に覚える、脱初心者のための実践コーディング](https://reader035.vdocuments.pub/reader035/viewer/2022071815/55a8e4b11a28ab3f6a8b48cd/html5/thumbnails/3.jpg)
実践Webコーディングの8つの基本1.
![Page 4: Htmlやcssの次に覚える、脱初心者のための実践コーディング](https://reader035.vdocuments.pub/reader035/viewer/2022071815/55a8e4b11a28ab3f6a8b48cd/html5/thumbnails/4.jpg)
実践Webコーディングの8つの基本
1. HTML(文書構造)とCSS(視覚デザイン)の完全分離
2. CSSの外部ファイル化
3. リセットCSSの利用
4. CSSシグネチャーの利用
5. idセレクターを基本としたスタイル指定
6. ボックスモデルレイアウトの適用
7. clearプロパティー、clearfixのスニペット化
8. 装飾用画像の、非マークアップ
![Page 5: Htmlやcssの次に覚える、脱初心者のための実践コーディング](https://reader035.vdocuments.pub/reader035/viewer/2022071815/55a8e4b11a28ab3f6a8b48cd/html5/thumbnails/5.jpg)
実践Webコーディングの8つの基本
1. HTML(文書構造)とCSS(視覚デザイン)の完全分離
• HTMLとCSSを混在させない
![Page 6: Htmlやcssの次に覚える、脱初心者のための実践コーディング](https://reader035.vdocuments.pub/reader035/viewer/2022071815/55a8e4b11a28ab3f6a8b48cd/html5/thumbnails/6.jpg)
実践Webコーディングの8つの基本
2. CSSの外部ファイル化
• 基本的に、CSSファイルを使用する
• CSSファイルが複数になる場合は、HUB(集約中継)ファイルを用意する
![Page 7: Htmlやcssの次に覚える、脱初心者のための実践コーディング](https://reader035.vdocuments.pub/reader035/viewer/2022071815/55a8e4b11a28ab3f6a8b48cd/html5/thumbnails/7.jpg)
実践Webコーディングの8つの基本
3. リセットCSSの利用
• 要素の視覚デザイン設定を均一化したものを、基本とする
• リセットをしない状態も知ること
![Page 8: Htmlやcssの次に覚える、脱初心者のための実践コーディング](https://reader035.vdocuments.pub/reader035/viewer/2022071815/55a8e4b11a28ab3f6a8b48cd/html5/thumbnails/8.jpg)
実践Webコーディングの8つの基本
4. CSSシグネチャーの利用
• HTMLファイルが複数になるサイトでは、(最初から)使用する
• CSSのファイルや、idセレクタ、classセレクタを増やさない配慮である
![Page 9: Htmlやcssの次に覚える、脱初心者のための実践コーディング](https://reader035.vdocuments.pub/reader035/viewer/2022071815/55a8e4b11a28ab3f6a8b48cd/html5/thumbnails/9.jpg)
実践Webコーディングの8つの基本
5. idセレクターを基本としたスタイル指定
• idセレクターを基本指定とし、classセレクターを共通指定として適用
![Page 10: Htmlやcssの次に覚える、脱初心者のための実践コーディング](https://reader035.vdocuments.pub/reader035/viewer/2022071815/55a8e4b11a28ab3f6a8b48cd/html5/thumbnails/10.jpg)
実践Webコーディングの8つの基本
6. ボックスモデルレイアウトの適用
• ボックスモデルレイアウトを基本とし、positionプロパティーでの「ハメゴロシ」レイアウトを基本としない
![Page 11: Htmlやcssの次に覚える、脱初心者のための実践コーディング](https://reader035.vdocuments.pub/reader035/viewer/2022071815/55a8e4b11a28ab3f6a8b48cd/html5/thumbnails/11.jpg)
実践Webコーディングの8つの基本
7. clearプロパティー、clearfixのスニペット化
• あらかじめ、clearプロパティーやclearfixのclassセレクタで呼び出せるよう用意して、スニペット化しておく
![Page 12: Htmlやcssの次に覚える、脱初心者のための実践コーディング](https://reader035.vdocuments.pub/reader035/viewer/2022071815/55a8e4b11a28ab3f6a8b48cd/html5/thumbnails/12.jpg)
実践Webコーディングの8つの基本
8. 装飾用画像の、非マークアップ
• 画像データは、情報構造として明示(マークアップ)するもの以外は、CSSで表示する
• CSSで表現できる装飾は、画像で用意しない
![Page 13: Htmlやcssの次に覚える、脱初心者のための実践コーディング](https://reader035.vdocuments.pub/reader035/viewer/2022071815/55a8e4b11a28ab3f6a8b48cd/html5/thumbnails/13.jpg)
実習2.
![Page 14: Htmlやcssの次に覚える、脱初心者のための実践コーディング](https://reader035.vdocuments.pub/reader035/viewer/2022071815/55a8e4b11a28ab3f6a8b48cd/html5/thumbnails/14.jpg)
補足説明3.
![Page 15: Htmlやcssの次に覚える、脱初心者のための実践コーディング](https://reader035.vdocuments.pub/reader035/viewer/2022071815/55a8e4b11a28ab3f6a8b48cd/html5/thumbnails/15.jpg)
質疑応答4.
![Page 16: Htmlやcssの次に覚える、脱初心者のための実践コーディング](https://reader035.vdocuments.pub/reader035/viewer/2022071815/55a8e4b11a28ab3f6a8b48cd/html5/thumbnails/16.jpg)
おまけ。いろいろ
![Page 17: Htmlやcssの次に覚える、脱初心者のための実践コーディング](https://reader035.vdocuments.pub/reader035/viewer/2022071815/55a8e4b11a28ab3f6a8b48cd/html5/thumbnails/17.jpg)
登壇者について
❖主な仕事
• アートディレクター
• グラフィックデザイナー
• Webクリエーター
• 講師(東京デザインプレック研究所,ストリートアカデミー etc.)
• CI・VIなどのブランディング、広告戦略などのコンサルテーションも受け付けています。お気軽にご相談ください。
![Page 18: Htmlやcssの次に覚える、脱初心者のための実践コーディング](https://reader035.vdocuments.pub/reader035/viewer/2022071815/55a8e4b11a28ab3f6a8b48cd/html5/thumbnails/18.jpg)
Thanks.ありがとうございました。