CSS

スポンサーリンク
CSS

[CSS] [jQuery] option要素をdisplay:noneで非表示にする方法（Safari対応）

概要 <option style="display:none">hoge</option>とするとoption要素を非表示にすることができるが、Safariでは表示されてしまう。 解決方法 <span style="display:none"><option>hoge</option></span>のようにoption要素をラップしたspan要素をdisplay:noneとすることで、Safari...
2023.10.30
CSSJavaScript
CSS

[CSS] Macでスクロールバーが常に表示されない？

概要 CSSでoverflow-y: scrollやoverflow-x: scrollとすると、Windowsでは常にスクロールバーが表示されるがMacではスクロールバーが表示されない。 原因 Macの場合、表示する端末の「システム環境設定⇒一般⇒スクロールバーの表示」の設定に依存するため、基本的にはCSSで制御することはできない。 初期値は「マウスまたはトラックパッドに基づいて自動的に表示」で...
2022.06.04
CSS
CSS

[new.css] HTMLだけで使うことができるCSSフレームワーク

概要 Bootstrap, Material-UI, VuetifyなどのCSSフレームワークは、独自のクラスをタグのクラス属性に割り当てなければならない。 new.cssを使うと、HTMLタグを記述するだけでモダンなウェブサイトを作成することができる。細かいデザインを実現することは難しいが、簡単なサイトであればキレイにまとめることができる。 使い方 <head></head>内に以下の2行を追加...
2020.10.19
CSS
CSS

ダークモードの場合にCSSを切り替える(prefers-color-scheme)

CSSのメディアクエリで、@media (prefers-color-scheme: dark) {// スタイル定義}とすると、ユーザーのOS設定がダークモードの場合のスタイルを定義することができる。 // ダークモードの場合 @media (prefers-color-scheme: dark) { body { background-color: #000; color: #fff; } }...
2020.10.15
CSS
CSS

【CSS】nth-of-type(n)はクラスに指定しても効かない？

概要 よく勘違いしてしまうのだが、CSSの擬似クラスnth-of-type(n)はクラスに指定した場合でもnの対象としてカウントされるのは要素(タグ)である。 サンプル <ul> <li class="hoge">11111</li> <li>22222</li> <li class="hoge">33333</li> <li class="hoge">44444</li> <li class="...
2020.08.20
CSS
スポンサーリンク