CSS
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
-CSSについて
#contents
*モーダル問題 [#w9094abf]
https://spyweb.media/2017/09/21/modal-window-fixed-backgr...
*逆引き [#hd66635a]
**重ねる [#n6304f0d]
親要素にreletiveして、子要素をabsolute指定
**フローティング [#d82e0f34]
position: fixed
*トラブルシューティング [#gac42cd4]
**CSSが効かない [#oa954a3a]
既存ファイルと分割して最後に読み込ませ、最終的にマージす...
巨大CSSだとどこにあるかわからんし。
-ID or class付与してそのスタイルを効かせてみる→効くのであ...
**センタリングされない [#y69b021c]
**モーダルでスクロールしない [#a3a523b6]
-overflow-yとheightを指定するとスクロールバー出現
*基本 [#q25658b0]
p {color: red} → pがセレクタ、colorがプロパティでredが値
**Tips [#n20d92cb]
|複数に同じ定義|h1,h2 {color: red;}|
**インラインstyle属性 [#v0c61a2e]
cssを外部ファイルに書かないで直接指定するやり方。昔よく...
**クラスとIDセレクタ [#f4415166]
基本中の基本だが、classは複数OK（複数に対して指定したい場...
p.hot {color: red}
.cool {color: blue}
p#hot {color: red}
#cool {color: blue}
**ブロックレベル要素とインライン要素 [#t6cdccd4]
-<a><span>などはインライン要素で横に並ぶしmarginは効かな...
inline-blockなる両方の性質を兼ね備えた属性もあり、これだ...
**marginとpadding [#a0fd2788]
大まかにmarginは外側の余白、paddingは内側の余白。borderは...
*viewportの設定 [#b04e6eb3]
デバイスの幅や倍率などを指定できる。下記は幅をデバイスの...
<meta name="viewport" content="width=device-width,initia...
スマホだとviewportのデフォルトが960px(iPhone/Android機種...
*dbi [#a60d45ac]
dot per inchで320pxのiphone3と640pxのiphone4ではdpiが違う...
*横並びのレイアウト [#qfbf6c90]
2018年ではflexを使っておくのが良いらしい。親要素のdivにfl...
*media queries [#lca52076]
画面のサイズによって適応するCSSを書き換えてくれるという優...
|すべてのデバイス/画面サイズに共通かつ 480：iPhone 7/6 Pl...
|768：iPad縦 / iPhone 7/6 Plus横|@media screen and (min-w...
|920：PC（デスクトップ/タブレット横）|@media screen and (...
|920以上：PC（デスクトップ）|@media screen and (min-width...
**ファイルの読み込みを変える場合 [#k3c89e2f]
<link href="/pc.css" rel="stylesheet" type="text/css" me...
<link href="/smartphone.css" rel="stylesheet" type="text...
**CSSファイルに記載する [#ta51cf02]
@media screen and (max-width: 960px) {
/* ブラウザ幅が 960px より小さいときに適用されるスタイ...
}
@media screen and (min-width: 960px) {
/* ブラウザ幅が 960px より大きいときに適用されるスタイ...
}
**条件適用 [#f937a531]
|@media screen and (max-width: 960px)|ブラウザ幅が 960px ...
|@media screen and (min-width: 960px)|ブラウザ幅が 960px ...
|@media only screen and (min-device-width: 768px) and (ma...
**PC/SPで切り替える [#s827c665]
-div {display:none;}
**たて並び [#x3b3f4bc]
-div {display:block;}
*スタイル指定の優先度 [#x4c5ba7d]
外部スタイルシート < STYLE要素 < インライン・スタイル
同じ優先度同士なら後ろのほうが優先度が高くなる。
!importantキーワードで、優先度を最高に指定出来る。
また指定はより詳細な方がマッチする。
.hoge { display:none; }
div.big div.hoge { display:block; }
<div class="hoge>見えません</div> → 一般的な指定が効い...
<div class="big"><div class="hoge">見えます</div></div>...
**親子関係 [#d5a846a2]
-<div id="main"><h2/></div>にのみ適用させる書き方。
div#main h2 { color: #C13A72; }
*DIVによるレイアウト [#c1171bb2]
三段組でも基本は二段組みと一緒。回り込みを解除しない限り...
**display-style [#bbcf6185]
*CSSハック [#e14495bb]
**スターハック [#u15f4fef]
-先頭に*。IE6以下対応 [#a4610ab7]
* html p { color:#FF0000; }
**条件分岐コメント [#qcadd47a]
-見た目単なるHTMLコメントなんだけど、IEのみ解釈するという...
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="css/test.cs...
<![endif]-->
*逆引きリファレンス [#be30a233]
**<LI>を横に並べたい [#m6a93e34]
+display:inlineを指定する。inline要素になるのでmarginなど...
+float:leftを指定する。block要素のままなのでmargin指定可能
**ブラウザ外枠からの絶対値でレイアウト指定 [#tf2e9d12]
+positionを利用(relative/absolute/static/fixed)
*SASSとSCSS [#g8f1839b]
コンパイルしてCSSを作成する前提の記述方法。変数が使えたり...
#counter
終了行:
-CSSについて
#contents
*モーダル問題 [#w9094abf]
https://spyweb.media/2017/09/21/modal-window-fixed-backgr...
*逆引き [#hd66635a]
**重ねる [#n6304f0d]
親要素にreletiveして、子要素をabsolute指定
**フローティング [#d82e0f34]
position: fixed
*トラブルシューティング [#gac42cd4]
**CSSが効かない [#oa954a3a]
既存ファイルと分割して最後に読み込ませ、最終的にマージす...
巨大CSSだとどこにあるかわからんし。
-ID or class付与してそのスタイルを効かせてみる→効くのであ...
**センタリングされない [#y69b021c]
**モーダルでスクロールしない [#a3a523b6]
-overflow-yとheightを指定するとスクロールバー出現
*基本 [#q25658b0]
p {color: red} → pがセレクタ、colorがプロパティでredが値
**Tips [#n20d92cb]
|複数に同じ定義|h1,h2 {color: red;}|
**インラインstyle属性 [#v0c61a2e]
cssを外部ファイルに書かないで直接指定するやり方。昔よく...
**クラスとIDセレクタ [#f4415166]
基本中の基本だが、classは複数OK（複数に対して指定したい場...
p.hot {color: red}
.cool {color: blue}
p#hot {color: red}
#cool {color: blue}
**ブロックレベル要素とインライン要素 [#t6cdccd4]
-<a><span>などはインライン要素で横に並ぶしmarginは効かな...
inline-blockなる両方の性質を兼ね備えた属性もあり、これだ...
**marginとpadding [#a0fd2788]
大まかにmarginは外側の余白、paddingは内側の余白。borderは...
*viewportの設定 [#b04e6eb3]
デバイスの幅や倍率などを指定できる。下記は幅をデバイスの...
<meta name="viewport" content="width=device-width,initia...
スマホだとviewportのデフォルトが960px(iPhone/Android機種...
*dbi [#a60d45ac]
dot per inchで320pxのiphone3と640pxのiphone4ではdpiが違う...
*横並びのレイアウト [#qfbf6c90]
2018年ではflexを使っておくのが良いらしい。親要素のdivにfl...
*media queries [#lca52076]
画面のサイズによって適応するCSSを書き換えてくれるという優...
|すべてのデバイス/画面サイズに共通かつ 480：iPhone 7/6 Pl...
|768：iPad縦 / iPhone 7/6 Plus横|@media screen and (min-w...
|920：PC（デスクトップ/タブレット横）|@media screen and (...
|920以上：PC（デスクトップ）|@media screen and (min-width...
**ファイルの読み込みを変える場合 [#k3c89e2f]
<link href="/pc.css" rel="stylesheet" type="text/css" me...
<link href="/smartphone.css" rel="stylesheet" type="text...
**CSSファイルに記載する [#ta51cf02]
@media screen and (max-width: 960px) {
/* ブラウザ幅が 960px より小さいときに適用されるスタイ...
}
@media screen and (min-width: 960px) {
/* ブラウザ幅が 960px より大きいときに適用されるスタイ...
}
**条件適用 [#f937a531]
|@media screen and (max-width: 960px)|ブラウザ幅が 960px ...
|@media screen and (min-width: 960px)|ブラウザ幅が 960px ...
|@media only screen and (min-device-width: 768px) and (ma...
**PC/SPで切り替える [#s827c665]
-div {display:none;}
**たて並び [#x3b3f4bc]
-div {display:block;}
*スタイル指定の優先度 [#x4c5ba7d]
外部スタイルシート < STYLE要素 < インライン・スタイル
同じ優先度同士なら後ろのほうが優先度が高くなる。
!importantキーワードで、優先度を最高に指定出来る。
また指定はより詳細な方がマッチする。
.hoge { display:none; }
div.big div.hoge { display:block; }
<div class="hoge>見えません</div> → 一般的な指定が効い...
<div class="big"><div class="hoge">見えます</div></div>...
**親子関係 [#d5a846a2]
-<div id="main"><h2/></div>にのみ適用させる書き方。
div#main h2 { color: #C13A72; }
*DIVによるレイアウト [#c1171bb2]
三段組でも基本は二段組みと一緒。回り込みを解除しない限り...
**display-style [#bbcf6185]
*CSSハック [#e14495bb]
**スターハック [#u15f4fef]
-先頭に*。IE6以下対応 [#a4610ab7]
* html p { color:#FF0000; }
**条件分岐コメント [#qcadd47a]
-見た目単なるHTMLコメントなんだけど、IEのみ解釈するという...
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="css/test.cs...
<![endif]-->
*逆引きリファレンス [#be30a233]
**<LI>を横に並べたい [#m6a93e34]
+display:inlineを指定する。inline要素になるのでmarginなど...
+float:leftを指定する。block要素のままなのでmargin指定可能
**ブラウザ外枠からの絶対値でレイアウト指定 [#tf2e9d12]
+positionを利用(relative/absolute/static/fixed)
*SASSとSCSS [#g8f1839b]
コンパイルしてCSSを作成する前提の記述方法。変数が使えたり...
#counter
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
