160412 html001 html概要編
TRANSCRIPT
© 株式会社エレファンキューブ
2016/04/12 支倉常明
HTML概要HTML 01
© 株式会社エレファンキューブ
目次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
© 株式会社エレファンキューブ
1. HTML / CSS / JavaScript とは？
• HTML ＝ Hyper Text Markup Language
• ブラウザで表示させるための言語
• 文書の構造を定義をする
• CSS ＝ Cascading Style Sheets
• HTMLの見栄えを定義する
• JavaScript
• HTMLを動的に変化させる
3
© 株式会社エレファンキューブ
2.何に工数がかかるか？
• HTML 10％• CSS 70%• JavaScript 20%
4
圧倒的にCSSが大変
（だと思う）
© 株式会社エレファンキューブ
3. HTMLと CSSの関係
• JavaScript は、いったん後回しにします。
5
HTML文書構造
CSS見栄え
© 株式会社エレファンキューブ
4.HTMLは、文書構造を定義する1
6
<!DOCTYPE html><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
© 株式会社エレファンキューブ
4.HTMLは、文書構造を定義する2
7
• 非推奨例
• こう書くべき
そこが「強調文字」だということを分かるようにする
<p>吾輩は<strong>猫</strong>である。</p>
<p>吾輩は<b>猫</b>である。</p>
© 株式会社エレファンキューブ
4.HTMLは、文書構造を定義する3
8
• CSSの定義も同様。文書構造がわかる命名をする。
• 青いボタンは、 ではなくて、 であるべき。
• 引用：Bootstrap http://getbootstrap.com/css/#buttons
btn-blue btn-primary
© 株式会社エレファンキューブ
5. HTMLの基本
• １つだけ → タグは入れ子構造になる。
• 正しい例
• 間違い例
タグを正しく閉じること！ （閉じなくてよいタグもあります。）
9
<p><strong>吾輩は猫である</strong></p>
<p><strong>吾輩は猫である</p></strong>
© 株式会社エレファンキューブ
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”>
© 株式会社エレファンキューブ
7. CSSの基本
• HTML の タグ自体、id、class に対して見栄えを定義する• タグ
• id
• class
参考：http://weboook.blog22.fc2.com/blog-entry-268.html11
h1 {font-size:3em;
}
#news {background-color:#999999;
}
.btn {padding:10px;
}
© 株式会社エレファンキューブ
8. CSSの重要ポイント1：余白
• 余白を自在に制御しよう。margin と border と padding。
参考・引用：http://taneppa.net/margin_padding/12
© 株式会社エレファンキューブ
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.html
13
© 株式会社エレファンキューブ
10. CSSの重要ポイント3：位置
• 位置を指定する、position。学習コンテンツだと意外と使う印象。
基本はこちら（引用）http://www.css-designsample.com/beginner/hp/position-base.html
はみでるとか重なるとか詳しくhttp://www.koushinclub.com/blog/1453.html
14
© 株式会社エレファンキューブ
11. CSSの重要ポイント4：フォント関連
• きれいに見せるための最適設定は、日々刻々と変化するので「css font 2016」でググろう！
• 見栄えを完全固定させるなら、Web Font の使用も検討する。英字なら Google Web Font 便利。（日本語もある）http://oxynotes.com/?p=8121
• 小学生向けの漢字教材など字形を気にするなら、有償のWebフォントを検討するhttp://typesquare.com/
• アイコンフォントも便利！https://h2ham.net/font-awasome
15
© 株式会社エレファンキューブ
12. CSSの重要ポイント5：ブロック/インライン
• ブロックレベル要素、インライン要素を理解しておく
参考・引用：http://www.tagindex.com/html_tag/basic/block_inline.html
16
© 株式会社エレファンキューブ
13. CSSの重要ポイント6：メディアクエリ
• メディアの幅によって、画面か印刷かによって、CSSを切り替える
• 完全に切り分けるのは非効率なので、どうするか考える。
• レスポンシブデザインを実現できる。
• 参考：http://sole-color-blog.com/blog/php/71/
17
© 株式会社エレファンキューブ
14. ググるコツ
• できるだけ新しい情報をさがす。できれば1年以内、古くても2年以内。
• 対象ブラウザを確認する。ブラウザ依存が非常に多い。PCだけでなくモバイルも対象ならそれも含めて。
• 基本、HTML5 / CSS3 でOK。古いのは、HTML4 とか XHTML とか。ただし、必ず“5”がつくわけでもない。
• 日本語のサイトも充実しているが、細かい情報は英語でさがしたほうがはやいこともおおい。
18
© 株式会社エレファンキューブ
15. おまけ1：HTML5最新情報
• プラグインなしで、動画とか音声とかSVG画像とか使えるようになってきた。逆に、ActiveXプラグインは非推奨になっている。
• canvas でいろいろ描画したりできる！
• CSS3 でアニメができる。
• 「レスポンシブデザイン」が主流。PCとスマホで別サイトつくらなくてよい。
19
© 株式会社エレファンキューブ
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
© 株式会社エレファンキューブ
15. おまけ3：reset.css
• CSSは、ブラウザの初期値がいろいろ違う。
• それを吸収してくれる、reset.css というものがある
• 参考：http://www.html5-memo.com/first-html5/html5-002/
21
© 株式会社エレファンキューブ
次回
• 今回は、ひとまず駆け足で紹介しました。
• 基本は、自分で試行錯誤しながらやってみないとわからない。
• 次回から、ハンズオン形式で、実践していくスタイルで進めます。
22