段落を設定する(枠線・ボーダー)

段落を設定する(枠線・ボーダー)の表示例

文章を書くときの段落で、周りに枠線をつけた段落にしたい場合、スタイルシートで枠線を設定します。

border: 1px solid #333;

記述は順に、「枠線の太さ」、「枠線の種類」、「枠線の色」と記述します。

枠線の種類

段落を設定する(枠線・ボーダー)

none
枠線を表示しない。テーブルの枠線などと重なった場合は他の値が優先される。
hidden
枠線を表示しない。テーブルの枠線などと重なった場合もこの値が優先される。
solid
枠線を実線で表示する。
dotted
枠線を点線で表示する。
dashed
枠線を破線で表示する。
double
枠線を2重線で表示する。
groove
枠線をくぼんだ様に見える線で表示する。
ridge
枠線を浮き上がったように見える線で表示する。
inset
枠線を内側がへこんだように見える線で表示する。
outset
枠線を内側が浮き上がったように見える線で表示する。

HTML/XHTML

<body> ~ </body>内に以下を記述します。(鉄道唱歌東海道編より)

<p>汽笛一声新橋を はや我汽車は離れたり 愛宕の山に入りのこる 月を旅路の友として</p>
<p>右は高輪泉岳寺 四十七士の墓どころ 雪は消えても消えのこる 名は千載の後までの</p>
<p>窓より近く品川の 台場も見えて波白く 海のあなたにうすがすむ 山は上総か房州か</p>
<p>梅に名を得し大森の すぐれば早も川崎の 大師河原は程ちかし いそげや電気の道すぐに</p>
<p>鶴見神奈川あとにして ゆけば横浜ステーション 湊見れば百船の 煙は空をこがすまで</p>
<p>横須賀ゆきは乗換と 呼ばれておるる大船の つぎは鎌倉鶴ヶ岡 源氏の古跡や訪ね見ん</p>
<p>八幡宮の石段に 立てる一木の大鴨脚樹 別当公暁のかくれしと 歴史にあるは此陰よ</p>
<p>ここに開きし頼朝が 幕府のあとは何かたぞ 松風さむく日は暮れて こたえぬ石碑は苔あおし</p>

CSS記述例

<head> ~ </head>内に以下を記述します。

<style type="text/css">  
<!--
p { padding: 10px; }
p.border1 { border: 1px solid #333; }
p.border2 { border: 1px dotted #333; }
p.border3 { border: 1px dashed #333; }
p.border4 { border: 7px double #CCC; }
p.border5 { border: 7px groove #CCC; }
p.border6 { border: 7px ridge #CCC; }
p.border7 { border: 7px inset #CCC; }
p.border8 { border: 7px outset #CCC; }
-->  
</style>

段落を設定する(枠線・ボーダー)の表示例

はてなブックマーク数 このエントリーをはてなブックマークに追加 Yahoo!ブックマークに登録