| ページ一覧 | ブログ | twitter |  書式 | 書式(表) |

MyMemoWiki

「CSS」の版間の差分

提供: MyMemoWiki
ナビゲーションに移動 検索に移動
 
(同じ利用者による、間の2版が非表示)
1行目: 1行目:
==CSS==
+
==[[CSS]]==
[[CSS3]][[レスポンシブWebデザイン]]
+
[[CSS3]] | [[レスポンシブWebデザイン]] |
 
{{amazon|4798010928}}
 
{{amazon|4798010928}}
 
===適用方法===
 
===適用方法===
16行目: 16行目:
 
  </style>
 
  </style>
 
==セレクタと疑似クラス、疑似要素==
 
==セレクタと疑似クラス、疑似要素==
[[jQuery]]
+
[[jQuery]] |
 
===タイプセレクタとユニバーサルセレクタ===
 
===タイプセレクタとユニバーサルセレクタ===
 
====タイプセレクタ====
 
====タイプセレクタ====
31行目: 31行目:
 
===classセレクタとidセレクタ===
 
===classセレクタとidセレクタ===
 
====classセレクタ(要素名.class名)====
 
====classセレクタ(要素名.class名)====
*文章内で複数の要素にスタイルを適用する
+
*[[文章]]内で複数の要素にスタイルを適用する
 
  p.note{color:red}
 
  p.note{color:red}
 
     :
 
     :
39行目: 39行目:
 
====idセレクタ(要素名#id)====
 
====idセレクタ(要素名#id)====
 
*文書内で、唯一の要素にスタイルを適用するのに利用する。
 
*文書内で、唯一の要素にスタイルを適用するのに利用する。
  div#gnavi{font-size:small}
+
  div#gna[[vi]]{font-size:small}
 
       :
 
       :
  <div id="gnavi"> ... </div>
+
  <div id="gna[[vi]]"> ... </div>
 
===属性セレクタ===
 
===属性セレクタ===
 
*特定の属性値や属性名をもつ要素に対してスタイルを適用する
 
*特定の属性値や属性名をもつ要素に対してスタイルを適用する
95行目: 95行目:
 
*親要素の範囲内で最初に登場する子要素のみにスタイルを適用
 
*親要素の範囲内で最初に登場する子要素のみにスタイルを適用
 
  div > p:first-child { text-indent:0 }
 
  div > p:first-child { text-indent:0 }
====リンク疑似クラス(:link、:visited)====
+
====[[リンク]]疑似クラス(:link、:visited)====
 
===== :link疑似クラス=====
 
===== :link疑似クラス=====
*未訪問のリンクに適用
+
*未訪問の[[リンク]]に適用
=====visited疑似クラス=====
+
=====[[vi]]sited疑似クラス=====
*既に開いたリンクに適用
+
*既に開いた[[リンク]]に適用
 
=====例=====
 
=====例=====
 
  :link {color:blue}
 
  :link {color:blue}
 
  a:link {color:blue}
 
  a:link {color:blue}
 
  a[href]:link {color:blue}
 
  a[href]:link {color:blue}
  :visited {color:blue}
+
  :[[vi]]sited {color:blue}
  a:visited {color:blue}
+
  a:[[vi]]sited {color:blue}
 
  a[href]:visited {color:blue}
 
  a[href]:visited {color:blue}
 
===ダイナミック疑似クラス===
 
===ダイナミック疑似クラス===
124行目: 124行目:
 
===== :before疑似要素と:after疑似要素=====
 
===== :before疑似要素と:after疑似要素=====
 
*有る要素に含まれる内容の前後に内容を生成
 
*有る要素に含まれる内容の前後に内容を生成
===Tips===
+
===[[Tips]]===
====CSS 背景画像の設定、透明度の設定====
+
====[[CSS 背景画像の設定、透明度の設定]]====
====ブラウザ用デバッグツール====
+
====[[ブラウザ用デバッグツール]]====
  
 
====縦書き====
 
====縦書き====
 
  writing-mode:tb-rl
 
  writing-mode:tb-rl
====リンク色を個別に変える====
+
====[[リンク]]色を個別に変える====
 
  a.type1 { color:blue; }
 
  a.type1 { color:blue; }
 
  a:hover.type1 { color:red; }
 
  a:hover.type1 { color:red; }
146行目: 146行目:
  
 
====条件付きコメント====
 
====条件付きコメント====
*IEの独自拡張である「条件付きコメント」は、以下のような書式でHTML中に記述
+
*IEの独自拡張である「条件付きコメント」は、以下のような書式で[[HTML]]中に記述
 
*http://allabout.co.jp/internet/hpcreate/closeup/CU20070412A/index2.htm
 
*http://allabout.co.jp/internet/hpcreate/closeup/CU20070412A/index2.htm
 
  <!--[if IE]><script src="../other_libs/excanvas_r3/excanvas.js" type="text/javascript" charset="utf-8"></script><![endif]-->
 
  <!--[if IE]><script src="../other_libs/excanvas_r3/excanvas.js" type="text/javascript" charset="utf-8"></script><![endif]-->
152行目: 152行目:
 
====importantルール====
 
====importantルール====
 
*http://www.xml.vc/kiso/!important.html
 
*http://www.xml.vc/kiso/!important.html
*CSSのスタイルシートはブラウザのデフォルト・スタイルシート→ユーザー・スタイルシート → ページ作者のスタイルシートの順に優先度が高くなります。また、ひとつのスタイルシートにおいても後から指定したスタイルが優先されます。
+
*[[CSS]]のスタイルシートはブラウザのデフォルト・スタイルシート→ユーザー・スタイルシート → ページ作者のスタイルシートの順に優先度が高くなります。また、ひとつのスタイルシートにおいても後から指定したスタイルが優先されます。
*「後から」とは同じセレクタのスタイルが重複した場合は最後(CSSソースの下)に指定したスタイルが優先されること。
+
*「後から」とは同じセレクタのスタイルが重複した場合は最後([[CSS]]ソースの下)に指定したスタイルが優先されること。
 
*普通のスタイルよりはクラスセレクタを使ったスタイルが優先
 
*普通のスタイルよりはクラスセレクタを使ったスタイルが優先
 
*クラスセレクタよりはIDセレクタを使ったスタイルが優先
 
*クラスセレクタよりはIDセレクタを使ったスタイルが優先

2020年2月16日 (日) 04:23時点における最新版

目次

CSS

CSS3 | レスポンシブWebデザイン |

適用方法

style属性で個別に指定

<p style="margin: 15px">

head要素の範囲内でstyle要素によって指定

<style type="text/css">
p {margin: 15px}
</style>

head要素の範囲内でlink要素によって外部スタイルシートを参照する

<link rel="stylesheet" type="text/css" href="./css/style.css"/>

head要素の範囲内で@importによって外部スタイルシートを参照する

<style type="text/css">
@import url("./css/style.css")
</style>

セレクタと疑似クラス、疑似要素

jQuery |

タイプセレクタとユニバーサルセレクタ

タイプセレクタ

  • 要素名のみをセレクタにする
body {color:black;}

ユニバーサルセレクタ

  • すべての要素に対してスタイルを指定できる
* {color:black;}
  • ユニバーサルセレクタは、他のセレクタが伴う場合は省略できる
    • *.note と .note は等しい
    • *#note1 と #note1 は等しい
    • *[abbr] と [abbr] は等しい

classセレクタとidセレクタ

classセレクタ(要素名.class名)

  • 文章内で複数の要素にスタイルを適用する
p.note{color:red}
   :
<p class="note">...</p>
  • ユニバーサルセレクタを利用、要素を省略することで、すべての要素に対して適用できる
.note{color:red}

idセレクタ(要素名#id)

  • 文書内で、唯一の要素にスタイルを適用するのに利用する。
div#gnavi{font-size:small}
     :
<div id="gnavi"> ... </div>

属性セレクタ

  • 特定の属性値や属性名をもつ要素に対してスタイルを適用する

要素名[属性名]

  • 属性名を持つ要素にスタイルを適用する
h3[id] {color:olive}
     :
<h3 id="r508">...</h3>

要素名[属性名="属性値"]

  • 属性名と属性値を持つ要素に対してスタイルを適用する
h3[id="r508"] {color:olive}
     :
<h3 id="r508">...</h3>

要素名[属性名~="属性値"]

  • 属性名を持ち、属性値が空白区切りで複数指定されている場合、属性値が含まれている要素にスタイルを適用する
p[class~="note"]{color:red}
     :
<p class="w3c wcag note">...</p>

要素名[属性名|="属性値"]

  • 属性名を持ち、属性値がハイフン区切りで複数指定されている場合、属性値が含まれている要素にスタイルを適用する
[="en" lang]{font-family:Veradana }
    :
<span lang="en-US">...</span>
<span lang="ja">...</span>

セレクタの組合せ

セレクタ セレクタ(空白文字区切り)

  • 子孫セレクタ(decendant selector) といい、親要素に含まれるすべての子孫要素にスタイルを適用する
div.note p {color:red}
絞り込みも可能
div.note p abbr {text-decoration:underline }
孫要素以下に適用する例
div * p {color:blue}

セレクタ > セレクタ

  • 子セレクタ(child selector)といい、親要素の直接の子要素にスタイルを適用する
blockquote.wcag > p {font-size:small}
絞り込みも可能
blockquote.wcag > p > abbr {font-size:small} 

セレクタ + セレクタ

  • 同一の親要素をもつ並列関係にある要素について、前にある要素を兄要素、後に続く要素を弟要素と呼ぶ
  • 隣接セレクタ(adjacent sibling selector) はある要素の直接の弟要素にスタイルを適用する
h1 + h2 {color:green}
  :
<h1>...</h1>
  <h2>...</h2>

セレクタのグループ化

  • 半角カンマでグループ化し、複数の要素にスタイルを適用することができる
th,td {font-size:small}

疑似クラス

  • 「状況」によってスタイルを適用

:first-child 疑似クラス

  • 親要素の範囲内で最初に登場する子要素のみにスタイルを適用
div > p:first-child { text-indent:0 }

リンク疑似クラス(:link、:visited)

:link疑似クラス
visited疑似クラス
:link {color:blue}
a:link {color:blue}
a[href]:link {color:blue}
:visited {color:blue}
a:visited {color:blue}
a[href]:visited {color:blue}

ダイナミック疑似クラス

  • ユーザーのアクションに適応して表示を変えるブラウザでのスタイルをコントロール
:hover 疑似クラス
  • カーソルが当たっている状態
:active 疑似クラス
  • アクティブな状態
:focus 疑似クラス
  • フォーカスを受けている状態
a:hover {color:yellow}

疑似要素

:first-line疑似要素
  • 要素の1行目のみにスタイルを適用
:fist-letter疑似要素
  • 要素の1文字目のみにスタイルを適用
:before疑似要素と:after疑似要素
  • 有る要素に含まれる内容の前後に内容を生成

Tips

CSS 背景画像の設定、透明度の設定

ブラウザ用デバッグツール

縦書き

writing-mode:tb-rl

リンク色を個別に変える

a.type1 { color:blue; }
a:hover.type1 { color:red; }
a.type2 { color:blue; }
a:hover.type2 { color:orange; }

テーブルレイアウト

table-layout:auto
テーブル(表)全体を読み込んでから、
各縦列の幅を決定して表示します。これが初期値です。
table-layout:fixed
最初の横一行を読み込んだ時点で、
各縦列の幅を決定して表示を開始します。

条件付きコメント

<!--[if IE]><script src="../other_libs/excanvas_r3/excanvas.js" type="text/javascript" charset="utf-8"></script><![endif]-->

importantルール

  • http://www.xml.vc/kiso/!important.html
  • CSSのスタイルシートはブラウザのデフォルト・スタイルシート→ユーザー・スタイルシート → ページ作者のスタイルシートの順に優先度が高くなります。また、ひとつのスタイルシートにおいても後から指定したスタイルが優先されます。
  • 「後から」とは同じセレクタのスタイルが重複した場合は最後(CSSソースの下)に指定したスタイルが優先されること。
  • 普通のスタイルよりはクラスセレクタを使ったスタイルが優先
  • クラスセレクタよりはIDセレクタを使ったスタイルが優先

<blockquote>!importantルールを使うとスタイルを優先させることができます。「プロパティ: 値」の後に半角スペースで区切り、!importanを配置します。ただし、「プロパティ: 値」ごとに指定する必要があります。</blockquote>

body { background-color: white !important; }