改行とタブとスペースの見本

レイアウト見本

overflow見本

position見本

RWD見本

カレンダーあれこれ

Webアイコン（font Awesome）

横並びのCSSについて

CSSでハンバーガーメニュー（ナビゲーションドロワー）について

ワンポイントアドバイス！

Webサイトのトップページは「index.html(index.php)」とすると表示が省略されます。

htmlの記述【基本タグ】

必須内容
<!doctype html>DOCTYPE宣言
<html>∼</html>HTML文書であることを示す
<head>∼</head>文書のヘッダ情報を表す
<body>∼</body>文書の本体を表す

htmlの記述【head】

文書のメタデータ
<meta>その文書に関する情報（メタデータ）を指定する
<title>∼</title>文書にタイトルをつける
<link>∼</link>リンクする外部リソースを指定する

htmlの記述【body】

セクション
<h1>∼</h1>
<h2>∼</h2>
<h3>∼</h3>
<h4>∼</h4>
<h5>∼</h5>
<h6>∼</h6>		見出しを付ける
<section>∼</section>一つのセクションであることを示す
<nav>∼</nav>ナビゲーションであることを示す
<header>∼</header>ヘッダであることを示す
<footer>∼</footer>フッタであることを示す
コンテンツの分類
<p>∼</p>ひとつの段落（パラグラフ）であることを表す
<hr>テーマや話題の区切りを表す
<ul>
<li>∼</li>
</ul>		順序のないリストを表示する
<ol>
<li>∼</li>
</ol>		順序のあるリストを表示する
<dl>
<dt>∼</dt>
<dd>∼</dd>
</dl>		定義・説明リストを表す
<div>∼</div>ひとかたまりの範囲として定義する
<main>∼</main>メインコンテンツであることを示す
テキストの意味
<a>∼</a>ハイパーリンクを指定する
<em>∼</em>強勢する（アクセントを付ける）箇所を表す
<strong>∼</strong>強い重要性を表す
<small>∼</small>免責・警告・著作権などの注釈や細目を表す
<i>∼</i>声や心の中で思ったことなど、他と区別したいテキストを表す
<b>∼</b>文書内のキーワードや製品名など、他と区別したいテキストを表す
<span>∼</span>ひとつの範囲として定義する
<br>改行する
コンテンツの埋め込み
<img>画像を表示する
<iframe>∼</iframe>インラインフレームを作る
テーブル（表）
<table>∼</table>テーブル（表）を作成する
<caption>∼</caption>テーブル（表）にキャプションをつける
<tr>∼</tr>テーブル（表）の横一行を定義する
<th>∼</th>テーブル（表）の見出しセルを作成する
<td>∼</td>テーブル（表）のデータセルを作成する

CSSの記述【文字】

テキスト
color文字色（前景色）を指定する
opacity要素の透明度を指定する
text-alignブロックコンテナ内の行の揃え位置・均等割付を指定する
text-decorationテキストの線・色・スタイルをまとめて指定する
text-shadowテキストに影をつける
フォント
font-familyフォントの種類
font-sizeフォントサイズ
font-weight文字列の太さ
font-style文字列の斜体
line-height行間隔
white-spaceソース中のホワイトスペース・改行の表示方法
font

font-style
font-weight
font-size
line-height
font-family
フォントのプロパティを一括で指定

  • ※font-sizeとfont-familyの値は省略できない
  • ※font-styleとfont-weightの値の順番は入れ替わっても良い
  • ※line-heightの値の前には「/（スラッシュ）」を入れる

CSSの記述【背景】

背景
background-color背景色を指定する
background-attachment背景画像の固定・移動を指定する
background-image背景画像を指定する
background-repeat背景イメージの繰り返し方法を指定する
background-position背景イメージの位置を指定する
background

background-color
background-attachment
background-image
background-repeat
background-position
背景のプロパティを一括で指定

  • ※順番の指定はなし
background-size背景画像のサイズを指定する

CSSの記述【リスト】

リスト
list-style-type行頭記号または行頭番号の種類を指定
list-style-image行頭記号または行頭番をイメージにする
list-style-position行頭記号または行頭番号の位置を指定
list-style

list-style-type
list-style-image
list-style-position
リストのプロパティを一括指定する

CSSの記述【疑似クラス・疑似要素】

疑似クラス
要素名:link未訪問のリンク
要素名:visited訪問済のリンク
要素名:hoverカーソルが乗っている要素
要素名:activeクリック中の要素
要素名:nth-child(n)n番目の子となる要素
要素名:nth-last-child(n)後ろから数えてn番目の子となる要素
要素名:nth-of-type(n)n番目のの要素
要素名:nth-last-of-type(n)後ろから数えてn番目の要素
擬似要素
要素名:before要素の直前
要素名:after要素の直後

CSSの記述【配置】

配置
width内容の幅
max-width幅の最大値を指定する
min-width幅の最小値を指定する
height内容の高さ
max-height高さの最大値を指定する
min-height高さの最小値を指定するさ
float回り込み
clear回り込みを解除
position
top
left
bottom
right
z-index		要素の配置方法
display要素の表示形式
overflowボックスからあふれた内容の処理

CSSの記述【ボックス】

ボーダー
border-style枠線のスタイル
border-color枠線の色
border-width枠線の太さを指定する
border-top枠線(上)のプロパティを一括
border-right枠線(右)のプロパティを一括
border-bottom枠線(下)のプロパティを一括
border-left枠線(左)のプロパティを一括
border

border-style
border-color
border-width
フォントのプロパティを一括で指定

  • ※順番の指定はなし
パディング
padding-top上パディング
padding-bottom下パディング
padding-left左パディング
padding-right右パディング
paddingpadding-top
padding-bottom
padding-left
padding-right
指定をまとめて行う
マージン
margin-top上マージンを指定する
margin-bottom 下マージンを指定する
margin-left左マージンを指定する
margin-right右マージンを指定する
marginmargin-top
margin-bottom
margin-left
margin-right
マージンに関する指定をまとめて行う
その他CSS3
border-radius角丸をまとめて指定する
box-shadowボックスに影をつける
box-sizingボックスサイズの算出方法を指定する
content内容（コンテンツ）を挿入する

CSSの記述【表】

テーブル
border-collapseセルのボーダーの表示の仕方