• Save
GW講習3日目!プロデザイナーが実践するHTML&CSSスキル向上トレーニング
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 460 views

ーーーーーーーーーーーーーーーーーーーーーーー ...

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

Statistics

Views

Total Views
460
Views on SlideShare
262
Embed Views
198

Actions

Likes
2
Downloads
3
Comments
0

2 Embeds 198

http://schoo.jp 187
http://s.deeeki.com 11

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

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