Webデザイン
横スクロール .horizontal-scroll-table { overflow: auto; white-space: nowrap; } はみ出たtableを横スクロールで滑らかに表示するCSS - Qiita 縦スクロール .vertical-scroll-table { overflow: auto; overflow-x: hidden; max-height: 12rem; } ※max-hei…
たとえば、tableというクラス直下のtd要素の2番目以降をtext-align: center;にしたいとき。 .table td:nth-child(n+2) { text-align: center; } 何番目系の便利なCSSまとめ - Qiita nth-child() でx個目以降を指定するcss | eturlt.net
FLOCSS設計 FLOCSS設計を採用した場合。 構成 ├──foundation/ ├──layout/ └──object/ ├──component/ ├──project/ └──utility/ 作成コマンド。 #ディレクトリ作成 mkdir app/assets/stylesheets/foundation mkdir app/assets/stylesheets/layout mkdir -p app…
やりたいこと ある要素の、ひとつ下の要素をクリックさせたい 「この要素はクリックやタッチを無効にして、ひとつ下の階層をクリック・タッチさせたい!」 てなときに使えるCSS。 方法 pointer-events: none; これを指定した要素は、表示は見えてもクリック…
スマホ画面で画像をいい感じにサイズ調整する方法のメモ。具体的なシチュエーションとしては、ヘッダーに表示したい背景画像を縦横同じ長さで表示するときなど。 結論 結論からいうと、次のようにスタイルをあててあげればOK .画像セレクタ { width: 100%; h…