remind memo
| HTML | ﾀｸﾞで文書を構造化 |
| ﾌｧｲﾙ名 | 半角英数､ﾊｲﾌﾝ(-),ｱﾝﾀﾞｰｽｺｱ(_)､大文字/小文字:ｻｰﾊﾞｰで区別 |
| <開始ﾀｸﾞ 属性="値">ｺﾝﾃﾝﾂ</終了ﾀｸﾞ> | 書式 |
| <!--ｺﾒﾝﾄ--> | ｺﾒﾝﾄ |
| head | |
| <!DOCTYPE html> | 文書型宣言 |
| <html lang="ja"> | lang属性(言語指定) |
| <meta charset="UTF-8"> | 文字ｺｰﾄﾞ指定 |
| <link rel="stylesheet" href="cssﾌｧｲﾙﾊﾟｽ"> | CSSﾌｧｲﾙ指定 |
| <link rel="shortcuticon" href="iconﾌｧｲﾙﾊﾟｽ"> | ﾌｧﾋﾞｺﾝﾌｧｲﾙ指定 |
| <script src="ｽｸﾘﾌﾟﾄﾌｧｲﾙﾊﾟｽ"></script> | ｽｸﾘﾌﾟﾄﾌｧｲﾙ指定 |
| body | |
| <small> | ｻｲﾄﾞｺﾒﾝﾄ |
| <strong> | 非常に重要 |
| <address> | 連絡先 |
| <article> | 1つの完結したｺﾝﾃﾝﾂ､記事をｸﾞﾙｰﾌﾟ化 |
| <section> | 汎用ｾｸｼｮﾝをｸﾞﾙｰﾌﾟ化 |
| <aside> | 本題と無関係なｺﾝﾃﾝﾂをｸﾞﾙｰﾌﾟ化 |
| <nav> | ﾅﾋﾞｹﾞｰｼｮﾝをｸﾞﾙｰﾌﾟ化 |
| <header> | ﾍｯﾀﾞｰをｸﾞﾙｰﾌﾟ化 |
| <footer> | ﾌｯﾀｰをｸﾞﾙｰﾌﾟ化 |
| <div> | 汎用ﾌﾞﾛｯｸをｸﾞﾙｰﾌﾟ化 |
| <span> | ﾃｷｽﾄをｸﾞﾙｰﾌﾟ化 |
| id,class | |
| <開始ﾀｸﾞ id="id名">ｺﾝﾃﾝﾂ</終了ﾀｸﾞ> | id属性 |
| <開始ﾀｸﾞ class="class名1 class名2">ｺﾝﾃﾝﾂ</終了ﾀｸﾞ> | class属性 |
| リンク | |
| <a href="ﾘﾝｸ先" target="_blank">リンク元</a> | ﾘﾝｸ(別のﾀﾌﾞで開く) |
| <a href="#ﾘﾝｸ先id">リンク元</a> | ﾘﾝｸ(ﾍﾟｰｼﾞ内) |
| リスト | |
| <ul><li>ﾘｽﾄ</li></ul> | ﾘｽﾄ(番号無) |
| <ol><li>ﾘｽﾄ</li></ol> | ﾘｽﾄ(番号付) |
| <dl><dt>用語</dt><dd>説明/<dd></dl> | ﾘｽﾄ(定義) |
| 文字実態参照 | |
| < | |
| > | |
| & | |
| " | |
| (半角ｽﾍﾟｰｽ) | |
| ©著作権 | |
| ®登録商標 | |
| 図 | |
| <img src="画像のﾊﾟｽ alt="" width="" height=""> | 画像 |
| <figure>図</figure> | 図(ﾌﾞﾛｯｸﾚﾍﾞﾙ) |
| <figcaption>図タイトル</figcaption> | 図ﾀｲﾄﾙ |
| 表 | |
| <table> | 表 |
| <caption>ｷｬﾌﾟｼｮﾝ</caption> | 表題 |
| 列 | |
| <th scope="row"> | 見出しと同じ行が関連 |
| <th scope="col"> | 見出しと同じ列が関連 |
| <td rowspan=""> | 行幅 |
| <td colspan=""> | 列幅 |
| <th rowspan="" scope="rowgroup"> | 見出しと同じ行とその後の行が関連 |
| フォーム | |
| <form action="url" method="post"> | フォーム |
| コントロール | |
| <input type="text" name="名前" value="値" size="幅" maxlength="文字数" required> | ﾃｷｽﾄﾎﾞｯｸｽ(必須) |
| <input type="email" name="名前"> | ﾃｷｽﾄﾎﾞｯｸｽ(e-mail) |
| <input type="tell name="名前"> | ﾃｷｽﾄﾎﾞｯｸｽ(tell) |
| <input type="radio name="名前" value="値"> | ﾗｼﾞｵﾎﾞﾀﾝ(1つ選択､同じ名前が同じｸﾞﾙｰﾌﾟ) |
| <input type="checkbox name="名前" value="値"> | ﾁｪｯｸﾎﾞｯｸｽ(複数選択可) |
| <input type="submit value="送信"> | 送信ﾎﾞﾀﾝ |
| <input type="image" src="" alt=""> | 送信ﾎﾞﾀﾝ(図) |
| <input type="reset" name="名前" value="値"> | ﾘｾｯﾄﾎﾞﾀﾝ |
| <select name="名前"><option value="送信値">選択肢</option></select> | ｾﾚｸﾄﾎﾞｯｸｽ |
| <textarea name="">ﾃｷｽﾄ</textarea> | ﾃｷｽﾄｴﾘｱ |
| <lavel>ｺﾝﾄﾛｰﾙ></lavel> | ﾗﾍﾞﾙ |
| <lavel for="id">ｺﾝﾄﾛｰﾙ</lavel> | ﾗﾍﾞﾙ |
| CSS | |
| CSS | HTMLにｽﾀｲﾙを適用 |
| ｾﾚｸﾀ{ﾌﾟﾛﾊﾟﾃｨ:値;} | 書式 |
| @charset "utf-8"; | 文字ｺｰﾄﾞ指定 |
| @import url(cssのﾊﾟｽ); | 外部CSS読込み |
| @media screen and (ﾒﾃﾞｨｱｸｴﾘ){css} | ﾒﾃﾞｨｱｸｴﾘ |
| /**/ | ｺﾒﾝﾄ |
| リンク | |
| a:link | ﾘﾝｸ(未訪問) |
| a:visited | ﾘﾝｸ(訪問済) |
| 要素:focus | 要素選択 |
| a:hover | ﾘﾝｸ(ﾏｳｽｵｰﾊﾞｰ) |
| a:active | ﾘﾝｸ(ﾏｳｽｸﾘｯｸ) |
| セレクタ | |
| 要素E[属性="値"] | 属性が値のE要素 |
| 要素E:first-child | 要素Eの兄弟要素の最初 |
| 要素E:last-child | 要素Eの兄弟要素の最後 |
| 要素E:nth-child(n) | 要素Eの兄弟要素の最初からn番目 |
| 要素E:nth-last-child(n) | 要素Eの兄弟要素の最後からn番目 |
| 要素E:first-of-type | 最初の要素E |
| 要素E:last-of-type | 最後の要素E |
| 要素E:nth-of-type(n) | 最初からn番目の要素E |
| 要素E:nth-last-of-type(n) | 最後からn番目の要素E |
| 要素1,要素2 | 要素1と要素2 (ｶﾝﾏで区切る) |
| 要素1 要素2 | 要素1の子孫の要素2 (ｽﾍﾟｰｽで区切る) |
| 色 | |
| background-color:#fff; | 背景色 |
| color:#fff; | ﾃｷｽﾄ色 |
| color:rgb(r,g,b); | ﾃｷｽﾄ色(r,g,b)指定 |
| color:rgba(r,g,b,a); | ﾃｷｽﾄ色(r,g,b,a)指定 |
| color:hsl(h,s%,l%) | ﾃｷｽﾄ色(h,s,l)指定 |
| color:hsla(h,s%,l%,a) | ﾃｷｽﾄ色(h,s,l,a)指定 |
| opacity:0.7; | 透明度(0~1) |
| フォント | |
| line-height:数値 | 行の高さ､ﾌｫﾝﾄｻｲｽﾞの数値倍 |
| font-size:数値 | ﾌｫﾝﾄｻｲｽﾞ(初期設定:16px) |
| font-style | ﾌｫﾝﾄｽﾀｲﾙ(normal,italic) |
| font-weight | ﾌｫﾝﾄの太さ(normal,bold) |
| font-family | ﾌｫﾝﾄの種類 |
| text-align:位置 | 行揃え(left,right,center)ｲﾝﾗｲﾝﾚﾍﾞﾙに適用 |
| vertical-align:位置 | 垂直方向位置(top,middle,bottom,baseline,text-top,text-bottom) |
| text-decoration:underline | 装飾(underline,line-through) |
| 単位 | |
| em | 1文字分 |
| pt | 1ﾎﾟｲﾝﾄ |
| px | 1画素 |
| % | 親要素のﾌｫﾝﾄｻｲｽﾞに対する割合 |
| ｻｲｽﾞ、余白 | |
| ﾌﾞﾛｯｸﾚﾍﾞﾙ | width無=要素の幅 |
| ｲﾝﾗｲﾝﾚﾍﾞﾙ | ｺﾝﾃﾝﾂの最小限の大きさ､幅､高さ､上下margin非対応 |
| width | 幅 |
| height | 高さ |
| padding | 内余白 |
| margin | 外余白 |
| border 太さ 形状 色 | 罫線 |
| 配置 | |
| float | 回り込み(left,right,none) |
| overflow | 回り込み解除 |
| position | 位置指定(relative､absolute) |
| relative:相対位置指定(起点となる親要素に指定) | |
| absolute:絶対位置指定(起点からの距離を指定) | |
| 距離を指定:top,left,bottom,right | |
| fixed | 絶対位置指定(ﾌﾞﾗｳｻﾞ左上からの距離を指定) |
| z-index:数値 | 重なり順：大きい数値が上 |
| display | ﾎﾞｯｸｽの種類(block,imline,inline-block,none) |
| リスト | |
| list-style-type | ﾘｽﾄﾏｰｸ(disc,circle,square,decimal,none) |
| list-style-image:url(画像のﾊﾟｽ) | ﾘｽﾄﾏｰｸ(画像) |
| ﾃｰﾌﾞﾙ | |
| table-layout | 各列の幅:auto(自動)､fixed(均等) |
| border-collapse | 罫線の種類:collapse(1本)､separate(二重) |
| border-spacing | 罫線と罫線のｽﾍﾟｰｽ |
| メディアクエリ(HTML) | |
| <meta name="viewport" content="width=device-width,initial-scale=1.0"> | メディアクエリ |
| <link rel="stylesheet" href="cssﾌｧｲﾙのﾊﾟｽ" media="screen and ﾒﾃﾞｨｱｸｴﾘ"> | メディアクエリ |
| メディアクエリ(CSS) | |
| @media ﾒﾃﾞｨｱ属性 and (ﾒﾃﾞｨｱｸｴﾘ){css} | メディアクエリ |
| (max-width:100px) | ﾒﾃﾞｨｱｸｴﾘ(幅100px以下) |
| (min-width:100px) | ﾒﾃﾞｨｱｸｴﾘ(幅100px以上) |
| (max-height:100px) | ﾒﾃﾞｨｱｸｴﾘ(高さ100px以下) |
| (min-height:100px) | ﾒﾃﾞｨｱｸｴﾘ(高さ100px以上) |
| (orientation:portrait) | ﾒﾃﾞｨｱｸｴﾘ(縦画面) |
| (orientation:landscape) | ﾒﾃﾞｨｱｸｴﾘ(横画面) |
| 画像ファイル | |
| JPEG | ﾌﾙｶﾗｰ,圧縮:☓､透過:〇 |
| JIF | 256色 |
| PNG8 | ﾌﾙｶﾗｰ |
| PNG24 | ﾌﾙｶﾗｰ |
| ﾋﾞｯﾄﾏｯﾌﾟ | ﾄﾞｯﾄの集合 |
| ﾍﾞｸﾀｰ形式 | 数式を使って表現 |