JS/ES – 変数のスコープ

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

スコープの種類と宣言キーワード

スコープの種類

グローバルスコープ

ドキュメント内のどこからでも参照可能。

関数スコープ

宣言された関数内でのみ参照可能。関数内の入れ子の関数・ブロックからは参照可能。

ブロックスコープ

宣言されたブロック内でのみ参照可能。ブロック内の入れ子の関数・ブロックからは参照可能。

宣言キーワードとスコープ

キーワードなしの宣言

ドキュメント内のどこからでも参照可能なグローバルスコープ。

`var`

宣言された関数内の関数スコープ。

ドキュメント直下で宣言した場合、グローバルスコープ
関数で宣言した場合、その関数内のスコープ
ブロック内で宣言した場合、そのすぐ外側の関数のスコープ（ブロックがドキュメント直下にあればグローバルスコープ）

`let, const`

宣言されたブロック内のブロックスコープ。

ドキュメント直下で宣言した場合、グローバルスコープ
関数で宣言した場合、その関数内のスコープ

確認

グローバルスコープ

JSコード

function func() {
  console.log('--- in function ---')
  console.log(global_none);
  console.log(global_var);
  console.log(global_let);
  console.log(global_const);

  global_none = 'global_none: rev in func';
  global_var = 'global_var: rev in func';
  global_let = 'global_let: rev in func';
  //global_const = 'global_const: rev in func';
  // -> Uncaught TypeError: Assignment to constant variable
  console.log('global_const: CANNOT assign')
}

global_none = 'global_none: init in global';
var global_var = 'global_var: init in global';
let global_let = 'global_let: init in global';
const global_const = 'global_const: init in global';

console.log('--- global ---')
console.log(global_none);
console.log(global_var);
console.log(global_let);
console.log(global_const);

func();

console.log('--- after function call ---')
console.log(global_none);
console.log(global_var);
console.log(global_let);
console.log(global_const);

{
  console.log('--- in block ---')
  console.log(global_none);
  console.log(global_var);
  console.log(global_let);
  console.log(global_const);

  global_none = 'global_none: rev in block';
  global_var = 'global_var: rev in block';
  global_let = 'global_let: rev in block';
  //global_const = 'global_const: rev in func';
  // -> Uncaught TypeError: Assignment to constant variable
  console.log('global_const: CANNOT assign')
}

console.log('--- after block ---')
console.log(global_none);
console.log(global_var);
console.log(global_let);
console.log(global_const);

function func() {

console.log('--- in function ---')

console.log(global_none);

console.log(global_var);

console.log(global_let);

console.log(global_const);

global_none = 'global_none: rev in func';

global_var = 'global_var: rev in func';

global_let = 'global_let: rev in func';

//global_const = 'global_const: rev in func';

// -> Uncaught TypeError: Assignment to constant variable

console.log('global_const: CANNOT assign')

}

global_none = 'global_none: init in global';

var global_var = 'global_var: init in global';

let global_let = 'global_let: init in global';

const global_const = 'global_const: init in global';

console.log('--- global ---')

console.log(global_none);

console.log(global_var);

console.log(global_let);

console.log(global_const);

func();

console.log('--- after function call ---')

console.log(global_none);

console.log(global_var);

console.log(global_let);

console.log(global_const);

{

console.log('--- in block ---')

console.log(global_none);

console.log(global_var);

console.log(global_let);

console.log(global_const);

global_none = 'global_none: rev in block';

global_var = 'global_var: rev in block';

global_let = 'global_let: rev in block';

//global_const = 'global_const: rev in func';

// -> Uncaught TypeError: Assignment to constant variable

console.log('global_const: CANNOT assign')

}

console.log('--- after block ---')

console.log(global_none);

console.log(global_var);

console.log(global_let);

console.log(global_const);

実行結果

--- global ---
global_none: init in global
global_var: init in global
global_let: init in global
global_const: init in global
--- in function ---
global_none: init in global
global_var: init in global
global_let: init in global
global_const: init in global
global_const: CANNOT assign
--- after function call ---
global_none: rev in func
global_var: rev in func
global_let: rev in func
global_const: init in global
--- in block ---
global_none: rev in func
global_var: rev in func
global_let: rev in func
global_const: init in global
global_const: CANNOT assign
--- after block ---
global_none: rev in block
global_var: rev in block
global_let: rev in block
global_const: init in global

--- global ---

global_none: init in global

global_var: init in global

global_let: init in global

global_const: init in global

--- in function ---

global_none: init in global

global_var: init in global

global_let: init in global

global_const: init in global

global_const: CANNOT assign

--- after function call ---

global_none: rev in func

global_var: rev in func

global_let: rev in func

global_const: init in global

--- in block ---

global_none: rev in func

global_var: rev in func

global_let: rev in func

global_const: init in global

global_const: CANNOT assign

--- after block ---

global_none: rev in block

global_var: rev in block

global_let: rev in block

global_const: init in global

関数スコープ

var, let, constとも関数内で宣言された場合はその関数内のみのスコープ
宣言された関数の中に入れ子で宣言された関数からは参照可能
入れ子の内側の関数内で宣言されたvar, let, constは、外側の関数からは参照できない

JSコード

function func() {
  console.log('--- in function ---')

  var func_var = 'func_var: init in function';
  let func_let = 'func_let: init in function';
  const func_const = 'func_const init in function';

  console.log(func_var);
  console.log(func_let);
  console.log(func_const);

  (function() {
    var nested_func_var = 'nested_func_var: init in nested function';
    let nested_func_let = 'nested_func_var: init in nested function';
    const nested_func_const = 'nested_func_const: init in nested function';

    console.log('--- in nested function ---')
    func_var = 'func_var: rev in nested function'
    func_let = 'func_let: rev in nested function'
    console.log(func_const);
  })()

  console.log('--- after nested function ---')
  console.log(func_var);
  console.log(func_let);
  console.log(func_const);

  //console.log(nested_func_var);
  console.log('nested_func_var: NOT defined');
  //console.log(nested_func_let);
  console.log('nested_func_let: NOT defined');
  //console.log(nested_func_const);
  console.log('nested_func_const: NOT defined');
}

func();

console.log('--- after function call ---')
//console.log(func_let);
// -> Uncaught ReferenceError: func_let is not defined
console.log('func_var: NOT defined');
//console.log(func_let);
// -> Uncaught ReferenceError: func_let is not defined
console.log('func_let: NOT defined');
//console.log(func_const);
// -> Uncaught ReferenceError: func_cost is not defined
console.log('func_cost: NOT defined');

function func() {

console.log('--- in function ---')

var func_var = 'func_var: init in function';

let func_let = 'func_let: init in function';

const func_const = 'func_const init in function';

console.log(func_var);

console.log(func_let);

console.log(func_const);

(function() {

var nested_func_var = 'nested_func_var: init in nested function';

let nested_func_let = 'nested_func_var: init in nested function';

const nested_func_const = 'nested_func_const: init in nested function';

console.log('--- in nested function ---')

func_var = 'func_var: rev in nested function'

func_let = 'func_let: rev in nested function'

console.log(func_const);

})()

console.log('--- after nested function ---')

console.log(func_var);

console.log(func_let);

console.log(func_const);

//console.log(nested_func_var);

console.log('nested_func_var: NOT defined');

//console.log(nested_func_let);

console.log('nested_func_let: NOT defined');

//console.log(nested_func_const);

console.log('nested_func_const: NOT defined');

}

func();

console.log('--- after function call ---')

//console.log(func_let);

// -> Uncaught ReferenceError: func_let is not defined

console.log('func_var: NOT defined');

//console.log(func_let);

// -> Uncaught ReferenceError: func_let is not defined

console.log('func_let: NOT defined');

//console.log(func_const);

// -> Uncaught ReferenceError: func_cost is not defined

console.log('func_cost: NOT defined');

実行結果

--- global ---
--- in function ---
func_var: init in function
func_let: init in function
func_const init in function
--- in nested function ---
func_const init in function
--- after nested function ---
func_var: rev in nested function
func_let: rev in nested function
func_const init in function
nested_func_var: NOT defined
nested_func_let: NOT defined
nested_func_const: NOT defined
--- after function call ---
func_var: NOT defined
func_let: NOT defined
func_cost: NOT defined

--- global ---

--- in function ---

func_var: init in function

func_let: init in function

func_const init in function

--- in nested function ---

func_const init in function

--- after nested function ---

func_var: rev in nested function

func_let: rev in nested function

func_const init in function

nested_func_var: NOT defined

nested_func_let: NOT defined

nested_func_const: NOT defined

--- after function call ---

func_var: NOT defined

func_let: NOT defined

func_cost: NOT defined

ブロックスコープ

var宣言はブロック内外に関わらず参照可能
let, constは宣言されたブロック内のみのスコープ
宣言されたブロックの中の入れ子のブロックからは参照可能
入れ子の内側のブロック内で宣言されたvar, let, constは、外側のブロックからは参照できない

JSコード

console.log('--- global ---')
{
  console.log('--- in block ---');
  var block_var = 'block_var: init in block';
  let block_let = 'block_let: init in block';
  const block_const = 'block_const: init in block';

  console.log(block_var);
  console.log(block_let);
  console.log(block_const);

  {
    console.log('--- in nested block ---');
    var nested_block_var = 'nested_block_var: init in nested block';
    let nested_block_let = 'nested_block_let: init in nested block';
    const nested_block_const = 'nested_block_const: init in nested block';

    block_var = 'block_var: rev in nested block';
    block_let = 'block_let: rev in nested block';
    console.log(block_const);
  }

  console.log('--- after nested block ---');
  console.log(block_var);
  console.log(block_let);
  console.log(block_const);

  console.log(nested_block_var);
  //console.log(nested_block_let);
  console.log('nested_block_let: NOT defined');
  //console.log(nested_block_const);
  console.log('nested_block_const: NOT defined');
}

console.log('--- after block ---');
console.log(block_var);
//console.log(block_let);
// -> Uncaught ReferenceError: block_let is not defined
console.log('block_let: NOT defined');
//console.log(block_const);
// -> Uncaught ReferenceError: func_var is not defined
console.log('block_const: NOT defined');

console.log('--- global ---')

{

console.log('--- in block ---');

var block_var = 'block_var: init in block';

let block_let = 'block_let: init in block';

const block_const = 'block_const: init in block';

console.log(block_var);

console.log(block_let);

console.log(block_const);

{

console.log('--- in nested block ---');

var nested_block_var = 'nested_block_var: init in nested block';

let nested_block_let = 'nested_block_let: init in nested block';

const nested_block_const = 'nested_block_const: init in nested block';

block_var = 'block_var: rev in nested block';

block_let = 'block_let: rev in nested block';

console.log(block_const);

}

console.log('--- after nested block ---');

console.log(block_var);

console.log(block_let);

console.log(block_const);

console.log(nested_block_var);

//console.log(nested_block_let);

console.log('nested_block_let: NOT defined');

//console.log(nested_block_const);

console.log('nested_block_const: NOT defined');

}

console.log('--- after block ---');

console.log(block_var);

//console.log(block_let);

// -> Uncaught ReferenceError: block_let is not defined

console.log('block_let: NOT defined');

//console.log(block_const);

// -> Uncaught ReferenceError: func_var is not defined

console.log('block_const: NOT defined');

実行結果

--- global ---
--- in block ---
block_var: init in block
block_let: init in block
block_const: init in block
--- in nested block ---
block_const: init in block
--- after nested block ---
block_var: rev in nested block
block_let: rev in nested block
block_const: init in block
nested_block_var: init in nested block
nested_block_let: NOT defined
nested_block_const: NOT defined
--- after block ---
block_var: rev in nested block
block_let: NOT defined
block_const: NOT defined

--- global ---

--- in block ---

block_var: init in block

block_let: init in block

block_const: init in block

--- in nested block ---

block_const: init in block

--- after nested block ---

block_var: rev in nested block

block_let: rev in nested block

block_const: init in block

nested_block_var: init in nested block

nested_block_let: NOT defined

nested_block_const: NOT defined

--- after block ---

block_var: rev in nested block

block_let: NOT defined

block_const: NOT defined

Tips – リストのマーカーを画像に

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

list-style-imageによる方法

直感的で簡明な方法。ただしマーカーの画像の位置やサイズの調整が細やかにできない難点がある。

HTML

    <ul class="list_style">
      <li>いぬ</li>
      <li>さる</li>
      <li>きじ</li>
    </ul>

</ul>

CSS

ul.list_style {
  list-style-image: url("./triangle.png");
}

ul.list_style {

list-style-image: url("./triangle.png");

}

背景画像による方法

手数が多くなるが、画像の位置やサイズの調整を細やかに調整できる。大まかな手順は以下の通り。

ulで
- list-styleを消す
- マーカーを含めた適切なインデント位置にするため、paddingを設定する
liで
- backgroundやbackground-imageで画像ファイルを読み込む
- no-repeat指定
- positionは左からの距離と上からの距離が標準
- マーカーとテキストが重ならないようにpaddingを設定

HTML

    <ul class="background">
      <li>いぬ</li>
      <li>さる</li>
      <li>きじ</li>
    </ul>

</ul>

CSS

ul.background {
  padding-left: 20px;
  list-style: none;
}

ul.background li {
  background-image: url("./triangle.png");
  background-repeat: no-repeat;
  background-position: 0px 5px;
  padding-left: 20px;
}

ul.background {

padding-left: 20px;

list-style: none;

}

ul.background li {

background-image: url("./triangle.png");

background-repeat: no-repeat;

background-position: 0px 5px;

padding-left: 20px;

}

Tips – 間にだけ仕切り線を引く

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

概要

たとえば縦に並んだリストの要素間だけに横の境界線を引いたり、横に並んだ要素の左右以外の間にだけ縦の境界線を引きたい場合。

隣接セレクターを使う方法

以下の例は、li要素に対して隣接セレクター（隣接兄弟結合子：adjacent sibling combinator）を利用している。

HTML

    <ul class="adjacent">
      <li><span>1番目のアイテム</span></li>
      <li><span>2番目のアイテム</span></li>
      <li><span>3番目のアイテム</span></li>
      <li><span>4番目のアイテム</span></li>
      <li><span>5番目のアイテム</span></li>
    </ul>

<li><span>1番目のアイテム</span></li>

<li><span>2番目のアイテム</span></li>

<li><span>3番目のアイテム</span></li>

<li><span>4番目のアイテム</span></li>

<li><span>5番目のアイテム</span></li>

</ul>

CSS

ul {
  list-style-type: none;
}

.adjacent li + li span {
  border-top: solid 1px #000;
}

ul {

list-style-type: none;

}

.adjacent li + li span {

border-top: solid 1px #000;

}

隣接セレクターは、セレクターAとセレクターBを'+'結合子でつなぐ。そうすると、BのうちAの直後に置かれたもののみにスタイルが適用される。

上の例では、先頭のli要素にはその前のli要素がないのでスタイルが適用されない。2番目以降のli要素には直前のli要素があるので上線が引かれる。その結果、最初のli要素の上側と最後のli要素の下側には線が引かれず、li要素間にのみ線が引かれることになる。

なお上の例では、

adjacentクラスの中のli要素にのみ対象としている
ブロック要素であるliの中にインライン要素のspanを置き、そのspanに対して上線を引いている

疑似クラスを使う方法

疑似クラスを使って以下のようにしても実現できる。

全ての要素に上線を引く
最初の要素だけ境界なしとしてオーバーライド

HTML

    <ul class="pseudo">
      <li><span>1番目のアイテム</span></li>
      <li><span>2番目のアイテム</span></li>
      <li><span>3番目のアイテム</span></li>
      <li><span>4番目のアイテム</span></li>
      <li><span>5番目のアイテム</span></li>
    </ul>

<li><span>1番目のアイテム</span></li>

<li><span>2番目のアイテム</span></li>

<li><span>3番目のアイテム</span></li>

<li><span>4番目のアイテム</span></li>

<li><span>5番目のアイテム</span></li>

</ul>

CSS

.pseudo li span {
  border-top: solid 1px #00f;
}

.pseudo li:first-child span {
  border: none;
}

.pseudo li span {

border-top: solid 1px #00f;

}

.pseudo li:first-child span {

border: none;

}

この方法は、一旦全要素に線を引いてから1つ目を消すという2度手間になっている。

なお、上線とfirst-childの代わりに下線とlast-childでも同様のことが実現できる。

クラスを使う方法

ブラウザーによって隣接セレクターや疑似クラスが使えない場合は、最初か最後のli要素にクラスを指定して、疑似クラスと似たような方法で線を消す。

CSS3 – 疑似クラス

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

概要

疑似クラス(phseudo classes)は指定したセレクターの要素に対して、各疑似クラスの条件に合致した場合のみスタイルを適用する。

書式

[セレクター]:[疑似クラス名] { ...}

セレクターはタグの要素名やクラス名の組み合わせ。

コロンは1つ。

主な疑似クラス

:hover

指定したセレクター上にマウスカーソルが乗っている間だけスタイルを適用する。

HTML

    <p>
      <span class="inversion">この文の上にマウスカーソルを置いてみてください</span>
    </p>

<p>

<span class="inversion">この文の上にマウスカーソルを置いてみてください</span>

</p>

CSS

.inversion {
  background-color: #fff;
  color: #00f;
}

.inversion {

background-color: #fff;

color: #00f;

}

:first-child/:last-child

複数の同じ親に属する要素群のうち最初の要素のみスタイルを適用する。

HTML

    <div class="indent">
      <p>
        first-child疑似要素によって、ある親要素の下の要素群の最初の要素にのみ
        特定のスタイルを適用できます。
      </p>
      <p>
        たとえばこのケースではdiv要素の下に2つのp要素がありますが、
        最初のp要素の文章のみが1字下げられています。
      </p>
    </div>

<p>

first-child疑似要素によって、ある親要素の下の要素群の最初の要素にのみ

特定のスタイルを適用できます。

</p>

<p>

たとえばこのケースではdiv要素の下に2つのp要素がありますが、

最初のp要素の文章のみが1字下げられています。

</p>

</div>

CSS

.indent p:first-child {
  text-indent: 1em;
}

.indent p:first-child {

text-indent: 1em;

}

:nth-child()

nth-childは引数をとり、同じ親に属する要素群のうち引数の条件に合致するものにスタイルを適用する。

nth-child(i)

i番目の要素にスタイルを適用する。iの開始値は1。

以下の例では2番目のアイテムのみ赤色になる。

HTML

    <ul class="even">
      <li>1番目のアイテム</li>
      <li>2番目のアイテム</li>
      <li>3番目のアイテム</li>
      <li>4番目のアイテム</li>
      <li>5番目のアイテム</li>
      <li>6番目のアイテム</li>
    </ul>

<li>1番目のアイテム</li>

<li>2番目のアイテム</li>

<li>3番目のアイテム</li>

<li>4番目のアイテム</li>

<li>5番目のアイテム</li>

<li>6番目のアイテム</li>

</ul>

CSS

ul.nth li:nth-child(2) {
  color: #f00;
}

ul.nth li:nth-child(2) {

color: #f00;

}

even/odd

引数にeven/oddを指定すると、要素群のうち偶数番目／基数番目の要素にスタイルが適用される。

以下の例では、2番目、4番目、6番目のアイテムが青くなる。

HTML

    <ul class="even">
      <li>1番目のアイテム</li>
      <li>2番目のアイテム</li>
      <li>3番目のアイテム</li>
      <li>4番目のアイテム</li>
      <li>5番目のアイテム</li>
      <li>6番目のアイテム</li>
    </ul>

<li>1番目のアイテム</li>

<li>2番目のアイテム</li>

<li>3番目のアイテム</li>

<li>4番目のアイテム</li>

<li>5番目のアイテム</li>

<li>6番目のアイテム</li>

</ul>

CSS

ul.even li:nth-child(even) {
  color: #00f;
}

ul.even li:nth-child(even) {

color: #00f;

}

関数形(xn+y)

以下の例では、3n+1の指定に対して、3×0+2=2、3×1 +2=5、3×2+1=7番目の要素に下線が引かれる。

HTML

    <ul class="func">
      <li>1番目のアイテム</li>
      <li>2番目のアイテム</li>
      <li>3番目のアイテム</li>
      <li>4番目のアイテム</li>
      <li>5番目のアイテム</li>
      <li>6番目のアイテム</li>
      <li>7番目のアイテム</li>
      <li>8番目のアイテム</li>
      <li>9番目のアイテム</li>
    </ul>

<li>1番目のアイテム</li>

<li>2番目のアイテム</li>

<li>3番目のアイテム</li>

<li>4番目のアイテム</li>

<li>5番目のアイテム</li>

<li>6番目のアイテム</li>

<li>7番目のアイテム</li>

<li>8番目のアイテム</li>

<li>9番目のアイテム</li>

</ul>

CSS

ul.func li:nth-child(3n+2) {
  text-decoration: underline;
}

ul.func li:nth-child(3n+2) {

text-decoration: underline;

}

CSS3 – 疑似要素

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

概要

疑似要素(pseudo-element)はHTML中の要素の一部に対してスタイルを設定するときに使う。たとえば以下のような場合

ul要素の中の複数のli要素の1つ目だけスタイルを変える
a要素の文字列の先頭に同じ文字／イメージを付加する
divで括られた複数のp要素の一段落目だけ字下げする

書式

[セレクター]:[疑似要素名] { ... }

または

[セレクター]::[疑似要素名] { ... }

セレクターには、タグの要素名のほか、クラス名やその組み合わせも指定可能。

CSS2ではコロン1つで書いていたが、CSS3ではコロン2つと定義されている。

主な疑似要素

::after

::after疑似要素は、指定したセレクターの後ろにcontentで指定した内容を付加し、スタイルを適用する。

HTML

    <p class="after_char">疑似要素:afterでこの文の後ろに文字を入れる</p>
    <p class="after_image">疑似要素:afterでこの文の後ろに画像を入れる</p>

1 2	<p class="after_char">疑似要素:afterでこの文の後ろに文字を入れる</p> <p class="after_image">疑似要素:afterでこの文の後ろに画像を入れる</p>

CSS

.after_char::after {
  content: "**";
}

.after_image::after {
  content: url("./triangle.png");
}

.after_char::after {

content: "**";

}

.after_image::after {

content: url("./triangle.png");

}

::before

::before疑似要素は、指定したセレクターの前にcontentで指定した内容を付加し、スタイルを適用する。

HTML

    <p class="before_char">疑似要素:beforeでこの文の前に文字を入れる（色も変えられる）</p>
    <p class="before_image">疑似要素:beforeでこの文の前に文字を入れる</p>

1 2	<p class="before_char">疑似要素:beforeでこの文の前に文字を入れる（色も変えられる）</p> <p class="before_image">疑似要素:beforeでこの文の前に文字を入れる</p>

CSS

.before_char::before {
  content: "**";
  color: red;
}

.before_image::before {
  content: url("./triangle.png")
}

.before_char::before {

content: "**";

color: red;

}

.before_image::before {

content: url("./triangle.png")

}

::first-letter

::first-letter疑似要素は、要素の最初の文字に対してスタイルを適用する。

HTML

    <p class="first_letter">疑似要素:first-letterで最初の文字だけスタイルを変える</p>

1	<p class="first_letter">疑似要素:first-letterで最初の文字だけスタイルを変える</p>

CSS

.first_letter::first-letter {
  color: #f00;
  font-size: 200%;
}

.first_letter::first-letter {

color: #f00;

font-size: 200%;

}

::first-line

HTML

    <p class="first_line">
      CSS の 擬似要素はセレクターに付加するキーワードです。
      疑似要素が付加されると、その種類によって選択された部分にスタイルが設定できます。
      例えば:first-line 擬似要素は、段落の最初の行だけのスタイルを変更します。
    </p>

CSS の擬似要素はセレクターに付加するキーワードです。

疑似要素が付加されると、その種類によって選択された部分にスタイルが設定できます。

例えば:first-line 擬似要素は、段落の最初の行だけのスタイルを変更します。

</p>

CSS

.first_line::first-line {
  color: #00f;
  text-decoration: underline;
}

.first_line::first-line {

color: #00f;

text-decoration: underline;

}

CSS3 – flex

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

概要

floatプロパティーは、ブロック要素を横方向に並べることができるが、要素を順に並べていくので、望んでいる配置対して意図しない結果となることがある。

flex要素は、コンテナーの中でそれらが整然と配置されるよう、より簡明な指定を可能とする。

特にブロック要素を水平に均等配置したり、nav、article、aside要素などを一定の比率で横に並べたりするときに重宝する。

書式

要素が配置されるflexはコンテナ側と、実際に配置する要素の双方で指定する。

親要素にdisplay: flex;を記述
子要素にflex: n;を記述

たとえば.parentクラスの要素の中に.childクラスの要素を水平配置する場合

.parent {
  display: flex;
}

.child {
  flex: 1;
}

.parent {

display: flex;

}

.child {

flex: 1;

}

.childクラスのブロック要素を複数htmlに書くと、それらが.parentクラスの要素内に均等に水平配置される。

また2つの子要素.child1と.child2をm対nの幅の比率で水平配置したい場合は以下のように記述する。

.parent {
  display: flex;
}

.child1 {
  flex: m;
}

.child2 {
  flex: n;
}

.parent {

display: flex;

}

.child1 {

flex: m;

}

.child2 {

flex: n;

}

値

コンテナ内に配置される要素の幅の比率

実行例

均等配置

以下の例は、3つのdiv要素を親要素の中で水平に均等配置する。

HTML

    <div class="parent">
      <div class="child">child1</div>
      <div class="child">child2</div>
      <div class="child">child3</div>
    </div>

<div class="child">child1</div>

<div class="child">child2</div>

<div class="child">child3</div>

</div>

CSS

.parent {
  width: 400px;
  height: 100px;
  border: solid 4px #000;
  display: flex;
}

.child {
  border: solid 4px #0ff;
  flex: 1;
}

.parent {

width: 400px;

height: 100px;

border: solid 4px #000;

display: flex;

}

.child {

border: solid 4px #0ff;

flex: 1;

}

実行結果

比率指定

次の例は、複数の要素に値を指定して、その値の比率で水平配置する例。

HTML

    <div class="parent">
      <div class="child1">child1</div>
      <div class="child2">child2</div>
      <div class="child3">child3</div>

<div class="child1">child1</div>

<div class="child2">child2</div>

<div class="child3">child3</div>

CSS

.parent {
  width: 400px;
  height: 100px;
  border: solid 4px #000;
  display: flex;
}

.child1 {
  border: solid 4px #f00;
  flex: 1;
}

.child2 {
  border: solid 4px #0f0;
  flex: 3;
}

.child3 {
  border: solid 4px #00f;
  flex: 2;
}

.parent {

width: 400px;

height: 100px;

border: solid 4px #000;

display: flex;

}

.child1 {

border: solid 4px #f00;

flex: 1;

}

.child2 {

border: solid 4px #0f0;

flex: 3;

}

.child3 {

border: solid 4px #00f;

flex: 2;

}

結果

CSS3 – float

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

概要

floatプロパティーにより、ブロック要素が横に並ぶように制御できる。また、floatを設定した要素の次の要素が前の要素のfloatを解除する場合はclearプロパティーを使う。

書式

float: left/right;

clear: left/right/both;

block要素は縦に並ぶ

まず基本の確認として、幅が狭い2つのブロック要素を並べる。横に余裕があっても、ブロック要素は縦に並ぶ。

HML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>two blocks</title>
    <link rel="stylesheet" href="block2.css">
  </head>
  <body>
    <div class="parent_block">
      <div class="block_A">block A</div>
      <div class="block_B">block B</div>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>two blocks</title>

</head>

<body>

<div class="block_A">block A</div>

<div class="block_B">block B</div>

</div>

</body>

</html>

CSS

.parent_block {
  width: 500px;
  height: 300px;
  border: solid 2px #000000;
}

.block_A {
  width: 200px;
  height: 100px;
  background-color: #00ffff;
}

.block_B {
  width: 200px;
  height: 100px;
  background-color: #ffff00;
}

.parent_block {

width: 500px;

height: 300px;

border: solid 2px #000000;

}

.block_A {

width: 200px;

height: 100px;

background-color: #00ffff;

}

.block_B {

width: 200px;

height: 100px;

background-color: #ffff00;

}

結果

floatにするとblock要素も横に並ぶ

スペースに余裕がある場合

ブロック要素のスタイルにfloat:leftを指定した場合、親要素の右側に余裕があれば横に並べられる。

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>two float blocks</title>
    <link rel="stylesheet" href="float2_LL.css">
  </head>
  <body>
    <div class="parent_block">
      <div class="block_A">float-A:left</div>
      <div class="block_B">float-B:left</div>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>two float blocks</title>

</head>

<body>

<div class="block_A">float-A:left</div>

<div class="block_B">float-B:left</div>

</div>

</body>

</html>

CSS

.parent_block {
  width: 500px;
  height: 300px;
  border: solid 2px #000000;
}

.block_A {
  width: 200px;
  height: 100px;
  background-color: #00ffff;
  float: left;
}

.block_B {
  width: 200px;
  height: 100px;
  background-color: #ffff00;
  float: left;
}

.parent_block {

width: 500px;

height: 300px;

border: solid 2px #000000;

}

.block_A {

width: 200px;

height: 100px;

background-color: #00ffff;

float: left;

}

.block_B {

width: 200px;

height: 100px;

background-color: #ffff00;

float: left;

}

スペースに余裕がない場合

横に十分なスペースがない場合は下に配置される。inline要素が折り返されるのと同じイメージ。

左寄せと右寄せ

CSS

.parent_block {
  width: 500px;
  height: 300px;
  border: solid 2px #000000;
}

.block_A {
  width: 200px;
  height: 100px;
  background-color: #00ffff;
  float: left;
}

.block_B {
  width: 200px;
  height: 100px;
  background-color: #ffff00;
  float: right;
}

.parent_block {

width: 500px;

height: 300px;

border: solid 2px #000000;

}

.block_A {

width: 200px;

height: 100px;

background-color: #00ffff;

float: left;

}

.block_B {

width: 200px;

height: 100px;

background-color: #ffff00;

float: right;

}

その他の挙動

複数のfloat要素が並ぶ場合、その幅や高さによって挙動が複雑になる。複数のfloat要素間の干渉・挙動についてはこちらにまとめている。

“float”の意味

floatはfixの影響を受ける

以下の例では、fix要素の次にfloat要素を描かせている。fix要素の右にスペースがあっても、float要素は要素の下の左端に配置される。

float要素は、fix要素が存在する縦のゾーンには配置されないというルールらしい。

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>fix and float boxes</title>
    <link rel="stylesheet" href="fix_float_LL.css">
  </head>
  <body>
    <div class="parent_block">
      <div class="block_A">fix-A</div>
      <div class="block_B">float-B:left</div>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>fix and float boxes</title>

</head>

<body>

<div class="block_B">float-B:left</div>

</div>

</body>

</html>

CSS

.parent_block {
  width: 500px;
  height: 300px;
  border: solid 2px #000000;
}

.block_A {
  width: 200px;
  height: 100px;
  background-color: #00ffff;
}

.block_B {
  width: 200px;
  height: 100px;
  background-color: #ffff00;
  float: left;
}

.parent_block {

width: 500px;

height: 300px;

border: solid 2px #000000;

}

.block_A {

width: 200px;

height: 100px;

background-color: #00ffff;

}

.block_B {

width: 200px;

height: 100px;

background-color: #ffff00;

float: left;

}

結果

fixはfloatを（ほぼ）認識しない

上の例と逆に、float要素→fix要素の順に描いてみる。

そうすると、黄色のfix要素の色が見えなくなってしまう。ただし、そのテキストだけがfloat要素の下に張り付いている。

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>float and fix boxes</title>
    <link rel="stylesheet" href="float_fix.css">
  </head>
  <body>
    <div class="parent_block">
      <div class="block_A">fioat-A:left</div>
      <div class="block_B">fix-B</div>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>float and fix boxes</title>

</head>

<body>

<div class="block_A">fioat-A:left</div>

</div>

</body>

</html>

CSS

.parent_block {
  width: 500px;
  height: 300px;
  border: solid 2px #000000;
}

.block_A {
  width: 200px;
  height: 100px;
  background-color: #00ffff;
  float: left;
}

.block_B {
  width: 200px;
  height: 100px;
  background-color: #ffff00;
}

.parent_block {

width: 500px;

height: 300px;

border: solid 2px #000000;

}

.block_A {

width: 200px;

height: 100px;

background-color: #00ffff;

float: left;

}

.block_B {

width: 200px;

height: 100px;

background-color: #ffff00;

}

そこで、float要素の背景を塗らずにborderのみ設定してみる。

そうすると、fix要素は先に描かれたfloatとの重なりを気にせず、本来自分が描かれる位置にあることがわかる。

ただしそのテキストはfloat要素の下（元のfix要素の外）に追いやられている。

CSS

.parent_block {
  width: 500px;
  height: 300px;
  border: solid 2px #000000;
}

.block_A {
  width: 200px;
  height: 100px;
  border: solid 4px #00ffff;
  float: left;
}

.block_B {
  width: 200px;
  height: 100px;
  background-color: #ffff00;
}

.parent_block {

width: 500px;

height: 300px;

border: solid 2px #000000;

}

.block_A {

width: 200px;

height: 100px;

border: solid 4px #00ffff;

float: left;

}

.block_B {

width: 200px;

height: 100px;

background-color: #ffff00;

}

上の例ではfloat要素とfix要素が同じ形・大きさだったが、fix要素の幅を広くしてみる。そうするとfix要素のテキストは、既存のfloat要素の右押しやられるように配置される。

CSS

.parent_block {
  width: 500px;
  height: 300px;
  border: solid 2px #000000;
}

.block_A {
  width: 200px;
  height: 100px;
  border: solid 4px #00ffff;
  float: left;
}

.block_B {
  width: 400px;
  height: 100px;
  background-color: #ffff00;
}

.parent_block {

width: 500px;

height: 300px;

border: solid 2px #000000;

}

.block_A {

width: 200px;

height: 100px;

border: solid 4px #00ffff;

float: left;

}

.block_B {

width: 400px;

height: 100px;

background-color: #ffff00;

}

floatを指定していない通常の要素から見た場合、float要素は正に「宙に浮いたように」見えなくなり、それがない状態のように配置される。ただしそのテキストはfloat要素の範囲を認識していて、その外側に押し出される。そのとき、テキストが元々属している要素の内外は関係ない。

clearによるfloatの解除

fix要素からみてfloat要素は「浮いて」いて認識されないが、そのfix要素でclearプロパティーを指定することで、float要素を認識できるようになる。

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>float and fix boxes</title>
    <link rel="stylesheet" href="float_fix_clear.css">
  </head>
  <body>
    <div class="parent_block">
      <div class="block_A">fioat-A:left</div>
      <div class="block_B">fix-B (w/ clear)</div>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>float and fix boxes</title>

</head>

<body>

<div class="block_A">fioat-A:left</div>

<div class="block_B">fix-B (w/ clear)</div>

</div>

</body>

</html>

CSS

.parent_block {
  width: 500px;
  height: 300px;
  border: solid 2px #000000;
}

.block_A {
  width: 200px;
  height: 100px;
  background-color: #00ffff;
  float: left;
}

.block_B {
  width: 200px;
  height: 100px;
  background-color: #ffff00;
  clear: left;
}

.parent_block {

width: 500px;

height: 300px;

border: solid 2px #000000;

}

.block_A {

width: 200px;

height: 100px;

background-color: #00ffff;

float: left;

}

.block_B {

width: 200px;

height: 100px;

background-color: #ffff00;

clear: left;

}

上の例ではclear: left;によって左のfloat設定を解除しているが、clear: both;とすれば直前のfloatのleft/rightに関わらず解除される。

CSS3 – floatの挙動について

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

概要

floatプロパティーを設定した要素の挙動、特にfloat要素間の影響が結構ややこしかったので、いろいろと実験してみた。

複数float要素間の干渉・挙動は結構ややこしいようだ。

float要素は横に並ぶ

2つのblock要素にfloat:leftのプロパティーと値を設定する。そうすると2つの要素は横に並ぶ。

CSS

.parent_block {
  width: 500px;
  height: 300px;
  border: solid 2px #000000;
}

.block_A {
  width: 200px;
  height: 100px;
  background-color: #00ffff;
  float: left;
}

.block_B {
  width: 200px;
  height: 100px;
  background-color: #ffff00;
  float: left;
}

.parent_block {

width: 500px;

height: 300px;

border: solid 2px #000000;

}

.block_A {

width: 200px;

height: 100px;

background-color: #00ffff;

float: left;

}

.block_B {

width: 200px;

height: 100px;

background-color: #ffff00;

float: left;

}

結果

rightと指定するとfloat要素は親ブロックの右端に寄せられる。

css

.parent_block {
  width: 500px;
  height: 300px;
  border: solid 2px #000000;
}

.block_A {
  width: 200px;
  height: 100px;
  background-color: #00ffff;
  float: left;
}

.block_B {
  width: 200px;
  height: 100px;
  background-color: #ffff00;
  float: right;
}

.parent_block {

width: 500px;

height: 300px;

border: solid 2px #000000;

}

.block_A {

width: 200px;

height: 100px;

background-color: #00ffff;

float: left;

}

.block_B {

width: 200px;

height: 100px;

background-color: #ffff00;

float: right;

}

結果

right指定のみの場合は右から順番に並ぶ。

CSS

.parent_block {
  width: 500px;
  height: 300px;
  border: solid 2px #000000;
}

.block_A {
  width: 200px;
  height: 100px;
  background-color: #00ffff;
  float: right;
}

.block_B {
  width: 200px;
  height: 100px;
  background-color: #ffff00;
  float: right;
}

.parent_block {

width: 500px;

height: 300px;

border: solid 2px #000000;

}

.block_A {

width: 200px;

height: 100px;

background-color: #00ffff;

float: right;

}

.block_B {

width: 200px;

height: 100px;

background-color: #ffff00;

float: right;

}

結果

幅に余裕がないと縦に並ぶ

親ブロックに横幅の余裕が残っていない場合、float要素は縦に並ぶ。

.parent_block {
  width: 500px;
  height: 300px;
  border: solid 2px #000000;
}

.block_A {
  width: 300px;
  height: 100px;
  background-color: #00ffff;
  float: left;
}

.block_B {
  width: 300px;
  height: 100px;
  background-color: #ffff00;
  float: left;
}

.parent_block {

width: 500px;

height: 300px;

border: solid 2px #000000;

}

.block_A {

width: 300px;

height: 100px;

background-color: #00ffff;

float: left;

}

.block_B {

width: 300px;

height: 100px;

background-color: #ffff00;

float: left;

}

結果

left設定のfloat要素とright設定のfloat要素でも、余白がなければ縦に並ぶ。

CSS

.parent_block {
  width: 500px;
  height: 300px;
  border: solid 2px #000000;
}

.block_A {
  width: 300px;
  height: 100px;
  background-color: #00ffff;
  float: left;
}

.block_B {
  width: 300px;
  height: 100px;
  background-color: #ffff00;
  float: right;
}

.parent_block {

width: 500px;

height: 300px;

border: solid 2px #000000;

}

.block_A {

width: 300px;

height: 100px;

background-color: #00ffff;

float: left;

}

.block_B {

width: 300px;

height: 100px;

background-color: #ffff00;

float: right;

}

結果

高さが余っている場合は引っかかる

要素を3つにしてみた。この動きを見ると、left指定をした場合は次のように動いているように見える。

まず右へ寄せて
次に上へ寄せて
最後に左に寄せる

【注】

最初の先入観で右からの動きが頭に入ってしまったため、結果を見た瞬間に「引っかかっている」と認識してしまったが、これは間違いであることが後にわかる。

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>three float blocks</title>
    <link rel="stylesheet" href="float3_LLL_tall.css">
  </head>
  <body>
    <div class="parent_block">
      <div class="block_A">float-A:left</div>
      <div class="block_B">float-B:left</div>
      <div class="block_C">float-C:left</div>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>three float blocks</title>

</head>

<body>

<div class="block_A">float-A:left</div>

<div class="block_B">float-B:left</div>

<div class="block_C">float-C:left</div>

</div>

</body>

</html>

CSS

.parent_block {
  width: 500px;
  height: 300px;
  border: solid 2px #000000;
}

.block_A {
  width: 200px;
  height: 125px;
  background-color: #00ffff;
  float: left;
}

.block_B {
  width: 200px;
  height: 100px;
  background-color: #ffff00;
  float: left;
}

.block_C {
  width: 200px;
  height: 100px;
  background-color: #ff00ff;
  float: left;
}

.parent_block {

width: 500px;

height: 300px;

border: solid 2px #000000;

}

.block_A {

width: 200px;

height: 125px;

background-color: #00ffff;

float: left;

}

.block_B {

width: 200px;

height: 100px;

background-color: #ffff00;

float: left;

}

.block_C {

width: 200px;

height: 100px;

background-color: #ff00ff;

float: left;

}

結果

とすると、右側に余裕があれば3つ目の要素はそこにハマるか？

CSS

.parent_block {
  width: 500px;
  height: 300px;
  border: solid 2px #000000;
}

.block_A {
  width: 100px;
  height: 125px;
  background-color: #00ffff;
  float: left;
}

.block_B {
  width: 100px;
  height: 100px;
  background-color: #ffff00;
  float: left;
}

.block_C {
  width: 200px;
  height: 100px;
  background-color: #ff00ff;
  float: left;
}

.parent_block {

width: 500px;

height: 300px;

border: solid 2px #000000;

}

.block_A {

width: 100px;

height: 125px;

background-color: #00ffff;

float: left;

}

.block_B {

width: 100px;

height: 100px;

background-color: #ffff00;

float: left;

}

.block_C {

width: 200px;

height: 100px;

background-color: #ff00ff;

float: left;

}

結果

確かに。

頭打ちの高さは保持される

次の結果からも、float:left指定の場合、右→上→左と動かした結果のようだ（注：これらの結果も、どうやら別の動きの結果らしいことが後にわかる）。

CSS

.parent_block {
  width: 500px;
  height: 300px;
  border: solid 2px #000000;
}

.block_A {
  width: 200px;
  height: 75px;
  background-color: #00ffff;
  float: left;
}

.block_B {
  width: 200px;
  height: 100px;
  background-color: #ffff00;
  float: left;
}

.block_C {
  width: 150px;
  height: 100px;
  background-color: #ff00ff;
  float: left;
}

.parent_block {

width: 500px;

height: 300px;

border: solid 2px #000000;

}

.block_A {

width: 200px;

height: 75px;

background-color: #00ffff;

float: left;

}

.block_B {

width: 200px;

height: 100px;

background-color: #ffff00;

float: left;

}

.block_C {

width: 150px;

height: 100px;

background-color: #ff00ff;

float: left;

}

結果

leftとrightは同格か

right要素にぶつかっても、left指定の要素は頭打ちになる。

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>three float blocks</title>
    <link rel="stylesheet" href="float3-LRL_1.css">
  </head>
  <body>
    <div class="parent_block">
      <div class="block_A">float-A:left</div>
      <div class="block_B">float-B:right</div>
      <div class="block_C">float-C:left</div>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>three float blocks</title>

</head>

<body>

<div class="block_A">float-A:left</div>

<div class="block_B">float-B:right</div>

<div class="block_C">float-C:left</div>

</div>

</body>

</html>

CSS

.parent_block {
  width: 500px;
  height: 300px;
  border: solid 2px #000000;
}

.block_A {
  width: 200px;
  height: 200px;
  background-color: #00ffff;
  float: left;
}

.block_B {
  width: 200px;
  height: 100px;
  background-color: #ffff00;
  float: right;
}

.block_C {
  width: 200px;
  height: 50px;
  background-color: #ff00ff;
  float: left;
}

.parent_block {

width: 500px;

height: 300px;

border: solid 2px #000000;

}

.block_A {

width: 200px;

height: 200px;

background-color: #00ffff;

float: left;

}

.block_B {

width: 200px;

height: 100px;

background-color: #ffff00;

float: right;

}

.block_C {

width: 200px;

height: 50px;

background-color: #ff00ff;

float: left;

}

結果

混乱

ここまでのところで、先入観も手伝って、右→上→左の動きだと確信していたが、次の結果を見て、わけがわからなくなってきた。

CSS

.parent_block {
  width: 500px;
  height: 300px;
  border: solid 2px #000000;
}

.block_A {
  width: 100px;
  height: 200px;
  background-color: #00ffff;
  float: left;
}

.block_B {
  width: 100px;
  height: 100px;
  background-color: #ffff00;
  float: right;
}

.block_C {
  width: 200px;
  height: 50px;
  background-color: #ff00ff;
  float: left;
}

.parent_block {

width: 500px;

height: 300px;

border: solid 2px #000000;

}

.block_A {

width: 100px;

height: 200px;

background-color: #00ffff;

float: left;

}

.block_B {

width: 100px;

height: 100px;

background-color: #ffff00;

float: right;

}

.block_C {

width: 200px;

height: 50px;

background-color: #ff00ff;

float: left;

}

結果

これまでの想定だと、float-Cのボックスの上端はfloat-Bの下端の高さのところにあるはずだが、そうなっていない。

ここで、1つ前の例でA(left)とB(right)の高さを逆転させてみると以下のようになる。B(rhght)の高さはC(left)の縦位置に影響を与えていない。

最後に、もう1つleft要素を割り込ませてみた。

想像通り、D(left)の縦位置はC(left)要素の高さに影響を受けている。

推測

最初の方で、float:leftのボックスの動きは右→上→左と突き当たるまで動いてスライドさせるイメージだったが、いくつかパターンを見る中でそうではないことがわかった。

ここでもう一度float:leftの動きを追ってみると、以下のようになりそうだ。

なにも要素がない場合、親要素の左端と上端に位置させる
既にfloat:leftのボックス群がある場合、
- 右にスペースがあれば、既存のfloat:leftボックス群の右に並る
  - その時の上端の位置は、親要素の上端／他のfloat:leftの下端／他のfloat:rightの下端になる
- 右側にスペースがない場合、既存のfloat:leftボックス群の下側に、親の要素の左端から配置しようとする
  - その時の上端の位置は、上にある既存のfloat:leftボックス群の中で一番下方まで伸びているものの下端

ということか。

HTML5 – label

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

概要

label要素は、意図するinput要素に関するテキストを表示するとともに、idを通してinput要素と関連付けられる。

input要素に関連付けられたlabelは、その領域をクリックすることでinput要素をクリックしたのと同じ効果を持つ。

書式

<label for="id" accesskey="k">

属性

for属性

対応するinput要素のidをここに書くことで、このlabel要素とinput要素を関連付ける。

以下の例では、3つのテキストボックスに文字列を付している。通常のテキストをクリックしても何も起こらないが、ラベルの場合はラベルのエリアをクリックしてもテキストボックスが選択される。

<form action="" method="">
  <ul>
    <li>ただのテキスト：<input id="none" name="nothing" type="text" /></li>
    <li><label for="name">ラベルとidで指定</label><input id="name" name="user_name" type="text" /></li>
    <li><label>ラベルで囲んで指定<input name="user_addres" type="text" /></label></li>
  </ul>
</form>

<ul>

<li>ただのテキスト：<input id="none" name="nothing" type="text" /></li>

<li><label for="name">ラベルとidで指定</label><input id="name" name="user_name" type="text" /></li>

<li><label>ラベルで囲んで指定<input name="user_addres" type="text" /></label></li>

</ul>

</form>

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>