HTMLだけを使った罫線枠

①罫線枠(実線、青、背景なし)
今回は、HTMLだけで使える罫線枠をいくつか紹介します。CSSは使っていません。
①~③までは、一般的に使われる基本的な罫線枠です。
①と③だけでも私は十分用は足りています。
でも、2つだけ紹介しても、物足りないと思いますので、他の罫線枠も紹介します。

お使いのデザインテンプレートによって好みの色があると思いますので、見本色は#4c6cb3ですが、これを 原色大辞典を参考にして色を変えてください。
また線の太さを変えて(1px→2,3,4pxなどに)使えます。
①~④は背景色は無しにしてありますが、background:色名を加えると⑤~⑧のように背景色が付きます。

罫線枠はテキストの量により、自動的に高さが調整されます。横幅はブログデザインの設定に合わせて自動的に最大に調整されます。
以下同様ですが、試しに①の例だけ高さを3行にします。

HTML①のソース
<div style="border: 1px solid #4c6cb3; padding: 10px;">テキスト<br>テキスト2<br >テキスト3<br ></div>
テキスト
テキスト2
テキスト3


②罫線枠(粗い点線、青、背景なし)

HTML②のソース
<div style="border: 1px dashed #4c6cb3; padding: 10px;">テキスト </div>
テキスト
  ②と③は、単に①のsolidを dashedやdottedに変えただけです。

③罫線枠(細かい点線、青、背景なし)

HTML③のソース
<div style="border: 1px dotted #4c6cb3; padding: 10px;">テキスト </div>
テキスト
 
wood-fence-363118_1920.jpg
PixelAnarchyによるPixabayからの画像


④罫線枠(くぼんだ線、青、背景なし)

HTML④のソース
<div style="border: 3px inset #4c6cb3; padding: 10px;">テキスト </div>
テキスト
④は、①の線の太さを1px→3pxにし、線の種類のsolid→insetにしただけです。左側と上側の線の色が少し濃くなりましたが、これでくぼんだ様に見える?


⑤罫線枠(実線2px、青、背景ghostwhite)

HTML⑤のソース
<div style="border:2px solid #4c6cb3; padding:10px; background:ghostwhite; ">テキスト </div>
テキスト
⑤は、①の線の太さを1px→2pxにし、背景色 background:にghostwhite;という色を指定したものです。色名でも指定できます。


⑥罫線枠(二重線3px、水色、背景whitesmoke)

HTML⑥のソース
<div style="border:3px double #5f9ea0; padding:10px; background:whitesmoke; ">テキスト </div>
テキスト
⑥は、①の線を太くし(3px)、2重線にし(double)、線の色を変え(#5f9ea0)、背景色を付けた(background:whitesmoke;)ものです。


⑦罫線枠(実線1px、グレイ、影付き、背景whitesmokeとなし)

HTML⑦(背景whitesmoke)のソース
<div style="border: 1px gainsboro solid; padding: 10px; box-shadow: 0 2px 3px 0 #ccc; background: whitesmoke;">テキスト </div>
テキスト
①と大きく異なる点は、影(box-shadow: 0 2px 3px 0 #ccc; )を付けた点です。

HTML⑦(背景なし)のソース
<div style="border: 1px gainsboro solid; padding: 10px; box-shadow: 0 3px 4px 0 #ccc; ">テキスト </div>
テキスト
すぐ上の⑦(背景whitesmoke)から背景をなしにしたものです。ほんの少し影の大きさも変えました。


⑧罫線枠(白抜き文字、背景teal)

HTML⑧のソース
<div style="border: 1px solid dimgray; padding: 10px; background-color: teal; color: white;"> テキスト </div>
テキスト
⑧は、白抜き文字を使うために背景色を濃い色(tealという色名)にしたものです。


以上、気軽に使えそうな罫線枠の見本を紹介しました。私は①と③は使用頻度が高いです。

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 0

この記事へのコメント

  • tor

    こんばんは。
    私はあまり罫線使わないのですが
    前回のわけい様の分類体系のようなブログ
    を書く時には使えますね。
    ちょっとイメージが変わって良いかもと思いました。
    2019年09月17日 22:25
  • わけい

    torさんへ
    コメントどうもありがとうございます。
    そうですよね、torさんのブログは写真が多く、元々変化に富んでいるので、罫線枠を使う必要性はないかも知れないですね。
    もし使うとすれば、引用部分やブログの最後のお店案内部分ぐらいですかね。
    私のブログの「分類体系」のときに、表を使ったのですが、コマ切れにタグをたくさん使うので、非常に面倒くさかったです。
    これを楽に表現できるといいのですが・・・(もしかしてあるのかな?)
    2019年09月18日 19:00