ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 ＷＥＢ生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/441/room ーーーーーーーーーーーーーーーーーーーーーーー

1. プロデザイナーが実践する
HTML&CSSスキル向上トレーニング
∼Wikipedia編
!
笠井 枝理依

2. 本日の授業内容
1. HTMLスケッチとは?
2. コーディングの考え方(5分)
3. ライブコーディング (60分)
4. コーディング内容のポイント (15分)
5. 質疑応答 (10分)

3. HTMLスケッチとは?
• 既存のWebページをHTMLとCSSを使って
再現すること
• Webページのソースをなるべく見ずに､
自力でマークアップしていく
• HTMLとCSSの基礎を習得した方が､
実務で使える知識へスキルアップするのに有効

4. コーディングのポイント
• ページをブロックで分解する
• 大きなブロックから小さなブロックに向かって､
段階的にコーディングしていく
• HTMLで構造をしっかりつくったら､
その構造を壊さないようCSSでスタイリングする

5. まずは大枠のブロックを決める

6. media-bodyをブロック分解する

7. page-changerをブロック分解する

8. articleをブロック分解する

9. footerをブロック分解する

10. media-sideをブロック分解する

11. side-navsをブロック分解する

12. コーディング内容のおさらい
1.mediaオブジェクトは､「片側が固定幅」で「もう片
方が可変幅」の時に有効な手法
• media: 一つのmediaオブジェクトを囲う
• media-side: 固定幅(画像の幅が固定されている)
• media-body: 可変幅(親要素いっぱいに広がる)

13. コーディング内容のおさらい
2.CSSだけで三角形をつくる方法
!
http://codepen.io/chriscoyier/pen/lotjh

14. コーディング内容のおさらい
3.CSSでグラデーションをかける方法
!
http://css-tricks.com/css3-gradients/

15. コーディング内容のおさらい
4.使ったツール
• Sublime Text 2
http://www.sublimetext.com/2
• xScope
http://xscopeapp.com/

16. おまけ
便利なSublime Text 2のプラグインリスト
• Emmet (HTMLをショートコードを打つだけで補完くれる)
• HTML5 & HTML Snippets (HTML入力を自動補完してくれる)
• Tag (閉じタグの自動補完)
• Emmet Css Snippets (EmmetのCSS版)
• CSS & CSS Snippets (CSS入力を自動補完してくれる)
• jQuery & jQuery Snippets pack (jQuery入力を自動補完してくれる)
• Markdown Preview (マークダウンファイルをプレビューできる)
• Sidebar Enhancements(サイドバーでの右クリックメニューを強化してくれる)
• sublime Linter (文法をチェックしてくれる)
• BracketHilighter (対になっているタグをハイライトしてくれる)
• Trailing Spaces(無駄な半角スペースをハイライトしてくれる)

17. レポート課題
実際に自分で同じページをHTMLスケッチしてみて､
その感想や意見を提出してください｡
URL: http://ja.wikipedia.org/wiki/%E6%9F%B4%E7%8A%AC

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