Home > TagScript > html、css、Java > html5css3 > 枠線

html, cssで表現する囲み枠

新規作成日 2018-10-15
最終更新日

多人数による共同制作のサイトであれば、Bootstrapに代表されるcssフレームワークを使ったほうがいいと思うのですが、個人でコツコツ作るサイトであれば、Bootstrapなどの大型フレームワークは、学習コストが大きいので、使わない方向を考えてしまいます。

個人で作成する場合は、使用するデザインも少ないので、自分で使用するhtmlとcssパターンを1つ1つその都度作成し、使っていくのもよいかと思います。

使いたいデザインの1つに、囲み枠があります。ポイント、参照、注意などを色を変えた枠の中に書き込むデザインです。タイトル部分と色のついた枠だけの構成なので、html, cssで表現する構造としては、単純な部類に入ります。

実際に作ってみるとわかると思いますが、素敵なデザインで作るのは意外に難しく、野暮ったいデザインになってしまいます。

ここは、きっちり作成する方法とデザインを整理して考えるところです。

ボックスモデル

borderを使用するときは、marginとpadding、borderの関係を理解するために、ボックスモデルについて理解しておくとわかりやすいです。

枠を設定する

枠を設定するために、div要素やspan要素を使用します。

  • div要素 ボックスで囲むときに使用する
  • span要素 文中の文字を枠で囲みたいときに使用する

実際に使用する際には、数種類のパターンだけを繰り返し使うことになると思います。そこで、cssファイルに、クラスを指定したスタイルを設定しておき、要素で、クラスを指定してスタイルを指定すると便利です。

枠線の線種を選ぶ

まず、枠線で、どんな線種が使えるか確認します。

線種

  • 実線 solid
    border-bottom-style:solid;
  • 点線 dotted
    border-bottom-style:dotted;
  • 破線 dashed
    border-bottom-style:dashed;
  • 二重線 double
    border-bottom-style:double;
  • 立体的に窪んだ線 groove
    border-bottom-style:groove;
  • 立体的に隆起した線 ridge
    border-bottom-style:ridge;
  • 線無し none
    border-bottom-style:none;

スタイルを指定する枠線の位置

枠線は、全体だけでなく、上下左右それぞれの枠線のスタイルをそれぞれ指定する事ができます。

スペース区切りで、スタイルを並べて指定することで、特定の位置のスタイルが指定できます。このスペース区切りでスタイルを指定する方法は、線種だけでなく、色や太さなど、他のスタイルを指定する際にも利用できます。

  • 全体
    border-style:solid;
  • 上、右、下、左
    border-style:solid dotted dashed double;
  • 上、左右、下
    border-style:solid dotted dashed;
  • 上下、左右
    border-style:solid dotted

上下左右それぞれの位置のスタイルを指定することができます。

  • border-top-style:double;
  • border-bottom-style:double;
  • border-left-style:double;
  • border-right-style:double;

枠線の色を指定する

枠線の色は、好きな色を指定することができます。

指定する色は、colorプロパティ、background-colorプロパティなどと同じく、色名や10進数、16進数によるRGBカラーで指定します。

  • 枠線を青に指定する
    border-style:solid;
    border-color:blue; 

枠線の太さを指定する

枠線の太さは、border-widthプロパティで指定します。

  • 枠線の太さを10pxにする
    border-style:solid;
    border-color:blue;
    border-width:10px;
長さの単位
単位 単位
em font-sizeプロパティに指定されているサイズに対する割合
ex font-sizeプロパティに指定されている小文字xに対するサイズに対する割合
px ピクセル数
in インチ(1インチは、約2.56cm)
cm センチメートル
mm ミリメートル
pt ポイント(1ptは、1/72インチ)
pc パイカ(1pcは、12pt=1/6インチ)

枠線のスタイル、色、太さをまとめて指定する

枠線のスタイル、色、太さは、borderプロパティを使用して、スタイル、色、太さの順序で、まとめて指定することができます。

  • 枠線のスタイル、色、太さを指定する
    border: double Green 10px;

枠の角を丸くする

border-radius に、半径の値を指定することで、枠の角を丸くすることができます。

  • 枠の角を丸くする
    border: double Orange 10px;
    border-radius: 20px;

位置合わせ

枠線の外側のコンテンツとの距離は、marginプロパティ、枠線と中のコンテンツとの距離は、paddingプロパティで調整します。

横方向の文字の配置

インライン要素のテキストを、枠線内で左右の中央に配置するには、text-alignプロパティで指定します。

  • テキストを枠の中央に配置する
    border: solid Red;
    text-align: center;
text-alignプロパティのパラメータ
意味
left(初期値) 左揃え
center 中央揃え
right 右揃え
justify 均等割付(両端揃え)

縦方向の文字の配置

インライン要素のテキストを、枠線内で上下の中央に配置するには、vertical-alignプロパティで指定します。

「vertical-align」が使えるのはインライン要素・テーブルセルのどちらかなので、それ以外の要素の場合、上下中央寄せにしたいテキストを内包する要素にdisplay: table-cell;を指定します。

  • テキストを枠の上下の中央に配置する
    border: solid Red;
    text-align: center; 
    display: table-cell;
    vertical-align: middle;
vertical-alignプロパティのパラメータ
意味
baseline(初期値) 親要素のフォントのベースライン
bottom 下部に配置
middle 中央に配置
sub 下付き文字の位置
super 上付き文字の位置
text-bottom 下端を親要素のテキストの下端に合わせる
text-top 上端を親要素のテキストの上端に合わせる
top 上部に配置

参考

文字の色と背景色を設定する

htmlとcssでは、文字の色と背景色を設定する方法は、共通です。

文字色を変更するには、colorプロパティを使います。背景色は、backgraund-colorプロパティを使います。

  • 赤の背景に白抜き文字にします
    border: solid Red;
    text-align: center; 
    display: table-cell;
    vertical-align: middle;
    color:aliceblue;
    background-color:red;

タイトル付きの囲み枠

スタイルの構造は、複雑です。そのまま使えるコードが提供されているので、活用しましょう。

タイトル
枠線で囲まれる本文
<div style="height:12px;">
<span style="background:#ff9933; 
color:#ffffff; 
padding: 0 5px;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;">タイトル</span>
</div>

<div style="border:2px solid #ff9933;
padding:20px 12px 10px;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;">
枠線で囲まれる本文
</div>
タイトル
枠線で囲まれる本文
<div style="height:12px;">
<span style="margin-left:8px; 
padding:6px 5px; 
background:white; 
font-weight:bold;border-radius:5px;">タイトル</span>
</div>

<div style="border:2px solid #000066; 
padding:12px 12px 10px; 
font-size:1em;border-radius:5px;">
枠線で囲まれる本文
</div>

参考:テキスト(文章)をHTMLタグだけで囲む方法!おしゃれなボックスを作ろう!

見出しタイトル
囲みの中の文章
<div style="padding: 5px 10px; 
color: #ffffff; background: #ffc0cb; 
border-radius: 10px 10px 0 0;">見出しタイトル</div>

<div style="padding: 10px; 
border: 1px solid #ffc0cb; 
background: #ffffff; 
border-radius: 0 0 10px 10px;">囲みの中の文章</div>

参考:WordPressブログで文字を枠線で囲む方法!見出しやデザイン編集方法も