「CSS3」animation-name プロパティのサンプル
書式
CSS の animation-name プロパティは、要素に適用される1つまたは複数のアニメーションを設定します。それぞれの名前はアニメーションシーケンスのプロパティ値を定義する @keyframes @-規則を設定し ...
「CSS3」@keyframes背景色の変更のサンプル
使用例
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>sample test</title&g ...「CSS3」@keyframes,@-moz-keyframes,@-webkit-keyframesの使い方
使用例
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>css3 sample</title&g ...「CSS3」@keyframesでアニメーションを作成する方法
説明
from アニメーションの開始時点
to アニメーションの終了時点
使用例
「CSS入門」フィールドセット要素fieldsetのサンプル
説明
<fieldset> 要素は HTML フォームの一部をグループ化し、内側の <legend> 要素で <fieldset> のキャプションを提供しています。
使用例
「CSS」vertical-alignでブロック要素の縦位置を指定する方法
1.上下中央寄せ
CSSコードdiv.cft{ height:80px; vertical-align:middle;}htmlコード<div class="cft"> <p>this is a test ...「CSS」背景画像を表示する方法(no-repeat、repeat、repeat-x、repeat-y )
操作方法
1.no-repeatで背景画像を繰り返し表示しない
<div style=”background-image:url(‘../img/logo.gif’);back ...
「CSS」white-spaceの値(pre、nowrap)の使い方
構文
white-space:＜値名＞;
△ pre
改行や半角スペースが、ブラウザでの表示にそのまま反映されます
使用例
「CSS」font-sizeで文字サイズを指定する方法
1.数値(px)指定
<div style=”font-size:18px;”>test AAA</div>
2.割合(％)指定
<div style= ...
「CSS」@importで複数の外部CSSを読み込む方法
構文
@import url(“xxx.css”);
使用例
cftA.css
「CSS」@charsetで外部CSSの文字コードを明示するサンプル
構文
@charset “UTF-8”;
@charset “Shift-JIS”
@charset “EUC-JP”
外部CSS ...
「CSS」overflowでスクロールバーを表示する方法
説明
overflow: visible;
パディングボックスの外側に表示されることがあります。
overflow: hidden;
必要に応じてパディングボックスに合わせて切り取られます。
o ...
「CSS」nth-child(2n+1)で奇数の行にCSSを適用する方法
構文
:nth-child(2n+1)
:nth-child(odd)
CSSコード
table{width:120px;border-collapse:collapse;}
tr:nth-ch ...
「CSS」nth-childで指定した行にCSSを適用する方法
構文
:nth-child ( 数値 )
CSSコード
h ...
「CSS」nth-last-childで後ろから数えてCSSを適用する方法
構文
:nth-last-child(数値)
CSSコード
「CSS」nth-child(2n)で偶数の行にCSSを適用する方法
書式
:nth-child(2n)
:nth-child(even)
CSSコード
「CSS」:beforeと:after文字の前後に固定で文字を追加する方法
説明
:before 疑似要素を使用するシンプルな例の1つ目は、引用符を追加するものです。
引用符を挿入するために :before および :after の両方を使用しています。
CSSコード
「CSS」:emptyで中身が空の要素にCSSを適用する方法
構文
要素 :empty
説明
:empty は CSS の 擬似クラスで、子を持たない要素を表します。子とは要素のノード または文字列 (ホワイトスペースを含む) です。
CSSコード