GW講習3日目!プロデザイナーが実践するHTML&CSSスキル向上トレーニング

493
-1

Published on

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

Published in: Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
493
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

GW講習3日目!プロデザイナーが実践するHTML&CSSスキル向上トレーニング

  1. 1. プロデザイナーが実践する HTML&CSSスキル向上トレーニング ∼Wikipedia編 ! 笠井 枝理依
  2. 2. 本日の授業内容 1. HTMLスケッチとは? 2. コーディングの考え方(5分) 3. ライブコーディング (60分) 4. コーディング内容のポイント (15分) 5. 質疑応答 (10分)
  3. 3. HTMLスケッチとは? • 既存のWebページをHTMLとCSSを使って
 再現すること • Webページのソースをなるべく見ずに、
 自力でマークアップしていく • HTMLとCSSの基礎を習得した方が、
 実務で使える知識へスキルアップするのに有効
  4. 4. コーディングのポイント • ページをブロックで分解する • 大きなブロックから小さなブロックに向かって、
 段階的にコーディングしていく • HTMLで構造をしっかりつくったら、
 その構造を壊さないようCSSでスタイリングする
  5. 5. まずは大枠のブロックを決める
  6. 6. media-bodyをブロック分解する
  7. 7. page-changerをブロック分解する
  8. 8. articleをブロック分解する
  9. 9. footerをブロック分解する
  10. 10. media-sideをブロック分解する
  11. 11. side-navsをブロック分解する
  12. 12. コーディング内容のおさらい 1.mediaオブジェクトは、「片側が固定幅」で「もう片 方が可変幅」の時に有効な手法 • media: 一つのmediaオブジェクトを囲う • media-side: 固定幅(画像の幅が固定されている) • media-body: 可変幅(親要素いっぱいに広がる)
  13. 13. コーディング内容のおさらい 2.CSSだけで三角形をつくる方法 ! http://codepen.io/chriscoyier/pen/lotjh
  14. 14. コーディング内容のおさらい 3.CSSでグラデーションをかける方法 ! http://css-tricks.com/css3-gradients/
  15. 15. コーディング内容のおさらい 4.使ったツール • Sublime Text 2
 http://www.sublimetext.com/2 • xScope
 http://xscopeapp.com/
  16. 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. 17. レポート課題 実際に自分で同じページをHTMLスケッチしてみて、 その感想や意見を提出してください。 URL: http://ja.wikipedia.org/wiki/%E6%9F%B4%E7%8A%AC
  18. 18. ありがとうございました
  19. 19. プロデザイナーが実践する HTML&CSSスキル向上トレーニング ∼GitHub編(1) ! 笠井 枝理依
  20. 20. 質疑応答
  21. 21. レポート課題 実際に自分で同じページをHTMLスケッチしてみて、その 感想や意見を提出してください。 • 対象URL
 https://github.com/ellekasai • サンプルコードURL
 https://github.com/htmlsketch/sample/tree/master/2- schoo%20class/part2
  22. 22. 各種SNSアカウント • Twitter
 https://twitter.com/ellekasai • Facebook
 https://www.facebook.com/elle.kasai
  23. 23. プロデザイナーが実践する HTML&CSSスキル向上トレーニング ∼GitHub編(2) ! 笠井 枝理依
  24. 24. 質疑応答
  25. 25. レポート課題 実際に自分で同じページをHTMLスケッチしてみて、その 感想や意見を提出してください。 • 対象URL
 https://github.com/ellekasai • サンプルコードURL
 https://github.com/htmlsketch/sample/tree/master/2- schoo%20class/part2
  26. 26. 各種SNSアカウント • Twitter
 https://twitter.com/ellekasai • Facebook
 https://www.facebook.com/elle.kasai

×