CSS3 – font-family

2020-12-02 / tau / コメントする

概要

使用する書体を指定する。

特定のフォント名ではない総称がある
フォント名は複数指定できる
複数指定された場合、前の方からサーチし、クライアント側にフォントがあればそれを使用
指定したフォントが存在しない場合、クライアント側のデフォルトフォントが使われる

書式

font-family: [フォント1] , [フォント2] , ...

フォント名は引用符～ダブルクォート(")かシングルクォート(')で囲む
ただし総称フォントを指定する場合は引用符で囲わない

フォント名

種類

sans-serif	ゴシック体などセリフがないフォント
serif	ローマン体・明朝体などセリフがあるフォント
monospace	等幅のフォント
cursive	筆記体・草書体に属するフォント
fantasy	装飾的なフォント

表示例

sans-serifはゴシック系のフォントです。

serifは明朝系のフォントです

monospaceは等幅のフォントです。

cursiveは筆記体・草書体のフォントです。

fantasyは装飾的なフォントです。

※総称フォントは引用符で囲いません

    <p style="font-family: san-serif;">
      sans-serifはゴシック系のフォントです。
    </p>
    <p style="font-family: serif;">
      serifは明朝系のフォントです
    </p>
    <p style="font-family: monospace;">
      monospaceは等幅のフォントです。
    </p>
    <p style="font-family: cursive;">
      cursiveは筆記体・草書体のフォントです。
    </p>
    <p style="font-family: fantasy;">
      fantasyは装飾的なフォントです。
    </p>
    <p>※総称フォントは引用符で囲いません<p>

sans-serifはゴシック系のフォントです。

</p>

serifは明朝系のフォントです

</p>

monospaceは等幅のフォントです。

</p>

cursiveは筆記体・草書体のフォントです。

</p>

fantasyは装飾的なフォントです。

</p>

<p>※総称フォントは引用符で囲いません<p>

複数指定

動作

フォントを複数指定することができる。各フォントは','（カンマ)で区切り、スペースの有無は任意。

クライアントは前の方から順番にサーチし、表示対象に使用可能なフォントであればそれを使い、そうでなければ次のフォントを探す。

最終的に利用可能なフォントがなければクライアント側のデフォルトフォントが使われる。

表示例

フォントの複数指定～’YU Gothic UI’, sans-serif

フォントの複数指定～’存在しないゴシックフォント’, sans-serif

フォントの複数指定～’存在しない明朝フォント’, serif

    <p style="font-family: 'YU Gothic UI', sans-serif">
      フォントの複数指定～'YU Gothic UI', sans-serif
    </p>
    <p style="font-family: '存在しないゴシックフォント', sans-serif">
      フォントの複数指定～'存在しないゴシックフォント', sans-serif
    </p>
    <p style="font-family: '存在しない明朝フォント', serif">
      フォントの複数指定～'存在しない明朝フォント', serif
    </p>

フォントの複数指定～'YU Gothic UI', sans-serif

</p>

フォントの複数指定～'存在しないゴシックフォント', sans-serif

</p>

フォントの複数指定～'存在しない明朝フォント', serif

</p>

CSS – プロパティー～機能・性質別

2020-12-02 / tau / コメントする

種類・配置・形状

表現

color/background-color

テキスト・フォント

CSS – プロパティー～アルファベット順

2020-12-02 / tau / コメントする

HTML5 – 要素～機能・性質別

2020-12-02 / tau / コメントする

設定

meta
- viewport
link

移動・遷移

a (anchor)

表示

canvas
- Path2D

入力・選択

HTML5 – 要素～アルファベット順

2020-12-02 / tau / コメントする

Tips – 親要素全面に子要素を張り付けて縦センタリング

2020-12-01 / tau / コメントする

概要

たとえば、アンカー要素を親のブロック要素に張り付けたり、ブロック化したリストアイテムに張り付けるような場合を想定。

親要素全面への貼り付けは、ブロック要素かインラインブロック要素がよさそうなので、それらで縦センタリングを試してみる。

試行結果

概要

以下の試行では、ブロックの親要素に対してブロック、インラインブロックの子要素を前面に貼り付けて、そのテキストを横方向と縦方向にセンタリングしている。

考え方は以下の通り。

親要素で
- widthとheightを指定
- heightと同じ値でline-heightを指定
子要素で
- widthとheightを100%として親要素の全面に貼り付け
- text-align: center;で水平方向にセンタリング
- vertical-align: middle;で垂直方向にセンタリング

親要素でline-heightを設定する意味は以下の通り。

デフォルトでは、親要素がブロックでもその中の行については行の高さが設定されている
子要素が親要素のwidthとheightに合わせて展開しても、その中の行の高さは追随して変わらない
親要素の行の高さを要素の高さと同じにすることで、子要素の行の高さも広がり、その中で縦センタリングされるようになる。

なお、子要素でline-height: 100%;としてもうまくいかない。これは、line-heightプロパティーが継承する値が親要素の行高さであって、親要素自体の高さではないためと思われる。

HTMLファイル

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>要素の拡張とセンタリングのテスト</title>
    <link rel="stylesheet" href="expand_centering.css">
  </head>
  <body>
    <div class="parent_block">
      <div class="child_block">block要素</div>
    </div>

    <div class="parent_block">
      <span class="child_inline_block">inline-block要素</span>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>要素の拡張とセンタリングのテスト</title>

</head>

<body>

<div class="child_block">block要素</div>

</div>

<span class="child_inline_block">inline-block要素</span>

</div>

</body>

</html>

CSSファイル

.parent_block {
  display: block;
  border: solid 2px #000000;
  width: 200px;
  height: 100px;
  padding: 0px;
  line-height: 100px;
}

.child_block {
  display: block;
  background-color: #b0e0e6;
  margin: 0px;
  height: 100%;
  text-align: center;
  vertical-align: middle;
}

.child_inline_block {
  display: inline-block;
  background-color: #98fb98;
  margin: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  vertical-align: middle;
}

.parent_block {

display: block;

border: solid 2px #000000;

width: 200px;

height: 100px;

padding: 0px;

line-height: 100px;

}

.child_block {

display: block;

background-color: #b0e0e6;

margin: 0px;

height: 100%;

text-align: center;

vertical-align: middle;

}

.child_inline_block {

display: inline-block;

background-color: #98fb98;

margin: 0px;

width: 100%;

height: 100%;

text-align: center;

vertical-align: middle;

}

結果

Chromeで表示させた結果、block、inline-blockとも縦横両方向でセンタリングされている。

改良

これまでの方法では、親要素でline-heightを設定するために、親要素の高さと同じ値を2度CSSに書かなければならなかった。これはメンテナンス上煩雑で、ミスも生じやすい。

カスタムプロパティーを使うと、変数に値を代入して使うように、同じ値を再利用できる。

以下は、上で使ったのCSSのparent_blockの部分で、heightとline-heightに同じカスタムプロパティーを参照させている。

.parent_block {
  --parent-height: 100px;
  display: block;
  border: solid 2px #000000;
  width: 200px;
  height: var(--parent-height);
  padding: 0px;
  line-height: var(--parent-height);
}

.parent_block {

--parent-height: 100px;

display: block;

border: solid 2px #000000;

width: 200px;

height: var(--parent-height);

padding: 0px;

line-height: var(--parent-height);

}

CSS3 – カスタムプロパティー

2020-12-01 / tau / コメントする

概要

CSSを書くとき、サイズ指定や色指定で同じ値を何度も打ち直すことがある。このように同じ値を常にコードとして打ち込むのは手間・ミスの素であり、メンテナンス上もよろしくない。

こういうとき、カスタムプロパティーを使うと、値を変数のように定義しておいて、何度も再利用できる。

書式

--[カスタムプロパティー名]: [値];

値

再利用するための値で、数値、色コードなど、プロパティーの値で指定可能なもの。

動作確認

以下のことを確認している。

CSS内全域で共通のカスタムプロパティーを定義
- –common-bg-color
parentクラスでカスタムプロパティーを定義
- –face-color
–common-bg-colorはbody要素、childクラスの要素のいずれにも反映
–face-colorはparentクラスの要素と、その子であるchildクラスの要素には反映されるが、parentクラスの要素から独立したchildクラスの要素には反映されない

HTMLファイル

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>カスタムプロパティーのテスト</title>
    <link rel="stylesheet" href="css_custom_property.css">
  </head>
  <body>
    <div class="parent">
      親ブロック
      <div class="child">
        親の下の子ブロック
      </div>
    </div>
    <div class="child">
      独立した子ブロック
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>カスタムプロパティーのテスト</title>

</head>

<body>

親ブロック

親の下の子ブロック

</div>

独立した子ブロック

</div>

</body>

</html>

CSSファイル

:root {
  --common-bg-color: #e0ffff;
}

body {
  background-color: var(--common-bg-color)
}

.parent {
  --face-color: #ff00ff;
  width: 300px;
  height: 200px;
  margin: 20px;
  background-color: #f5deb3;
  border: solid 2px #ff0000;
  color: var(--face-color)
}

.child {
  width: 200px;
  margin: 20px;
  color: var(--face-color);
  background-color: var(--common-bg-color);
  border: solid 2px #0000ff
}

:root {

--common-bg-color: #e0ffff;

}

body {

background-color: var(--common-bg-color)

}

.parent {

--face-color: #ff00ff;

width: 300px;

height: 200px;

margin: 20px;

background-color: #f5deb3;

border: solid 2px #ff0000;

color: var(--face-color)

}

.child {

width: 200px;

margin: 20px;

color: var(--face-color);

background-color: var(--common-bg-color);

border: solid 2px #0000ff

}

Tips – 親要素全面に子要素を貼り付ける

2020-12-01 / tau / コメントする

概要

たとえば以下のような場合を想定

ブロック要素にアンカー要素をいっぱいに広げてバナーのように使いたい
ブロック化したリストアイテムの中にアンカー要素を広げて張り付けて、領域のどこをクリックしても反応するようにしたい

結論としては、貼り付けたい要素をブロック要素かインラインブロック要素とするのがよさそう。

以下、親要素をブロック要素とする。

試行結果

概要

以下の試行結果は、ブロックの親要素に対して、子要素をブロック、インライン、インラインブロック、テーブル要素と様々なタイプにして、親要素全面への貼り付けを試してみたもの。

考え方は共通。

親要素でwidth/heightを指定
子要素でwidth and/or heightを100%で設定

HTMLファイル

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>要素の拡張テスト</title>
    <link rel="stylesheet" href="expand.css">
  </head>
  <body>
    <div class="parent_block">
      <div class="child_block">block要素</div>
    </div>

    <div class="parent_block">
      <span class="child_inline">inline要素</span>
    </div>

    <div class="parent_block">
      <span class="child_inline_block">inline-block要素</span>
    </div>

    <div class="parent_block">
      <span class="child_table_cell">table-cell要素</span>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>要素の拡張テスト</title>

</head>

<body>

<div class="child_block">block要素</div>

</div>

<span class="child_inline">inline要素</span>

</div>

<span class="child_inline_block">inline-block要素</span>

</div>

<span class="child_table_cell">table-cell要素</span>

</div>

</body>

</html>

CSSファイル

.parent_block {
  display: block;
  border: solid 2px #000000;
  width: 200px;
  height: 100px;
  padding: 0px;
}

.child_block {
  display: block;
  background-color: #b0e0e6;
  margin: 0px;
  height: 100%;
}

.child_inline {
  display: inline;
  background-color: #ffa07a;
  margin: 0px;
  width: 100%;
  height: 100%;
}

.child_inline_block {
  display: inline-block;
  background-color: #98fb98;
  margin: 0px;
  width: 100%;
  height: 100%
}

.child_table_cell {
  display: table-cell;
  background-color: #f0e68c;
  width: 100%;
  height: 100%;
}

.parent_block {

display: block;

border: solid 2px #000000;

width: 200px;

height: 100px;

padding: 0px;

}

.child_block {

display: block;

background-color: #b0e0e6;

margin: 0px;

height: 100%;

}

.child_inline {

display: inline;

background-color: #ffa07a;

margin: 0px;

width: 100%;

height: 100%;

}

.child_inline_block {

display: inline-block;

background-color: #98fb98;

margin: 0px;

width: 100%;

height: 100%

}

.child_table_cell {

display: table-cell;

background-color: #f0e68c;

width: 100%;

height: 100%;

}

結果

Chromeで表示させた結果。

inline要素はpxなどの固定値でもwidth/heightは設定できない
table-cell要素はpxなどの固定値ならwidth/heightは変化するが、%では親要素に追随しなかった

まとめ

子要素がblock要素

margin: 0;、height: 100%;を指定して全面貼り付け可能
widthはデフォルトで100%になっていることが多いが、念のために指定した方がいいか

子要素がinline要素

widthやheightが指定できないので、全面貼り付けは困難

子要素がinline-block要素

margin: 0;、width: 100%、height: 100%;を指定して全面貼り付け可能
widthとheightがデフォルトではインラインと同じ挙動だが、設定することで固定できる

子要素がtable-cell要素

widthやheightの%が効かなさそうなので、全面貼り付けは困難

CSS3 – list-style-type～マーカー

2020-11-30 / tau / コメントする

概要

ul、olの様々なマーカーを設定する。

書式

list-style-type: [マーカースタイル];

値

none	list
disc	list
circle	list
square	list
decimal	list
decimal-leading-zero	list
lower-roman	list
upper-roman;	list
lower-latin	list
upper-latin	list
lower-alpha	list
upper-alpha	list
lower-greek	list
cjk-ideographic	list
hiragana	list
katakana	list
hiragana-iroha	list
katakana-iroha	list

動作確認

    <h1>ul</h1>
    <p>list-style-type: none;</p>
    <ul style="list-style-type: none">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ul>

    <p>list-style-type: disc;</p>
    <ul style="list-style-type: disc">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ul>

    <p>list-style-type: circle;</p>
    <ul style="list-style-type: circle">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ul>

    <p>list-style-type: square;</p>
    <ul style="list-style-type: square">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ul>

    <p>list-style-type: decimal;</p>
    <ol style="list-style-type: decimal">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ol>

    <p>list-style-type: decimal-leading-zero;</p>
    <ol style="list-style-type: decimal-leading-zero">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ol>

    <p>list-style-type: lower-roman;</p>
    <ol style="list-style-type: lower-roman">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ol>

    <p>list-style-type: upper-roman;</p>
    <ol style="list-style-type: upper-roman">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ol>

    <p>list-style-type: lower-latin;</p>
    <ol style="list-style-type: lower-latin">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ol>

    <p>list-style-type: upper-latin;</p>
    <ol style="list-style-type: upper-latin">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ol>

    <p>list-style-type: lower-alpha;</p>
    <ol style="list-style-type: lower-alpha">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ol>

    <p>list-style-type: upper-alpha;</p>
    <ol style="list-style-type: upper-alpha">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ol>

    <p>list-style-type: lower-greek;</p>
    <ol style="list-style-type: lower-greek">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ol>

    <p>list-style-type: cjk-ideographic;</p>
    <ol style="list-style-type: cjk-ideographic">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ol>

    <p>list-style-type: hiragana;</p>
    <ol style="list-style-type: hiragana">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ol>

    <p>list-style-type: katakana;</p>
    <ol style="list-style-type: katakana">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ol>

    <p>list-style-type: hiragana-iroha;</p>
    <ol style="list-style-type: hiragana-iroha">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ol>

    <p>list-style-type: katakana-iroha;</p>
    <ol style="list-style-type: katakana-iroha">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ol>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

<p>list-style-type: none;</p>

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ul>

<p>list-style-type: disc;</p>

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ul>

<p>list-style-type: circle;</p>

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ul>

<p>list-style-type: square;</p>

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ul>

<p>list-style-type: decimal;</p>

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ol>

<p>list-style-type: decimal-leading-zero;</p>

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ol>

<p>list-style-type: lower-roman;</p>

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ol>

<p>list-style-type: upper-roman;</p>

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ol>

<p>list-style-type: lower-latin;</p>

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ol>

<p>list-style-type: upper-latin;</p>

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ol>

<p>list-style-type: lower-alpha;</p>

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ol>

<p>list-style-type: upper-alpha;</p>

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ol>

<p>list-style-type: lower-greek;</p>

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ol>

<p>list-style-type: cjk-ideographic;</p>

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ol>

<p>list-style-type: hiragana;</p>

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ol>

<p>list-style-type: katakana;</p>

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ol>

<p>list-style-type: hiragana-iroha;</p>

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ol>

<p>list-style-type: katakana-iroha;</p>

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ol>

ul

list-style-type: none;

ガンダム
ガンキャノン
ガンタンク

list-style-type: disc;

ガンダム
ガンキャノン
ガンタンク

list-style-type: circle;

ガンダム
ガンキャノン
ガンタンク

list-style-type: square;

ガンダム
ガンキャノン
ガンタンク

ol

list-style-type: decimal;

ガンダム
ガンキャノン
ガンタンク

list-style-type: decimal-leading-zero;

ガンダム
ガンキャノン
ガンタンク

list-style-type: lower-roman;

ガンダム
ガンキャノン
ガンタンク

list-style-type: upper-roman;

ガンダム
ガンキャノン
ガンタンク

list-style-type: lower-latin;

ガンダム
ガンキャノン
ガンタンク

list-style-type: upper-latin;

ガンダム
ガンキャノン
ガンタンク

list-style-type: lower-alpha;

ガンダム
ガンキャノン
ガンタンク

list-style-type: upper-alpha;

ガンダム
ガンキャノン
ガンタンク

list-style-type: lower-greek;

ガンダム
ガンキャノン
ガンタンク

list-style-type: cjk-ideographic;

ガンダム
ガンキャノン
ガンタンク

list-style-type: hiragana;

ガンダム
ガンキャノン
ガンタンク

list-style-type: katakana;

ガンダム
ガンキャノン
ガンタンク

list-style-type: hiragana-iroha;

ガンダム
ガンキャノン
ガンタンク

list-style-type: katakana-iroha;

ガンダム
ガンキャノン
ガンタンク

CSS3 – marginとpadding

2020-11-30 / tau / コメントする

概要

marginでボックス要素の外側の余白、paddingでボックス要素の内側の余白を設定する。

以下の例は、p要素にmargin=40pxとpadding=20pxを設定していて、親のbody要素からp要素の外側まで40px、p要素の外側からその内容まで20pxの余白がとられている。

　<p style="border: solid; margin: 40px; padding: 20px;">
　　ゴーシュは町の活動写真館でセロを弾く係りでした。
　　けれどもあんまり上手でないという評判でした。
　　上手でないどころではなく実は仲間の楽手のなかではいちばん下手でしたから、
　　いつでも楽長にいじめられるのでした。
　</p>

　　ゴーシュは町の活動写真館でセロを弾く係りでした。

　　けれどもあんまり上手でないという評判でした。

　　上手でないどころではなく実は仲間の楽手のなかではいちばん下手でしたから、

　　いつでも楽長にいじめられるのでした。

　</p>

ゴーシュは町の活動写真館でセロを弾く係りでした。けれどもあんまり上手でないという評判でした。上手でないどころではなく実は仲間の楽手のなかではいちばん下手でしたから、いつでも楽長にいじめられるのでした。

書式

margin、paddingはボックス要素の外と内に対する余白で、上下左右の余白量に対する指定の仕方は双方に共通する。

1つのmargin/paddingでまとめて指定

margin/padding [上下左右]: 上下左右全ての余白を同じ値で設定。

margin/padding [上下] [左右]: 上と下、左と右に共通する余白を指定。
margin/padding [上] [左右] [下]: 上、左右共通、下の余白を設定
margin/padding [上] [右] [下] [左]: 上、右、下、左の余白をそれぞれ設定。上から時計回り。

4つの辺のいずれかの余白を個別に設定

margin/paddingに以下を続けて、それぞれの余白を個別に設定。

-top　上
-bottom　下
-left　左
-right　右

たとえばpadding-left: 20px;は左内側の余白を20pxで指定。