モーダル問題

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

逆引き

重ねる

親要素にreletiveして、子要素をabsolute指定

フローティング

position: fixed

トラブルシューティング

CSSが効かない

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

センタリングされない

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

基本

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

Tips

複数に同じ定義h1,h2 {color: red;}

インラインstyle属性

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

クラスとIDセレクタ

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

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

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

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" />

スマホだとviewportのデフォルトが960px(iPhone/Android機種によっては800px)に指定されており、PCページそのままだとやたら小さいサイズで表示されるのはそのため。width=device-widthにすると実機に合わせて変わる。

dbi

dot per inchで320pxのiphone3と640pxのiphone4ではdpiが違うぞ!

横並びのレイアウト

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

media queries

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

すべてのデバイス/画面サイズに共通かつ 480:iPhone 7/6 Plus縦最初に書く
768:iPad縦 / iPhone 7/6 Plus横@media screen and (min-width: 480px)
920:PC(デスクトップ/タブレット横)@media screen and (min-width: 768px)
920以上:PC(デスクトップ)@media screen and (min-width: 920px)

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

<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 より大きいときに適用されるスタイル */
}

条件適用

@media screen and (max-width: 960px)ブラウザ幅が 960px より小さいときに適用される
@media screen and (min-width: 960px)ブラウザ幅が 960px より大きいときに適用される
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)デバイス幅が 768px より大きく 1024px より小さいときに適用されるスタイル

PC/SPで切り替える

たて並び

スタイル指定の優先度

外部スタイルシート < 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#main h2 { color: #C13A72; }

DIVによるレイアウト

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

display-style

CSSハック

スターハック

* html p { color:#FF0000; }

条件分岐コメント

<!--[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に変更する。

Counter: 4968, today: 1, yesterday: 0

トップ   編集 凍結 差分 履歴 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2022-10-14 (金) 13:16:53