戻る

HTMLとCSS

HyperTextMarkupLanguage&CascadingStyleSheets

目次

  1. HTMLタグ
  2. CSS
  3. その他情報一覧

HTMLタグ

グローバル属性

属性名値
id固有の名前
class種類を示す名前
title補足情報
lang言語コード
styleCSSのプロパティ
accesskeyショートカットキー
tabindexタブキーによる移動の順序
dir文字の表記の方向(ltr/rtl/auto)
contenteditable編集の可・不可(true/false)
draggableドラッグの可・不可(true/false)
dropzoneドロップの可・不可(true/false)
spellcheckスペルチェックするかどうか(true/false)
translateローカライズ時に翻訳するかどうか(yes/no)
hidden非表示(値なし)
HTMLアトリビュート値用途
ドキュメント記述系
<b></b>太字
<i></i>斜体
<mark></mark>マーカー強調
<sup></sup>上付き文字
<sub></sub>下付き文字
<em></em>強調したい文字
<strong></strong>重要性が高い文字
<dfn></dfn>定義語
<pre></pre>入力された文章をそのまま表示する
<cite></cite>参照元や出典元
<q cite="URL"></q>短い引用文
<blockquote cite="URL"></blockquote>長い引用文
<abbr title="省略前の文字"></abbr>略語
<acronym title="省略前の文字"></acronym>頭文字による略語
設定記述系
<!DOCTYPE html>DOCTYPE宣言
<!-- -->コメント
//コメント
<html></html>html宣言
lang記述する言語を指定
ja日本語
xmlnshttp://www.w3.org/1999/xhtmlwwwの名前空間を定義
<head></head>head宣言
<title></title>タイトルを指定
<style></style>CSSスタイルを指定
<meta>メタ情報を指定
charsetキャラクターセットを指定
utf-8キャラクターセットをUTF-8で指定
<meta http-equiv="content-Type" content="text/html" charset="utf-8">htmlを記述する宣言
<meta http-equiv="content-Style-Type" content="text/css">デフォルトスタイルシートをCSSにする
<meta http-equiv="content-Type" content="text/html" charset="utf-8">HTMLで記述、UTF-8で記述することを示す
<meta http-equiv="content-Script-Type" content="text/javascript">デフォルトスクリプトをJavaScriptにする
<meta name="description" content="comment">Webページの説明や概要を記述
<meta name="author" content="authorname">ページの作者を指定
<meta name="keyword" content="keyword1,keyword2,...">キーワードの指定
<meta name="ROBOTS" content="NOINDEX,NOFOLLOW">検索エンジン登録禁止の指定
<meta http-equiv="refresh" content="10" />contentに指定した秒数経過後リロードする。
<meta http-equiv="refresh" content="10; URL=page.html" />contentに指定した秒数経過後URLで指定したページへリダイレクト
<link rel="icon" href="./filepath/*.ico" />ファビコンを指定する
<link>
relstylesheetスタイルシートを指定
hrefurlスタイルシートの場所を指定
スクリプト言語引用
<script type= "text/javascript" src="FileName"></script>javaを記述するタグ
<script></script>スクリプトを記述。（JavaScript等）
typemodule:ESModulesの設定
srcスクリプトのURLを指定する
deferDOMツリーの構築が完了してから、スクリプトが実行される。（HTML内のコードでは適応されない。）
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="" height="" ></svg>SVGを宣言して記述する
グループ化系
<body></body>body宣言
<header></header>ヘッダーの指定
<footer></footer>フッターの指定
<aside></aside>サブコンテンツの指定
<article></article>メインコンテンツの指定
<div></div>分割ボックスを指定
<nav></nav>ナビゲーションメニューを指定
<template></template>画面上に表示されないHTMLを記述する。javascriptで要素を取得して追加することができる。
見出し
<h1></h1>見出しの指定
<h2></h2>見出しの指定
<h3></h3>見出しの指定
<h4></h4>見出しの指定
<h5></h5>見出しの指定
<h6></h6>見出しの指定
文章系
<p></p>段落の指定
<span></span>一部の文字列を指定
<label></label>ラベルでくくる
<hr>ヘアライン
sizeinteger(1)線の太さ
widthinteger(px,%)線の長さ
alignleft/center/right罫線の開始位置を指定
noshade罫線に立体感を付けない
<br>ブランク
<img>画像
srcurl画像のURLを指定
alttext代替え文字を指定
<a></a>hrefurlリンク先のURLを指定
targetページを表示するウィンドウを指定
_blank新しいウィンドウ又はタブに表示
name指定した名前のウィンドウ又はタブに表示
_parent親フレームにリンクを表示
_selfリンク元と同じフレームに表示
_topフレームをすべて解除して表示
表
<table></table>表を作成
<tr></tr>表の行（レコード）を作成
<th></th>表の見出しセルを作成
<td></td>表の基本的なセルを作成
colspaninteger一つのセルの横方向の大きさを指定
rowspaninteger一つのセルの縦方向の大きさを指定
<caption></caption>表のキャプションを作成
<thead></thead>見出し行を作成
<tbody></tbody>データ部の行を作成
<tfoot></tfoot>集計行を作成
<colgroup></colgroup>列をグループ化（行の前に指定しておく必要がある）
spanintegerグループ化する列数を指定
リスト
<ul></ul>順不同型リスト
<ol></ol>順序型リスト
<li></li>リストの要素
フォーム関連
<form></form>フォームを作成
method送信種別(get,post)
action送信内容を処理するページ
enctype送信時のデータ形式を指定
multipart/form-dataファイルのアップロードの際に指定
<input type="コントロールを指定" name="コントロール名">コントロールを作成
size文字数入力した値により入力欄が変化
maxlength最大文字数
checkedチェックボックス、ラジオボックスを選択した状態にする
readonly部品を変更不可(選択は可能)の状態にする
disabled部品を変更不可(選択も不可)の状態にする
value初期値/ラベル/送信値
name部品の名称
typeフォームの部品の種類
textテキストボックス
emailメールアドレス用テキストボックス。自動でバリデーションチェックを行ってくれる
passwordテキストボックス(パスワード)
checkboxチェックボックス
radioラジオボタン
fileファイル送信用部品
hidden非表示の送信テキスト
submit送信ボタン
resetフォームリセットボタン
buttonボタン
image画像の送信ボタン
pattern正規表現で文字をチェックする
required必須項目
placeholderテキストボックスに表示される文字(入力値とは異なる)
autofocusページ読み込み時にフォーカスをあてる
spellchecktrue/falseスペルチェックを有効にするかどうか。
<textarea name="名前"></textarea>テキストエリアを作成
name部品の名称
cols一行当たりの文字数
rows行数
maxlength最大文字数
readonly部品を変更不可(選択は可能)の状態にする
disabled部品を変更不可(選択も不可)の状態にする
<select></select>セレクトメニューを作成
name
multiple複数の項目を選択できるようにする
<option value="値"></option>セレクトメニューの要素
selected選択した状態にしておく
<button></button>
typesubmit/reset/buttonフォーム部品の種類
その他機能
<iframe></iframe>インラインフレームを作成
srcurlインラインフレームに表示するページを指定
namenameインラインフレームに名前を付ける
widthintegerインラインフレームの幅
heightintegerインラインフレームの高さ
namenameインラインフレームの名前
sandboxインラインフレーム内のページのセキュリティの制限を設ける
allow-formsフォームの送信を許可
allow-scriptsスクリプトの実行を許可
allow-same-origin親ページの設定と同一に設定
srcdocインラインフレームの内容を記述
seamlessインラインフレームの枠線を消去する
<progress max="" value=""></progress>進行状況を
<audio src="音声データのパス">サウンドを再生
autoplayコントロールなしで自動再生
loop音声をループ
共通属性
accesskey="key"ショートカットキーを作成する
tabindex=""0~32767までの数で指定。tabキーでの移動順序を指定する。
title=""マウスポインタを乗せると補足的な説明が表示される
dir=""ltr:左から、rtl:右から文字の表示方向を指定する

トップへ

CSS

CSS
CSSルール指定
@charset "FileName";キャラクターセットの指定(FileNameにはキャラクターセットを指定できる)
@import url("FileName.css");別のCSSをインポートする
@import url("FileName.css") mediaType;別のCSSをインポートする
@page {Propaty:value;…}印刷スタイルを指定する。（ページボックス）
@media MediaType{タグ名{………}}MediaType(all/screen/print/speech)メディアタイプを指定してスタイルを適用する
@media (max-width:*px){タグ名{………}}MediaType(all/screen/print/speech)max-widthで指定した横幅以下のブラウザに適応する。
@keyframes AnimationName{
from{css...}
to{css...}}		animationnameを指定してアニメーションを定義する
@keyframes animationname{
0%{css...}
50%{css...}
100%{css...}
}		animationnameを指定してアニメーションを定義する
/* */コメント
CSS指定方法
タグ名{…………}特定のセレクタにスタイルを指定する
タグ名1,タグ名2,…{…………}複数のセレクタにスタイルを指定する
タグ名.クラス名{…………}特定のクラスを指定したセレクタにスタイルを指定する
.クラス名{…………}特定のクラスにスタイルを指定する
#ID名{…………}特定のID(名称)にスタイルを指定する
タグ名>タグ名{…………}子セレクタにスタイルを指定する。
タグ名 タグ名{…………}子孫セレクタにスタイルを指定する。下位のすべての入れ子セレクタに反映される
*{…………}すべてのセレクタにスタイルを指定する
疑似クラス
タグ名:link{………}未訪問のリンクの指定
タグ名:visited{………}訪問済みのリンクの指定
タグ名:hover{………}マウスエンター時の指定
タグ名:active{………}マウスクリック時の指定
タグ名:focus{………}要素が選択された場合の指定
タグ名:invalid{………}patternMissmatchがtrueとなり要素が無効となった場合の指定
タグ名:first-child{………}タグの最初の子要素のスタイルを指定する
タグ名:last-child{………}最初の要素だけ装飾対象とする
タグ名:nth-child(x){………}最初から数えて、x番目の要素だけ装飾対象とする
タグ名:nth-last-child(x){………}最後から数えて、x番目の要素だけ装飾対象とする
::first-line{………}ある要素の最初の1行のみ装飾対象とする
::first-letter{………}ある要素の１文字目だけ装飾対象とする
:enable{………}フォームが有効になった場合の状態
:disabled{………}フォームが無効になった場合の状態
タグ名[属性名]{………}指定したタグ名、属性を持った全てのタグ
[属性名]{………}指定した属性名を持つすべてのタグ
[属性名="値"]{………}属性名の値が一致するすべてのタグ
[属性名^="値"]{………}属性名の値で始まるすべてのタグ
[属性名$="値"]{………}属性名の値で終わるすべてのタグ
[属性名*="値"]{………}属性名の値を含んでいるすべてのタグ
ベンダープレフィックス
-ms-Internet Explorer
-moz-firefox
-webkit-Google Chrome,Safari,iOS,Android
-o-Opera

CSSPropaty値の順番値説明
全プロパティ対象値
inherit上位継承
フォント系
color:value1;value1Color'sName文字の色を指定する
rgb(r,g,b)
rgba(r,g,b)
#ColorCode
font-size:value1;value1integer(px)文字フォントサイズを指定する
font-family:value1;value1serif/sans-serif/cursive/fantasy/monospaceフォントファミリーを指定する
font-weight:value1;value1normal/bold/integer(*1)フォント太さを指定する
font-style:value1;value1normal/italic/obliqueフォントのスタイル（傾斜）
font:value1 value2 value3/value4 value5;value1normal/italic/obliqueフォントの設定を一括で設定
value2normal/bold/integer(*1)
value3integer(px)
value4integer(px)
value5serif/sans-serif/cursive/fantasy/monospace
text-decoration:value1;value1none/underline/overline/line-through/blink/none文字装飾を指定する。
line-height:value1;value1integer(px)文字の高さを指定する
text-align:value1;value1left/center/right/center/justify文字の水平位置を指定する。
vertical-align:value1;value1top/center/bottom文字の垂直位置を指定する。
letter-spacing:value1;value1integer(*1)単語間隔を指定する
word-spacing:value1;value1integer(*1)文字間隔を指定する
バックグラウンド
background-color:value1;value1Color'sName背景色を指定する
rgb(r,g,b)
rgba(r,g,b,a)
#ColorCode
background-image:value1;value1url("FileName")背景画像を指定する
background-repeat:value1;value1repeat/repeat-x/repeat-y/no-repeat背景画像の繰返しを指定
background-attachment:value1;value1fixed/scroll
background-position:value1 value2;value1left/center/right背景画像の位置
value2top/center/bottom
配置位置
resize:value1;value1none,vertical,horizontalユーザがサイズ要素を変更できるかどうかを指定
max-width:value1;value1integer(px)水平最大サイズを指定する
max-height:value1;value1integer(px)垂直最大サイズを指定する
min-width:value1;value1integer(px)水平最小サイズを指定する
min-height:value1;value1integer(px)垂直最小サイズを指定する
width:value1;value1integer(px)水平サイズを指定する
height:value1;value1integer(px)垂直サイズを指定する
border:value1 value2 value3;ボーダーを設定する
border-top:value1 value2 value3;ボーダートップラインを設定する
border-right:value1 value2 value3;ボーダーライトラインを設定する
border-bottom:value1 value2 value3;ボーダーボトムラインを設定する
border-left:value1 value2 value3;value1none/hidden/solid/double/dashed/dotted/groove/ridge/inset/outsetボーダーレフトラインを指定する
value2integer(px,em)/thin(細い)/mediun(普通)/hick(太い)
value3#ColorCode
Color'sName
rgb(r,g,b)
rgba(r,g,b)
padding:value1;value1の個数(1:上下左右同じ設定,2:[上下] [左右]の設定,3:[上] [左右] [下]の設定,4:[上] [右] [下] [左]の設定)パッディングを指定する
padding-top:value1;上部パディングを指定する
padding-right:value1;右部パディングを指定する
padding-bottom:value1;下部パディングを指定する
padding-left:value1;value1integer(px)左部パディングを指定する
margin:value1;value1の個数(1:上下左右同じ設定,2:[上下] [左右]の設定,3:[上] [左右] [下]の設定,4:[上] [右] [下] [左]の設定)外部余白を指定する
margin-top:value1;上部外部余白を指定する
margin-right:value1;右部外部余白を指定する
margin-bottom:value1;下部外部余白を指定する
margin-left:value1;value1integer(px)左部余白を指定する
border-radius:value1;value1integer(px|%)ボーダーの丸みを指定する
border-top-left-radius:value1;
position:value1value1static/relative/absolute/fixed要素の位置を指定する
top:value1value1要素の上部からの位置を指定する
bottom:value1value1要素の下部からの位置を指定する
left:value1value1要素の左からの位置を指定する
right:value1value1要素の右からの位置を指定する
z-index:value1value1integer(0<=)0を基準として値が大きいものが上に重なって表示される要素の重なり順を指定する
表示・装飾
box-shadow:value1 value2 value3 value4 value5 (value6);value1RightLeaveInteger(px)要素に影を付ける
value2BottomLeaveInteger(px)
value3ShadeOffInteger(px)
value4ExpandInteger(1+)
value5#ColorCode
value6inset
text-shadow:value1 value2 value3;value1rightOffset(px)テキストに影を付ける
value2bottomOffset(px)影を下に延ばす幅
value3Opacity(px)影をぼかす幅
value4ColorCode:rgb(,,),#XXXXXX色
opacity:value1;value1InvisibilityInteger(1/)透明度を指定する
float:value1;value1left/right要素を浮動する
clear:value1;value1left/right/both/none要素の浮動を解除する
overflow:value1;value1scroll/hidden/auto要素の子要素が収まり切れない場合にどのように表示するかを指定する
border-collapse:value1;value1collapse/separateボーダーを重ねるかどうかを指定(表)
caption-side:value1;value1bottom表のキャプションの位置を指定する
border-spacing:value1;value1integer(px)隣り合うセル間の距離を指定する
list-style-type:value1;value1none/disc/circle/aquare/decimal/decimal-leading-zero/lower-roman/lower-alpha/upper-alpha/lower-greekリストの見出しの指定
list-style-image:value1;value1url("FileName")リストの見出しに画像を用いる
play-during:value1 value2 value3;value1url("FileName")背景音を指定する
value2mix
value3repeat
display:value1block/inline/list-item/none/flex/column要素のタイプを指定（インライン/ブロック）
アニメーション
animation-name:value1;@keyframesで指定するcssを適応する場合にその名前を付ける
animation-duration:value1;integer(s)アニメーションの秒数
animation-delay:value1;integer(s)アニメーションの開始を遅らせる秒数
animation-timing-function:value1;ease(開始時と終了時の動きを滑らかにする)/ease-in(開始時だけ滑らかにする)/ease-out(終了時だけ滑らかにする)/ease-in-out(easeよりもゆっくり変化させる)/linear(一定の速度で変化させる)/steps(コマ送りのように変化させる)/cubic-bezier(変化の度合いをX軸・Y軸で変化させる)アニメーションの進行度合いを設定する
animation-fill-mode:value1;none/forwards(終了時の状態を維持する)/backwards(開始時の状態に戻る)/both(開始時にforwards、終了時にbackwardsを適用する)アニメーションの終了時の状態を指定するプロパティ
animation-iteration-count:value1;integer(1)/infiniteアニメーションのループ回数を指定する
animation-direction:value1;normal(通常通りの動き)/reverse(逆方向の動き)/alternate(奇数回で通常、偶数回で逆の動き)/alternate-reverse(奇数回で逆、偶数回で通常の動き)アニメーションの向きを指定するプロパティ
animation:value1 value2 value3 value4 value5 value6 value7;アニメーションのプロパティをまとめて指定する
cursor:value1;value1auto/default/none/context-menu/help/pointer/progress/wait/cell/crosshair/text/vertical-text/alias/copy/move/no-drop/not-allowed/grab/grabbing/all-scroll/col-resize/row-resize/n-resize/e-resize/s-resize/w-resize/ne-resize/nw-resize/se-resize/sw-resize/ew-resize/ns-resize/nesw-resize/nwse-resize/zoom-in/zoom-outカーソルの形状を指定する
outline:value1 value2 value3;value1integer(px):focusを指定したinput,textarea,selectにフォーカス時のアウトラインを指定する。
value2#XXXXXX,rgb(,,)
value3solid,double,inset,outset,dashed,dotted,groove,ridge
user-select:value1;value1none/auto/text/contain/all/inherit/initial/revert/revert-layer/unsetテキストの選択可否を定める
pointer-events:value1;auto/none要素をポイントした際のイベントを実行するかどうか指定する。
visibility:value1;hidden/visible/collapse要素を非表示にする

トップへ

その他情報一覧

目次

トップへ

エスケープシーケンス

記号コード意味
<&lt;小なり
>&gt;大なり
‘&apos;シングルクォーテーション
“&quot;ダブルクォーテーション
&&amp;アンパサンド（アンド）
&nbsp;空白
¥&yen;日本円
¢&cent;セント
£&pound;ポンド
¦&brvbar;縦破線
©&copy;コピーライト
®&reg;登録商標
°&deg;気温を表す度
±&plusmn;プラスマイナス
×&times;掛け算の乗算
÷&divide;割り算の除算
µ&micro;マイクロ
·&middot;中点
§&sect;セクション
«&laquo;左引用
»&raquo;右引用
²&sup2;上付き2
³&sup3;上付き3
¹&sup1;上付き1
¼&frac14;4分の1
½&frac12;2分の1
¾&frac34;4分の3
十進数&#n;十進数
十六進数&#xn;十六進数
Unicode文字&#xNNNN;Unicode文字
章のトップへ

CSSで利用できる単位

絶対値
cmセンチメートル
mmミリメートル
inインチ
ptポイント
pcパイカ
相対値
emエム(現在の高さを1とし、相対的にサイズを指定。)
exエックス(小文字のxの高さを1とし、相対的にサイズを指定。)
pxピクセル(モニタの1ピクセルを基準にサイズを指定。)
%パーセント(ウィンドウやボックスなどを基準に相対的にサイズを指定。)
章のトップへ

メディアタイプの種類

メディアタイプ対応デバイス
all全てのデバイス
braille点字用ディスプレイ
embossed点字用プリンター
handheldモバイルデバイス
printプリンター
projectionプロジェクター
screenディスプレイ
speech音声出力デバイス
tty固定幅フォントで出力するデバイス
tvテレビ

CSSセレクタ優先順位

CSSセレクタの優先順位の決まり方

詳細度の計算

id.class.要素

章のトップへ
トップへ

トップへ

トップへ

トップへ

トップへ