Css

実装したい項目から選択

  • -ms-high-contrast: none

    IEのみスタイルを変更する場合は、レスポンシブ設定のように@mediaで囲みます。

    											
    								@media all and (-ms-high-contrast: none) {
    								   .class{
    									   background: white;
    								   }
    								}				
    							
    						
  • @-moz-document url-prefix()

    Firefoxのみスタイルを変更する場合は、レスポンシブ設定のように@mediaで囲みます。

    											
    								@-moz-document url-prefix() {
    									.class{
    										background: white;
    									}
    								}
    							
    						
  • flex

    大枠のレイアウトを作成するのに必須

    CSS Flexbox の各プロパティの使い方を詳しく解説 | コリス

    引用元URL : https://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html

    Flexboxとは、要素のサイズが不明なものでもダイナミックに変化するものでも柔軟なレイアウトを実現できるCSS3の新しいレイアウトモジュールです。

  • position: sticky

    テーブルのthなどを固定するのに使用する

    															
    								<style>
    									  table thead,table th{
    								        position: -webkit-sticky;
    								        position: sticky;
    								        z-index: 2;
    								        left: 0;
    								        top: 0;
    								        display: block;
    							      }
    								</style>
    							
    						

    CSSのみで行・列ヘッダ固定テーブルを実装(Firefox / Chrome / Safari) - Qiita

    引用元URL : https://qiita.com/s0tter/items/14fb4ec2600828a21a22

    モダンブラウザにおいて`position: sticky`と`width: max-content`の対応が進んだことで、CSSのみで行・列ヘッダ固定テーブルを容易に実装できるようになりました。

Comments

  1. y.kobayashi

    こんなことをcssで解決したい!!などご不明点がございましたら、コメント欄より投稿していただければと思います。

    の返信を表示

Leave a Comment

内容をご確認の上、送信してください。