（参考）
http://www.learn-html.org/en/Welcome
https://www.w3schools.com/html/default.asp
Links
リンクを付けることで、同一ページ上の違うセクション、もしくは違うページまで移動させることができる。
例）違うページ
<a href="https://www.google.com">a link to Google </a>
例）同一ページ上の違うセクション
ハッシュサインとIDが必要
<a href="#fag">Click here to read the Frequently Asked Questions</a>
<h3 id="fag">Frequently asked Questions</h3>
Lists
順番のあるリストや順番のないリストを作ることができる
Orderd lists
例）
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
また、リストには番号付けの形式を指定することができる。
例）
<ol type="1">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
Unorderd lists
例）
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
また、list-style-typeを指定することができる。
例）
<ul style="list-style-type: square">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
Images
<img src=”/static/img/code.jpg”>
また、Javascriptを使用することで、画像を読み込んだあとにイベントを表示させることができる。
Using the CSS float attribute with images
画像は、テキストのすぐ近くに表示させることができる。
<img src="/static/img/lab.png" style="float: left;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="clear: both">Second paragraph</p>
最後にclearを書くことで、この効果をこの段落以降に適用させないようにすることができる。
Styles
CSSの指定方法
1.Inline
インラインメソッドを使うことでCSSを指定することができる。
例）
<p>This is the default serif font. It is commonly used in
printed media for better readability, since letters
are more distinct in serif fonts.</p>
<p style="font-family: sans-serif">This is a sans-serif font.
It is commonly used in screens because it is hard
for screens to render letters with such great detail.</p>
2.Using a CSS tag
<head>
<style>
.nice {
font-family: sans-serif;
}
</style>
</head>
<body>
<p>This is the default serif font. It is commonly used in
printed media for better readability, since letters
are more distinct in serif fonts.</p>
<p class="nice">This is a sans-serif font.
It is commonly used in screens because it is hard
for screens to render letters with such great detail.</p>
</body>
3.Using a different stylesheet
CSSファイルを指定する方法
ただし、このHTMLファイルとCSSファイルは同一ディレクトリ内にある必要がある。
4.Programmatic access
HTML要素は、プログラムに沿ったスタイルを加えるためにstyleを使うことができる。
<body>
<p id="serif-text">This is the default serif font. It is commonly used in
printed media for better readability, since letters
are more distinct in serif fonts.</p>
<p class="nice" id="sans-serif-text">This is a sans-serif font.
It is commonly used in screens because it is hard
for screens to render letters with such great detail.</p>
<script>
var sansSerifText = document.getElementById("sans-serif-text");
sansSerifText.style.fontFamily = "sans-serif";
</script>
</body>
Classes
CSSクラスは、セレクタを指定したHTML要素にCSSによる加工をセットするために使われる。
<style>
.nice {
font-family: sans-serif;
}
</style>
<p class="nice">This is a short sentence.</p>
HTML5 classList API
HTML５では、classListを使って要素のリストを編集するための新しい方法が紹介されました。
<!DOCTYPE html>
<html>
<head>
<style>
.nice {
font-family: sans-serif;
}
</style>
</head>
<body>
<p id="mytext">My text</p>
<script>
var el = document.getElementById("mytext");
el.classList.add("nice"); // adds the nice class to the paragraph
el.classList.remove("nice"); // removes the nice class from the paragraph
el.classList.toggle("nice"); // adds the nice class to the paragraph again, since it does not currently
// contain the nice class.
if (el.classList.contains("nice")) {
alert("The element contains the 'nice' class.");
}
</script>
</body>
</html>
Selectors
CSSセレクタでpを指定すると、そのページのpの文全てに適用されます。
しかし、さらにセレクタを指定することでいくつかの要素に違うCSSを適用させることができます。
<style>
p.example {
color: green;
}
p {
color: blue;
}
</style>
<p>I am blue</p>
<p class="example">I am green now</p>
<p id="last" class="example">I am also green now</p>
querySelector and querySelectorAll methods
HTML5では、新しくdocument.querySelectorsとdocument.querySelectorAllメソッドを追加しました。
このことで、同じセレクタを使用することが可能になり、使うメソッド次第で、要素のリストまたはセレクタに対応する最初の要素を受けることが可能になりました。
<p class="nice">This is a nice paragraph.</p>
<p class="nice">This is another nice paragraph.</p>
<p>This is a standard paragraph.</p>
<script>
// this code colors the first nice paragraph in blue
var firstNiceParagraph = document.querySelector(".nice");
firstNiceParagraph.style.color = "blue";
</script>
Pseudo-classes
疑似クラスにはデフォルトで定義されているものがあり、
「特定の形の要素」「階層別の特定の要素のセット」の両方がある。
後者については、Advanced Selectorsで説明する。
疑似クラスはインラインでは使えない。
Links
リンクには、まだ訪れていないものと既に訪れたものの2つがある。
<style>
a.special:link {
color: green;
}
a.special:visited {
color: red;
}
</style>
<p><a href="#">This is a standard link, it will become purple when clicked</a></p>
<p><a class="special" href="#">This is a special colored link and become red when clicked</a></p>
通常のリンクは訪れる前は青、訪れた後は紫に変わる。
一方、specialで指定されたものは訪れる前は緑、訪れた後は赤に変わる。
Hover
ユーザーがマウスを使ってポインターを対象物の載せた時のHTML要素のスタイルは、Hover疑似クラスを使って定義することができる。
<style>
p:hover {
background-color: yellow;
}
</style>
<p>Paragraphs now have a yellow background when hovering over them.</p>
Active and Target
CSSでクリックした要素に使うスタイルを定義できる。
<style>
a:active {
font-weight: bold;
}
</style>
<p>
<a href="#first">First Section</a>
<a href="#second">Second Section</a>
<a href="#third">Third Section</a>
</p>
また、ページの中の特定のセクションへ案内することで、目的の要素を加工することが可能になる。
<style>
p:target {
font-weight: bold;
}
</style>
<p>
<a href="#first">First Section</a>
<a href="#second">Second Section</a>
<a href="#third">Third Section</a>
</p>
<p id="first">This is the text of the first section.</p>
<p id="second">This is the text of the second section.</p>
<p id="third">This is the text of the third section.</p>
Focus
<style>
input:focus {
font-weight: bold;
}
</style>
<form>
<p><input type="text" value="First field"></p>
<p><input type="text" value="Second field"></p>
<p><input type="text" value="Third field"></p>
</form>
Bootstrap
ウェブデベロッパはUIをデザインするためのリーディングフレームワークとしてTwitterBootstrapを選ぶ。
このBootstrapはHTMLをよりモダンで便利な見た目に変える。
Bootstrapを読み込むには以下のような記述が必要。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Grid Layout
Grid LayoutはHTMLとCSSを使ってウェブサイトをデザインすることのために使われる概念である。