投稿者: Linlin

カテゴリー
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
    文字同士の間隔を調整することで均等割り
カテゴリー
CSS text-align

【CSS】text-align：テキスト位置を指定する

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

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

<p class="sample" style="text-align:start;">
text-align:start; を指定<br>
There are three apples on the desk.
</p>
<p class="sample" style="text-align:end;">
text-align:end; を指定<br>
There are three apples on the desk.
</p>
<p class="sample" style="text-align:left;">
text-align:left; を指定<br>
There are three apples on the desk.
</p>
<p class="sample" style="text-align:right;">
text-align:right; を指定<br>
There are three apples on the desk.
</p>
<p class="sample" style="text-align:center;">
text-align:center; を指定<br>
There are three apples on the desk.
</p>
<p class="sample" style="text-align:justify;">
text-align:justify; を指定<br>
There are three apples on the desk.
</p>
<p class="sample" style="text-align:justify-all;">
text-align:justify-all; を指定<br>
There are three apples on the desk.
</p>
<p class="sample" style="text-align:match-parent;">
text-align:match-parent; を指定<br>
There are three apples on the desk.
</p>
p.sample {
	width:100px;
	background-color:gray;
}

【CSS】text-align：テキスト位置を指定する

　CSSのtext-alignは、テキストを行の中でどの位置にするか指定するプロパティです。

  • start
    始端に揃える（初期値）
  • end
    終端に揃える
  • left
    左端に揃える
  • right
    右端に揃える
  • center
    中央に揃える
  • justify
    均等割り。始端から終端まで均等割りとなる
  • justify-all
    均等割り。最後の行まで均等割りとなる
  • match-parent
    親要素の配置を継承する
カテゴリー
CSS line-height

【CSS】line-height：行の高さを調整する

（例）【CSS】line-heightの使用方法

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

<p class="p">フォント</p>
<p class="p2">abcABC</p>
.p{
  font: bold large/20px "ＭＳ 明朝";
}
.p2{
  font-style:italic;
  font-variant: small-caps;
  font-weight:bold;
  font-size:30px;
  font-family:"ＭＳ ゴシック",sans-serif;
  line-height:40px;
  background-color:gray;
}

【CSS】line-height：行の高さを調整する

　CSSのline-heightは、行の高さを調整するプロパティです。
　line-height：10pxでfont-size:10pxの場合、フォントは中央表示となります。line-height:16pxでfont-size:10pxの場合、行間に上下3pxずつ割り振られます。

カテゴリー
CSS font-family

【CSS】font-family：フォントの種類を指定

（例）【CSS】font-familyの使用方法

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

<p class="p">フォント</p>
<p class="p2">abcABC</p>
.p{
  font: bold large/20px "ＭＳ 明朝";
}
.p2{
  font-style:italic;
  font-variant: small-caps;
  font-weight:bold;
  font-size:30px;
  font-family:"ＭＳ ゴシック",sans-serif;
  line-height:40px;
  background-color:gray;
}

【CSS】font-family：フォントの種類を指定

　CSSのfont-familyは、フォントの種類を指定するプロパティです。
　フォントの種類は「,」で区切れば複数選択が可能であり、ブラウザで表示可能なフォントまで順に読み込まれます。
　font-familyで指定したフォントが無い場合、ブラウザの標準フォントで表示されます。

カテゴリー
CSS font-size

【CSS】font-size：フォントの文字サイズを変更する

（例）【CSS】font-sizeの使用方法

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

<p class="p">フォント</p>
<p class="p2">abcABC</p>
.p{
  font: bold large/20px "ＭＳ 明朝";
}
.p2{
  font-style:italic;
  font-variant: small-caps;
  font-weight:bold;
  font-size:30px;
  font-family:"ＭＳ ゴシック",sans-serif;
  line-height:40px;
  background-color:gray;
}

【CSS】font-size：フォントの文字サイズを変更する

　CSSのfont-sizeはフォントの文字サイズを変更するプロパティです。

  • px
    px指定。画面解像度によって変動。1刻みで指定。
  • em
    フォントの高さを１として指定可能。
  • ex
    フォントのxの高さを１とする指定方法。
  • %
    親要素のフォントサイズに対しての%指定。
  • vw
    画面横幅に対するフォントサイズ指定。
  • vh
    画面縦幅に対するフォントサイズ指定。
  • キーワード
    xx-small、x-small、small、medium、large、x-large、xx-largeがあり、mediumが標準です。1段階上がると1.2倍のサイズになります。
カテゴリー
CSS font-weight

【CSS】font-weight：フォントの太さを指定

（例）【CSS】font-weightの使用方法

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

<p class="p">フォント</p>
<p class="p2">abcABC</p>
.p{
  font: bold large/20px "ＭＳ 明朝";
}
.p2{
  font-style:italic;
  font-variant: small-caps;
  font-weight:bold;
  font-size:30px;
  font-family:"ＭＳ ゴシック",sans-serif;
  line-height:40px;
  background-color:gray;
}

【CSS】font-weight：フォントの太さを指定

　CSSのfont-weightは、フォントの太さを指定するプロパティです。

  • 100〜900
    数値が小さいほど細い。100刻みで指定。
  • normal
    標準。400と同じ太さ。
  • bold
    太文字。700と同じ太さ。
  • lighter
    相対的に１段階細い。
  • bolder
    相対的に１段階太い。