カテゴリー: CSS

カテゴリー
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、左から右の順で太い
カテゴリー
counter-reset CSS

【CSS】counter-reset ：要素の連番(カウンタ)の値をリセットする

（例）【CSS】counter-resetの使用方法

<dl>
<dt class="sample1">炭水化物</dt><dd>ご飯</dd>
<dt class="sample1">たんぱく質</dt><dd>牛肉</dd>
<dt class="sample1">脂質</dt><dd>マヨネーズ</dd>
</dl>

<h3>ランキング</h3>
<dl>
<dt class="sample1">炭水化物</dt><dd>ご飯</dd>
<dt class="sample1">たんぱく質</dt><dd>牛肉</dd>
<dt class="sample1">脂質</dt><dd>マヨネーズ</dd>
</dl>
dt.sample1:before {
counter-increment:sample;
content:counter(sample) "位　";
}
h3 {counter-reset:sample;}

【CSS】counter-reset ：要素の連番(カウンタ)の値をリセットする

　CSSのcounter-resetは、要素の連番（カウンタ）をリセットするプロパティです。
　counter-resetプロパティを使用した要素が現われる毎にカウンタの値が0にリセットされます。 カウンタ名の後に半角スペースで区切り整数値を指定すると、カウンタの値がその数にリセットされます。

カテゴリー
counter-increment CSS

【CSS】counter-increment ：要素の連番(カウンタ)の値を指定する

（例）【CSS】counter-incrementの使用方法

<dl>
<dt class="sample1">炭水化物</dt><dd>ご飯</dd>
<dt class="sample1">たんぱく質</dt><dd>牛肉</dd>
<dt class="sample1">脂質</dt><dd>マヨネーズ</dd>
</dl>

<h3>ランキング</h3>
<dl>
<dt class="sample1">炭水化物</dt><dd>ご飯</dd>
<dt class="sample1">たんぱく質</dt><dd>牛肉</dd>
<dt class="sample1">脂質</dt><dd>マヨネーズ</dd>
</dl>
dt.sample1:before {
counter-increment:sample;
content:counter(sample) "位　";
}
h3 {counter-reset:sample;}

【CSS】counter-increment ：要素の連番(カウンタ)の値を指定する

　CSSのcounter-incrementは、要素の連番（カウンタ）を進めるプロパティです。
　counter-incrementプロパティを使用しカウンタ名を指定した場合、要素が現われる毎にカウンタ値が進みます。負の値を指定してカウンタを戻すことは可能です。

カテゴリー
CSS quotes

【CSS】quotes：引用符を指定する

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

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

<q>ウイリアム・クラークは<q>少年よ大志を抱け</q>と言った</q>。
q {quotes: "「" "」" "『" "』"; }
q:before {content: open-quote; }
q:after {content: close-quote; }

【CSS】quotes：引用符を指定する

　CSSのquotesは、contentプロパティで挿入する引用符を設定するプロパティです。quotes（引用符）を複数指定すると階層に応じた引用符を指定することが可能です。

カテゴリー
content CSS

【CSS】content：コンテンツを挿入する

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

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

<p class="sample1">先頭にテキストを挿入</p>
<p class="sample2">末尾に画像を挿入</p>
p.sample1:before {content: "'例'：" }
p.sample2:after {content: url("https://www.llc-linlin.com/picture/SEO.jpg") }

【CSS】content：コンテンツを挿入する

　CSSのcontentは、要素の直前または直後にコンテンツ（テキストまたは画像）を挿入するプロパティです。contentプロパティを適用できるのは、擬似要素の:beforeと:afterのみです。

  • テキスト
    文字列の挿入
  • 画像等のファイル
    URLでファイルを指定して挿入
  • attr()
    ()内に属性を指定しcontentプロパティとして追加
  • open-quote,close-quote
    quoteプロパティで指定した引用符を挿入。open-quoteが開始引用符、close-quoteだと終了引用符が挿入
  • no-open-quote,no-close-quote
    引用符は表示されない。quotesプロパティで指定した引用符の深さが一階階前後する。no-open-quoteを指定すると一階階深くなり、no-close-quoteを指定すると一階階浅くなる。
カテゴリー
CSS list-style-position

【CSS】list-style-position：リストのマーカー表示位置を指定する

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

See the Pen
list-style by linlin (@linlin098765)
on CodePen. 

<ul style="list-style: square url('https://www.llc-linlin.com/picture/SEO.jpg') inside">
<li>例</li>
</ul>

<ul style="list-style-image: url('https://www.llc-linlin.com/picture/SEO.jpg')">
<li>例</li>
</ul>

<ul style="list-style-position: outside">
<li>例</li>
</ul>

<ul style="list-style-position: inside">
<li>例</li>
</ul>

【CSS】list-style-position：リストのマーカー表示位置を指定する

　CSSのlist-style-positionはリストの先頭に表示されるマーカーの表示位置を指定するプロパティです。