カテゴリー: CSS

カテゴリー
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
    相対的に１段階太い。
カテゴリー
CSS font-variant

【CSS】font-variant：フォントを小文字にする

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

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-variant：フォントを小文字にする

　CSSのfont-variantはフォントを小文字（スモールキャップ）にするプロパティです。
　スモールキャップは、小文字の表示形式が小文字サイズの大文字のものを指します。 文字にスモールキャップが無い場合、大文字を縮小したものを小文字として表示します。

カテゴリー
CSS font-style

【CSS】font-style：文字をイタリック体・斜体にする

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

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-style：文字をイタリック体・斜体にする

　CSSのfont-styleは、フォントをnormal（標準）、italic（イタリック体）、oblique（斜体）に指定できるプロパティです。
　italicとobliqueは日本語では通常同じ斜め型の文字となりますので違いはありません。obliqueと比較してitalicの場合、斜め文字でも筆記体風になるのが通常ですが、日本語の場合は変わりません。

カテゴリー
CSS font

【CSS】font：フォント

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

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：フォント

　CSSのfontはフォントに関する指定をまとめて行えるプロパティです。
　fontプロパティに指定できるのは以下の順番です。

  1. font-style、font-variant、font-weight
  2. font-size
  3. line-height
  4. font-family

　line-heightを指定する場合、line-heightの値の前にスラッシュ「 /」が必須です。

◆　font: bold large/120% “ＭＳ 明朝”;

　fontプロパティを使用すると、フォントに関するスタイル（プロパティ）リセットされます。

カテゴリー
background-repeat CSS

【CSS】background-repeat：背景画像のリピート方法

（例）【CSS】background-repeatの使用方法

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

<body>

  
</body>
body {
background-image: url("https://www.llc-linlin.com/picture/SEO.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom
}

【CSS】background-repeat：背景画像のリピート方法

　CSSのbackground-repeatは、背景画像のリピート方法を指定するプロパティです。

  • repeat
    縦と横に背景画像を繰り返して表示
  • repeat-x
    横にのみ背景画像を繰り返して表示
  • repeat-y
    縦にのみ背景画像を繰り返して表示
  • no-repeat
    背景画像を１回のみ表示
カテゴリー
background-position CSS

【CSS】background-position：背景画像の表示位置を指定

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

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

<body>

  
</body>
body {
background-image: url("https://www.llc-linlin.com/picture/SEO.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom
}

【CSS】background-position：背景画像の表示位置を指定

　CSSのbackground-positionは背景画像の表示位置を指定するプロパティです。
　背景画像の表示位置は、left・centerと言った位置指定から、％や数値（pxやvw等）でも指定可能です。