カテゴリー: CSS

カテゴリー
CSS position

【CSS】position：ボックスの配置方法を指定する

(例)【CSS】positionの使用方法

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

<p class="sample">position:static<span class="sample1">static</span></p>
<p class="sample">position:relative<span class="sample2">relative</span></p>
<p class="sample">position:absolute<span class="sample3">absolute</span></p>
<p class="sample">position:fixed<span class="sample4">fixed</span></p> 
p.sample {height:50px; background-color:gray;position:relative }
span.sample1 {color:red; position:static; top:10px; left:10px }
span.sample2 {color:red; position:relative; top:10px; left:10px }
span.sample3 {color:red; position:absolute; top:10px; left:10px }
span.sample4 {color:red; position:fixed; top:10px; left:10px }

【CSS】position：ボックスの配置方法を指定する

　CSSのpositionは、ボックス要素の配置方法を絶対的または相対的に指定します。

  • static
    配置位置を指定しない（初期値）
  • relative
    相対位置
  • absolute
    絶対位置（スクロールすると動く）
  • fixed
    絶対位置（スクロールしても固定位置）
  • top
    上位置から指定
  • left
    左位置から指定
  • right
    右位置から指定
  • bottom
    下位置から指定
カテゴリー
CSS overflow

【CSS】overflow：上下左右のはみ出た要素の表示方法

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

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

<h5>overflow: visible; を指定</h5>
<p class="sample" style="overflow: visible;">
あああああああああああああああ、いいいいいいいいいいいいいい
</p>

<h5>overflow: hidden; を指定</h5>
<p class="sample" style="overflow: hidden;">
あああああああああああああああ、いいいいいいいいいいいいいい
</p>

<h5>overflow: scroll; を指定</h5>
<p class="sample" style="overflow: scroll;">
あああああああああああああああ、いいいいいいいいいいいいいい
</p>

<h5>overflow: auto; を指定</h5>
<p class="sample" style="overflow: auto;">
あああああああああああああああ、いいいいいいいいいいいいいい
</p>

<h5>overflow: no-display; を指定</h5>
<p class="sample" style="overflow: no-display;">
あああああああああああああああ、いいいいいいいいいいいいいい
</p>

<h5>overflow: no-content; を指定</h5>
<p class="sample" style="overflow: no-content;">
あああああああああああああああ、いいいいいいいいいいいいいい
</p>
p.sample {
	width: 150px; height: 50px;
	background-color:gray; 
}

【CSS】overflow：上下左右のはみ出た要素の表示方法

　CSSのoverflowは、ボックス要素の範囲内に収まらない場合の上下左右について表示方法を指定するプロパティです。
　キーワード１つ指定で上下左右。キーワード２つ指定で上下と左右に指定可能です。

  • visible
    ボックス要素からはみ出して表示される（初期値）
  • hidden
    ボックス要素からはみ出す部分は非表示となる。スクロールも表示されない
  • scroll
    ボックス要素からはみ出す部分は、収まらない部分ははみ出さない。スクロールが表示される
  • auto
    ボックス要素に収まらない場合の表示方法はブラウザに依存する
  • no-display
    ボックス要素に収まらない場合、ボックス要素そのものがdisplay:noneと同様に非表示となる
  • no-content
    ボックス要素に収まらない場合、ボックス要素そのものがdisplay:hiddenと同様に非表示となる
カテゴリー
CSS overflow-y

【CSS】overflow-y：上下のはみ出た要素の表示方法

（例）【CSS】overflow-yの使用方法

See the Pen
overflow-y by linlin (@linlin098765)
on CodePen. 

<h5>overflow-y: visible; を指定</h5>
<p class="sample" style="overflow-y: visible;">
あああああああああああああああ、いいいいいいいいいいいいいい
</p>

<h5>overflow-y: hidden; を指定</h5>
<p class="sample" style="overflow-y: hidden;">
あああああああああああああああ、いいいいいいいいいいいいいい
</p>

<h5>overflow-y: scroll; を指定</h5>
<p class="sample" style="overflow-y: scroll;">
あああああああああああああああ、いいいいいいいいいいいいいい
</p>

<h5>overflow-y: auto; を指定</h5>
<p class="sample" style="overflow-y: auto;">
あああああああああああああああ、いいいいいいいいいいいいいい
</p>

<h5>overflow-y: no-display; を指定</h5>
<p class="sample" style="overflow-y: no-display;">
あああああああああああああああ、いいいいいいいいいいいいいい
</p>

<h5>overflow-y: no-content; を指定</h5>
<p class="sample" style="overflow-y: no-content;">
あああああああああああああああ、いいいいいいいいいいいいいい
</p>
p.sample {
	width: 150px; height: 50px;
	background-color:gray; 
}

【CSS】overflow-y：上下のはみ出た要素の表示方法

　CSSのoverflow-yは、ボックス要素の範囲内に収まらない場合の左右について表示方法を指定するプロパティです。

  • visible
    ボックス要素からはみ出して表示される（初期値）
  • hidden
    ボックス要素からはみ出す部分は非表示となる。スクロールも表示されない
  • scroll
    ボックス要素からはみ出す部分は、収まらない部分ははみ出さない。スクロールが表示される
  • auto
    ボックス要素に収まらない場合の表示方法はブラウザに依存する
  • no-display
    ボックス要素に収まらない場合、ボックス要素そのものがdisplay:noneと同様に非表示となる
  • no-content
    ボックス要素に収まらない場合、ボックス要素そのものがdisplay:hiddenと同様に非表示となる
カテゴリー
CSS overflow-x

【CSS】overflow-x：左右のはみ出た要素の表示方法

（例）【CSS】overflow-xの使用方法

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

<h5>overflow-x: visible; を指定</h5>
<p class="sample" style="overflow-x: visible;">
あああああああああああああああ、いいいいいいいいいいいいいい
</p>

<h5>overflow-x: hidden; を指定</h5>
<p class="sample" style="overflow-x: hidden;">
あああああああああああああああ、いいいいいいいいいいいいいい
</p>

<h5>overflow-x: scroll; を指定</h5>
<p class="sample" style="overflow-x: scroll;">
あああああああああああああああ、いいいいいいいいいいいいいい
</p>

<h5>overflow-x: auto; を指定</h5>
<p class="sample" style="overflow-x: auto;">
あああああああああああああああ、いいいいいいいいいいいいいい
</p>

<h5>overflow-x: no-display; を指定</h5>
<p class="sample" style="overflow-x: no-display;">
あああああああああああああああ、いいいいいいいいいいいいいい
</p>

<h5>overflow-x: no-content; を指定</h5>
<p class="sample" style="overflow-x: no-content;">
あああああああああああああああ、いいいいいいいいいいいいいい
</p>
p.sample {
	width: 150px; height: 50px;
	background-color:gray; 
}

【CSS】overflow-x：左右のはみ出た要素の表示方法

　CSSのoverflow-xは、ボックス要素の範囲内に収まらない場合の左右について表示方法を指定するプロパティです。

  • visible
    ボックス要素からはみ出して表示される（初期値）
  • hidden
    ボックス要素からはみ出す部分は非表示となる。スクロールも表示されない
  • scroll
    ボックス要素からはみ出す部分は、収まらない部分ははみ出さない。スクロールが表示される
  • auto
    ボックス要素に収まらない場合の表示方法はブラウザに依存する
  • no-display
    ボックス要素に収まらない場合、ボックス要素そのものがdisplay:noneと同様に非表示となる
  • no-content
    ボックス要素に収まらない場合、ボックス要素そのものがdisplay:hiddenと同様に非表示となる
カテゴリー
border-left-width CSS

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

（例）【CSS】border-left-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-left-width：左ボーダーの太さを指定する

　CSSのborder-left-widthは左ボーダーの太さを指定するプロパティです。

borderの太さ

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

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

（例）【CSS】border-right-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-right-width：右ボーダーの太さを指定する

　CSSのborder-right-widthは右ボーダーの太さを指定するプロパティです。

borderの太さ

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

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

（例）【CSS】border-bottom-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-bottom-width：下ボーダーの太さを指定する

　CSSのborder-bottom-widthは下ボーダーの太さを指定するプロパティです。

borderの太さ

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

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

（例）【CSS】border-top-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-top-width：上ボーダーの太さを指定する

　CSSのborder-top-widthは上ボーダーの太さを指定するプロパティです。

borderの太さ

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

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

（例）【CSS】border-left-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-left-style：左ボーダーのスタイル（種類）を指定する

　CSSのborder-left-styleは左ボーダーのスタイル（種類）を指定するプロパティです。

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で指定。左から順に太くなる
カテゴリー
border-right-style CSS

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

（例）【CSS】border-right-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-right-style：右ボーダーのスタイル（種類）を指定する

　CSSのborder-right-styleは右ボーダーのスタイル（種類）を指定するプロパティです。

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で指定。左から順に太くなる