HTMLとCSSを使用してテキストの周囲に色付きの枠線を作成する

HTMLページの枠線は、テキストのセクションに注意を向けたり、他のHTML要素を囲むのに役立ちます。

以下に見られるように、あなたのウェブページ上でHTMLとCSSを使ってどんなテキストのまわりに境界線を作成することができます。 以下の例では、段落()を赤い枠で囲みました。

赤い枠で囲まれたテキストを含む最初の例。

この例にも複数行があります。

上記の例を作成するために、以下のコードを使用しました。

赤い枠で囲まれたテキストを含む最初の例。

この例にも複数行があります。

上記のコードでは、スタイルは境界サイズ(px pixel)、スタイルタイプ、および境界色を定義しています。 枠のスタイルは、枠が画面にどのように表示されるかです。 他の種類の境界線スタイルには、点線、破線、二重、溝、尾根、インセット、アウトセットがあります。 境界線の色は、境界線に使用する色を定義します。 上記の例では、カラーコード#FF0000が使用されました。これは赤のカラーコードです。

CSSを使ってスタイルを定義する

Webページ上の要素の外観は、インラインCSSで定義することもできます。 インラインCSSは、HTMLドキュメントの要素で定義されています。 または、CSSを拡張子.cssの外部ファイルに定義することもできます。 その後、任意のHTMLドキュメントからこのファイルにリンクすることができ、そのドキュメント内の要素はCSSスタイルにアクセスできるようになります。 たとえば、次のCSSコードを使用して、 "borderexample"という新しいクラスを作成し、他のHTMLタグに適用することができます。

.borderexample {border-style:solid; ボーダーカラー:#287EC7。 }

上記のコードを使用して、この段落スタイルをHTML段落に適用する場合は、次の例のように入力します。

これはCSSを使って作成されたボーダーの例です。