CSS の履歴(No.16)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• CSS へ行く。
  • 1 (2010-09-07 (火) 04:36:20)
  • 2 (2011-11-25 (金) 07:56:20)
  • 3 (2011-12-09 (金) 02:04:49)
  • 4 (2013-11-27 (水) 00:58:50)
  • 5 (2014-07-14 (月) 05:25:54)
  • 6 (2014-07-14 (月) 06:44:15)
  • 7 (2014-07-24 (木) 02:12:44)
  • 8 (2015-04-08 (水) 09:34:11)
  • 9 (2018-05-03 (木) 13:50:41)
  • 10 (2018-05-09 (水) 08:15:31)
  • 11 (2018-05-09 (水) 14:19:02)
  • 12 (2018-05-18 (金) 10:51:22)
  • 13 (2018-09-18 (火) 20:38:08)
  • 14 (2018-09-19 (水) 23:14:37)
  • 15 (2018-10-25 (木) 07:52:41)
  • 16 (2018-11-27 (火) 14:57:03)
  • 17 (2019-04-25 (木) 09:21:26)

---

• CSSについて

モーダル問題†

https://spyweb.media/2017/09/21/modal-window-fixed-background-also-support-ios/

トラブルシューティング†

CSSが効かない†

既存ファイルと分割して最後に読み込ませ、最終的にマージするのが良い。 巨大CSSだとどこにあるかわからんし。

• ID or class付与してそのスタイルを効かせてみる→効くのであれば詳細度をあげる

センタリングされない†

モーダルでスクロールしない†

• overflow-yとheightを指定するとスクロールバー出現

基本†

p  {color: red} → pがセレクタ、colorがプロパティでredが値

Tips†

インラインstyle属性†

cssを外部ファイルに書かないで直接指定するやり方。昔よくやっていた。携帯ではいまだにこれ。

クラスとIDセレクタ†

基本中の基本だが、classは複数OK（複数に対して指定したい場合）、IDはひとつだけ。IDは#で指定するこれはページ内のリンクから連想しよう！

   p.hot  {color: red}
   .cool  {color: blue}

   p#hot {color: red}
   #cool {color: blue}

ブロックレベル要素とインライン要素†

• <a><span>などはインライン要素で横に並ぶしmarginは効かない。対して<p>などはブロックレベル要素。HTMLStrictではbodyにおけるのはブロックレベル要素なので<a>タグを書くときは<p>などのブロックレベル要素で囲わないとだめ。関連してスタイルのblockとinlineも同じようにblockだと文字の間に該当要素を挟むことができず、inlineだと文字の間に該当要素を挟むことができる。

inline-blockなる両方の性質を兼ね備えた属性もあり、これだとfloatなしで横に並べることができる。

marginとpadding†

大まかにmarginは外側の余白、paddingは内側の余白。borderはその両方に挟まれる壁のイメージで考える。その中身のwidth+padding+border+marginが実際のサイズになるので枠を大きくとる場合は内側のwidthを減らす必要がある。

viewportの設定†

デバイスの幅や倍率などを指定できる。下記は幅をデバイスの幅に設定し、倍率は1倍固定でユーザーによる拡大縮小を禁止している。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />

横並びのレイアウト†

2018年ではflexを使っておくのが良いらしい。親要素のdivにflex(インライン要素ならflex-inline)を指定して、その子要素にどのように並ぶかを指定する。デフォルトだとrowで横並び

media queries†

画面のサイズによって適応するCSSを書き換えてくれるという優れもの。画面サイズの最小を指定してモバイルファーストで書いていくのがわかりやすく

ファイルの読み込みを変える場合†

<link href="/pc.css" rel="stylesheet" type="text/css" media="screen and (min-width: 900px)"/>
<link href="/smartphone.css" rel="stylesheet" type="text/css" media="screen and (max-width: 480px)"/>

CSSファイルに記載する†

@media screen and (max-width: 960px) {
  /* ブラウザ幅が 960px より小さいときに適用されるスタイル */
}

@media screen and (min-width: 960px) {
  /* ブラウザ幅が 960px より大きいときに適用されるスタイル */
}

条件適用†

PC/SPで切り替える†

• div {display:none;}

たて並び†

• div {display:block;}

スタイル指定の優先度†

外部スタイルシート < STYLE要素 < インライン・スタイル

同じ優先度同士なら後ろのほうが優先度が高くなる。 !importantキーワードで、優先度を最高に指定出来る。

また指定はより詳細な方がマッチする。

.hoge { display:none; } div.big div.hoge { display:block; }

<div class="hoge>見えません</div>　→ 一般的な指定が効いてdisplay:none
<div class="big"><div class="hoge">見えます</div></div>　→下の詳細な指定が効いてdisplay:block

親子関係†

• <div id="main"><h2/></div>にのみ適用させる書き方。

div#main h2 { color: #C13A72; }

DIVによるレイアウト†

三段組でも基本は二段組みと一緒。回り込みを解除しない限り横に並ぶので、回り込み解除専用のDIVを用意しておく。回り込み解除のdivは表示上影響を与えないのが好ましい。divはブロックレベル要素なので中にインライン要素を非表示でいれるというのが正しい。

display-style†

CSSハック†

スターハック†

• 先頭に*。IE6以下対応 [#a4610ab7]

* html p { color:#FF0000; }

条件分岐コメント†

• 見た目単なるHTMLコメントなんだけど、IEのみ解釈するという不可解な仕様

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="css/test.css" media="screen" />
<![endif]-->

逆引きリファレンス†

<LI>を横に並べたい†

1. display:inlineを指定する。inline要素になるのでmarginなどは指定できない
2. float:leftを指定する。block要素のままなのでmargin指定可能

ブラウザ外枠からの絶対値でレイアウト指定†

1. positionを利用(relative/absolute/static/fixed)

SASSとSCSS†

コンパイルしてCSSを作成する前提の記述方法。変数が使えたり繰り返し分岐ができたりプログラム的な記述が可能。compassなどでcssに変更する。