【HTML サンプルコード付き】記事内に枠を作ってその中に文字を書く | style属性とborderプロパティ

2021年9月4日

HTMLで記事やブログを書くときに、枠線を使ってボックスを作成し、その中に文字を書いたり画像を載せたりして見栄えを整えたいときってありませんか？

意外と簡単にできるので紹介します！

サンプルコードも載せてあるのでコピーして使ってみてください。

枠線を作って見栄えをよくする

divタグでstyle=borderを指定して枠を作る

【Web表示】

【サンプルコード】

<div style="border: 1px solid rgb(0, 0, 255); padding-left: 10px; width:80%">
<p>divタグの中で文字を書けばOK！</p>
</div>

ちょこっと解説

枠線を書きたい箇所からdivタグを追加し、style属性のborderプロパティを指定するだけで、簡単に枠を作ることができます。

あとは、divタグ内で文字を書いたり、画像を載せたり普段と同じように記事を書くだけです。

あえてポイントをあげるなら、最後</div>でタグを終了し枠の終わりをしっかりと定義してあげるくらいでしょうか。これがないと表示崩れの原因になりますからね！

ここからは、一緒に追加しているプロパティの簡単な解説です。

border: 1px solid rgb(0, 0, 255);

枠線の根幹をなす箇所ですね。

• border: ： 「border」と指定することで、四辺を同時に指定することができます。「border-top」や「border-left」などと指定すると該当の箇所スタイルのみを指定することができます。
• 1px ： 枠線の幅を指定しています。数字を大きくすると線が太くなります。
• solid ： 枠線を一本線で表示します。double (二本線)、dotted (点線) など指定を変えると線の種類が変化します。
• rgb(0, 0, 255) ： 枠線の色をRGBで指定しています。ここの数値を0～255の間で変えると枠線の色も変わります。

☆「border: 4px double rgb(255, 0, 0);」 で指定した場合はこんな感じになります。

【サンプルコード】

<div style="border: 4px double rgb(255, 0, 0); padding-left: 10px; width:80%">
<p>divタグの中で文字を書けばOK！</p>
</div>

padding-left: 10px;

左の枠線の内側に10px分の余白を追加しています。

これにより、文字と枠線がくっつくのを防ぐことができます。

☆「 padding-left: 10px; 」あり

☆「 padding-left: 10px; 」なし

width:80%

枠の横幅のサイズを指定しています。記事全体の横幅を100%にしたとき、80%分の幅で枠を作成します。

サイズを変えた際の見え方の違いはこんな感じです。

☆「 width:100% 」で指定

☆「 width:80% 」で指定

☆「 width:50% 」で指定

それっぽい見出しを付けて見栄えを整える

【Web表示】

【サンプルコード】

<div style="background-color: rgb(0, 0, 255); border: 1px solid rgb(0, 0, 255); padding-left: 10px; width:80%"><font style="color:#ffffff; font-weight:bold;">■それっぽい見出し！■</font></div>

<div style="border: 1px solid rgb(0, 0, 255); padding-left: 10px; width:80%">
<p>divタグの中で文字を書けばOK！</p>
</div>

ちょこっと解説

基本的には、最初に紹介したコードと同じ形で枠線を用意しています。追加しているのは下記の2点になります。

1. background-color: rgb(0, 0, 255);
2. <font>タグ

それぞれ簡単に解説すると下記のようになります。

background-color: rgb(0, 0, 255);

枠内に背景色を指定しています。枠線と同じ色にすることで、リストのヘッダー（タイトル行）のように見せることができ、見出しっぽくすることができます。

<font>タグ

見出しに見せたい & 背景色が青一色のエリアに書く文字になるので、白文字の太字になるようにスタイルを指定しています。

文字色指定の仕方をここでは16進数で行っています。

枠内にリストを作って目次を作成する

過去に紹介したリストを作成する記事の内容と組み合わせると簡単にオリジナル目次のような表現を作ることも可能になります。

ぜひいろいろ試してみてください！

【HTML】liにulやolを入れ子にしてリストを階層表示する ※そのまま使えるサンプルコード付き