Download as PDF, PPTX
Recommended
More Related Content
Similar to 160412 html001 html概要編
More from elephancube
160412 html001 html概要編
- 1.
- 2.© 株式会社エレファンキューブ目次1. HTML/ CSS / JavaScript とは？2. 何に工数がかかるか？3. HTML と CSS の関係4. HTML は文書構造を定義する5. HTML の基本6. HTML の属性 id と class7. CSS の基本8. CSS の重要ポイント1：余白（padding / border / margin）9. CSS の重要ポイント2：配置（float）10. CSS の重要ポイント3：位置（position）11. CSS の重要ポイント4：フォント関連12. CSS の重要ポイント5：ブロックレベル要素/インライン要素13. CSS の重要ポイント6：メディアクエリ14. ググるコツ15. おまけ2
- 3.© 株式会社エレファンキューブ1. HTML/ CSS / JavaScript とは？• HTML ＝ Hyper Text Markup Language• ブラウザで表示させるための言語• 文書の構造を定義をする• CSS ＝ Cascading Style Sheets• HTMLの見栄えを定義する• JavaScript• HTMLを動的に変化させる3
- 4.© 株式会社エレファンキューブ2. 何に工数がかかるか？•HTML 10％• CSS 70%• JavaScript 20%4圧倒的にCSSが大変（だと思う）
- 5.© 株式会社エレファンキューブ3. HTMLと CSS の関係• JavaScript は、いったん後回しにします。5HTML文書構造CSS見栄え
- 6.© 株式会社エレファンキューブ4.HTML は、文書構造を定義する16<!DOCTYPEhtml><html><head><title>サンプル</title></head><body><header>ヘッダー部</header><nav>メニュー</nav><section>コンテンツ</section><footer>フッター部</footer></body></html>• パッと見て、文書構造がわかる• 参考：header, footer, section, articlehttp://sole-color-blog.com/blog/php/65/• 参考：文書構造http://www.confrage.com/html5/html5_1100.html• 参考：HTML5http://www.webdesign-fan.com/html5-matome
- 7.© 株式会社エレファンキューブ4.HTML は、文書構造を定義する27•非推奨例• こう書くべき そこが「強調文字」だということを分かるようにする<p>吾輩は<strong>猫</strong>である。</p><p>吾輩は<b>猫</b>である。</p>
- 8.© 株式会社エレファンキューブ4.HTML は、文書構造を定義する38•CSSの定義も同様。文書構造がわかる命名をする。• 青いボタンは、 ではなくて、 であるべき。• 引用：Bootstrap http://getbootstrap.com/css/#buttonsbtn-blue btn-primary
- 9.© 株式会社エレファンキューブ5. HTMLの基本• １つだけ → タグは入れ子構造になる。• 正しい例• 間違い例 タグを正しく閉じること！ （閉じなくてよいタグもあります。）9<p><strong>吾輩は猫である</strong></p><p><strong>吾輩は猫である</p></strong>
- 10.© 株式会社エレファンキューブ6. HTMLの属性 id と class• id は、HTML文書内で1つだけ。ユニークである必要がある！• class は、HTML文書内で複数指定できる。• class は、1つのタグに複数指定することもできる。 CSS や JavaScript にも影響するので、id と class どちらが最適かを考える。10<div id=“container”><div class=“container”><div class=“container profiles”>
- 11.© 株式会社エレファンキューブ7. CSSの基本•HTML の タグ自体、id、class に対して見栄えを定義する• タグ• id• class 参考：http://weboook.blog22.fc2.com/blog-entry-268.html11h1 {font-size:3em;}#news {background-color:#999999;}.btn {padding:10px;}
- 12.© 株式会社エレファンキューブ8. CSSの重要ポイント1：余白•余白を自在に制御しよう。margin と border と padding。 参考・引用：http://taneppa.net/margin_padding/12
- 13.© 株式会社エレファンキューブ9. CSSの重要ポイント2：配置•右に寄せるとか左に寄せるとか。float と clear を理解する。（正直、テーブルのほうが楽。） 基本はこちら（引用）http://www.css-designsample.com/beginner/hp/float-base.html 詳しいあれこれhttp://taneppa.net/float/ ハマりどころhttp://coliss.com/articles/build-websites/operation/css/how-floating-works-by-ire.html13
- 14.© 株式会社エレファンキューブ10. CSSの重要ポイント3：位置•位置を指定する、position。学習コンテンツだと意外と使う印象。 基本はこちら（引用）http://www.css-designsample.com/beginner/hp/position-base.html はみでるとか重なるとか詳しくhttp://www.koushinclub.com/blog/1453.html14
- 15.© 株式会社エレファンキューブ11. CSSの重要ポイント4：フォント関連•きれいに見せるための最適設定は、日々刻々と変化するので「css font 2016」でググろう！• 見栄えを完全固定させるなら、Web Font の使用も検討する。英字なら Google Web Font 便利。（日本語もある）http://oxynotes.com/?p=8121• 小学生向けの漢字教材など字形を気にするなら、有償のWebフォントを検討するhttp://typesquare.com/• アイコンフォントも便利！https://h2ham.net/font-awasome15
- 16.© 株式会社エレファンキューブ12. CSSの重要ポイント5：ブロック/インライン•ブロックレベル要素、インライン要素を理解しておく 参考・引用：http://www.tagindex.com/html_tag/basic/block_inline.html16
- 17.© 株式会社エレファンキューブ13. CSSの重要ポイント6：メディアクエリ•メディアの幅によって、画面か印刷かによって、CSSを切り替える• 完全に切り分けるのは非効率なので、どうするか考える。• レスポンシブデザインを実現できる。• 参考：http://sole-color-blog.com/blog/php/71/17
- 18.© 株式会社エレファンキューブ14. ググるコツ•できるだけ新しい情報をさがす。できれば1年以内、古くても2年以内。• 対象ブラウザを確認する。ブラウザ依存が非常に多い。PCだけでなくモバイルも対象ならそれも含めて。• 基本、HTML5 / CSS3 でOK。古いのは、HTML4 とか XHTML とか。ただし、必ず“5”がつくわけでもない。• 日本語のサイトも充実しているが、細かい情報は英語でさがしたほうがはやいこともおおい。18
- 19.© 株式会社エレファンキューブ15. おまけ1：HTML5最新情報•プラグインなしで、動画とか音声とかSVG画像とか使えるようになってきた。逆に、ActiveXプラグインは非推奨になっている。• canvas でいろいろ描画したりできる！• CSS3 でアニメができる。• 「レスポンシブデザイン」が主流。PCとスマホで別サイトつくらなくてよい。19
- 20.© 株式会社エレファンキューブ15. おまけ2：CSSフレームワークを使おう•あらかじめデザインされたCSSフレームワークが多数ある。• Bootstrap http://getbootstrap.com/• Pure http://purecss.io/• Uikit http://getuikit.com/• INK http://ink.sapo.pt/• HTML KickStart http://www.99lime.com/elements/• 便利なものは使おう ソースをみると参考になる20
- 21.© 株式会社エレファンキューブ15. おまけ3：reset.css•CSSは、ブラウザの初期値がいろいろ違う。• それを吸収してくれる、reset.css というものがある• 参考：http://www.html5-memo.com/first-html5/html5-002/21
- 22.© 株式会社エレファンキューブ次回• 今回は、ひとまず駆け足で紹介しました。•基本は、自分で試行錯誤しながらやってみないとわからない。• 次回から、ハンズオン形式で、実践していくスタイルで進めます。22