160412 html001 html概要編

© 株式会社エレファンキューブ
2016/04/12 支倉常明
HTML概要
HTML 01

目次
1. HTML / CSS / JavaScript とは？
2. 何に工数がかかるか？
3. HTML と CSS の関係
4. HTML は文書構造を定義する
5. HTML の基本
6. HTML の属性 id と class
7. 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, article
http://sole-color-blog.com/blog/php/65/
• 参考：文書構造
http://www.confrage.com/html5/html5_1100.html
• 参考：HTML5
http://www.webdesign-fan.com/html5-matome

7
• 非推奨例
• こう書くべき
 そこが「強調文字」だということを分かるようにする
<p>吾輩は<strong>猫</strong>である。</p>
<p>吾輩は<b>猫</b>である。</p>

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.html
11
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

160412 html001 html概要編

More Related Content

Similar to 160412 html001 html概要編

More from elephancube

160412 html001 html概要編