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

MyMemoWiki

差分

ナビゲーションに移動 検索に移動

CSS (ソースを閲覧)

2020年2月15日 (土) 08:01時点における版

199 バイト追加 、 2020年2月15日 (土) 08:01
編集の要約なし
==CSS==
[[CSS3][レスポンシブWebデザイン]]
{{amazon|4798010928}}
===適用方法===
====style属性で個別に指定====
<&lt;p style="margin: 15px">&gt;
====head要素の範囲内でstyle要素によって指定====
<&lt;style type="text/css">&gt;
p {margin: 15px}
<&lt;/style>&gt;
====head要素の範囲内でlink要素によって外部スタイルシートを参照する====
<&lt;link rel="stylesheet" type="text/css" href="./css/style.css"/>&gt;
====head要素の範囲内で@importによって外部スタイルシートを参照する====
<&lt;style type="text/css">&gt;
@import url("./css/style.css")
<&lt;/style>&gt;
==セレクタと疑似クラス、疑似要素==
[[jQuery]]
===タイプセレクタとユニバーサルセレクタ===
====タイプセレクタ====
p.note{color:red}
:
<&lt;p class="note">&gt;...<&lt;/p>&gt;
*ユニバーサルセレクタを利用、要素を省略することで、すべての要素に対して適用できる
.note{color:red}
div#gnavi{font-size:small}
:
<&lt;div id="gnavi"> &gt; ... <&lt;/div>&gt;
===属性セレクタ===
*特定の属性値や属性名をもつ要素に対してスタイルを適用する
h3[id] {color:olive}
:
<&lt;h3 id="r508">&gt;...<&lt;/h3>&gt;
====要素名[属性名="属性値"]====
*属性名と属性値を持つ要素に対してスタイルを適用する
h3[id="r508"] {color:olive}
:
<&lt;h3 id="r508">&gt;...<&lt;/h3>&gt;
====要素名[属性名~="属性値"]====
*属性名を持ち、属性値が空白区切りで複数指定されている場合、属性値が含まれている要素にスタイルを適用する
p[class~="note"]{color:red}
:
<&lt;p class="w3c wcag note">&gt;...<&lt;/p>&gt;
====要素名[属性名｜="属性値"]====
*属性名を持ち、属性値がハイフン区切りで複数指定されている場合、属性値が含まれている要素にスタイルを適用する
[="en" lang]{font-family:Veradana }
:
<&lt;span lang="en-US">&gt;...<&lt;/span>&gt; <&lt;span lang="ja">&gt;...<&lt;/span>&gt;
===セレクタの組合せ===
====セレクタ セレクタ(空白文字区切り)====
div * p {color:blue}
====セレクタ > &gt; セレクタ====
*子セレクタ(child selector)といい、親要素の直接の子要素にスタイルを適用する
blockquote.wcag > &gt; p {font-size:small}
=====絞り込みも可能=====
blockquote.wcag > &gt; p > &gt; abbr {font-size:small}
====セレクタ + セレクタ====
h1 + h2 {color:green}
:
<&lt;h1>&gt;...<&lt;/h1>&gt; <&lt;h2>&gt;...<&lt;/h2>&gt;
===セレクタのグループ化===
*半角カンマでグループ化し、複数の要素にスタイルを適用することができる
====:first-child 疑似クラス====
*親要素の範囲内で最初に登場する子要素のみにスタイルを適用
div > &gt; p:first-child { text-indent:0 }
====リンク疑似クラス(:link、:visited)====
===== :link疑似クラス=====
*IEの独自拡張である「条件付きコメント」は、以下のような書式でHTML中に記述
*http://allabout.co.jp/internet/hpcreate/closeup/CU20070412A/index2.htm
<&lt;!--[if IE]><&gt;&lt;script src="../other_libs/excanvas_r3/excanvas.js" type="text/javascript" charset="utf-8"><&gt;&lt;/script><&gt;&lt;![endif]-->&gt;
====importantルール====
*クラスセレクタよりはIDセレクタを使ったスタイルが優先
<&lt;blockquote>&gt;!importantルールを使うとスタイルを優先させることができます。「プロパティ: 値」の後に半角スペースで区切り、!importanを配置します。ただし、「プロパティ: 値」ごとに指定する必要があります。<&lt;/blockquote>&gt;
body { background-color: white !important; }
「https://www.typea.info/tips_/index.php/特別:携帯機器差分/3055」から取得

© 2006 矢木浩人

案内メニュー