カテゴリー: CSS

clip CSS

【CSS】clip：ボックスを切り抜く（グリッピング）

投稿者作成者: Linlin
投稿日 2020年2月29日

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

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

<div class="sample">
元の画像<br>
<img src="https://www.llc-linlin.com/picture/SEO.jpg">
</div>
<div class="sample">
カンマ区切り指定<br>
<img src="https://www.llc-linlin.com/picture/SEO.jpg" class="sample1">
</div>
<div class="sample">
スペース区切り指定<br>
<img src="https://www.llc-linlin.com/picture/SEO.jpg" class="sample2">
</div>

div.sample {height:200px;}
img.sample1 {clip:rect(60px,150px,130px,40px); position:absolute;}
img.sample2 {clip:rect(60px 150px 130px 40px); position:absolute;}

【CSS】clip：ボックスを切り抜く（グリッピング）

　CSSのclipはボックス要素を切り抜き表示（グリッピング）するプロパティです。

CSS visibility

【CSS】visibility：ボックスの表示・非表示を指定する

投稿者作成者: Linlin
投稿日 2020年2月29日

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

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

<p class="sample1">ああああああ</p>
<p class="sample2">いいいいいい</p>

<h3>一部のセルにvisibility:collapseを適用</h3>
<table border="1">
<tr class="sample3">
<td>１</td>
<td>２</td>
<td>３</td>
</tr>
<tr>
<td class="sample3">１</td>
<td>２</td>
<td>３</td>
</tr>
</table>

.sample1 {visibility:hidden;}
.sample2 {visibility:visible;}
.sample3 {visibility:collapse;}

【CSS】visibility：ボックスの表示・非表示を指定する

　CSSのvisibilityは、ボックスの表示・非表示を指定するプロパティです。display:noneと違い、非表示にしてもページのレイアウトは変わりありません。

visible
表示
hidden
非表示
collapse
テーブルの行・列に指定すると詰めて表示

CSS z-index

【CSS】z-index：重なりの順序を指定する

投稿者作成者: Linlin
投稿日 2020年2月29日

（例）【CSS】z-indexの使用方法

See the Pen
z-index by linlin (@linlin098765)
on CodePen.

<p style="background-color:red; z-index:1; position:absolute; top:10px;">１</p>
<p style="background-color:gray; z-index:2; position:absolute; top:15px; left:15px;">２</p>

【CSS】z-index：重なりの順序を指定する

　CSSのz-indexは、ボックスの重なり順序を指定するプロパティです。

clear CSS

【CSS】clear：回り込み(float)を解除

投稿者作成者: Linlin
投稿日 2020年2月29日

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

<a style="float:left;">左</a>
<a style="float:right;">右</a>
<div style="clear:both;">clearプロパティ</div>

【CSS】clearの使用方法

【CSS】clear：回り込み(float)を解除

　CSSのclearは回り込み（floatプロパティ）を解除するプロパティです。

left
float:leftを解除
right
float:rightを解除
both
float:leftとfloat:rightの両方を解除
none
floatを解除しない（初期値）

CSS float

【CSS】float：要素を左or右に配置する

投稿者作成者: Linlin
投稿日 2020年2月29日

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

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

<a style="float:left;">左</a>
<a style="float:right;">右</a>

【CSS】float：要素を左or右に配置する

　CSSのfloatは要素を左または右に配置するプロパティです。leftで左、rightで右に配置することが可能です。

CSS display

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

投稿者作成者: Linlin
投稿日 2020年2月29日

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

投稿者作成者: Linlin
投稿日 2020年2月29日

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

投稿者作成者: Linlin
投稿日 2020年2月29日

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

投稿者作成者: Linlin
投稿日 2020年2月29日

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

投稿者作成者: Linlin
投稿日 2020年2月29日

(例)【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
下位置から指定