HTML / CSS 入力支援ツール

ボタンの上にカーソルを合わせるとタグやプロパティの説明が表示され、クリックするとボタンに表示されている文字がクリップボードにコピーされます。

「 Ctrl + V 」で貼り付けてご使用ください。

HTML

<body>から</body>の間でよく使うタグ

見出し1:ブロック要素
見出し2:ブロック要素
見出し3:ブロック要素
ヘッダー:ブロック要素
メインコンテンツ:ブロック要素
記事コンテンツ:ブロック要素
セクション:ブロック要素
整形済みテキスト(Preformatted Text):ブロック要素
補足情報:ブロック要素
ナビゲーション:ブロック要素
フッター:ブロック要素
汎用インラインコンテナ:インライン要素
汎用ブロックコンテナ:ブロック要素
リンク (Anchor):インライン要素
画像(Image):インライン要素
ボタン:ブロック要素
段落(Paragraph):ブロック要素
重要なテキスト(Strong):インライン要素
強調・斜字:インライン要素
リスト項目(List Item):ブロック要素
番号なしリスト(Unordered List):ブロック要素
番号付きリスト(Ordered List):ブロック要素

CSSにかかわるタグ

id属性:id名は同じページの中で重複して使えない
class属性:class名は同じページの中で重複して使える
外部のcssファイルのリンク先を記述するタグ

CSS

テキスト関係

文字のサイズを指定します。
文字の太さを指定します。数字指定可:100~900(100刻み)、400が標準
文字のスタイルを指定します
通常のスタイル font-style: normal;
イタリック体 font-style: italic;
斜体 font-style: oblique;
文字の色を指定します。
記入例 color: red;
記入例 color: green;
記入例 color: blue;
記入例 color: yellow;
記入例 color: gray;
記入例 color: white;
記入例 color: black;
行の高さを指定します。
文字の間隔を指定します。
文字の水平方向の配置を指定します。
文字の左寄せ text-align: left;
文字の中央寄せ text-align: center;
文字の右寄せ text-align: center;
文字に下線や上線を引いたりの文字装飾を指定します。
文字装飾をすべて削除 text-decoration: none;
テキストに下線を引く text-decoration: underline;
テキストの上に線を引く text-decoration: overline;
テキストに取り消し線を引く text-decoration: line-through;
文字の開始位置をずらす
文字を折り返さないようにする
ボックスからはみ出した部分を非表示

スペース、サイズ関係

要素の横幅を指定します。
要素の高さを指定します。
要素の枠線を指定します。
実線
破線
点線
非表示
要素がこれ以上大きくならない幅を指定し width の最大値として設定する
要素がこれ以上小さくならない幅を指定し width の最小値として設定する
要素の幅の中に、padding(内側の余白)とborder(枠線)の幅を含めるかどうかを指定する
paddingやborderで、boxの大きさが変わらない
box-sizing における既定の振る舞い
要素の外側の余白を指定します。
要素の外側の上の余白
要素の外側の右の余白
要素の外側の下の余白
要素の外側の左の余白
要素の内側の余白を指定します。
要素の内側の上の余白
要素の内側の右の余白
要素の内側の下の余白
要素の内側の左の余白

表示・レイアウト関係

要素の表示方法を指定します。
記入例 display: block;
記入例 display: inline;
記入例 display: inline-block;
記入例 display: none;
記入例 display: flex;
並べる方向を指定する
記入例 position: static;
記入例 position: relative;
記入例 position: absolute;
記入例 position: fixed;
要素の配置方法を指定します。
記入例 position: static;
記入例 position: relative;
記入例 position: absolute;
記入例 position: fixed;
要素の上端からの位置を指定します。
要素の右端からの位置を指定します。
要素の下端からの位置を指定します。
要素の左端からの位置を指定します。
要素の重なり順を指定します。
要素を左右に浮かせるかどうかを指定します。
要素を左に浮かせる float: left;
要素を右に浮かせる float: right;
浮動を解除する(初期値) float: none;
左右に浮かせた要素の影響を解除します。
左に浮動した要素の影響を解除 clear: left;
右に浮動した要素の影響を解除 clear: right;
左右両方に浮動した要素の影響を解除 clear: both;
要素の内容がはみ出した場合の処理を指定します。
はみ出した部分をそのまま表示します。(初期値) overflow: visible;
はみ出した部分を非表示にします。 overflow: hidden;
はみ出した部分をスクロールバーで表示します。常にスクロールバーが表示されます。 overflow: scroll;
はみ出した部分がある場合にのみスクロールバーを表示します。 overflow: auto;

背景関係

要素の背景画像を指定します。
要素の背景画像を指定します。
背景画像の繰り返し方法を指定します。
背景画像の位置を指定します。
要素の背景色を指定します。記入例 background-color: #FF0000;

Web用 色々な色一覧

色コード:#000000
色コード:#000022
色コード:#000044
色コード:#000066
色コード:#000088
色コード:#0000AA
色コード:#0000CC
色コード:#0000EE
色コード:#002200
色コード:#002222
色コード:#002244
色コード:#002266
色コード:#002288
色コード:#0022AA
色コード:#0022CC
色コード:#0022EE
色コード:#004400
色コード:#004422
色コード:#004444
色コード:#004466
色コード:#004488
色コード:#0044AA
色コード:#0044CC
色コード:#0044EE
色コード:#006600
色コード:#006622
色コード:#006644
色コード:#006666
色コード:#006688
色コード:#0066AA
色コード:#0066CC
色コード:#0066EE
色コード:#008800
色コード:#008822
色コード:#008844
色コード:#008866
色コード:#008888
色コード:#0088AA
色コード:#0088CC
色コード:#0088EE
色コード:#00AA00
色コード:#00AA22
色コード:#00AA44
色コード:#00AA66
色コード:#00AA88
色コード:#00AAAA
色コード:#00AACC
色コード:#00AAEE
色コード:#00CC00
色コード:#00CC22
色コード:#00CC44
色コード:#00CC66
色コード:#00CC88
色コード:#00CCAA
色コード:#00CCCC
色コード:#00CCEE
色コード:#00EE00
色コード:#00EE22
色コード:#00EE44
色コード:#00EE66
色コード:#00EE88
色コード:#00EEAA
色コード:#00EECC
色コード:#00EEEE
色コード:#220000
色コード:#220022
色コード:#220044
色コード:#220066
色コード:#220088
色コード:#2200AA
色コード:#2200CC
色コード:#2200EE
色コード:#222200
色コード:#222222
色コード:#222244
色コード:#222266
色コード:#222288
色コード:#2222AA
色コード:#2222CC
色コード:#2222EE
色コード:#224400
色コード:#224422
色コード:#224444
色コード:#224466
色コード:#224488
色コード:#2244AA
色コード:#2244CC
色コード:#2244EE
色コード:#226600
色コード:#226622
色コード:#226644
色コード:#226666
色コード:#226688
色コード:#2266AA
色コード:#2266CC
色コード:#2266EE
色コード:#228800
色コード:#228822
色コード:#228844
色コード:#228866
色コード:#228888
色コード:#2288AA
色コード:#2288CC
色コード:#2288EE
色コード:#22AA00
色コード:#22AA22
色コード:#22AA44
色コード:#22AA66
色コード:#22AA88
色コード:#22AAAA
色コード:#22AACC
色コード:#22AAEE
色コード:#22CC00
色コード:#22CC22
色コード:#22CC44
色コード:#22CC66
色コード:#22CC88
色コード:#22CCAA
色コード:#22CCCC
色コード:#22CCEE
色コード:#22EE00
色コード:#22EE22
色コード:#22EE44
色コード:#22EE66
色コード:#22EE88
色コード:#22EEAA
色コード:#22EECC
色コード:#22EEEE
色コード:#440000
色コード:#440022
色コード:#440044
色コード:#440066
色コード:#440088
色コード:#4400AA
色コード:#4400CC
色コード:#4400EE
色コード:#442200
色コード:#442222
色コード:#442244
色コード:#442266
色コード:#442288
色コード:#4422AA
色コード:#4422CC
色コード:#4422EE
色コード:#444400
色コード:#444422
色コード:#444444
色コード:#444466
色コード:#444488
色コード:#4444AA
色コード:#4444CC
色コード:#4444EE
色コード:#446600
色コード:#446622
色コード:#446644
色コード:#446666
色コード:#446688
色コード:#4466AA
色コード:#4466CC
色コード:#4466EE
色コード:#448800
色コード:#448822
色コード:#448844
色コード:#448866
色コード:#448888
色コード:#4488AA
色コード:#4488CC
色コード:#4488EE
色コード:#44AA00
色コード:#44AA22
色コード:#44AA44
色コード:#44AA66
色コード:#44AA88
色コード:#44AAAA
色コード:#44AACC
色コード:#44AAEE
色コード:#44CC00
色コード:#44CC22
色コード:#44CC44
色コード:#44CC66
色コード:#44CC88
色コード:#44CCAA
色コード:#44CCCC
色コード:#44CCEE
色コード:#44EE00
色コード:#44EE22
色コード:#44EE44
色コード:#44EE66
色コード:#44EE88
色コード:#44EEAA
色コード:#44EECC
色コード:#44EEEE
色コード:#660000
色コード:#660022
色コード:#660044
色コード:#660066
色コード:#660088
色コード:#6600AA
色コード:#6600CC
色コード:#6600EE
色コード:#662200
色コード:#662222
色コード:#662244
色コード:#662266
色コード:#662288
色コード:#6622AA
色コード:#6622CC
色コード:#6622EE
色コード:#664400
色コード:#664422
色コード:#664444
色コード:#664466
色コード:#664488
色コード:#6644AA
色コード:#6644CC
色コード:#6644EE
色コード:#666600
色コード:#666622
色コード:#666644
色コード:#666666
色コード:#666688
色コード:#6666AA
色コード:#6666CC
色コード:#6666EE
色コード:#668800
色コード:#668822
色コード:#668844
色コード:#668866
色コード:#668888
色コード:#6688AA
色コード:#6688CC
色コード:#6688EE
色コード:#66AA00
色コード:#66AA22
色コード:#66AA44
色コード:#66AA66
色コード:#66AA88
色コード:#66AAAA
色コード:#66AACC
色コード:#66AAEE
色コード:#66CC00
色コード:#66CC22
色コード:#66CC44
色コード:#66CC66
色コード:#66CC88
色コード:#66CCAA
色コード:#66CCCC
色コード:#66CCEE
色コード:#66EE00
色コード:#66EE22
色コード:#66EE44
色コード:#66EE66
色コード:#66EE88
色コード:#66EEAA
色コード:#66EECC
色コード:#66EEEE
色コード:#880000
色コード:#880022
色コード:#880044
色コード:#880066
色コード:#880088
色コード:#8800AA
色コード:#8800CC
色コード:#8800EE
色コード:#882200
色コード:#882222
色コード:#882244
色コード:#882266
色コード:#882288
色コード:#8822AA
色コード:#8822CC
色コード:#8822EE
色コード:#884400
色コード:#884422
色コード:#884444
色コード:#884466
色コード:#884488
色コード:#8844AA
色コード:#8844CC
色コード:#8844EE
色コード:#886600
色コード:#886622
色コード:#886644
色コード:#886666
色コード:#886688
色コード:#8866AA
色コード:#8866CC
色コード:#8866EE
色コード:#888800
色コード:#888822
色コード:#888844
色コード:#888866
色コード:#888888
色コード:#8888AA
色コード:#8888CC
色コード:#8888EE
色コード:#88AA00
色コード:#88AA22
色コード:#88AA44
色コード:#88AA66
色コード:#88AA88
色コード:#88AAAA
色コード:#88AACC
色コード:#88AAEE
色コード:#88CC00
色コード:#88CC22
色コード:#88CC44
色コード:#88CC66
色コード:#88CC88
色コード:#88CCAA
色コード:#88CCCC
色コード:#88CCEE
色コード:#88EE00
色コード:#88EE22
色コード:#88EE44
色コード:#88EE66
色コード:#88EE88
色コード:#88EEAA
色コード:#88EECC
色コード:#88EEEE
色コード:#AA0000
色コード:#AA0022
色コード:#AA0044
色コード:#AA0066
色コード:#AA0088
色コード:#AA00AA
色コード:#AA00CC
色コード:#AA00EE
色コード:#AA2200
色コード:#AA2222
色コード:#AA2244
色コード:#AA2266
色コード:#AA2288
色コード:#AA22AA
色コード:#AA22CC
色コード:#AA22EE
色コード:#AA4400
色コード:#AA4422
色コード:#AA4444
色コード:#AA4466
色コード:#AA4488
色コード:#AA44AA
色コード:#AA44CC
色コード:#AA44EE
色コード:#AA6600
色コード:#AA6622
色コード:#AA6644
色コード:#AA6666
色コード:#AA6688
色コード:#AA66AA
色コード:#AA66CC
色コード:#AA66EE
色コード:#AA8800
色コード:#AA8822
色コード:#AA8844
色コード:#AA8866
色コード:#AA8888
色コード:#AA88AA
色コード:#AA88CC
色コード:#AA88EE
色コード:#AAAA00
色コード:#AAAA22
色コード:#AAAA44
色コード:#AAAA66
色コード:#AAAA88
色コード:#AAAAAA
色コード:#AAAACC
色コード:#AAAAEE
色コード:#AACC00
色コード:#AACC22
色コード:#AACC44
色コード:#AACC66
色コード:#AACC88
色コード:#AACCAA
色コード:#AACCCC
色コード:#AACCEE
色コード:#AAEE00
色コード:#AAEE22
色コード:#AAEE44
色コード:#AAEE66
色コード:#AAEE88
色コード:#AAEEAA
色コード:#AAEECC
色コード:#AAEEEE
色コード:#CC0000
色コード:#CC0022
色コード:#CC0044
色コード:#CC0066
色コード:#CC0088
色コード:#CC00AA
色コード:#CC00CC
色コード:#CC00EE
色コード:#CC2200
色コード:#CC2222
色コード:#CC2244
色コード:#CC2266
色コード:#CC2288
色コード:#CC22AA
色コード:#CC22CC
色コード:#CC22EE
色コード:#CC4400
色コード:#CC4422
色コード:#CC4444
色コード:#CC4466
色コード:#CC4488
色コード:#CC44AA
色コード:#CC44CC
色コード:#CC44EE
色コード:#CC6600
色コード:#CC6622
色コード:#CC6644
色コード:#CC6666
色コード:#CC6688
色コード:#CC66AA
色コード:#CC66CC
色コード:#CC66EE
色コード:#CC8800
色コード:#CC8822
色コード:#CC8844
色コード:#CC8866
色コード:#CC8888
色コード:#CC88AA
色コード:#CC88CC
色コード:#CC88EE
色コード:#CCAA00
色コード:#CCAA22
色コード:#CCAA44
色コード:#CCAA66
色コード:#CCAA88
色コード:#CCAAAA
色コード:#CCAACC
色コード:#CCAAEE
色コード:#CCCC00
色コード:#CCCC22
色コード:#CCCC44
色コード:#CCCC66
色コード:#CCCC88
色コード:#CCCCAA
色コード:#CCCCCC
色コード:#CCCCEE
色コード:#CCEE00
色コード:#CCEE22
色コード:#CCEE44
色コード:#CCEE66
色コード:#CCEE88
色コード:#CCEEAA
色コード:#CCEECC
色コード:#CCEEEE
色コード:#EE0000
色コード:#EE0022
色コード:#EE0044
色コード:#EE0066
色コード:#EE0088
色コード:#EE00AA
色コード:#EE00CC
色コード:#EE00EE
色コード:#EE2200
色コード:#EE2222
色コード:#EE2244
色コード:#EE2266
色コード:#EE2288
色コード:#EE22AA
色コード:#EE22CC
色コード:#EE22EE
色コード:#EE4400
色コード:#EE4422
色コード:#EE4444
色コード:#EE4466
色コード:#EE4488
色コード:#EE44AA
色コード:#EE44CC
色コード:#EE44EE
色コード:#EE6600
色コード:#EE6622
色コード:#EE6644
色コード:#EE6666
色コード:#EE6688
色コード:#EE66AA
色コード:#EE66CC
色コード:#EE66EE
色コード:#EE8800
色コード:#EE8822
色コード:#EE8844
色コード:#EE8866
色コード:#EE8888
色コード:#EE88AA
色コード:#EE88CC
色コード:#EE88EE
色コード:#EEAA00
色コード:#EEAA22
色コード:#EEAA44
色コード:#EEAA66
色コード:#EEAA88
色コード:#EEAAAA
色コード:#EEAACC
色コード:#EEAAEE
色コード:#EECC00
色コード:#EECC22
色コード:#EECC44
色コード:#EECC66
色コード:#EECC88
色コード:#EECCAA
色コード:#EECCCC
色コード:#EECCEE
色コード:#EEEE00
色コード:#EEEE22
色コード:#EEEE44
色コード:#EEEE66
色コード:#EEEE88
色コード:#EEEEAA
色コード:#EEEECC
色コード:#EEEEEE
色コード:#FFFFFF