カテゴリー: CSS

カテゴリー
CSS text-shadow

【CSS】text-shadow：テキストに影をつける

（例）【CSS】text-shadow：テキストに影をつける

See the Pen
text-shadow by linlin (@linlin098765)
on CodePen.

<p class="sample1">text-shadow</p>
p.sample1 {text-shadow:3px 3px 3px gray;}

【CSS】text-shadow：テキストに影をつける

　CSSのtext-shadowはテキストに影をつけるプロパティです。

  • none
    影をつけない
  • 数値
    水平距離・垂直距離・半径の順で指定
  • 色
カテゴリー
CSS word-spacing

【CSS】word-spacing：単語の間隔を指定

（例）【CSS】word-spacingの使用方法

See the Pen
word-spacing by linlin (@linlin098765)
on CodePen. 

<div class="sample1">I am man.</div>
<div class="sample2">I am man.</div>
<div class="sample3">I am man.</div>
<div class="sample4">I am man.</div>
<div class="sample5">I am man.</div>
div.sample1 {word-spacing: 10px;}
div.sample2 {word-spacing: 30px;}
div.sample3 {word-spacing: -10px;}
div.sample4 {word-spacing: 50%;}
div.sample5 {word-spacing: -50%;}

【CSS】word-spacing：単語の間隔を指定

　CSSのword-spacingは、単語の間隔を指定するプロパティです。負の値も指定可能です。

  • normal
    スペース０（初期値）
  • 数値
    px, em,exなどで指定
  • %
    文字幅に対するパーセント分を指定
カテゴリー
CSS letter-spacing

【CSS】letter-spacing：文字間隔を指定

（例）【CSS】letter-spacingの使用方法

See the Pen
letter-spacing by linlin (@linlin098765)
on CodePen. 

<div class="sample1">文字間隔10px</div>
<div class="sample2">文字間隔20px</div>
<div class="sample3">文字間隔-10px</div>
div.sample1 {letter-spacing: 10px;}
div.sample2 {letter-spacing: 20px;}
div.sample3 {letter-spacing: -10px;}

【CSS】letter-spacing：文字間隔を指定

　CSSのletter-spacingは、文字の間隔を指定するプロパティです。行頭・行末以外にして可能で、負の値も指定可能です。

  • nomal
    スペース幅は０（初期値）
  • 数値
    px, em,exなどで指定可能
カテゴリー
CSS white-space

【CSS】white-space：スペース・改行方法の調整

（例）【CSS】white-spaceの使用方法

See the Pen
white-space by linlin (@linlin098765)
on CodePen. 

<h5>white-space: normal;</h5>
<p class="sample" style="white-space: normal;">
ああああああああああああああ
  　　良い良い良い良い良い良い良い
</p>

<h5>white-space: pre;</h5>
<p class="sample" style="white-space: pre;">
ああああああああああああああ
  　　良い良い良い良い良い良い良い
</p>

<h5>white-space: nowrap;</h5>
<p class="sample" style="white-space: nowrap;">
ああああああああああああああ
  　　良い良い良い良い良い良い良い
</p>

<h5>white-space: pre-wrap;</h5>
<p class="sample" style="white-space: pre-wrap;">
ああああああああああああああ
  　　良い良い良い良い良い良い良い
</p>

<h5>white-space: pre-line;</h5>
<p class="sample" style="white-space: pre-line;">
ああああああああああああああ
  　　良い良い良い良い良い良い良い
</p>
p.sample {
	width:200px;
	background-color:gray;
}

【CSS】white-space：スペース・改行方法の調整

　CSSのwhite-spaceは、ソース中のスペース・改行の表示方法を指定するプロパティです。

  • normal
    スペースを無視。改行を半角スペースに指定（初期値）
    ボックスサイズによっては自動改行。
  • pre
    スペース・改行をそのまま表示。
    ボックスサイズによらず自動改行しない。
  • nowrap
    スペースを無視。改行を半角スペースに指定。
    ボックスサイズによらず自動改行しない。
  • pre-wrap
    スペース・改行をそのまま表示。
    ボックスサイズによっては自動改行。
  • pre-line
    スペースを無視。改行はそのまま表示。
    ボックスサイズによっては自動改行。
カテゴリー
CSS text-transform

【CSS】text-transform：大文字・小文字・全角文字への変換

（例）【CSS】text-transformの使用方法

See the Pen
text-transform by linlin (@linlin098765)
on CodePen. 

<p class="sample1">There are three apples on the desk.</p>
<p class="sample2">There are three apples on the desk.</p>
<p class="sample3">There are three apples on the desk.</p>
<p class="sample4">There are three apples on the desk.</p>
<p class="sample5">There are three apples on the desk.</p>
p.sample1 {text-transform: none;}
p.sample2 {text-transform: capitalize;}
p.sample3 {text-transform: uppercase;}
p.sample4 {text-transform: lowercase;}
p.sample5 {text-transform: full-width;}

【CSS】text-transform：大文字・小文字・全角文字への変換

　CSSのtext-transformは、大文字・小文字・全角文字への変換を指定するプロパティです。

  • none
    変換しない（初期値）
  • capitalize
    単語の先頭文字を大文字に変換
  • uppercase
    全ての文字を大文字に変換
  • lowercase
    全ての文字を小文字に変換
  • full-width
    全ての文字を全角に変換
カテゴリー
CSS text-indent

【CSS】text-indent：テキストのインデント幅を調整する

（例）【CSS】text-indentの使用方法

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

<h5>text-indent:100px; を指定</h5>
<p class="sample" style="text-indent:100px;">
ああああああああああああああああ<br>
良い良い良い良い良い良い良い良い良い
</p>
<p class="sample" style="text-indent:100px;">
There are three apples on the desk.
</p>

<h5>text-indent:2em; を指定</h5>
<p class="sample" style="text-indent:2em;">
ああああああああああああああああ<br>
良い良い良い良い良い良い良い良い良い
</p>
<p class="sample" style="text-indent:2em;">
There are three apples on the desk.
</p>

<h5>text-indent:2em each-line; を指定</h5>
<p class="sample" style="text-indent:2em each-line;">
ああああああああああああああああ<br>
良い良い良い良い良い良い良い良い良い
</p>
<p class="sample" style="text-indent:2em each-line;">
There are three apples on the desk.
</p>

<h5>text-indent:2em hanging; を指定</h5>
<p class="sample" style="text-indent:2em hanging;">
ああああああああああああああああ<br>
良い良い良い良い良い良い良い良い良い
</p>
<p class="sample" style="text-indent:2em hanging;">
There are three apples on the desk.
</p>
p.sample {
	width:200px;
	background-color:gray;
}

【CSS】text-indent：テキストのインデント幅を調整する

　CSSのtext-indentは、テキストの１行目のインデント幅を調整するプロパティです。インデント幅には、負の値も指定可能です。

  • px,ex,em等
    単位でインデント幅を指定
  • %
    ブロックに対する％で指定
  • each-line
    １行目だけでなく、改行後もインデントをする
  • hanging
    １行目以外をインデントする
カテゴリー
CSS text-underline-position

【CSS】text-underline-position：テキストの傍線位置を調整する

（例）【CSS】text-underline-positionの使用方法

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

<p class="sample" style="text-underline-position: auto;">
text-underline-position: auto;</p>

<p class="sample" style="text-underline-position: under;">
text-underline-position:under;
</p>

<p class="sample" style="text-underline-position: left;">
text-underline-position:left;
</p>

<p class="sample" style="text-underline-position: right;">
text-underline-position:right;
</p>
p.sample {text-decoration: underline;}

【CSS】text-underline-position：テキストの傍線位置を調整する

　CSSのtext-underline-positionはテキストの傍線位置を調整するプロパティです。

  • auto
    英文字のベースラインに傍線が引かれる。それ以外はブラウザの仕様による（初期値）
  • under
    テキストの下に傍線が引かれる。
  • left
    縦書きの場合は左端に傍線が引かれる。横書きではunderと同一。
  • right
    縦書きの場合は右端に傍線が引かれる。横書きではunderと同一。
カテゴリー
CSS text-decoration

【CSS】text-decoration：テキスト傍線・色・スタイルを指定する

（例）【CSS】text-decoration：テキスト傍線・色・スタイルを指定する

See the Pen
text-decoration by linlin (@linlin098765)
on CodePen. 

<p class="sample1">text-decoration:none</p>
<p class="sample2">text-decoration:underline</p>
<p class="sample3">text-decoration:overline;</p>
<p class="sample4">text-decoration:line-through;</p>
<p class="sample5">text-decoration:blink;</p>
<p class="sample6">text-decoration:underline dotted red;</p>
p.sample1 {text-decoration: none;}
p.sample2 {text-decoration: underline;}
p.sample3 {text-decoration: overline;}
p.sample4 {text-decoration: line-through;}
p.sample5 {text-decoration: blink;}
p.sample6 {text-decoration: underline dotted red;}

【CSS】text-decoration：テキスト傍線・色・スタイルを指定する

　CSSのtext-decorationは、テキストの傍線、色、スタイルをまとめて指定するプロパティです。
　text-decorationプロパティで指定可能なものは、text-decoration-line、text-decoration-style、text-decoration-colorの３つです。複数指定する場合は半角スペースで区切り、指定しないものは初期値となります。

カテゴリー
CSS vertical-align

【CSS】vertical-align：縦方向を調整する

（例）【CSS】vertical-alignの使用方法

See the Pen
vertical-align by linlin (@linlin098765)
on CodePen. 

<div id="test">
<div><span class="rei">例</span><span class="oya">Example.<span class="sample1">baseline</span></span></div>
<div><span class="rei">例</span><span class="oya">Example.<span class="sample2">top</span></span></div>
<div><span class="rei">例</span><span class="oya">Example.<span class="sample3">middle</span></span></div>
<div><span class="rei">例</span><span class="oya">Example.<span class="sample4">bottom</span></span></div>
<div><span class="rei">例</span><span class="oya">Example.<span class="sample5">text-top</span></span></div>
<div><span class="rei">例</span><span class="oya">Example.<span class="sample6">text-bottom</span></span></div>
<div><span class="rei">例</span><span class="oya">Example.<span class="sample7">super</span></span></div>
<div><span class="rei">例</span><span class="oya">Example.<span class="sample8">sub</span></span></div>
</div>
#test div {background-color:gray; margin:2px;}
.rei {font-size:30px;}
.oya {font-size:16px; background-color:#ccffcc;}
.sample1 {font-size:12px; background-color:#ffccff; vertical-align:baseline;}
.sample2 {font-size:12px; background-color:#ffccff; vertical-align:top;}
.sample3 {font-size:12px; background-color:#ffccff; vertical-align:middle;}
.sample4 {font-size:12px; background-color:#ffccff; vertical-align:bottom;}
.sample5 {font-size:12px; background-color:#ffccff; vertical-align:text-top;}
.sample6 {font-size:12px; background-color:#ffccff; vertical-align:text-bottom;}
.sample7 {font-size:12px; background-color:#ffccff; vertical-align:super;}
.sample8 {font-size:12px; background-color:#ffccff; vertical-align:sub;}

【CSS】vertical-align：テキストの縦方向を調整する

　CSSのvertical-alignは、テキストや画像の縦方向を調整するプロパティです。vertical-alignプロパティは、インライン要素とテーブルセルに適用可能です。ブロック要素には適用不可です。

  • baseline
    親要素のベースラインに合わせる（初期値）
  • top
    上端揃え
  • middle
    中央揃え
  • bottom
    下端揃え
  • text-top
    テキストの上端揃え
  • text-bottom
    テキストの下端揃え
  • super
    上付き文字
  • sub
    下付き文字
  • %
    その要素のline-heightプロパティの値に対する割合を%で指定
  • 数値+単位
    数値にem,ex,px等の単位を加えて指定（ベースラインが揃った状態を0、正の値なら上、負の値なら下へ移動）

カテゴリー
CSS text-justify

【CSS】text-justify：テキストを均等割りにする

（例）【CSS】text-justifyの使用方法

See the Pen
text-justify by linlin (@linlin098765)
on CodePen. 

<h5>text-justify:auto; を指定</h5>
<p class="sample" style="text-justify:auto;">
あああああああああああああああああああ
</p>
<p class="sample" style="text-justify:auto;">
There are three apples on the desk.
</p>

<h5>text-justify:none; を指定</h5>
<p class="sample" style="text-justify:none;">
あああああああああああああああああああ
</p>
<p class="sample" style="text-justify:none;">
There are three apples on the desk.
</p>

<h5>text-justify:inter-word; を指定</h5>
<p class="sample" style="text-justify:inter-word;">
あああああああああああああああああああ
</p>
<p class="sample" style="text-justify:inter-word;">
There are three apples on the desk.
</p>

<h5>text-justify:inter-character; を指定</h5>
<p class="sample" style="text-justify:inter-character;">
あああああああああああああああああああ
</p>
<p class="sample" style="text-justify:inter-character;">
There are three apples on the desk.
</p>
p.sample {
	width:150px;
	background-color:gray;
	text-align:justify;
}

【CSS】text-justify：テキストを均等割りにする

　CSSのtext-justifyは、text-align:justifyを指定した際に、均等割りの形式を指定するプロパティです。

  • auto
    ブラウザの仕様にお任せ
  • none
    均等割りを無効
  • inter-word
    単語の区切りに合わせて均等割り
  • inter-character
    文字同士の間隔を調整することで均等割り