HTML5

基本タグ

全体構成

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>タイトル</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

</body>
</html>

セクション

<header>ヘッダ</header>

<main>メイン</main>

<footer>フッタ</footer>


<nav>ナビゲーション</nav>

<article>記事</article>

<section>セクション</section>

<aside>補足</aside>

ブロック

<h1>見出し</h1> h1～h6まで

<p>段落</p>

<div>ブロック</div>

<blockquote>引用</blockquote>

<pre>整形済みテキスト</pre>

テキスト内

pタグ内など 
改行：<br>

<b>太字</b>
<i>斜体</i>

<em>強調</em>
<strong>より強い協調</strong>

リンク

<a href="リンク先">テキスト</a>

別ウィンドウ
<a href="リンク先" target="_blank">テキスト</a>

画像

<img src="ファイル名" alt="代替テキスト">

リスト

番号無しのリスト ul と 番号有りのリスト ol があります。
ulまたはolタグの中に li タグで各項目を書きます。 

番号無しリスト

<ul>
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ul>

番号ありリスト

<ol>
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ol>

テーブル

table：テーブル全体
tr：行
td：セル
th：見出し 

<table>
<tr><th>列名１</th><th>列名２</th></tr>
<tr><td>データ</td><td>データ</td></tr>
<tr><td>データ</td><td>データ</td></tr>
</table>

開閉

タイトル 内容 
<details>
<summary>タイトル</summary>
内容
</details>

フォーム

全体構成

<form method="GETまたはPOST" action="送信先">
	<input type="text" name="名前">
	<input type="submit" value="送信">
</form>

INPUTタグ

テキストボックス
<input type="text" name="名前" value="初期値">

パスワード
<input type="password" name="名前" value="初期値">

ラジオボタン（同nameで複数作る）
<input type="radio" name="名前" value="送信値">

チェックボックス
<input type="checkbox" name="名前" value="送信値">

隠れインプット
<input type="hidden" name="名前" value="送信値">

送信ボタン
<input type="submit" value="送信">

リセットボタン
<input type="reset" value="リセット">

画像送信ボタン
<input type="image" src="画像ファイル名">

セレクトボックス

<select name="名前">
	<option value="値１">選択肢１</option>
	<option value="値２">選択肢２</option>
	<option value="値３">選択肢３</option>
</select>

複数行

<textarea wrap="soft" name="名前" rows="行数" cols="横幅">
初期値
</textarea>

HTML5のINPUTタグ

必須
<input type="text" name="名前" required>

ヒント
<input type="text"  name="名前" placeholder="ヒント">

数値
<input type="number" name="名前" value="初期値" min="最小値" max="最大値">

メールアドレス
<input type="email" name="名前">

URL
<input type="url" name="名前">

電話番号
<input type="tel" name="名前">

日付
<input type="date" name="名前">

時間
<input type="time" name="名前">

日時
<input type="datetime" name="名前">

色
<input type="color" name="名前">

CSS

書く場所

１．別ファイルに書き、HTMLファイルのheadタグ内で以下のように指定

<link rel="stylesheet" type="text/css" href="/style.css">

２．headタグ内のスタイルに書く

３．インライン（タグ内にstyle属性で書く）

基本的な書き方

セレクタ {
	プロパティ:値;
	プロパティ:値;
}

例：h1タグの文字色を赤に
h1 {
	color:red;
}

セレクタ

種類書き方例
タグ指定タグをそのまま書くh1
クラス名.クラス名.item
ID名#ID名#item
タグ名とクラス名タグ名.クラス名h1.item
親子空白で区切るp b
タグ直下> で区切るp > b
属性[属性名="値"][name="age"]

疑似セレクタ

マウスが上に来たとき:hover
フォーカスが来たとき:focus
最初の文字:first-letter
最初の子要素:first-child
最後の子要素:last-child
n番目の要素:nth-child(数字)

単位

ピクセルpx
文字（現在の大きさからの倍率）em
文字（ルート要素からの倍率）rem
割合%

プロパティ

テキスト

文字色colorredなど
文字サイズfont-size8em など
太字font-weightboldなど
下線text-decorationunderlineやnoneなど
行送りline-height150%など
行揃え－横text-aligncenterなど
行揃え－縦vertical-aligntopなど
インデントtext-indent10pxなど
テキストの影text-shadow1px 1px 1px 1px grayなど

背景

背景色backgroundyellowなど
背景画像backgroundurl(test.jpg)など

位置

幅width300pxなど
最小幅min-width300pxなど
最大幅max-width300pxなど
高さheight600pxなど
最小高さmin-height600pxなど
最大高さmax-height600pxなど
オーバーフローoverflowscrollなど
フロートfloatleftなど
クリアclearrightなど
位置指定positionfixedなど
表示displayblockなど
左位置left10pxなど
右位置right20pxなど
上位置top30pxなど
下位置bottom40pxなど
重なり順序z-index5など

ボックス

枠線の種類borderthick solid blueなど
上枠線border-topthick solid blueなど
下枠線border-bottomthick solid blueなど
右枠線border-rightthick solid blueなど
左枠線border-leftthick solid blueなど
ボックスの影box-shadow2px 2px 2px 2px grayなど
角丸border-radius10pxなど
テーブルの間隔border-collapsecollapseなど

間隔

文字間隔letter-spacing10pxなど
余白padding10pxなど
上余白padding-top10pxなど
下余白padding-bottom10pxなど
左余白padding-left10pxなど
右余白padding-right10pxなど
マージンmargin10pxなど
上マージンmargin-top10pxなど
下マージンmargin-bottom10pxなど
左マージンmargin-left10pxなど
右マージンmargin-right10pxなど

リスト他

マークの種類list-styledecimalなど
カーソルの種類cursordefaultなど