HTMLで作成した要素の周りに枠線を表示させたいときがありますよね。

「設定したけれどうまくいかない」「枠線でもっとおしゃれなデザインを作りたい」

そんな悩みを抱えている方もいるかと思います。

今回は、HTMLの要素を枠線で囲いたいと考えている方へ

以上の項目に沿って、解説していきますね。

この記事を読めば、HTML内の要素を思い通りの枠線で囲う方法が分かるようになりますよ。

ぜひ最後まで読んでくださいね！

HTML・CSSで枠線を作るには

HTMLで作成した要素に枠線を追加するには、どう指定すれば良いのでしょうか？

CSSのborderプロパティを使うと、枠線を作成できます。

borderは、「枠線のスタイルの種類」、「太さ」、「色」をまとめて指定できるプロパティです。

実際には、以下のように記述します。

<!-- HTMLのみの場合 -->
<div style="border: solid 3px #333;">

/* CSSで指定する場合 */
div {
  border: solid 3px #333;
}

左からスタイル、太さ、色の指定をしています。値の順序は変えても問題ありません。

これらは、以下のプロパティを使って個別に指定することも可能です。

各プロパティの値について解説していきましょう。

border-styleプロパティ

border-styleは、枠線のスタイルを指定するプロパティです。

値は、以下の10個ですね。

none（初期値）

枠線は表示されません。border-styleを指定していない場合は、この初期値が適用されます。

hidden

noneと同様、枠線は表示されません。

noneとhiddenの違いは、表のセルなどで隣接する枠線とどちらを優先するかにあります。

表のセルで「border-collapse:collapse」を指定している場合、隣接する枠線は重なり合います。

noneのときには、noneの優先度が低く、隣接するセルの枠線の指定が優先されます。

hiddenのときには、優先度が最も高く、隣接するセルの枠線が指定されていたとしても表示されません。

dotted

点線が表示されます。

dashed

破線が表示されます。

solid

1本の実線が表示されます。

double

2本の実線が表示されます。

groove

立体的な枠線で、くぼんだように表示されます。

ridge

立体的な枠線で、浮き上がったように表示されます。

inset

上と左の色が濃く、枠線で囲まれた内側全体がくぼんだように表示されます。

outset

右と下の色が濃く、枠線で囲まれた内側全体が浮き上がったように表示されます。

border-widthプロパティ

border-widthは枠線の太さを指定するプロパティです。

値は、pxやrem、%などの数値で指定する方法と、キーワードで指定する方法があります。

キーワードは以下の3つです。

キーワード指定の場合、実際に表示されるサイズは決定しておらず、ブラウザによって異なります。

border-colorプロパティ

border-colorは、枠線の色を指定するプロパティです。

値の指定方法は以下の4つです。

カラーネーム

redやwhiteなど、定義された色の名前で指定する方法です。

/* カラーネームでの指定方法 */
border-color: pink;
border-color: green;

色の名前で指定できるので、いくつか覚えておけば調べる手間を省くことができます。

「普段はカラーコードで指定しているけれど、テスト段階で仮の色をつけたい」というようなときに便利な指定です。

カラーコード

「#ffc0cb」のように、6桁の16進数のコードで色を指定します。2桁ごとに赤・緑・青の色の濃さを意味します。

/* カラーコードでの指定方法 */
border-color: #ff0000;   /* 赤 */
border-color: #00ff00;   /* 緑 */
border-color: #0000ff;   /* 青 */
border-color: #000000;   /* 黒 */
border-color: #ffffff;   /* 白 */

最初にハッシュタグをつけるのを忘れないようにしましょう。

カラーコードを調べるときには、色見本サイトなどがネット上に多くありますので活用してみてくださいね。

RGB

「rgb(255, 101, 69)」などのように、3つの数値で指定します。それぞれ赤・緑・青の色の濃さを意味します。

/* カラーコードでの指定方法 */
border-color: rgb(255,0,0);   /* 赤 */
border-color: rgb(0,255,0);   /* 緑 */
border-color: rgb(0,0,255);   /* 青 */
border-color: rgb(0,0,0);   /* 黒 */
border-color: rgb(255,255,255);   /* 白 */

こちらも色見本サイトで使いたい色を探して、コードを調べて使いますね。

RGBA

「rgba(255,255,255,0.8)」というように、RGBの指定に加えて、alpha（透明度）を指定する方法です。

透明度は0~1の間で記述でき、0を指定すると完全に透明になります。

上下左右の枠線を個別で指定する方法

borderの値は、上下左右個別に指定することができます。

/* 上下左右の枠線を個別に指定 */
border-top: solid 1px #008080;  /* 上 */
border-bottom: solid 2px #d2b48c;  /* 下 */
border-left: solid 3px #ff6347;  /* 左 */
border-right: solid 4px #4169e1;  /* 右 */

「border-style」、「border-width」、「border-color」を上下左右個別に指定したい場合には、以下のように記述します。

border-left-style: dashed;  /* 左の枠線のスタイル */
border-right-width: 3px;  /* 右の枠線の太さ */
border-bottom-color: #ccc;  /* 下の枠線の色 */

また、値を複数書くことで、まとめて個別指定が可能です。

border-style: dashed solid;  /* [上下]、[左右]を指定 */
border-style: dotted groove double;  /* [上]、[左右]、[下]を指定 */
border-style: solid dotted groove ridge;  /* [上]、[右]、[下]、[左]を指定 */

「border-width」と「border-color」も同様に指定できます。

ぜひ試してみてください。

枠線デザインのサンプル

HTML・CSSで枠線を作成する方法が分かっていただけたでしょうか？

ここからは、Webサイトで役立ちそうな枠線を使ったデザインを紹介します。

HTMLとCSSのみで設定ができますので、コピーして使ってみてください。

サイトに合うようにアレンジしてみても良いですね。

付箋風

見出しなどでよく見かける、シンプルな付箋風のデザインです。

<div class="box01">
  <p>付箋風のデザイン</p>
</div>

CSSは以下のように記述します。

.box01 {
  padding: 10px 12px;
  margin: 10px 0;
  color: #333;
  background: #c6e4ff;
  border-left: solid 10px #6eb7ff;
}
p {
  margin: 0; 
  padding: 0;
  line-height: 1.6;
}

左側にのみ枠線を表示しています。

サイズや色などを変えて色々試してみてください。

左側の枠線を上にして、影をつけてみたパターンも紹介します。

.box02 {
  padding: 10px 12px;
  margin: 10px 0;
  color: #333;
  background: #c6e4ff;
  border-top: solid 10px #6eb7ff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
p {
  margin: 0; 
  padding: 0;
  line-height: 1.6;
}

box-shadowプロパティで影をつけています。

最初の2つの数値はX方向とY方向の指定、3つ目はぼかしのサイズを指定しています。

こちらは、文章を目立たせたいときなどに使用できますね。

立体的なボード風

角を丸くして下に枠線をつけることで、厚みがあるように見せるデザインです。

<div class="box03">
  <p>厚みのあるボード風のデザインです。目立たせたい文章や重要な場所に使えますね。</p>
</div>

CSSは以下のように記述します。

.box03{
  width: 350px;
  padding: 10px 12px;
  margin: 10px 0;
  color: #d70035;
  background: #ffe5f2;
  border-bottom: solid 6px #ffb6c1;
  border-radius: 10px;
}
p {
  margin: 0; 
  padding: 0;
  line-height: 1.6;
}

border-radiusで角を丸くしています。下線だけを表示することで、浮き出てみえますね。

こちらも影をつければ、より目立つボックスになります。

ただし、ボックスが小さいとクリックするボタンに見えてしまうので、注意した方がよさそうです。

もちろん、ボタンのデザインにも使えますよ。

ステッチ風

布に刺繍糸でステッチするように枠線を表示させるデザインです。

可愛らしいデザインのサイトに使えますね。

<div class="box04">
  <p>影をぼかさずに利用することで、枠線をステッチ風にすることができます。</p>
</div>

CSSは以下のように記述します。

.box04{
  width: 350px;
  padding: 10px 12px;
  margin: 20px 10px;
  color: #fff;
  background: #ff8c66;
  box-shadow: 0px 0px 0px 8px #ff8c66;
  border: dashed 3px #fff;
  border-radius: 7px;
}
p {
  margin: 0; 
  padding: 0;
  line-height: 1.6;
}

影を作るbox-shadowの3つ目までは0を指定し、4つ目に8pxを指定しています。

前述のように、1つ目と2つ目は位置を示し、3つ目はぼかしのサイズを指定しています。

それらを0にし、影の幅を指定する4つ目にのみ数値を指定することで、枠線の外側に幅のある枠が新しくできます。

サイトのデザインに合わせて、色や外側の枠の幅を変えるなどしてアレンジしてみてくださいね。

吹き出し風

枠線を使って吹き出し風のボックスを作ります。

キャラクターのアイコンを横に置いて、会話させているサイトをよく見かけますね。

<div class="box05">
  <p>枠線の3辺を透明にすることで、吹き出しのしっぽを表現できます。</p>
</div>

CSSは以下のように記述します。

.box05{
  position: relative;
  width: 350px;
  padding: 10px 12px;
  margin: 10px;
  color: #333;
  background: #c7f2ff;
  border-radius: 10px;
  border: 2px solid #00c4ff;
}
.box05::after{
  position: absolute;
  content:"";
  top: calc(100% + 2px);
  left: 35px;
  border: 10px solid transparent;
  border-top: 10px solid #00c4ff;
  width: 0;
  height: 0;
}
p {
  margin: 0; 
  padding: 0;
  line-height: 1.6;
}

疑似要素の「::after」を使って、吹き出しのしっぽ部分を作成しています。

3辺を透明にして、上の枠線のみに色を付けています。

「position: absolute」を使って、位置を調整できるようにしています。

「top: calc(100% + 2px)」では、基準位置から高さ100%の位置に、枠線の幅の2px分をプラスしています。

positionで位置を指定する方法は、コーディングでよく使うので、気になる方は調べてみてくださいね。

カギカッコ

ボックス全体をカギカッコで覆うデザインです。

言葉を強調させたいときなどに使えますね。

<div class="box06">
  <p>疑似要素の2辺に枠線を作ることで、カギカッコを表現しています。</p>
</div>

CSSは以下のように記述します。

.box06 {
  position: relative;
  width: 350px;
  padding: 15px 20px;
  margin: 10px;
  color: #333;
}
.box06::before,.box06:after{
  content:"";
  display: inline-block;
  position: absolute;
  width: 15px;
  height: 20px;    
}
.box06::before{
  border-left: solid 3px #555;
  border-top: solid 3px #555;
  top:0;
  left: 0;
}
.box06::after{
  border-right: solid 3px #555;
  border-bottom: solid 3px #555;
  bottom:0;
  right: 0;
}
p {
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

疑似要素の「::before」「::after」を使って、カギカッコの部分を作っています。

左上のカギカッコは、左と上にのみ枠線があり、右下のカギカッコには、右と下にのみ枠線があります。

カギカッコの色や太さを変えて、より目立たせても良いですね。

まとめ：枠線を使いこなしておしゃれなサイトを作ろう

今回は、HTML・CSSで枠線を使う方法について解説してきました。

デザインに使えそうなサンプルコードもいくつか紹介しましたね。

枠線自体はシンプルですが、アイディア次第で色々な形が作れるのが面白いですよね。

おしゃれなデザインを作る際に、今回の記事が参考になれば幸いです。

＼プログラミングスクールを比較／