CSS - Border Block: A Comprehensive Guide for Beginners

こんにちは、未来のCSS魔法使いの皆さん！今日は、CSSのborder-blockの世界に楽しい旅に出かけます。プログラミングが初めてであっても心配しないでください。あなたの親切なガイドとして、私はこのトピックをステップバイステップで探求します。お気に入りの飲み物を手に取り、一緒に飛び込んでみましょう！

CSS - Border Block

What is CSS Border-Block?

まず、border-blockとは何についているのかを理解しましょう。あなたが美しい家（あなたのウェブページ）を建てて、窓の周りに豪華なトリムを加えたいと考えたとします。そのトリムがborder-blockプロパティです。ただし、要素のブロックエッジに対してです。

Possible Values

次に、border-blockで使用できる異なる値を見てみましょう。これは、窓のトリムのスタイル、色、厚みを選ぶのに似ています。以下の表でオプションを要約します：

値	説明
border-block-width	ボーダーの幅を設定します
border-block-style	ボーダーのスタイル（solid、dashedなど）を設定します
border-block-color	ボーダーの色を設定します

Constituent Properties

border-blockは実際には省略形のプロパティです。これは、いくつかのツールを一つにまとめたスイスアーミーナイフのようです。以下に分解します：

border-block-start
border-block-end

それぞれはさらに以下のように分割できます：

border-block-start-width
border-block-start-style
border-block-start-color
border-block-end-width
border-block-end-style
border-block-end-color

Syntax

次に、CSSで実際にどのように書くかを見てみましょう。基本的な構文は以下の通りです：

border-block: <'border-width'> || <'border-style'> || <'color'>;

これは見た目よりシンプルです！以下の例で分解します：

.my-element {
border-block: 2px solid blue;
}

この例では：

2px は幅です
solid はスタイルです
blue は色です

Applies to

border-blockプロパティはどこで使用できるのか気になるかもしれません。border-blockはすべての要素に適用されます。これは、CSSボーダーのユニバーサルリモコンのようです！

CSS border-block - Basic Example

簡単な例でborder-blockを実行してみましょう：

<div class="my-box">
Hello, I'm a box with a border-block!
</div>

.my-box {
width: 200px;
padding: 20px;
background-color: #f0f0f0;
border-block: 5px dashed #ff6347;
}

この例では、幅200pxのボックスと少しのパディングを作成しています。border-blockプロパティは、トマト色（#ff6347）の5px幅の破線ボーダーをボックスの上と下に追加しています。

CSS border-block - writing-mode Property

ここで非常に興味深い部分に移ります！border-blockプロパティは、ドキュメントのwriting-modeを尊重します。これは、環境に合わせて変化するカ멲ーンのようです。

以下の例を見てみましょう：

<div class="box horizontal">Horizontal writing</div>
<div class="box vertical">Vertical writing</div>

.box {
width: 200px;
height: 200px;
margin: 20px;
background-color: #e0e0e0;
border-block: 5px solid #4169e1;
}

.vertical {
writing-mode: vertical-rl;
}

この例では、2つのボックスがあります。最初のボックスはデフォルトの水平書き方を使用しており、2番目のボックスは垂直書き方を使用しています。border-blockプロパティは以下のように調整されます：

水平ボックスでは、上と下に適用されます。
垂直ボックスでは、左と右に適用されます。

この柔軟性により、border-blockは異なる書き方や向きのレイアウトを作成するのに非常に便利です。

Related Properties

最後に、border-blockの兄弟プロパティを見てみましょう：

border-inline: border-blockと似ていますが、インライン方向用です。
border-block-start: ブロックの開始エッジに適用されます。
border-block-end: ブロックの終了エッジに適用されます。

以下の表でこれらのプロパティを要約します：

プロパティ	説明
border-block	border-block-startとborder-block-endの省略形
border-inline	border-inline-startとborder-inline-endの省略形
border-block-start	ブロックの開始エッジに適用されます
border-block-end	ブロックの終了エッジに適用されます

Conclusion

そして、ここまでが、CSS border-blockの旅です。基本的な構文からwriting-modeのスーパーパワーまでを探求しました。CSSをマスターする鍵は練習です。ですので、プロジェクトでこれらのプロパティを試してみてください。間違えても構いません。それが私たちが学び成長する方法です！

私の古い教授がよく言っていたように、「CSSは料理みたいなもの。最初はいくつかのクッキーを焦がすかもしれませんが、すぐに美しい、反応性のあるウェブサイトを焼けるようになります！」 codingを続け、学び続け、そして、最も重要なのは、楽しむことです！

未来のCSSマスター、ハッピーコーディング！

Credits: Image by storyset