20220111のCSSに関する記事は3件です。

余白指定がすごく便利「gap」

余白といえばmarginやpaddingですが、gapでも余白がとれます。 ※ただしdisplay: flex;かdisplay: grid;を指定している場合のみ メディア型やカード型のレイアウトとかめちゃ便利です! 使い方 index.html <ul class="hoge_list"> <li class="hoge_item">gap便利だよ</li> <li class="hoge_item">gap便利だよ</li> <li class="hoge_item">gap便利だよ</li> <li class="hoge_item">gap便利だよ</li> <li class="hoge_item">gap便利だよ</li> <li class="hoge_item">gap便利だよ</li> </ul> style.css // インナー幅 1024px .hoge_list { display: flex; flex-wrap: wrap; gap: 24px 32px; } .hoge_item { width: 320px; background: #ccc; padding: 50px 20px; text-align: center; } 結果 gap: 行間(row-gap) 列間(column-gap); ※片方しか指定してないときは空いている部分の余白を取ってくれる これでnth-childとかlast-childなども使用しなくていいし、記述も減らせます! ↓参考にさせてもらった記事はこちら https://ics.media/entry/210628/
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

css だけで ヘッダを固定

ヘッド要素の自動追随。 くっついて来るメニュー。 vue2 のときはvue.js の headroom を使っていたが見つからない。 ということで結論 hoge.vue <header style="background-color:yellow;position: sticky;top: 0;height:42px;z-index: 9999;"> これがヘッダーになるよ固定されるよ </header> たったこれだけok。 要素が後ろになったりする場合は z-index を多くしよう。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

「他の人はこちらも検索」をCSSで非表示にする(備忘)

概要 Googleの検索結果画面で日々誤クリックを誘発しては舌打ちを買っている「他の人はこちらも検索(PASF)」を非表示にする方法の備忘録。 以前はNo Search Forという神ツールが使えていたのだが、いつの頃からかPASFではなくサマリーが消えるようになってしまっているので、CSSをいじって消す方法を残しておく。 やり方 Stylus等のユーザースタイルシートツールを利用し、以下のスタイルを適用するだけ。 実はCSSには不慣れなので、突っ込みどころがあったら優しく教えてください。 div[id^="eob_"] {display: none;} div.tF2Cxc {height:auto;}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む