カテゴリー: CSS

カテゴリー
border-width CSS

【CSS】border-width：ボーダーの太さを指定する

（例）【CSS】border-widthの使用方法

See the Pen
border by linlin (@linlin098765)
on CodePen. 

<p class="sample1">border</p>
<p class="sample2">border</p>
<p class="sample3">border</p>
<p class="sample4">border</p>
<p class="sample5">border</p>
<p class="sample6">border</p>
<p class="sample7">border</p>
<p class="sample8">border</p>
<p class="sample9">border</p>
<p class="sample10">border</p>
<p class="sample11">border</p>
<p class="sample12">border</p>
p.sample1 {border: double 10px gray;}
p.sample2 {border: inset 10px gray;}
p.sample3 {border: medium solid gray;}
p.sample4 {border-style: solid;}
p.sample5{border-style: solid double groove ridge;}
p.sample6{border-style: solid; border-width: 5px 10px 15px 20px;}
p.sample7{border-style: solid; border-color: #ff0000 #00ff00 #0000ff #ff00ff;}
p.sample8{border-top: double 10px gray;}
p.sample9{border-style: solid;border-top-color: red;border-top-style: dotted;border-top-width: 5px;}
p.sample10{border-style: solid;border-bottom-color: red;border-bottom-style: dotted;border-bottom-width: 5px;}
p.sample11{border-style: solid;border-right-color: red;border-right-style: dotted;border-right-width: 5px;}
p.sample12{border-style: solid;border-left-color: red;border-left-style: dotted;border-left-width: 5px;}

【CSS】border-width：ボーダーの太さを指定する

　CSSのborder-widthはボーダーの太さを上下左右まとめて指定するプロパティです。上下左右異なった指定をする際は、半角スペースで区切って指定します。

  • 値を１つ指定
    上下左右が同一太さ
  • 値を２つ指定
    上下と左右の太さ
  • 値を３つ指定
    上、左右、下の太さ
  • 値を４つ指定
    上、右、下、左の太さ
カテゴリー
border-style CSS

【CSS】border-style：ボーダーのスタイル（種類）を指定する

（例）【CSS】border-styleの使用方法

See the Pen
border by linlin (@linlin098765)
on CodePen. 

<p class="sample1">border</p>
<p class="sample2">border</p>
<p class="sample3">border</p>
<p class="sample4">border</p>
<p class="sample5">border</p>
<p class="sample6">border</p>
<p class="sample7">border</p>
<p class="sample8">border</p>
<p class="sample9">border</p>
<p class="sample10">border</p>
<p class="sample11">border</p>
<p class="sample12">border</p>
p.sample1 {border: double 10px gray;}
p.sample2 {border: inset 10px gray;}
p.sample3 {border: medium solid gray;}
p.sample4 {border-style: solid;}
p.sample5{border-style: solid double groove ridge;}
p.sample6{border-style: solid; border-width: 5px 10px 15px 20px;}
p.sample7{border-style: solid; border-color: #ff0000 #00ff00 #0000ff #ff00ff;}
p.sample8{border-top: double 10px gray;}
p.sample9{border-style: solid;border-top-color: red;border-top-style: dotted;border-top-width: 5px;}
p.sample10{border-style: solid;border-bottom-color: red;border-bottom-style: dotted;border-bottom-width: 5px;}
p.sample11{border-style: solid;border-right-color: red;border-right-style: dotted;border-right-width: 5px;}
p.sample12{border-style: solid;border-left-color: red;border-left-style: dotted;border-left-width: 5px;}

【CSS】border-style：ボーダーのスタイルを指定する

　CSSのborder-styleはボーダーのスタイル（種類）を上下左右まとめて指定するプロパティです。上下左右異なった指定をする際は、半角スペースで区切って指定します。

  • 値を１つ指定
    上下左右が同一スタイル（種類）
  • 値を２つ指定
    上下と左右のスタイル（種類）
  • 値を３つ指定
    上、左右、下のスタイル（種類）
  • 値を４つ指定
    上、右、下、左のスタイル（種類）
カテゴリー
border-color CSS

【CSS】border-color：ボーダーの色（カラー）を指定する

（例）【CSS】border-colorの使用方法

See the Pen
border by linlin (@linlin098765)
on CodePen. 

<p class="sample1">border</p>
<p class="sample2">border</p>
<p class="sample3">border</p>
<p class="sample4">border</p>
<p class="sample5">border</p>
<p class="sample6">border</p>
<p class="sample7">border</p>
<p class="sample8">border</p>
<p class="sample9">border</p>
<p class="sample10">border</p>
<p class="sample11">border</p>
<p class="sample12">border</p>
p.sample1 {border: double 10px gray;}
p.sample2 {border: inset 10px gray;}
p.sample3 {border: medium solid gray;}
p.sample4 {border-style: solid;}
p.sample5{border-style: solid double groove ridge;}
p.sample6{border-style: solid; border-width: 5px 10px 15px 20px;}
p.sample7{border-style: solid; border-color: #ff0000 #00ff00 #0000ff #ff00ff;}
p.sample8{border-top: double 10px gray;}
p.sample9{border-style: solid;border-top-color: red;border-top-style: dotted;border-top-width: 5px;}
p.sample10{border-style: solid;border-bottom-color: red;border-bottom-style: dotted;border-bottom-width: 5px;}
p.sample11{border-style: solid;border-right-color: red;border-right-style: dotted;border-right-width: 5px;}
p.sample12{border-style: solid;border-left-color: red;border-left-style: dotted;border-left-width: 5px;}

【CSS】border-color：ボーダーの色（カラー）を指定する

　CSSのborder-colorはボーダーの色を上下左右まとめて指定するプロパティです。上下左右異なった指定をする際は、半角スペースで区切って指定します。

  • 値を１つ指定
    上下左右が同一色（カラー）
  • 値を２つ指定
    上下と左右の色（カラー）
  • 値を３つ指定
    上、左右、下の色（カラー）
  • 値を４つ指定
    上、右、下、左の色（カラー）

カテゴリー
border CSS

【CSS】border：ボーダーのスタイル・太さ・色を指定する

（例）【CSS】borderの使用方法

See the Pen
border by linlin (@linlin098765)
on CodePen. 

<p class="sample1">border</p>
<p class="sample2">border</p>
<p class="sample3">border</p>
<p class="sample4">border</p>
<p class="sample5">border</p>
<p class="sample6">border</p>
<p class="sample7">border</p>
<p class="sample8">border</p>
<p class="sample9">border</p>
<p class="sample10">border</p>
<p class="sample11">border</p>
<p class="sample12">border</p>
p.sample1 {border: double 10px gray;}
p.sample2 {border: inset 10px gray;}
p.sample3 {border: medium solid gray;}
p.sample4 {border-style: solid;}
p.sample5{border-style: solid double groove ridge;}
p.sample6{border-style: solid; border-width: 5px 10px 15px 20px;}
p.sample7{border-style: solid; border-color: #ff0000 #00ff00 #0000ff #ff00ff;}
p.sample8{border-top: double 10px gray;}
p.sample9{border-style: solid;border-top-color: red;border-top-style: dotted;border-top-width: 5px;}
p.sample10{border-style: solid;border-bottom-color: red;border-bottom-style: dotted;border-bottom-width: 5px;}
p.sample11{border-style: solid;border-right-color: red;border-right-style: dotted;border-right-width: 5px;}
p.sample12{border-style: solid;border-left-color: red;border-left-style: dotted;border-left-width: 5px;}

【CSS】border：ボーダーのスタイル・太さ・色を指定する

　CSSのborderは、ボーダーのスタイル・太さ・色・ボーダーの種類をまとめて指定できるプロパティです。
　borderプロパティでは、上下左右に別々のボーダーを指定することはできません。

borderのスタイル

  • none
    ボーダーの太さ０、つまりボーダーは表示されない。ボーダーが重なる場合は他が優先される（初期値）
  • hidden
    ボーダーの太さ０、ボーダーは表示されない。ボーダーが重なる場合はこちらが優先される
  • solid
    １本線のボーダー
  • double
    ２本線のボーダー
  • groove
    立体的で窪んだボーダー
  • ridge
    立体的で隆起したボーダー
  • inset
    topとleftのボーダーが暗く、bottomとrightのボーダーが明るく、ボーダーで囲まれた領域全体が立体的に窪んだボーダー
  • outset
    topとleftのボーダーが明るく、bottomとrightのボーダーが暗く、ボーダーで囲まれた領域全体が立体的に隆起したボーダー
  • dashed
    破線のボーダー
  • dotted
    点線のボーダー

borderの太さ

  • 数値
    px, em,exなど
  • キーワード
    thin, medium,thickで指定。左から順に太くなる
カテゴリー
CSS padding-right

【CSS】padding-right：右パディング（内側余白）を指定する

（例）【CSS】padding-rightの使用方法

See the Pen
padding by linlin (@linlin098765)
on CodePen. 

<p class="sample1">10px</p>
<p class="sample3">上下10px、左右20px</p>
<p class="sample4">上10px、左右20px、下30px</p>
<p class="sample5">上10px、右20px、下30px、左40px</p>
<p class="sample6">ああああ</p>
<p class="sample7">ああああ</p>
<p class="sample8">ああああ</p>
<p class="sample9">ああああ</p>
p{background-color:gray;}
p.sample1 {padding: 10px;} 
p.sample3 {padding: 10px 20px;}
p.sample4 {padding: 10px 20px 30px;}
p.sample5 {padding: 10px 20px 30px 40px;}
p.sample6 {padding-left:20px;}
p.sample7 {padding-top:20px;}
p.sample8 {padding-bottom:20px;}
p.sample9 {padding-right:30px;width:100px;text-align:right;}

【CSS】padding-right：右パディング（内側余白）を指定する

　CSSのpadding-rightは、右パディング（内側余白）を指定するプロパティです。paddingに負の値は指定できません。

カテゴリー
CSS padding-bottom

【CSS】padding-bottom：下パディング（内側余白）を指定する

（例）【CSS】padding-bottomの使用方法

See the Pen
padding by linlin (@linlin098765)
on CodePen. 

<p class="sample1">10px</p>
<p class="sample3">上下10px、左右20px</p>
<p class="sample4">上10px、左右20px、下30px</p>
<p class="sample5">上10px、右20px、下30px、左40px</p>
<p class="sample6">ああああ</p>
<p class="sample7">ああああ</p>
<p class="sample8">ああああ</p>
<p class="sample9">ああああ</p>
p{background-color:gray;}
p.sample1 {padding: 10px;} 
p.sample3 {padding: 10px 20px;}
p.sample4 {padding: 10px 20px 30px;}
p.sample5 {padding: 10px 20px 30px 40px;}
p.sample6 {padding-left:20px;}
p.sample7 {padding-top:20px;}
p.sample8 {padding-bottom:20px;}
p.sample9 {padding-right:30px;width:100px;text-align:right;}

【CSS】padding-bottom：下パディング（内側余白）を指定する

　CSSのpadding-bottomは、下パディング（内側余白）を指定するプロパティです。paddingに負の値は指定できません。

カテゴリー
CSS padding-left

【CSS】padding-left：左パディング（内側余白）を指定する

（例）【CSS】padding-leftの使用方法

See the Pen
padding by linlin (@linlin098765)
on CodePen. 

<p class="sample1">10px</p>
<p class="sample3">上下10px、左右20px</p>
<p class="sample4">上10px、左右20px、下30px</p>
<p class="sample5">上10px、右20px、下30px、左40px</p>
<p class="sample6">ああああ</p>
<p class="sample7">ああああ</p>
<p class="sample8">ああああ</p>
<p class="sample9">ああああ</p>
p{background-color:gray;}
p.sample1 {padding: 10px;} 
p.sample3 {padding: 10px 20px;}
p.sample4 {padding: 10px 20px 30px;}
p.sample5 {padding: 10px 20px 30px 40px;}
p.sample6 {padding-left:20px;}
p.sample7 {padding-top:20px;}
p.sample8 {padding-bottom:20px;}
p.sample9 {padding-right:30px;width:100px;text-align:right;}

【CSS】padding-left：左パディング（内側余白）を指定する

　CSSのpadding-leftは、左パディング（内側余白）を指定するプロパティです。paddingに負の値は指定できません。

カテゴリー
CSS padding-top

【CSS】padding-top：上パディング（内側余白）を指定する

（例）【CSS】padding-topの使用方法

See the Pen
padding by linlin (@linlin098765)
on CodePen. 

<p class="sample1">10px</p>
<p class="sample3">上下10px、左右20px</p>
<p class="sample4">上10px、左右20px、下30px</p>
<p class="sample5">上10px、右20px、下30px、左40px</p>
<p class="sample6">ああああ</p>
<p class="sample7">ああああ</p>
<p class="sample8">ああああ</p>
<p class="sample9">ああああ</p>
p{background-color:gray;}
p.sample1 {padding: 10px;} 
p.sample3 {padding: 10px 20px;}
p.sample4 {padding: 10px 20px 30px;}
p.sample5 {padding: 10px 20px 30px 40px;}
p.sample6 {padding-left:20px;}
p.sample7 {padding-top:20px;}
p.sample8 {padding-bottom:20px;}
p.sample9 {padding-right:30px;width:100px;text-align:right;}

【CSS】padding-top：上パディング（内側余白）を指定する

　CSSのpadding-topは、上パディング（内側余白）を指定するプロパティです。paddingに負の値は指定できません。

カテゴリー
CSS padding

【CSS】padding：パディング(内側余白)を指定する

（例）【CSS】paddingの使用方法

See the Pen
padding by linlin (@linlin098765)
on CodePen. 

<p class="sample1">10px</p>
<p class="sample3">上下10px、左右20px</p>
<p class="sample4">上10px、左右20px、下30px</p>
<p class="sample5">上10px、右20px、下30px、左40px</p>
<p class="sample6">ああああ</p>
<p class="sample7">ああああ</p>
<p class="sample8">ああああ</p>
<p class="sample9">ああああ</p>
p{background-color:gray;}
p.sample1 {padding: 10px;} 
p.sample3 {padding: 10px 20px;}
p.sample4 {padding: 10px 20px 30px;}
p.sample5 {padding: 10px 20px 30px 40px;}
p.sample6 {padding-left:20px;}
p.sample7 {padding-top:20px;}
p.sample8 {padding-bottom:20px;}
p.sample9 {padding-right:30px;width:100px;text-align:right;}

【CSS】padding：パディング(内側余白)を指定する

　CSSのpaddingは、上下左右のパディング（内側余白）をまとめて指定するプロパティです。paddingプロパティで上下左右それぞれ個別の数値を指定する場合は半角スペースを空けて指定します。
　指定方法はpx,vw,vh,%などがあります。

  • 上下左右のパディングをまとめて指定（余白）
    値を１つ指定
  • 上下と左右のパディング（余白）
    値を２つ指定（１：上下、２：左右）
  • 上と左右と下のパディング（余白）
    値を３つ指定（１：上、２：左右、３：下）
  • 上下左右のパディングを個別に指定
    値を４つ指定（１：上、２：右、３：下、４：左）
カテゴリー
CSS margin-right

【CSS】margin-right：右マージン(余白)を指定する

（例）【CSS】margin-rightの使用方法

See the Pen
margin by linlin (@linlin098765)
on CodePen. 

<p class="sample1">10px</p>
<p class="sample3">上下10px、左右20px</p>
<p class="sample4">上10px、左右20px、下30px</p>
<p class="sample5">上10px、右20px、下30px、左40px</p>
<p class="sample6">ああああ</p>
<p class="sample7">ああああ</p>
<p class="sample8">ああああ</p>
<p class="sample9">ああああ</p>
p{background-color:gray;}
p.sample1 {margin: 10px;} 
p.sample3 { margin: 10px 20px;}
p.sample4 {margin: 10px 20px 30px;}
p.sample5 {margin: 10px 20px 30px 40px;}
p.sample6 {margin-left:20px;}
p.sample7 {margin-top:20px;}
p.sample8 {margin-bottom:20px;}
p.sample9 {margin-right:20px;}

【CSS】margin-right：右マージン(余白)を指定する

　CSSのmargin-rightは、右マージン（余白）を指定するプロパティです。
　指定方法は、px,vw,vh,%などがあり、負の値も指定可能です。