CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのborder-left-widthプロパティで左境界線の幅を設定する方法

CSSで要素の左側の境界線の幅を指定するには、border-left-widthプロパティを使用します。このプロパティを使うことで、左境界線だけの太さを個別に制御できます。

なお、境界線の幅を正しく表示するには、あらかじめborder-styleプロパティで境界線のスタイル（solid、dashedなど）を設定しておく必要があります。スタイルが未指定の場合、初期値が「none」のため、幅を設定しても境界線は表示されませんので注意しましょう。

使用できる値

  • thin / medium / thick … 細い・普通・太いというキーワードで指定
  • px、em などの長さの値 … 数値で正確に幅を指定（例：10px）

コード例

以下は、段落要素の左境界線に破線スタイルを適用し、幅を10pxに設定するサンプルコードです。

<!DOCTYPE html>
<html>
   <head>
      <style>
         p {
            border-style: dashed;
            border-left-width: 10px;
         }
      </style>
   </head>
   <body>
      <p>これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。</p>
   </body>
</html>

実行結果

上記のコードを実行すると、段落の左側だけに10pxの太さを持つ破線の境界線が表示されます。他の3辺は通常の細さのまま維持されるため、強調したい箇所を目立たせるデザインなどにも活用できます。

  1. CSSの::first-line疑似要素とは？使い方とサンプルコードをわかりやすく解説

    CSSの::first-line疑似要素は、要素内のコンテンツの「最初の1行」だけにスタイルを適用するためのセレクターです。段落の冒頭部分を目立たせたい場合などに活用できます。ただし注意点として、テキストを含む要素の幅が固定されていない場合、最初の行の長さはウィンドウサイズによって変化します。そのため、::first-lineで装飾される範囲も画面幅に応じて変わるという点を理解しておく必要があります。それでは、CSSの::first-line疑似要素の具体的な使い方を、サンプルコードとともに見ていきましょう。例1：最初の行に背景色と文字色を適用する<!DOCTYPE html> &

  2. CSSの@mediaルールとは？メディアクエリの基本と使い方を実例付きで解説

    CSSの@mediaルールは、1つのスタイルシート内で、印刷・画面・すべてなど、異なるメディアタイプに応じて異なるスタイルを指定するために使用されます。通常はカンマ区切りのメディアタイプのリストと、対象メディア用のスタイルルールを含むCSS宣言ブロックが続きます。構文（Syntax）@mediaルールの基本的な構文は以下の通りです。@media not | only mediatype and (expressions) { CSS-Code; }「not」や「only」は省略可能なキーワードで、「expressions」には画面幅などの条件（メディア特性）を指定します。これにより、デ