【HTML】おしゃれなボックスデザイン(囲み枠)のサンプル52選

ボックスデザイン【2020年4月14日更新】

今回の記事は、HTMLソースでデザインするおしゃれなボックス(囲み枠)のサンプルを紹介します。

WordPressのクラシックエディターやコードエディターに直接入力できるのでCSSが難しいと感じている人にとってもおすすめです。

HTMLソースをそのままコピペして使ってください。

【本記事の特徴】

○HTMLの理解を深められる。

○HTMLで作られたおしゃれなボックス(囲み枠)が簡単に手に入る。

○HTMLソースの修正の仕方がわかる。

HTMLを理解している人は2章から読んでね!
1章ではHTMLの基本をやるよ!

HTMLの基本

今回コピペできるHTMLの基本を説明しています。

上記のオレンジ色で囲んである枠を例にします。

<div style="border: 5px dashed #ffa500; padding: 10px; border-radius: 0px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>
ここに文字を入力

上記のHTMLコードで上のオレンジの破線枠ができあがります。

HTMLコードを詳しく説明していきます。

<div style="

border: 5px dashed #ffa500; ・・・①

padding: 10px; ・・・②

border-radius: 0px; ・・・③

background: ##ffffff; ・・・④

text-align: left; ・・・⑤

font-size: 16px;・・・⑥

">

ここに文字を入力

</div>

コードを入力するときの大前提だけど半角を使ってね!

①枠線の太さ、種類、色を指定

①で、枠の線の太さと種類、色を指定します。

border: 5px dashed #ffa500; ・・・①

枠線の太さの指定

border: 5px dashed #ffa500; ・・・①

5pxとなっているところが太さです。1pxや10pxに変えると線が細くなったり、太くなったりしていきます。好みの太さにしてwebデザインをしてください。

枠線の種類の指定

border: 5px dashed #ffa500; ・・・①

dashedとなっているところは、枠線の種類です。

dashedは上の枠線のように破線になります。以下、枠線の種類のコードを載せます。

直線solid

ここに文字を入力

点線dotted

ここに文字を入力

破線dashed

ここに文字を入力

二重線double

ここに文字を入力

立体的にくぼんだ線groove

ここに文字を入力

立体的に隆起した線ridge

ここに文字を入力

枠線の色の指定

border: 5px dashed #ffa500; ・・・①

#ffa500となっているところは、色の指定です。#から始まるのが特徴です。

web色見本で、あなたのwebサイトに合う色を見つけてください。

枠の内側の余白を指定

②で枠の内側の余白を指定します。

padding: 10px; ・・・②

10pxとなっているところの数値を変更してあなたのwebサイトにあった枠内の余白を設けます。

数字が大きくなっていくにつれて余白が広くなっていきます。

枠の角に丸みを持たせる指定

③で枠の角に丸みを持たせるかどうかの指定をします。

border-radius: 0px; ・・・③

0pxとなっているところの数値を変更して枠の角に丸みを持たせていきます。

以下は10pxにした場合の例です。

ここに文字を入力

枠内の背景色の指定

④で枠内の背景色の指定をします。

background: ##ffffff; ・・・④

##ffffffとなっているところweb色見本で好きなコードを見つけて指定してください。

枠内の文字などの開始位置を指定

⑤で枠内の文字などの開始位置を指定します。

text-align: left; ・・・⑤

leftとなっているところを以下の中から変更してあなたのwebデザインに合わせてください。

left → 左寄せ
center → 真ん中
right → 右寄せ

あなたのwebデザインの文字の開始位置と合わせる場合(デフォルト通りにする場合)、この『text-align:left;』自体を削除してください。削除すると、あなたのwebデザインのデフォルト通りの文字開始位置になります。

□この章のPoint
あなたのwebサイトの文字の開始位置がcenter(真ん中)の場合、この『text-align:left;』を消すとブラウザで表示される枠内の文字もcenterになります。

枠内の文字の大きさを指定

⑥で枠内の文字の大きさを指定します。

font-size: 16px;・・・⑥

16pxとなっているところを変更すると、枠内の文字の大きさが変わります。

あなたのwebデザインの文字の大きさと合わせる場合(デフォルト通りにする場合)、『font-size:16px;』を削除してください。削除すると、あなたのwebデザインのデフォルト通りの文字の大きさになります。

大体14px~18pxの間で設定されていることが多いんだ。強調したい場合は少し大きめの文字の方がデザインはキレイになるよ!

まとめ:HTMLの基本

上記の方法により、これから紹介するコードの変更をカスタマイズできるようになったと思います。

以下からあなたのサイトに合った枠線をコピペしてそのまま使うのもありですが、更にwebデザインに懲りたい場合は上記の方法を参考にしてカスタマイズしてください。

【コピペOK】ボックスデザイン(囲み枠)のサンプル

以下に、そのままコピペして使えるボックスデザインのHTMLを載せていきます。

更にデザインに凝りたい場合は前章を参考にカスタマイズしてください。

直線(solid)

【色:ffa500】

ここに文字を入力
<div style="border: 5px solid #ffa500; padding: 10px; border-radius: 0px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

【border-radius: 10px;】

ここに文字を入力
<div style="border: 5px solid #ffa500; padding: 10px; border-radius: 10px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

【色:77cc00】

ここに文字を入力
<div style="border: 5px solid #77cc00; padding: 10px; border-radius: 0px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

【border-radius: 10px;】

ここに文字を入力
<div style="border: 5px solid #77cc00; padding: 10px; border-radius: 10px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

【色:7f1184】

ここに文字を入力
<div style="border: 5px solid #7f1184; padding: 10px; border-radius: 0px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

【border-radius: 10px;】

ここに文字を入力
<div style="border: 5px solid #7f1184; padding: 10px; border-radius: 10px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

【色:00bfff】

ここに文字を入力
<div style="border: 5px solid #00bfff; padding: 10px; border-radius: 0px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

【border-radius: 10px;】

ここに文字を入力
<div style="border: 5px solid #00bfff; padding: 10px; border-radius: 10px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

点線(dotted)

【色:ffa500】

ここに文字を入力
<div style="border: 5px dotted #ffa500; padding: 10px; border-radius: 0px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

【border-radius: 10px;】

ここに文字を入力
<div style="border: 5px dotted #ffa500; padding: 10px; border-radius: 10px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

【色:77cc00】

ここに文字を入力
<div style="border: 5px dotted #77cc00; padding: 10px; border-radius: 0px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

【border-radius: 10px;】

ここに文字を入力
<div style="border: 5px dotted #77cc00; padding: 10px; border-radius: 10px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

【色:7f1184】

ここに文字を入力
<div style="border: 5px dotted #7f1184; padding: 10px; border-radius: 0px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

【border-radius: 10px;】

ここに文字を入力
<div style="border: 5px dotted #7f1184; padding: 10px; border-radius: 10px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

【色:00bfff】

ここに文字を入力
<div style="border: 5px dotted #00bfff; padding: 10px; border-radius: 0px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

【border-radius: 10px;】

ここに文字を入力
<div style="border: 5px dotted #00bfff; padding: 10px; border-radius: 10px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

破線(dashed)

【色:ffa500】

ここに文字を入力
<div style="border: 5px dashed #ffa500; padding: 10px; border-radius: 0px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

【border-radius: 10px;】

ここに文字を入力
<div style="border: 5px dashed #ffa500; padding: 10px; border-radius: 10px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

【色:77cc00】

ここに文字を入力
<div style="border: 5px dashed #77cc00; padding: 10px; border-radius: 0px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

【border-radius: 10px;】

ここに文字を入力
<div style="border: 5px dashed #77cc00; padding: 10px; border-radius: 10px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

【色:7f1184】

ここに文字を入力
<div style="border: 5px dashed #7f1184; padding: 10px; border-radius: 0px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

【border-radius: 10px;】

ここに文字を入力
<div style="border: 5px dashed #7f1184; padding: 10px; border-radius: 10px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

【色:00bfff】

ここに文字を入力
<div style="border: 5px dashed #00bfff; padding: 10px; border-radius: 0px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

【border-radius: 10px;】

ここに文字を入力
<div style="border: 5px dashed #00bfff; padding: 10px; border-radius: 10px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

二重線(double)

【色:ffa500】

ここに文字を入力
<div style="border: 5px double #ffa500; padding: 10px; border-radius: 0px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

【border-radius: 10px;】

ここに文字を入力
<div style="border: 5px double #ffa500; padding: 10px; border-radius: 10px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

【色:77cc00】

ここに文字を入力
<div style="border: 5px double #77cc00; padding: 10px; border-radius: 0px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

【border-radius: 10px;】

ここに文字を入力
<div style="border: 5px double #77cc00; padding: 10px; border-radius: 10px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

【色:7f1184】

ここに文字を入力
<div style="border: 5px double #7f1184; padding: 10px; border-radius: 0px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

【border-radius: 10px;】

ここに文字を入力
<div style="border: 5px double #7f1184; padding: 10px; border-radius: 10px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

【色:00bfff】

ここに文字を入力
<div style="border: 5px double #00bfff; padding: 10px; border-radius: 0px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

【border-radius: 10px;】

ここに文字を入力
<div style="border: 5px double #00bfff; padding: 10px; border-radius: 10px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

立体的にくぼんだ線(groove)

【色:ffa500】

ここに文字を入力
<div style="border: 5px groove #ffa500; padding: 10px; border-radius: 0px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

【border-radius: 10px;】

ここに文字を入力
<div style="border: 5px groove #ffa500; padding: 10px; border-radius: 10px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

【色:77cc00】

ここに文字を入力
<div style="border: 5px groove #77cc00; padding: 10px; border-radius: 0px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

【border-radius: 10px;】

ここに文字を入力
<div style="border: 5px groove #77cc00; padding: 10px; border-radius: 10px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

【色:7f1184】

ここに文字を入力
<div style="border: 5px groove #7f1184; padding: 10px; border-radius: 0px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

【border-radius: 10px;】

ここに文字を入力
<div style="border: 5px groove #7f1184; padding: 10px; border-radius: 10px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

【色:00bfff】

ここに文字を入力
<div style="border: 5px groove #00bfff; padding: 10px; border-radius: 0px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

【border-radius: 10px;】

ここに文字を入力
<div style="border: 5px groove #00bfff; padding: 10px; border-radius: 10px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

立体的に隆起した線(ridge)

【色:ffa500】

ここに文字を入力
<div style="border: 5px ridge #ffa500; padding: 10px; border-radius: 0px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

【border-radius: 10px;】

ここに文字を入力
<div style="border: 5px ridge #ffa500; padding: 10px; border-radius: 10px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

【色:77cc00】

ここに文字を入力
<div style="border: 5px ridge #77cc00; padding: 10px; border-radius: 0px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

【border-radius: 10px;】

ここに文字を入力
<div style="border: 5px ridge #77cc00; padding: 10px; border-radius: 10px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

【色:7f1184】

ここに文字を入力
<div style="border: 5px ridge #7f1184; padding: 10px; border-radius: 0px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

【border-radius: 10px;】

ここに文字を入力
<div style="border: 5px ridge #7f1184; padding: 10px; border-radius: 10px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

【色:00bfff】

ここに文字を入力
<div style="border: 5px ridge #00bfff; padding: 10px; border-radius: 0px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

【border-radius: 10px;】

ここに文字を入力
<div style="border: 5px ridge #00bfff; padding: 10px; border-radius: 10px; background: ##ffffff; text-align: left; font-size: 16px;">ここに文字を入力</div>

Point枠

【色:ffa500】

□Point
ここに文字を入力
<div style="height: 12px;"><span style="background: #ffa500; padding: 6px 10px; border-radius: 5px; color: #ffffff; font-weight: bold; margin-left: 10px; float: left;">□Point</span></div>
<div style="padding: 30px 15px 10px; border-radius: 5px; border: 2px solid #ffa500; text-align: left;"><br />ここに文字を入力</div>

【色:77cc00】

□Point
ここに文字を入力
<div style="height: 12px;"><span style="background: #77cc00; padding: 6px 10px; border-radius: 5px; color: #ffffff; font-weight: bold; margin-left: 10px; float: left;">□Point</span></div>
<div style="padding: 30px 15px 10px; border-radius: 5px; border: 2px solid #77cc00; text-align: left;"><br />ここに文字を入力</div>

【色:7f1184】

□Point
ここに文字を入力
<div style="height: 12px;"><span style="background: #7f1184; padding: 6px 10px; border-radius: 5px; color: #ffffff; font-weight: bold; margin-left: 10px; float: left;">□Point</span></div>
<div style="padding: 30px 15px 10px; border-radius: 5px; border: 2px solid #7f1184; text-align: left;"><br />ここに文字を入力</div>

【色:00bfff】

□Point
ここに文字を入力
<div style="height: 12px;"><span style="background: #00bfff; padding: 6px 10px; border-radius: 5px; color: #ffffff; font-weight: bold; margin-left: 10px; float: left;">□Point</span></div>
<div style="padding: 30px 15px 10px; border-radius: 5px; border: 2px solid #00bfff; text-align: left;"><br />ここに文字を入力</div>

まとめ

今回の記事は、コピペして簡単に使えるHTMLのコードを紹介しました。

HTMLの基本的なことも理解しやすいように心がけて執筆しました。

上記コードはそのまま使うのもありですし、カスタマイズしてあなたのwebサイトに合わせた形にして使っても問題ありません。

参考までに、カテゴリー毎に色分けするとよりキレイにみえて、カテゴリーの一貫性が生まれます。

ちなみに、toronブログでは、カテゴリー毎に
ブログ → オレンジ
心理学 → 緑
torobiz → 紫
副業 → 青
にしているんだ!

この記事をwebデザインにお役立てください。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です