HOMEへ   ホームページを作ろう |レンタルサーバいろいろ
TOPB B SScriptPCMY-LOG
Click Here!

作 成

作 成 2

基礎知識

装 飾 術

<<前へ  |1234567891011121314151617|  次へ>>

「激安ガーデン通販」では、只今期間限定セール開催中! [PR]

● プロパティの制御

○プロパティを設定する場所を設定する

first-line / first-letter / before / after
これはスタイルを設定するモノではなく、『スタイルを設定する場所』を設定するためのプロパティで 疑似要素といいます。 これはリンクの装飾(アンカー疑似クラスという)と同じように記述します。(Opera/Netscapeで確認)

P.p1:first-line { font-size:1.2em ; font-weight:bold }
P.p2:first-letter { font-size:2em ; color:#ff0000 ; font-weight:bold }

first-line:一行目を指示します。ブロック要素にのみ適用可能です。
この要素に設定できるスタイルは、フォント、色と背景、 word-spacing、letter-spacing、text-decoration、vertical-align、text-transform、line-height、clear、 と限られています。設定には注意してください。
↑↑<P class=1>で設定

first-letter:一文字目を指示します。 この要素に設定できるスタイルは、フォント、色と背景、マージン、パディング、ボーダー、 text-decoration、vertical-align (「float」の値が「none」の場合)、text-transform、line-height、float、clear、 と限られています。設定には注意してください。
↑↑<P class=2>で設定

P.p3 { font-size:1em ; font-weight:normal ; color:#808080}
P.p3:first-letter { font-size:2em ; color:#000000 ; font-weight:bold }
P.p3:first-line { font-size:1.2em ; font-weight:bold}

first-lineとfirst-letterを同時に設定したらどうなるのでしょう。
この段落は以下のようなスタイルで書かれています。
↑↑<P class=3>で設定


※以下対応ブラウザが内ので確認していません。

○設定要素の前後の文字等を設定する

(:before / :after)
これは擬似要素といい、この要素を設定した要素の前後に、何か文字等(見出しに番号、引用符など)を挿入するときに使用します。(未確認)
HEAD内にスタイルとして記述します。
P.memo:before { content: "注)" }
としておくとP要素がクラスmemoを与えられた場合、文頭に 注) を表示します。
P.memo:after { content: "以上" }
としておくとP要素がクラスmemoを与えられた場合、文末に 以上 を表示します。

○子要素時の条件で文字のスタイルを設定する

(:first-child)
同じく擬似要素といい、設定された要素が設定された親要素(任意も可)の最初の子要素であるときに、設定されたスタイルを適用します。(未確認)
HEAD内にスタイルとして記述する。
DIV > P:first-child{ color:red }・・・P要素がDIV要素の子要素だったとき最初のP要素内のテキストが赤文字になる
* > P:first-child{ color:red }・・・P要素が何らかの要素の子要素だったとき最初のP要素内のテキストが赤文字になる
P:first-child{ color:red }・・・P要素が何らかの要素の子要素だったとき最初のP要素内のテキストが赤文字になる

<<前へ  |上へ|  次へ>>
1234567891011121314151617

広告掲載で簡単収入!!登録無料のアフィリエイトプログラムなら導入は安心。
Click Here! リンクシェア アフィリエイト紹介プログラム http://draft.j-a-net.jp/banner/NEXT アクセストレード
アフィリエイトプログラム比較

TOP] [HOME

更新日時:2014/08/09