ユーザ用ツール

サイト用ツール


css

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン
前のリビジョン
css [2013/02/05 11:03] – [nth の指定方法] nullponcss [2019/03/18 04:24] (現在) – [外観モードによる振り分け] nullpon
行 92: 行 92:
 |E::before|E要素の前に生成された空間| |E::before|E要素の前に生成された空間|
  
 +===== CSS振り分け =====
  
 +[[https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries|メディアクエリの使用 - CSS: カスケーディングスタイルシート | MDN]]
  
 +==== 外観モードによる振り分け ====
 +
 +OSのダークモードへの対応(Firefox 67以降など、2019年3月現在対応ブラウザなし)
 +
 +<code html>
 +<!-- ライトモード、prefers-color-theme未対応の場合のCSS -->
 +<link rel="stylesheet" href="light.css">
 +<!-- ダークモードのCSS -->
 +<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="dark.css">
 +</code>
 +
 +==== iPhone用のview port設定(拡大縮小の禁止設定) ====
  
-===== CSS振り分け ===== 
-iPhone用のview port設定(拡大縮小の禁止設定) 
 <code html> <code html>
 <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
 </code> </code>
  
-iPhone、iPad用にCSS振り分け+==== iPhone、iPad用にCSS振り分け ==== 
 <code html> <code html>
 <!-- iPhone --> <!-- iPhone -->
行 123: 行 136:
 <!-- PC用 --> <!-- PC用 -->
 <link rel="stylesheet" media="screen and (min-device-width: 1025px)" href="pc.css"> <link rel="stylesheet" media="screen and (min-device-width: 1025px)" href="pc.css">
- 
 </code> </code>
 +
css.1360062227.txt.gz · 最終更新: 2013/02/05 11:03 by nullpon