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 | フルカラー |
ビットマップ | ドットの集合 |
ベクター形式 | 数式を使って表現 |