TELリンクをボタン風に表示する TELリンクを設定したa要素(アンカータグ)でボタンを囲むことによって、クリックすると、電話を発信するボタンが完成する 電話をかける(090XXXXXXXX)
テスト
文字
タイトル付き枠サンプル
1）細かい点線の枠に入れる
↓下記をコピー＆ペースト
<fieldset style="border: 1px dotted #000000; padding: 10px;">
<legend>タイトル付き枠</legend>ここに文字を入力する。</fieldset>
2）実線の枠に入れる
↓下記をコピー＆ペースト
<fieldset style="border: 1px solid #000000; padding: 10px;">
<legend>タイトル付き枠</legend>ここに文字を入力する。</fieldset>
3）点線の枠に入れる
↓下記をコピー＆ペースト
<fieldset style="border: 1px dashed #000000; padding: 10px;">
<legend>タイトル付き枠</legend>ここに文字を入力する。</fieldset>
4）二重線の枠に入れる
↓下記をコピー＆ペースト
<fieldset style="border: 5px double #000000; padding: 10px;">
<legend>タイトル付き枠</legend>ここに文字を入力する。</fieldset>
進化形）タイトル部分に背景色を入れる
↓下記をコピー＆ペースト
<fieldset style="border: 1px double #000; padding: 10px;"><legend style="background-color: #FF0099; padding: 3px 10px; border-radius: 5px; color: #ffffff;">タイトル付き枠</legend>ここに文字を入力する。</fieldset>
※ピンク色は、#FF0099 部分です。他の色に変えたい場合は、このカラーコードを変更します。
上付き文字 <sup></sup>
m2←平方メートルなど、上に付けるちっちゃい文字
<sup>2</sup>という感じで、小さくしたい文字を<sup></sup>ではさみます。
下付き文字 <sub></sub>
H2O←エイチツーオーなど、下に付けるちっちゃい文字
<sub>2</sub>という感じで、小さくしたい文字を<sub></sub>ではさみます。
削除された箇所 <del></del>
削除された箇所
<del>削除された箇所</del>という感じで、取消線を入れる文字を<del></del>ではさみます。
影付き枠サンプル
1.影をつける
↓以下をコピー＆ペースト
<div style="padding: 10px; margin: 15px auto; color: #333333; background: #ffffff none repeat scroll 0% 0%; border: 1px solid #cccccc; box-shadow: 4px 4px 8px
#dddddd;">ここに文字を入れる。</div>
2.影を大きめにする
↓以下をコピー＆ペースト
<div style="padding: 10px; margin: 15px auto; color: #333333; background: #ffffff none repeat scroll 0% 0%; border: 1px solid #cccccc; box-shadow: 8px 8px 16px #dddddd;">ここに文字を入れる。</div>
3.影を抑えめにする
↓以下をコピー＆ペースト
<div style="padding: 10px; margin: 15px auto; color: #333333; background: #ffffff none repeat scroll 0% 0%; border: 1px solid #cccccc; box-shadow: 2px 2px 4px #dddddd;">ここに文字を入れる。</div>
見出しを2行にするHTML
先に結論をいうと、「コンテンツ」→「見出し」を使わず、「見出し」に該当するhタグというHTMLを使います。
hタグは、大きさ順に123となります。
見出し大 → <h1>ここに見出し大のテキスト</h1>
見出し中 → <h2>ここに見出し中のテキスト</h2>
見出し小 → <h3>ここに見出し小のテキスト</h3>
１）細かい点線の枠に入れる
↓下記をコピー＆ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333;">
ここに文字を入力する。
</div>
２）点線の枠に入れる
↓下記をコピー＆ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333;">
ここに文字を入力する。
</div>
３）実線の枠に入れる
↓下記をコピー＆ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333;">
ここに文字を入力する。
</div>
４）二重線の枠に入れる
↓下記をコピー＆ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333;">
ここに文字を入力する。</div>
５）細かい点線の枠に入れる（角丸つき）
↓下記をコピー＆ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; border-radius: 5px;">
ここに文字を入力する。
</div>
６）点線の枠に入れる（角丸つき）
↓下記をコピー＆ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; border-radius: 5px;">
ここに文字を入力する。
</div>
７）実線の枠に入れる（角丸つき）
↓下記をコピー＆ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 10px;">
ここに文字を入力する。
</div>
８）二重線の枠に入れる（角丸つき）
↓下記をコピー＆ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333; border-radius: 10px;">
ここに文字を入力する。
</div>
１x）細かい点線の枠に入れる -背景色付き
↓下記をコピー＆ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; background-color: #ffff99;">
ここに文字を入力する。
</div>
２x）点線の枠に入れる-背景色付き
↓下記をコピー＆ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; background-color: #ffff99;">
ここに文字を入力する。
</div>
３x）実線の枠に入れる -背景色付き
↓下記をコピー＆ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; background-color: #ffff99;">
ここに文字を入力する。
</div>
４x）二重線の枠に入れる -背景色付き
↓下記をコピー＆ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333; background-color: #ffff99;">
ここに文字を入力する。
</div>
５x）細かい点線の枠に入れる（角丸つき） -背景色付き
↓下記をコピー＆ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; border-radius: 5px; background-color: #ffff99;">
ここに文字を入力する。
</div>
６x）点線の枠に入れる（角丸つき） -背景色付き
↓下記をコピー＆ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; border-radius: 5px; background-color: #ffff99;">
ここに文字を入力する。
</div>
７x）実線の枠に入れる（角丸つき） -背景色付き
↓下記をコピー＆ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 10px; background-color: #ffff99;">
ここに文字を入力する。
</div>
８x）二重線の枠に入れる（角丸つき） -背景色付き
↓下記をコピー＆ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333; border-radius: 10px; background-color: #ffff99;">
ここに文字を入力する。
</div>
１xx）細かい点線の枠に入れる - 濃い背景色付き・文字色変更
↓下記をコピー＆ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; background-color: #009999; color: #ffffff;">
ここに文字を入力する。
</div>
２xx）点線の枠に入れる - 濃い背景色付き・文字色変更
↓下記をコピー＆ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; background-color: #009999; color: #ffffff;">
ここに文字を入力する。
</div>
３xx）実線の枠に入れる - 濃い背景色付き・文字色変更
↓下記をコピー＆ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; background-color: #009999; color: #ffffff;">
ここに文字を入力する。
</div>
４xx）二重線の枠に入れる - 濃い背景色付き・文字色変更
↓下記をコピー＆ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333; background-color: #009999; color: #ffffff;">
ここに文字を入力する。
</div>
５xx）細かい点線の枠に入れる（角丸つき） - 濃い背景色付き・文字色変更
↓下記をコピー＆ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; border-radius: 5px; background-color: #009999; color: #ffffff;">
ここに文字を入力する。
</div>
６xx）点線の枠に入れる（角丸つき） - 濃い背景色付き・文字色変更
↓下記をコピー＆ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; border-radius: 5px; background-color: #009999; color: #ffffff;">
ここに文字を入力する。
</div>
７xx）実線の枠に入れる（角丸つき） - 濃い背景色付き・文字色変更
↓下記をコピー＆ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 10px; background-color: #009999; color: #ffffff;">
ここに文字を入力する。
</div>
８xx）二重線の枠に入れる（角丸つき） - 濃い背景色付き・文字色変更
↓下記をコピー＆ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333; border-radius: 10px; background-color: #009999; color: #ffffff;">
ここに文字を入力する。
</div>
HTMLソース解説（CSSによる指定）
「細かい点線枠（角丸つき） - 濃い背景色付き・文字色変更 」を例に,解説します。
線の色や、幅のバリエーションをつけたい場合、参考にしてください。
例）「細かい点線枠（角丸つき） - 濃い背景色付き・文字色変更 」のHTMLソース
<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; border-radius: 5px; background-color: #009999; color: #ffffff;">
ここに文字を入力する。
</div>
padding: 10px;
→ paddingは、枠の内側の余白です。これは、10px内側に余白を入れています。
数値の大小で、余白の幅が変更できます。
margin-bottom: 10px;
→ marginは、枠の外側の余白です。margin-bottomだと、枠の下の余白です。
数値の大小で、余白の幅が変更できます。
border: 1px dotted #333333;
→ borderは、線の指定です。これは、線の太さ1px、線の種類がdotted、線の色が#333333となります。
線の太さは、数字の大小で変更します。
線の種類は、丸い点線が「dotted」、波線が「dashed」、直線が「solid」、二重線が「double」です。
線の色の指定は、こちらのページをご参考ください。
border-radius: ５px;
→ border-radiusは、角丸指定。角丸の半径が5pxとなります。
数字の大小で角丸の大きさが変わります。
※但し、この指定はブラウザ環境で角丸にならない場合もあります。
background-color: #009999;
→ background-colorは、背景色の指定です。色指定は、こちらのページをご参考ください。
color: #ffffff;
→ colorは、文字色の指定です。色指定は、こちらのページをご参考ください。
＜おまけ＞border-radiusバリエーション
「border-radius:10px 0 10px 0;」とすると、左上、右上、右下、左下の順に角丸の半径を変更することができます。0は、角丸なしの意味。
文字を2行以上入れたい時は？
二行以上文字を入れたい場合。
2行目
3行目
HTML編集画面で、<br />を使って、文字を改行します。
<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333;">
ここに文字を入力する。<br />2行目<br />3行目
</div>
文字のセンタリングをしたい場合は？
文字のセンタリングをしたい場合。
2行目
3行目
HTML編集画面で、 text-align: center; を加えます。
<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; text-align:center;">
ここに文字を入力する。<br />2行目<br />3行目
</div>