以前、text-decorationを使って文字にラインを引きましたが、これだと文字の上下だけにしかラインが引けない上に装飾パターンも全く選べないただラインを引く事しかできませんでしたが、borderプロパティを使うことで、より自由なデザインが可能になります。

文字を罫線で囲むには、テキストで使っている要素に対してborder関連のプロパティを使います。

.border-text {
      border: 1px solid #f00;
      padding: 2px;
}

<p>borderスタイルを使って文字を<span class=”.border-text”>罫線</span>で囲む</p>

borderスタイルを使って文字を罫線で囲む

こんな感じです。

余談ですが、borderの指定方法はいろいろあります。

例えば、上記で使ったようなborder: 「太さ」「線のスタイル」「色」;っと指定する場合。
これは、上下左右同じ「太さ」「線のスタイル」「色」になります。

これが、上の線だけ違う色にしたいということになると、

.border {
      border-top: 1px dotted #00f;
      border-right: 1px dotted #f00;
      border-bottom: 1px dotted #f00;
      border-left: 1px dotted #f00;
}

っというような書き方をすれば、上だけ線の色が青になります。

更に違う方法で違うスタイルを書いてみましょう。

.border {
      border-width: 1px 1px 3px 5px;
      border-style: dashed dotted solid double;
      border-color: #f00 #f00 #f60 #ff0;
}

こうすると
上が、１ピクセルのダッシュ線の赤
右が、１ピクセルのドット線の青
下が、３ピクセルのソリッドのオレンジ
左が、５ピクセルの二重線の黄色
になります。

これはボーダーの「太さ」、「線のスタイル」、「色」の指定をtopを出発点として時計回りに指定する方法です。
とはいってもこんなでたらめなボーダーはないような気もしますが、覚えておくと便利に使える時があるかも？しれません。

« 前の記事

次の記事 »