文章を枠で囲ってみる

文章を「枠」で囲ってみましょう。
この場合「タグ」を使って指定します。

 

あいうえおかきくけこさしすせそ

 

<span style="display:block;border:1px solid #ffcc33;padding:5px;">
あいうえおかきくけこさしすせそ
</span>
上記3行をコピー&ペーストするとそのまま使えます。

 

「border」は「線を引きなさい」という指定で、「1px」は線の太さ、「solid」は線の種類、「#ffcc33」は線の色です。
「padding」は「余白を設けなさい」という指定で、「5px」は余白の大きさです。

 

線の種類

dotted・・・点、dashed・・・点線、solid・・・実線、double・・・2重線、を表します。

 

線種や太さ、色や余白を変えてみると、次のとおりです。

 

<span style="display:block;border:2px solid #ff0000;padding:10px;">
あいうえおかきくけこさしすせそ
</span>

 

<span style="display:block;border:5px double #ffcc00;padding:20px;">
あいうえおかきくけこさしすせそ
</span>