使いたいデザインの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;
| 値 | 意味 |
|---|---|
| left(初期値) | 左揃え |
| center | 中央揃え |
| right | 右揃え |
| justify | 均等割付（両端揃え） |
縦方向の文字の配置
インライン要素のテキストを、枠線内で上下の中央に配置するには、vertical-alignプロパティで指定します。
「vertical-align」が使えるのはインライン要素・テーブルセルのどちらかなので、それ以外の要素の場合、上下中央寄せにしたいテキストを内包する要素にdisplay: table-cell;を指定します。
- テキストを枠の上下の中央に配置する
border: solid Red; text-align: center; display: table-cell; vertical-align: middle;
| 値 | 意味 |
|---|---|
| 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>
