カテゴリー
CSS widows

【CSS】widows：改ページされる次ページ最低行数を指定する

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

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

<p class="sample1">
あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
</p> 
<p class="sample2">
いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
</p> 
p.sample1 {widows:3; font-size:30px; line-height:50px;}

【CSS】widows：改ページされる次ページ最低行数を指定する

　CSSのwidowsは、改ページされる際の次ページの最低行数を指定するプロパティです。

カテゴリー
CSS orphans

【CSS】orphans：改ページされる前ページの最低行数を指定する

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

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

<p class="sample1">
あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
</p> 
<p class="sample2">
いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
</p> 
p.sample1 {widows:3; font-size:30px; line-height:50px;}

【CSS】orphans：改ページされる前ページの最低行数を指定する

　CSSのorphansは、改ページされる際の前ページの最低行数を指定するプロパティです。

カテゴリー
CSS page-break-inside

【CSS】page-break-inside：印刷時の改ページを避ける

（例）【CSS】page-break-insideの使用方法

See the Pen
page-break-inside by linlin (@linlin098765)
on CodePen. 

<p class="sample1">
あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
</p> 
<p class="sample2">
いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
</p> 
p.sample1 {page-break-inside:avoid; font-size:30px; line-height:50px;}

【CSS】page-break-inside：印刷時の改ページを避ける

　CSSのpage-break-insideは、印刷時の改ページを避けるプロパティです。

  • auto
    指定しない（初期値）
  • avoid
    改ページを避ける
カテゴリー
CSS page-break-after

【CSS】page-break-after：印刷時の改ページ位置を指定する

（例）【CSS】page-break-afterの使用方法

See the Pen
page-break-before by linlin (@linlin098765)
on CodePen. 

<p class="sample1">
あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
</p> 
<p class="sample2">
いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
</p> 
p.sample1 {page-break-before: always; }
p.sample2 {page-break-before: always; page-break-after: always; }

【CSS】page-break-after：印刷時の改ページ位置を指定する

　CSSのpage-break-afterは、印刷時の改ページ位置を指定するプロパティです。page-break-afterを指定した要素の直後で強制的に改ページまたは、その位置で改ページを禁止することが可能です。

  • auto
    指定なし（初期値）
  • always
    その位置で改行
  • left
    強制的に改ページさせ、指定要素を左側ページに印刷（左右見開きページで印刷させたい場合）
  • right
  • 強制的に改ページさせ、指定要素を右側ページに印刷（左右見開きページで印刷させたい場合）
  • avoid
    この位置で改ページさせない
カテゴリー
CSS page-break-before

【CSS】page-break-before：印刷時の改ページ位置を指定する

（例）【CSS】page-break-beforeの使用方法

See the Pen
page-break-before by linlin (@linlin098765)
on CodePen. 

<p class="sample1">
あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
</p> 
<p class="sample2">
いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
</p> 
p.sample1 {page-break-before: always; }
p.sample2 {page-break-before: always; page-break-after: always; }

【CSS】page-break-before：印刷時の改ページ位置を指定する

　CSSのpage-break-beforeは、印刷時の改ページ位置を指定するプロパティです。page-break-beforeを指定した要素の直前で強制的に改ページまたは、その位置で改ページを禁止することが可能です。

  • auto
    指定なし（初期値）
  • always
    その位置で改行
  • left
    強制的に改ページさせ、指定要素を左側ページに印刷（左右見開きページで印刷させたい場合）
  • right
  • 強制的に改ページさせ、指定要素を右側ページに印刷（左右見開きページで印刷させたい場合）
  • avoid
    この位置で改ページさせない
カテゴリー
CSS cursor

【CSS】cursor：マウスカーソルの表示方法を指定する

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

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

<ol>
<li style="cursor: auto">auto:ブラウザが自動的に選択したカーソル</li>
<li style="cursor: default">default:矢印型</li>
<li style="cursor: pointer">pointer:リンクカーソル</li>
<li style="cursor: crosshair">crosshair:十字カーソル</li>
<li style="cursor: move">move:移動カーソル</li>
<li style="cursor: text">text:テキスト編集カーソル</li>
<li style="cursor: wait">wait:待機・処理中カーソル</li>
<li style="cursor: help">help:ヘルプカーソル</li>
<li style="cursor: n-resize">n-resize:北方向のカーソル</li>
<li style="cursor: s-resize">s-resize:南方向の
カーソル</li>
<li style="cursor: w-resize">w-resize:西方向のカーソル</li>
<li style="cursor: e-resize">e-resize:東方向のカーソル</li>
<li style="cursor: ne-resize;">ne-resize:北東方向のカーソル</li>
<li style="cursor: nw-resize;">nw-resize:北西方向のカーソル</li>
<li style="cursor: se-resize">se-resize:南東方向のカーソル</li>
<li style="cursor: sw-resize;">sw-resize:南西方向のカーソル</li>
  <li style="cursor: progress">progress進行中カーソル</li>
<li style="cursor: hand">hand:指型カーソル</li>
<li style="cursor: no-drop">no-drop:ドロップ禁止カーソル</li>
<li style="cursor: all-scroll">all-scroll:全スクロールカーソル</li>
<li style="cursor: col-resize">col-resize:横方向のカーソル</li>
<li style="cursor: row-resize">row-resize:縦方向のカーソル</li>
<li style="cursor: not-allowed">not-allowed:禁止カーソル</li>
<li style="cursor: vertical-text">vertical-text:縦書きカーソル</li>
</ol>

【CSS】cursor：マウスカーソルの表示方法を指定する

　CSSのcursorは、マウスカーソルの表示方法を指定するプロパティです。ファイルで「.CUR」「.ANI」の拡張子であれば、オリジナルカーソルが使用可能です。

カテゴリー
CSS outline-width

【CSS】outline-width：アウトラインの太さを指定する

（例）【CSS】outline-widthの使用方法

See the Pen
outline-color by linlin (@linlin098765)
on CodePen. 

<b> 名前：</b><br>
<input class="sample1" type="text" name="name" size="20"><br>
<b> パスワード：</b><br>
<input class="sample2" type="password" name="pass" size="10"><br>

<b>学年：</b><br>
<input class="sample3" type="radio" name="gakunen" value="１年生">１年生
<input class="sample3" type="radio" name="gakunen" value="２年生">２年生
<input class="sample3" type="radio" name="gakunen" value="３年生">３年生

<b>課目：</b><br>
<input class="sample4" type="checkbox" name="kamoku" value="国語">国語
<input class="sample4" type="checkbox" name="kamoku" value="英語">英語
<input class="sample4" type="checkbox" name="kamoku" value="算数">算数
<input class="sample4" type="checkbox" name="kamoku" value="理科">理科
<input class="sample4" type="checkbox" name="kamoku" value="社会">社会
<input class="sample4" type="checkbox" name="kamoku" value="体育">体育<br>
input.sample1 {outline-style: solid; outline-width: 1px; outline-color: gray;}
input.sample2 {outline-style: double; outline-width: 2px; outline-color: blue;}
input.sample3 {outline-style: groove; outline-width: 3px; outline-color: red;}
input.sample4 {outline-style: inset; outline-width: 4px; outline-color: green;}

【CSS】outline-width：アウトラインの太さを指定する

　CSSのoutline-widthは、アウトラインの太さを指定するプロパティです。

アウトラインの太さ

  • 数値
    px, em,exなど
  • キーワード
    thin, medium,thick、左から右の順で太い
カテゴリー
CSS outline-style

【CSS】outline-style：アウトラインのスタイルを指定する

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

See the Pen
outline-color by linlin (@linlin098765)
on CodePen. 

<b> 名前：</b><br>
<input class="sample1" type="text" name="name" size="20"><br>
<b> パスワード：</b><br>
<input class="sample2" type="password" name="pass" size="10"><br>

<b>学年：</b><br>
<input class="sample3" type="radio" name="gakunen" value="１年生">１年生
<input class="sample3" type="radio" name="gakunen" value="２年生">２年生
<input class="sample3" type="radio" name="gakunen" value="３年生">３年生

<b>課目：</b><br>
<input class="sample4" type="checkbox" name="kamoku" value="国語">国語
<input class="sample4" type="checkbox" name="kamoku" value="英語">英語
<input class="sample4" type="checkbox" name="kamoku" value="算数">算数
<input class="sample4" type="checkbox" name="kamoku" value="理科">理科
<input class="sample4" type="checkbox" name="kamoku" value="社会">社会
<input class="sample4" type="checkbox" name="kamoku" value="体育">体育<br>
input.sample1 {outline-style: solid; outline-width: 1px; outline-color: gray;}
input.sample2 {outline-style: double; outline-width: 2px; outline-color: blue;}
input.sample3 {outline-style: groove; outline-width: 3px; outline-color: red;}
input.sample4 {outline-style: inset; outline-width: 4px; outline-color: green;}

【CSS】outline-style：アウトラインのスタイルを指定する

　CSSのoutline-styleは、アウトラインのスタイルを指定するプロパティです。

outlineのスタイル

  • none
    太さ０のアウトライン（初期値）
  • solid
    １本線のアウトライン
  • double
    ２本線のアウトライン
  • groove
    立体的に窪んだアウトライン
  • ridge
    立体的に隆起したアウトライン
  • inset
    上・左のアウトラインが暗く、下・右のアウトラインが明るい
  • outset
    上・左のアウトラインが明るく、下・右のアウトラインが暗い
  • dashed
    破線
  • dotted
    点線
カテゴリー
CSS outline-color

【CSS】outline-color：アウトラインの色を指定する

（例）【CSS】outline-colorの使用方法

See the Pen
outline-color by linlin (@linlin098765)
on CodePen. 

<b> 名前：</b><br>
<input class="sample1" type="text" name="name" size="20"><br>
<b> パスワード：</b><br>
<input class="sample2" type="password" name="pass" size="10"><br>

<b>学年：</b><br>
<input class="sample3" type="radio" name="gakunen" value="１年生">１年生
<input class="sample3" type="radio" name="gakunen" value="２年生">２年生
<input class="sample3" type="radio" name="gakunen" value="３年生">３年生

<b>課目：</b><br>
<input class="sample4" type="checkbox" name="kamoku" value="国語">国語
<input class="sample4" type="checkbox" name="kamoku" value="英語">英語
<input class="sample4" type="checkbox" name="kamoku" value="算数">算数
<input class="sample4" type="checkbox" name="kamoku" value="理科">理科
<input class="sample4" type="checkbox" name="kamoku" value="社会">社会
<input class="sample4" type="checkbox" name="kamoku" value="体育">体育<br>
input.sample1 {outline-style: solid; outline-width: 1px; outline-color: gray;}
input.sample2 {outline-style: double; outline-width: 2px; outline-color: blue;}
input.sample3 {outline-style: groove; outline-width: 3px; outline-color: red;}
input.sample4 {outline-style: inset; outline-width: 4px; outline-color: green;}

【CSS】outline-color：アウトラインの色を指定する

　CSSのoutline-colorは、アウトラインの色を指定するプロパティです。

カテゴリー
CSS outline

【CSS】outline：アウトラインのスタイル・太さ・色を指定する

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

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

<b> 名前：</b><br>
<input class="sample1" type="text" name="name" size="20"><br>
<b> パスワード：</b><br>
<input class="sample2" type="password" name="pass" size="10"><br>

<b>学年：</b><br>
<input class="sample3" type="radio" name="gakunen" value="１年生">１年生
<input class="sample3" type="radio" name="gakunen" value="２年生">２年生
<input class="sample3" type="radio" name="gakunen" value="３年生">３年生

<b>課目：</b><br>
<input class="sample4" type="checkbox" name="kamoku" value="国語">国語
<input class="sample4" type="checkbox" name="kamoku" value="英語">英語
<input class="sample4" type="checkbox" name="kamoku" value="算数">算数
<input class="sample4" type="checkbox" name="kamoku" value="理科">理科
<input class="sample4" type="checkbox" name="kamoku" value="社会">社会
<input class="sample4" type="checkbox" name="kamoku" value="体育">体育<br>
input.sample1 {outline: solid 1px gray;}
input.sample2 {outline: double 2px blue;}
input.sample3 {outline: groove 3px red;}
input.sample4 {outline: inset 4px green;}

【CSS】outline：アウトラインのスタイル・太さ・色を指定する

　CSSのoutlineは、アウトラインのスタイル・太さ・色をまとめて指定できるプロパティです。スタイル・太さ・色の順に半角スペースを空けて指定します。
　アウトラインにはborderと違い、上下左右全てに線が指定されます。

outlineのスタイル

  • none
    太さ０のアウトライン（初期値）
  • solid
    １本線のアウトライン
  • double
    ２本線のアウトライン
  • groove
    立体的に窪んだアウトライン
  • ridge
    立体的に隆起したアウトライン
  • inset
    上・左のアウトラインが暗く、下・右のアウトラインが明るい
  • outset
    上・左のアウトラインが明るく、下・右のアウトラインが暗い
  • dashed
    破線
  • dotted
    点線

アウトラインの太さ

  • 数値
    px, em,exなど
  • キーワード
    thin, medium,thick、左から右の順で太い