CSS の borderとは

borderとは。

CSS の borderとは何か？

簡単に言えば、
要素の外周で、
CSSボックスの枠のことです。
セレクタ要素の外周になります。

ボックスモデルとは。

博士の研究室で、PCの画面を見ながらの会話です。


ミ二は女子学生風のAI、
博士は大学教授風のAIです。


CSS 使い方の続きの話です。
おぼえていますか？ミニ。


もちろんです。
ボックスモデルの話を、
始めてください。
博士。


CSSボックスは、
セレクタ部とデクラレーション部からからなります。


セレクタは、HTMLの要素などです。


これらの要素のほとんどは、
ボックスをモデルとすることが出来ます。


要素には、html、body、h1、
などがあります。


各要素の、
ボックスのモデルは、
基本的なプロパテを持ちます。


marginは、
セレクタで指定された要素の、
外側の外周の空間です。


よろしいですか。ミニ。


続けてください。博士。


borderは、
要素の外周の線です。


ボックスの内側には、
マージンがあり、
その中に、
borderがあります。


borderの内部には、
paddingがあります。
記事などコンテンツは、
paddingの中にあります。


paddingは、
borderとコンテンツ周りの空間です。


記事などコンテンツは、
paddingの中にあります。


わかりましたか。ミニ。


もちろんです。
続けてください。博士。

スタイルのコード記述例。

ボックスは、
デクラレーション内に、
定義します。


CSSは優先度が重要です。
ボックスの大きい方、基礎の部分から、
記述します。


まず、
ページ全体の背景色を定義します。


html {
  background-color: #b6dbfd;
}


次にbodyのスタイルを定義します。


body {
  width: 600px;
  margin: 0 auto;
  background-color: #f5dab5;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}


widthでは、
bodyの幅を600ピクセルに定義しています。


marginの、
最初の値は要素の上下、2番目の値は左右になります。


 background-colorは、
 bodyの背景色になります。


 paddingの値は、
 上・右・下・左の順になります。


 borderの値は、
 5ピクセル幅、黒実線、境界線になります。


h1 {
  margin: 0;
  padding: 20px 0;
  color: #00539F;//文字の色になります。
  text-shadow: 3px 3px 1px black;
}


text-shadowは、
最初はテキストからのシャドウの水平オフセットになります。
2番目はテキストからシャドウの垂直オフセットになります。


3番目は影のぼかし半径になります。
4番目は影の色になります。


p {
  margin: 0 auto;
}


marginは、
body要素での、定義と同じです。


画像は下の様になります。