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>ではさみます。
アンダーライン <u></u>
アンダーラインは・・・紹介していながら恐縮ですが、使用をおすすめしません。
「知っておきたいエトセトラ」内“読みやすさを考える”を参照してください。
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>
1)細かい点線の枠に入れる
ここに文字を入力する
↓下記をコピー&ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333;">
ここに文字を入力する。
</div>
2)点線の枠に入れる
ここに文字を入力する
↓下記をコピー&ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333;">
ここに文字を入力する。
</div>
3)実線の枠に入れる
ここに文字を入力する
↓下記をコピー&ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333;">
ここに文字を入力する。
</div>
4)二重線の枠に入れる
ここに文字を入力する
↓下記をコピー&ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333;">
ここに文字を入力する。
</div>
5)細かい点線の枠に入れる(角丸つき)
ここに文字を入力する
↓下記をコピー&ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; border-radius: 5px;">
ここに文字を入力する。
</div>
6)点線の枠に入れる(角丸つき)
ここに文字を入力する
↓下記をコピー&ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; border-radius: 5px;">
ここに文字を入力する。
</div>
7)実線の枠に入れる(角丸つき)
ここに文字を入力する
↓下記をコピー&ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 10px;">
ここに文字を入力する。
</div>
8)二重線の枠に入れる(角丸つき)
ここに文字を入力する
↓下記をコピー&ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333; border-radius: 10px;">
ここに文字を入力する。
</div>
1x)細かい点線の枠に入れる -背景色付き
ここに文字を入力する
↓下記をコピー&ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; background-color: #ffff99;">
ここに文字を入力する。
</div>
2x)点線の枠に入れる-背景色付き
ここに文字を入力する
↓下記をコピー&ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; background-color: #ffff99;">
ここに文字を入力する。
</div>
3x)実線の枠に入れる -背景色付き
ここに文字を入力する
↓下記をコピー&ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; background-color: #ffff99;">
ここに文字を入力する。
</div>
4x)二重線の枠に入れる -背景色付き
ここに文字を入力する
↓下記をコピー&ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333; background-color: #ffff99;">
ここに文字を入力する。
</div>
5x)細かい点線の枠に入れる(角丸つき) -背景色付き
ここに文字を入力する
↓下記をコピー&ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; border-radius: 5px; background-color: #ffff99;">
ここに文字を入力する。
</div>
6x)点線の枠に入れる(角丸つき) -背景色付き
ここに文字を入力する
↓下記をコピー&ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; border-radius: 5px; background-color: #ffff99;">
ここに文字を入力する。
</div>
7x)実線の枠に入れる(角丸つき) -背景色付き
ここに文字を入力する
↓下記をコピー&ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 10px; background-color: #ffff99;">
ここに文字を入力する。
</div>
8x)二重線の枠に入れる(角丸つき) -背景色付き
ここに文字を入力する
↓下記をコピー&ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333; border-radius: 10px; background-color: #ffff99;">
ここに文字を入力する。
</div>
1xx)細かい点線の枠に入れる - 濃い背景色付き・文字色変更
ここに文字を入力する
↓下記をコピー&ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; background-color: #009999; color: #ffffff;">
ここに文字を入力する。
</div>
2xx)点線の枠に入れる - 濃い背景色付き・文字色変更
ここに文字を入力する
↓下記をコピー&ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; background-color: #009999; color: #ffffff;">
ここに文字を入力する。
</div>
3xx)実線の枠に入れる - 濃い背景色付き・文字色変更
ここに文字を入力する
↓下記をコピー&ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; background-color: #009999; color: #ffffff;">
ここに文字を入力する。
</div>
4xx)二重線の枠に入れる - 濃い背景色付き・文字色変更
ここに文字を入力する
↓下記をコピー&ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333; background-color: #009999; color: #ffffff;">
ここに文字を入力する。
</div>
5xx)細かい点線の枠に入れる(角丸つき) - 濃い背景色付き・文字色変更
ここに文字を入力する
↓下記をコピー&ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; border-radius: 5px; background-color: #009999; color: #ffffff;">
ここに文字を入力する。
</div>
6xx)点線の枠に入れる(角丸つき) - 濃い背景色付き・文字色変更
ここに文字を入力する
↓下記をコピー&ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; border-radius: 5px; background-color: #009999; color: #ffffff;">
ここに文字を入力する。
</div>
7xx)実線の枠に入れる(角丸つき) - 濃い背景色付き・文字色変更
ここに文字を入力する
↓下記をコピー&ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 10px; background-color: #009999; color: #ffffff;">
ここに文字を入力する。
</div>
8xx)二重線の枠に入れる(角丸つき) - 濃い背景色付き・文字色変更
ここに文字を入力する
↓下記をコピー&ペースト
<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333; border-radius: 10px; background-color: #009999; color: #ffffff;">
ここに文字を入力する。
</div>
「細かい点線枠(角丸つき) - 濃い背景色付き・文字色変更 」を例に,解説します。
線の色や、幅のバリエーションをつけたい場合、参考にしてください。
例)「細かい点線枠(角丸つき) - 濃い背景色付き・文字色変更 」の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: 5px;
→ border-radiusは、角丸指定。角丸の半径が5pxとなります。
数字の大小で角丸の大きさが変わります。
※但し、この指定はブラウザ環境で角丸にならない場合もあります。
background-color: #009999;
→ background-colorは、背景色の指定です。色指定は、こちらのページをご参考ください。
color: #ffffff;
→ colorは、文字色の指定です。色指定は、こちらのページをご参考ください。
<おまけ>border-radiusバリエーション
「border-radius:10px 0 10px 0;」とすると、左上、右上、右下、左下の順に角丸の半径を変更することができます。0は、角丸なしの意味。
ここに文字を入力する
二行以上文字を入れたい場合。
ここに文字を入力する。
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>