HTMLリファレンス　文字装飾・罫線・背景

ボタン・バナー制作に便利なサイト↓

https://generator.web-alpha.info/btn/index.php#step1

見出し・段落・改行

<h1>-<h6> 見出しを付ける

<p> 段落を示す

<br> 改行する

<address> 連絡先を明記する

文字サイズ・文字の装飾

<big><small> 大きめの文字と小さめの文字

<b> 太字にする

<i> イタリック体にする

文字色

色を３原色の組み合わせで指定した例　　色を色名で指定した例

<font color="#ff0000">赤</font>赤　　<font color="red">赤</red>赤

<font color="#00ff00">緑</font>緑　　<font color="lime">緑</font>緑

<font color="#0000ff">青</font>青　　<font color="blue">青</font>青

<font color="#ffffff">白</font>白　　<font color="white>白</font>白

<font color="#000000">黒</font>黒　　<font color="black">黒</font>黒

<font color="#ffff00">黄</font>黄　　<font color="yellow">黄</font>黄

<tt> 等幅文字にする

強調・削除・追加・略語

<em><strong> 強調を示す

<del> 削除部分を示す

<del cite="" datetime=""> 削除に関連する情報を示す

<ins> 追加部分を示す

<ins cite="" datetime=""> 追加に関連する情報を示す

<abbr> 略語を示す（略語全般）

<acronym> 略語を示す（頭字語のみ）

<dfn> 定義する用語を示す

<sup><sub> 上付文字と下付文字

引用

<blockquote> 引用文を示す（長文）

<blockquote cite=""> 引用元をURIで示す（blockquote）

<q> 引用文を示す（短文）

<q cite=""> 引用元をURIで示す（q）

<cite> 引用元を明示する

整形済み・コード

<pre> 整形済みのテキスト

<code> ソースコードを示す

<var> 変数や引数を示す

<kbd> ユーザーが入力する文字を示す

<samp> プログラムの出力サンプルを示す

ウィジェットHTMLに以下のコードをコピペするだけで見本通り作れます。

中見出しタイトル例

<h2 style="font-size: 28px; line-height: 39.2px; color: #000000; padding-top: 18px; padding-bottom: 18px; padding-left: 20px; border-left: 10px solid #0000ff; border-bottom: 1px solid #808080;">中見出しタイトル例</h2>

太字

<h2 style=

"; <strong>font-size: 28px; line-height: 39.2px; color: #000000; padding-top: 18px; padding-bottom: 18px; padding-left: 20px; border-left: 10px solid #0000ff; border-bottom: 1px solid #808080;">

</h2>

■タイトル

本文

本文

本文

本文

本文

本文

本文

本文

</div>

本文

テキスト

タイトル

テキスト

タイトル

テキスト

タイトル

テキスト

ここに本文を入れます♪

<div style="border: #ffb6c1 solid 1px; border-left: #ffb6c1 solid 10px; padding: 20px; background: #fff; font-size: 100%;"> ここに本文を入れます♪</div>

＊タイトル

ここに本文を入れます♪

<div style="margin:0em ;display:inline-block;position:relative;top:3px;padding:0 .5em;height:1.5em;line-height:1.5em;color:#ffffff;background:#ffc0c0;font-weight:bold;text-align:center;border-radius:5px 5px 0 0;">＊タイトル</div><div style="background:rgba(255,255,255,0);border:solid 3px #ffc0c0;border-radius:0 5px 5px;padding:20px;font-size: 100%;">ここに本文を入れます♪</div>

ここに本文を入れます♪

<div style="padding: 20px; background: #fff; -webkit-box-shadow: 0 0 50px #f98289 inset, 5px 5px 0 #cecece; -moz-box-shadow: 0 0 50px #f98289 inset, 5px 5px 0 #cecece; box-shadow: 0 0 50px #f98289 inset, 5px 5px 0 #cecece; font-size: 100%;"> ここに本文を入れます♪ </div>

ここに文章

<p style="margin: 0;">ここに文章</p></div>

ここにテキスト

<div style="margin:20px auto;padding:10px 1px;background-color: #d2f8ff; background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, #fcf0f1), color-stop(.5, transparent), to(transparent));-webkit-background-size: 14px 14px;"> <div style="padding:0.5em 1em;background:rgba(255,255,255,0.85)"> ここにテキスト </div></div>

ここにタイトル

ここにテキスト

<div style="position: relative; margin: 2em 0;padding: 0.5em 1em;border: solid 3px #8dcfd6;"><p style="position: absolute;display: inline-block;top: -27px;left: -3px;padding: 0 9px;eight: 25px;line-height: 25px;font-size: 17px;background: #8dcfd6;color: #ffffff;font-weight: bold;border-radius: 5px 5px 0 0;"> ここにタイトル </p> ここにテキスト </div>

★

ここにテキスト

<div style="position: relative; margin:20px auto;padding: 5px 15px 5px 55px;box-sizing: border-box;background: #f5f5f5;"><span style="display: inline-block;position: absolute;top: 0;left: 8px;width: 38px;height: 30px;text-align: center;color: #FFF;font-size: 18px;line-height: 30px;background: #f29596;font-weight: 900;">★</span><span style="position: absolute;left: 8px;top: 30px;height: 0;width: 0;border-left: 19px solid #f29596;border-right: 19px solid #f29596;border-bottom: 10px solid transparent;"> </span> <div style="position: relative;padding: 0;margin: 10px 0;z-index: 3;line-height: 1.7;"> ここにテキスト </div></div>

NEW

ここにテキスト

<div style="position:relative;min-height:100px;margin:30px auto;padding:1em 80px 1em 1.5em;background:#f9f9f9 none;box-sizing:border-box;box-shadow: 0 3px 5px rgba(0, 0, 0, 0.14);" > <div style="position:absolute;top:0;right:0;width:86px;height:86px;overflow:hidden;" > <span style="display:inline-block;position:absolute;padding:5px 0;left:-24px;top:20px;width:160px;text-align:center;font-size:16px;line-height:16px;background:#fb9494 none repeat top left scroll;color:#fff;letter-spacing:0.05em;-webkit-transform:rotate(45deg);transform:rotate(45deg);box-shadow:0 0 0 2px rgb(217, 116, 116);border-top-width:1px;border-top-style:dotted;border-top-color:rgba(255, 255, 255, 0.8);border-bottom-width:1px;border-bottom-style:dotted;border-bottom-color:rgba(255, 255, 255, 0.8);" >NEW</span></div><p> ここにテキスト </p></div>

■タイトル

本文

ここにテキスト

<div style="margin:20px auto;padding: 4px;background: -moz-linear-gradient(#ED008C,#FFF000);background:-webkit-linear-gradient(#ED008C,#FFF000);background: linear-gradient(to right, #ED008C,#FFF000);"> <div style="background-color:rgba(255,255,255,0.9);padding:0.5em 1em;"> ここにテキスト </div></div>

ここに文章

<p style="margin: 0;">ここに文章</p></div></div>

タイトル本文

タイトル部分

ここに文章

<div class="l-m-b l-text-center" style="text-align: center; margin-bottom: 0.5em;"><span style="border-bottom: 1px solid white;">タイトル部分</span></div>

<p style="padding: 0; margin: 0;">ここに文章</p></div>

見出しのテキスト

<h2 class="entry-text-bronze" style="background-image: linear-gradient(135deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%); background-image: -webkit-linear-gradient(135deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%); padding: 0 0 5px 0;"><span style="display: block; background: #ffffff;">見出しのテキスト</span></h2>

ＨＴＭＬタグ一覧

● 基本構造 <html> <head> <body>

● ヘッダー <title> <isindex> <base> <meta> <link> <script>

● ページレイアウト <hn> <hr> <br> <p> <center> <div> <pre> <blockquote> <address> <noscript>

● フォント <font> <basefont> <i> <tt> <b> <u> <strike><big> <small> <sub> <sup> <em> <strong> <code> <samp> <kbd> <var> <cite>

● リスト <ul> <ol> <li> <dl> <dt> <dd>

● 表 <table> <tr> <th> <td> <caption>

● ハイパーリンク <a> 　　

● イメージ <img> <map> <area> 　 <IMG>

● フォーム <form> <input> <select> <option> <textarea>

● JAVA <applet> <param>

● フレーム <frameset> <frame> <noframes>　

● 特殊文字 &quote; & < >   ©

基本構造

<html> </html> HTML文書

<head> </head> ヘッダー

<body> </body> ボディ（本文）文書全体のデザインを設定

background="filename" 背景のタイルイメージを指定

bgcolor =#rrggbb or colorname 背景の色

text =#rrggbb or colorname テキストの色

link =#rrggbb or colorname リンクの色

vlink =#rrggbb or colorname アクセス済みのリンク色

alink =#rrggbb or colorname アクセス中のリンクの色

 注釈（コメント）

<body>　の属性

background= 背景に使う画像ファイルのURL

bgcolor= 背景色指定

text= テキストの色指定

link= リンクテキストの色指定

vlink= アクセス済みリンクテキストの色指定

alink= マウスでクリックしたときのリンクテキストの色指定

onLoad= ページを読み込んだときの処理（JavaScriptなどで記述）

onUnload= 別のページに表示が切り替わるときの処理（JavaScriptなどで記述）

● 基本構造

<title> </title> タイトル

<isindex> </isindex> キーワード検索

<base> </base> 基準URL　

<meta> </meta> 文書情報

<link> </link> 文書の前後関係などを定義

<script> </script> 使用するスクリプト言語を宣言する　language = JavaScript , VBScript など

ページレイアウト

<hn> </hn> 見出し文字（n=1 最大～ n=6 最小）

<hr> 横罫線を引く　 width = n, n% 線の長さ（pixel or %)　size = n 線の太さ（pixel）　align = left , center , right　 noshade　平面的に表示

<br> 強制改行　 clear = all , left , right　イメージに対するテキストの回り込みを解除

<p> </p> 段落　 align = left, center, right

<center> </center> センタリング

<div> </div> 分割テキスト（左・中央・右揃え）align = left, center, right

<pre> </pre> 整形済みテキスト（改行やタブをそのまま表示）

<blockquote> </blockquote> ブロック引用（上下に空白行，左右がインデントされる）

<address> </address> アドレス情報（イタリック体で表示）

<noscript> </noscript> スクリプト言語未対応ブラウザで表示される範囲を指定

フォント

<font> </font> フォント　

size=n 最大はn=7 size=±n 　 basefontに対する相対値 n=1～6　 color=#rrggbb, colorname フォント色指定

<basefont> ベースフォント　

size = n

<i> </i> イタリック体

<tt> </tt> 等幅フォント

<b> </b> ボールド

<u> </u> アンダーライン

<strike> </strike> 打ち消し線

<big> </big> 大きめのフォント

<small> </small> 小さめのフォント

<sub> </sub> 下付文字　H2O

<sup> </sup> 上付文字　x2+y2=9

<em> </em> 強調文字

<strong> </strong> 強い強調

<code> </code> プログラムコード PROGRAM CODES

<samp> </samp> USED FOR SAMPLE OUTPUT

<kbd> </kbd> KEYBOARD TYPED

<var> </var> 変数名 variables

<cite> </cite> 引用　used for citations

リスト（箇条書き）

<ul> </ul> 番号なしリスト Unnumbered List

type=disk, circle, square　　行頭記号の種類設定

<ol> </ol> 番号付きリスト Ordered List

type=1, a, A, i, I 　　　　　行頭番号の種類設定　　start=n　　開始番号（数値）

<li> </li> リスト項目　

type=disk, circle, square　(<ul> </ul>の場合のみ)　type=1, a, A, i, I　(<ol> </ol>の場合のみ） value=n　　開始番号（数値）

<dl> </dl> 定義型リスト Definition Lists

<dt> </dt> 定義語　 Term name

<dd> </dd> 定義内容 Term Definition

表（TABLE)

<table> </table> 表組み

align=left, center, right

border=n　表の外枠の太さ（pixel default:1）

width=n, n% 表の幅（pixel or %）

height=n, n% 表の高さ（pixel or %）

cellspacing=n 表の枠の太さ（pixel default:2）

cellpadding=n 枠と文字の間隔（pixel default:1）

<tr> </tr> 表の行　

align=left, center, right　左右の配置　 valign=top, middle, bottom 　上下の配置

<th> </th> 表の見出し要素（字体がボールドになる）

width=n　　セルの幅

height=n　セルの高さ

rowspan=n　複数行にまたがるセルの指定

colspan=n　複数列にまたがるセルの指定

nowrap　　セル内折り返し禁止

align=left, center, right　　左右配置(default:center)

valign=top, middle, bottom 上下配置(default:middle)

bgcolor=#rrggbb , colorname セルの背景色

<td> </td> 表のデータ要素

width=n　　セルの幅

height=n　セルの高さ

rowspan=n　複数行にまたがるセルの指定

colspan=n　複数列にまたがるセルの指定

nowrap　　セル内折り返し禁止

align=left, center, right　　左右配置(default:left)

valign=top, middle, bottom 上下配置(default:middle)

bgcolor=#rrggbb , colorname セルの背景色

<caption> </caption> 表題　align=top, bottom 　(default:top)

ハイパーリンク

<a> </a> アンカー　Anchor　<a href= "xxxx.html" >アンカーテキスト</a>

href="url"　　　　リンク先のURL

href="#marker_name"　ページ内のアンカーに飛ぶ

href="mailto:your@mail.address"　メール機能呼び出し

name="marker_name"　ページ内にアンカーを設定

target=frame_name　表示するフレームを指定

target=top　　　　別ウィンドウを開いて表示

target=_top　　　フレームを解除して表示

イメージ（画像）

<img> イメージ Inline Image

src="url" 表示するイメージのURL

alt="text" 画像を表示できないときの説明

align=top　　　テキストを画像の上端に合わせる

　 middle 中央に

bottom 下端に

left　　　画像を左に配置しテキストを回り込ませる

right　　　　　右に配置し

width=n, n% 　　画像の幅

height=n, n%　　画像の高さ

border=n　　　　枠線の太さ

hspace=n　　　　画像左右のスペース

vspace=n　　　　画像上下のスペース

usemap=url#map_name クライアントサイド・イメージマップ

ismap=url#map_name サーバーサイド・イメージマップ

<map> </map> イメージマップの指定

name=map_name（必須 usemapで指定したmap_name）

<area> イメージマップデータ　<map> </map>内でリンク先を指定

shape=rect　　リンク領域形状四角形

circle　　　　　　　　円形

poly　　　　　　　　　多角形

coords="x1,y1,x2,y2"　　四角形の場合”左上と右下の座標”

"x,y,r"　　　　円形の場合　”中心の座標，半径”

　　　 "x1,y1,x2,y2,.." 多角形の場合左上から反時計回りに頂点の座標

href="url"　指定したareaでのリンク先

alt="text"　イメージの内容を記述

フォーム

<form> </form> フォーム

action="処理するCGIプログラムのURL" ="mailto:address"　method="POST", "GET"

enctype="multipart/form-data"　内容を文字コードに合わせてエンコードして送信

<input> 入力エリアの作成

type=text　　　テキストフィールド（デフォルト）

password　パスワードフィールド

checkbox　チェックボックス

radio　　ラジオボタン

submit　　送信ボタン

image　　グラフィカル送信ボタン

reset　　リセットボタン

file　　　ファイル名入力

hidden　　隠蔽フィールド

name=　　　入力フィールド名

value=　　データのデフォルト値，ボタン名

checked 　type=checkbox, radio のデフォルトチェック

size=n 　type=text, file の入力フィールド幅 (default:20)

maxlength=n 　type=text, password 時に入力できる最大文字数

src=url　グラフィカル送信ボタンのイメージURL

align=top, middle, bottom, left, right

　　　グラフィカル送信ボタン時のテキスト配置

<select> </select> 選択メニュー

name=　　 selectメニュー名（必須）

size=n 複数表示時の行数

multiple　複数項目の選択を許可

<option> </option> <select> </select>内で選択項目を指定

selected　　　デフォルトで選択された状態にしておく

value="text" 選択項目の代わりに送信したいデータ

<textarea> </textarea> 複数行テキスト入力フィールド

name=　　テキストフィールド名

rows=n 縦サイズ（行数）

cols=n 横サイズ（１行文字数）

wrap=soft 横サイズに合わせて改行（画面表示のみ）

hard　横サイズに合わせて改行（送信時に改行コード付加）

off 改行なし（デフォルト）

JAVA

<applet> </applet> Java Appletの設定

codebase="Java AppletのURL"

code="Java Appletのclassファイル"　（必須）

alt="Java未対応ブラウザ用代用テキスト"

name="Java Applet名"

width=n, n%　（必須）

height=n, n% （必須）

align=top, middle, bottom, left, right

hspace=n

vspace=n

<param> </param> Java Appletのパラメータ

name="パラメータ名" （必須）

value="パラメータの値"

例

bタグ「boldタグ」太くしたいところ

<b>bタグ「boldタグ」太くしたいところ</b>

strongタグ強調したいところ

<strong>strongタグ強調したいところ</strong>

HTMLリファレンス 文字装飾・罫線・背景

中見出しタイトル例

太字

見出しのテキスト

ＨＴＭＬタグ一覧

基本構造

● 基本構造

ページレイアウト

フォント

リスト（箇条書き）

表（TABLE)

ハイパーリンク

イメージ（画像）

フォーム

JAVA

例

HTMLリファレンス　文字装飾・罫線・背景