投稿者: Linlin

カテゴリー
CSS display

【CSS】display：表示方法を指定する

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

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

<div>インライン→ブロック</div>
<p>display:block;<a class="sample1" href="http://www.htmq.com/">リンク</a></p>
<div>ブロックレベル→インライン</div>
<p>display:inline;<h3 class="sample2">見出し</h3></p>

<ul class="sample3">
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー4</a></li>
</ul>
.sample1 {display:block; background-color:gray;}
.sample2 {display:inline; background-color:gray;}

ul.sample3 {
display:-webkit-flex;
display:flex;
width:100%;
list-style-type:none;
margin:0; padding:0;
}
ul.sample3 li {
width:25%;
}
ul.sample3 a {
display:block;
margin:2px; padding:5px; font-size:12px;
background-color:gray; color:white;
text-align:center;
text-decoration:none;
}

【CSS】display：表示方法を指定する

　CSSのdisplayは、要素（ブロック、インライン、テーブル等）の表示方法を指定するプロパティです。

インラインとブロック

  • inline
    インラインボックスを生成（初期値）
  • block
    ブロックボックスを生成
  • list-item
    liタグに近いリスト内容のブロックボックスとマーカーボックスを生成
  • run-in
    コンテンツによりブロックまたはインラインボックスのどちらかを生成
  • inline-block
    インラインブロック生成

テーブル

  • table
    table風の表示
  • inline-table
    インラインのtable風表示
  • table-row-group
    tbodyタグ風の表示
  • table-header-group
    thead風の表示
  • table-footer-group
    tfoot風の表示
  • table-row
    tr風の表示
  • table-column-group
    colgroup風の表示
  • table-column
    col風の表示
  • table-cell
    td風の表示
  • table-caption
    caption風の表示

ルビ

  • ruby
    ruby風の表示
  • ruby-base
    rb風の表示
  • ruby-text
    rt風の表示
  • ruby-base-container
    rbc風の表示
  • ruby-text-container
    rtc風の表示

非表示・継承

  • none
    非表示
  • inherit
    親要素の値を継承

フレックスコンテナ

  • flex
    ブロックのフレックスコンテナの生成
  • inline-flex
    インラインのフレックスコンテナの生成

グリッドレイアウト

  • grid
    ブロックのグリッドコンテナの生成
  • inline-grid
    インラインのグリッドコンテナの生成
カテゴリー
CSS position(left)

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

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

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（left）：ボックスの配置方法を指定する

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

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

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

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

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（bottom）：ボックスの配置方法を指定する

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

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

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

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

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（right）：ボックスの配置方法を指定する

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

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

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

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

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（top）：ボックスの配置方法を指定する

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

  • static
    配置位置を指定しない（初期値）
  • relative
    相対位置
  • absolute
    絶対位置（スクロールすると動く）
  • fixed
    絶対位置（スクロールしても固定位置）
  • top
    上位置から指定
  • left
    左位置から指定
  • right
    右位置から指定
  • bottom
    下位置から指定
カテゴリー
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で指定。左から順に太くなる