# border

p｛ border： 1px solid red；｝

- プロパティ※見出し（<h1>~<h6>）やボタン<button>の装飾に使われることが多い
- 太さ
- 形状
- 色

### 形状の種類

border形状の値 | 概要
--- | ---
solid | １本線（実線）で表示(－)
double | ２本線で表示(＝)
dashed | 破線で表示さ(---)
dotted | 点線で表示(・・・)
none | 線が表示されない（初期値） noneの状態でほかの要素とborderが被っている場合、ほかの要素は表示される
hidden | 線は表示されない hiddenの状態でほかの要素とborderが被っている場合、ほかの要素は表示されない

#### 例

上記の形状4つ(solid,double,dashed,dotted)を動かしてみる。

- solidの場合

これは１本線です。

- doubleの場合

これは２本線です。

- dashedの場合

これは破線です。

- dottedの場合

これは点線です。

### 上下左右一部のみを指定

- 線を上のみに表示(border-top)

上↑だけに表示されています。（cssコード＝｛border-top: solid 3px red;｝）

- 線を右のみに表示(border-right)

右→だけに表示されています。（cssコード＝｛border-right: solid 3px red;｝）

- 線を下のみに表示(border-bottom)

下↓だけに表示されています。（cssコード＝｛border-bottom: solid 3px red;｝）

- 線を左のみに表示(bottom-left)

左←だけに表示されています。（cssコード＝｛border-left: solid 3px red;｝）

### border-style

borderの形状のみを指定したい場合に使用。上下左右で異なる形状にしたい場合は、スペースで区切って複数の値を指定する。

- 値を１つ指定：上下左右が指定される。
- 値を２つ指定：１つ目は「上下」、２つ目は「左右」が指定される。
- 値を３つ指定：１つ目は「上」、２つ目は「左右」、３つ目は「下」が指定される。
- 値を４つ指定：１つ目は「上」、２つ目は「右」、３つ目は「下」、４つ目は「左」が指定される。

※border-width,border-colorも同様に指定できる。

#### 例

- 上下左右に実線

上下左右を実線で囲んでいます。（cssコード＝｛border-style: solid;）

※｛border: solid;｝と同意

- 「上下」に実線、「左右」に２本線

上下は実践、左右は２本線で囲んでいます。（cssコード＝｛border-style: solid double;｝）

- 「上」に実線、「左右」に２本線、「下」に破線

上は実線、左右は２本戦、下は破線で囲んでいます。（cssコード＝｛border-style: solid double dashed;｝）

- 「上」に実線、「右」に２本線、「下」に破線、「左」に点線

上は実線、右は２本線、下は破線、左は点線で囲んでいます。（cssコード＝｛border-style: solid double dashed dotted;｝）

### border-width

borderの形状の太さのみを指定したい場合に使用。上下左右で異なる太さにすることも可能。
※位置の指定方法はborder-styleと同様である。

#### 例

- 上下左右に７ｐｘ

上下左右を７ｐｘの実線で囲んでいます。（cssコード＝｛border-width: ７px;｝）

- 「上下」に７ｐｘ、「左右」に５ｐｘ

上下は７ｐｘ、左右は５ｐｘの実線で囲んでいます。（cssコード＝｛border-width: 7px 5px;｝）

- 「上」に７ｐｘ、「左右」に５ｐｘ、「下」に３ｐｘ

上は７ｐｘ、左右は５ｐｘ、下は３ｐｘの実線で囲んでいます。（cssコード＝｛border-width: 7px 5px 3px;｝）

- 「上」に７ｐｘ、「右」に５ｐｘ、「下」に３ｐｘ、「左」に１ｐｘ

上は７ｐｘ、右は５ｐｘ、下は３ｐｘ、左は１ｐｘの実線で囲んでいます。（cssコード＝｛border-width: 7px 5px 3px 1px;｝）

※注意：「border-style」で形状を指定しないと線で囲まれないよ！

### border-color

borderの色を指定するとき使用。「形状」「太さ」と同様、上下左右に各色を指定することができる。
※border-style、border-widthの例にはborder-colorを使用して赤色に指定しているよ！

#### 例

- 上下左右は青色

上下左右を青色の実線で囲んでいます。（cssコード＝｛border-color: blue;}）

- 「上下」に青色、「左右」に赤色

上下は青色、左右は赤色の実線で囲んでいます。（cssコード＝｛border-color: blue red;｝）

- 「上」に青色、「左右」に赤色、「左右」に緑色

上は青色、左右は赤色、下に緑色の実線で囲んでいます。（cssコード＝｛border-color: blue red green;｝）

- 「上」に青色、「右」に赤色、「下」に緑色、「左」に黄色

上は青色、右は赤色、下は緑色、左は黄色の実線で囲んでいます。（cssコード＝｛border-color: blue red green #ffd900;｝）

※注意；「border-style」で形状をs指定しないと線で囲まれないよ！

### おまけ:border-radius

borderの角を丸めたい場合に使用するプロパティ。正確にはセレクタの境界の外側の角を丸めるため、borderを使用しなくても角を丸くすることは可能。
border-radiusは「左上」、「右上」、「右下」、「左下」の順で値を指定することが可能。値を「50％」に指定することで円を作ることができる。

#### 例

- radiusの値を5px

border-radiusで丸めています。（cssコード＝｛border-radius: 5px;｝）

- radiusの値を50%

raidusの値は50%です。（cssコード＝｛border-raidus: 50%;｝）

# font-family

p { font-family: 'Impact', sans-serif ;}

- 段落（pタグ）※<p>以外にも<li>,<ol>,<h1>~<h6>等も使える！
- フォント（font-family）※このまま
- フォント名
- 総称フォント

### 総称フォントファミリーとは

ページを開いたパソコンに指定したフォントが全く入っていなかった場合に「せめてこういう系統のフォントを表示して」とブラウザに伝えるもの。

- sans-serif : ゴシック体フォント
- serif : 明朝体フォント
- monospace : 等幅系フォント
- cursive : 筆記体系フォント
- fantasy : 装飾系フォント

#### 例

上記のCSSのフォント「Impact」で動かしてみる。

- ゴシック体フォントの場合

abcdefghijklmnopqrstuvwxyz

- 明朝体フォントの場合

abcdefghijklmnopqrstuvwxyz

- 等幅系フォントの場合

abcdefghijklmnopqrstuvwxyz

- 筆記体系フォントの場合

abcdefghijklmnopqrstuvwxyz

- 装飾系フォント

abcdefghijklmnopqrstuvwxyz

※等幅・筆記体・装飾系フォントはImpactに対応していない可能性あり

# overflow

要素の内容が多すぎてボックスからはみ出た部分(オーバーフロー)をどう扱うかを指定するプロパティ。
p｛ overflow： visible;｝

- プロパティ
- 値

### 値の種類

overflowの値 | 概要
--- | ---
visible | 初期値。 内容はクリッピングされない。ボックスの外側に表示されることがある。
hidden | 必要に応じてボックスに合わせて内容を切り取る。スクロールバーは表示されない。 (JavascriptのHTMLElement:offsetLeftようなプロパティの値を設定するなどでスクロールができる。そのため要素はスクロールコンテナーとなる。
clip | hidden同様にボックスに合わせて内容を切り取る。スクロールバは表示されない。hiddenとの違いはclipキーワードがプログラム的なスクロールを含め、全てのスクロールを禁止すること。
scroll | 必要に応じて内容を切り取るがスクロールが可能に。内容がクリッピングされてるかどうかに関わらず、スクロールバーを常に表示する。
atuo | 内容がボックス内に収まる場合はvisibleと同じように表示される。内容が溢れる場合はスクロールバーを表示する。

※clipはあまり使わないかも！

#### 例

- visibleの場合

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

- hiddenの場合(clipも同様の動作)

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

- scrollの場合

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

- autoの場合

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

### overflowを縦横個別に指定

プロパティ名 | 概要
--- | ---
overflow-x | 横方向へのはみ出しに対して処理を指定
overflow-y | 縦方向へのはみ出しに対して処理を指定

※「x」座標は「東西」の軸を表しているからから「横」、「y」座標は「南北」の軸を表しているから「縦」って覚えるといいかも！

#### 例

縦はhiddenで切り取り、横はスクロールできるようにする。

桃太郎
昔、昔、ある所にお爺さんとお婆さんが住んでいました。お爺さんは山へ芝刈りに、お婆さんは川へ洗濯に行きました。お婆さんが川で洗濯をしていると大きな桃が流れてきました。「なんと大きな桃じゃろう！家に持って帰ろう。」とお婆さんは背中に担いで家に帰り、その桃を切ろうとすると、なんと桃から大きな赤ん坊が出てきたのです。「おっとたまげた。」二人は驚いたけれども、とても喜び、「何という名前にしましょうか。」「桃から生まれたから、桃太郎というのはどうだろう。」「それがいい。」
桃太郎はあっと言う間に大きくなり、立派な優しい男の子になりました。ある日、桃太郎は二人に言いました。「鬼ヶ島に悪い鬼が住んでいると聞きました。」「時々村に来て悪いことをするので皆困っている。」とおじいさんが答えると、「それでは私が行って退治しましょう。お母さん、黍団子を作ってください。」おばあさんはとても美味しい日本一の黍団子を作り、桃太郎はそれを腰の袋に入れるとさっそく鬼ヶ島に向けて旅立ちました。

（cssコード）

.クラス名｛
width: 80%;
height: 95px;
border: solid 2px black;
white-space: nowrap;　/*テキストを改行させないようにする*/
overflow-x: scroll;
overflow-y: hidden;
｝

※{overflow: scroll(横) hidden(縦);}でも例と同じ動きができるよ！

# margin・padding

CSSでは要素のまわりの余白をmarginとpaddingというプロパティで指定する。

- padding：要素の内側の余白
- margin：要素の外側の余白

#### 例

See the Pen Untitled by 午前1時19分 (@AM1-19) on CodePen.

### 上下左右の個別指定(margin)

- margin-top：上だけ指定
- margin-bottom：下だけを指定
- margin-left：左だけを指定
- margin-right: 右だけを指定

※{margin: 10px(上) 20px(右) 30px(下) 40px(左);}でも上、下、左、右の順で指定できるよ！
{margin: 10px 20px}で上下、左右の順で指定できるよ！

#### 例

See the Pen Untitled by 午前1時19分 (@AM1-19) on CodePen.

### 上下左右の個別してい(padding)

- padding-top:上だけ指定
- padding-bottom：下だけ指定
- padding-left：左だけ指定
- padding-right：右だけ指定

※{padding: 10px(上) 20px(右) 30px(下) 40px(左);}でも上、下、左、右の順で指定できるよ！
{padding: 10px 20px}で上下、左右の順で指定できるよ！

#### 例

See the Pen Untitled by 午前1時19分 (@AM1-19) on CodePen.

### marginの相殺

See the Pen Untitled by 午前1時19分 (@AM1-19) on CodePen.

margin指定が複数並ぶと１つしか適用されないよ！(値が大きい方が適用される)
※親要素と子要素でも相殺は起こる。

### paddingは相殺されない

See the Pen Untitled by 午前1時19分 (@AM1-19) on CodePen.

### marginで中央配置

See the Pen Untitled by 午前1時19分 (@AM1-19) on CodePen.

※autoで上下中央配置はできないよ！あとpaddingでは中央配置はできないよ！