Tips
従来のCSSでの問題を、モダンなCSSで置き換えていくためのTips集。
— Takeshi Kano 鹿野 壮 (@tonkotsuboy_com) May 16, 2020
めちゃくちゃおもしろいです。
Modern CSS Solutions https://t.co/Wwc9HoLrZy#CSS
nth-child・nth-of-type
:nth-child(2 of https://t.co/7BD4GK7bl3)
— げこP (@GeckoTang) January 12, 2021
Flexbox・Grid
Flexboxを使っていると、親を小さくしたらボックスが勝手に縮む現象にたまに遭遇します。
— Takeshi Kano 鹿野 壮 (@tonkotsuboy_com) May 22, 2018
ボックスが親要素の幅をはみ出した場合の縮小率を設定する「flex-shrink」がデフォルトで1であることが原因。
1年半前DISTに呼んでいただいたときに解説しました。https://t.co/HIQqPMMw2n#dist13 #css pic.twitter.com/UNVFeB6uTQ
CSSの上下左右中央揃え。
— Takeshi Kano 鹿野 壮 (@tonkotsuboy_com) July 3, 2020
現代のCSSでは、2行です。
.container {
display: grid;
place-items: center;
}
＿人人人人人人人＿
＞ 2行です ＜
￣Y^Y^Y^Y^Y^Y^Y^￣
サンプルhttps://t.co/6cD1tXLzum
画像はかぴのんスタジオよりhttps://t.co/2pkCoYcToI#CSS pic.twitter.com/1lV2qJfBIK
Sticky
フッターは基本ページ下部に出てほしいけどposition: fixedとは違うんだよなーってときに使えるSticky Footer
— ダーシノ / NES.css (@bc_rikko) March 5, 2020
<body>
<main></main>
<footer></footer>
</body>
body {
display: flex;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
footer {
flex-shrink: 0;
} pic.twitter.com/21wGjXgvRi
Scroll
An Overview of Scroll Technologies | CSS-Trickshttps://t.co/dXX9CfdMRh
— ダーシノ / NES.css (@bc_rikko) June 22, 2020
いろんなスクロール効果がまとまっている記事
position: sticky、パララックス、スナップ、スムーズスクロールとか。
一回簡単なパララックスサイト作ったことあるけど、めっちょ面倒だよね。
画像
【CSS 講義 8】ページ拡大時に画像がぼやけるのを防ぎたいとき
— コムテ (@commte) June 5, 2020
image-renderingは画像の拡大縮小処理アルゴリズムの変更を行えます。ドット絵など、ページを拡大した時に画像（エッジ）がぼやけるのをCSSでコントロールしたい場合に使うとよいそうです。IE11は無視 #CSShttps://t.co/HMbjhTzXs6 pic.twitter.com/qMNrrdMx0l
CSS：CSSで作る画像のハーフトーン効果。円形グラデーションとフィルターとブレンドモードで実装してますね。すごいなー https://t.co/BAGwwy1oX3
— Webクリエイター ボックス (@webcreatorbox) June 19, 2020
Form
Chromeのuser agent stylesheetに自動入力されたinputの背景が変わるスタイルがあるの知らなかった。しかも!important…😇
— ダーシノ / NES.css (@bc_rikko) April 6, 2020
input:-internal-autofill-selected {
background-color: rgb(232, 240, 254) !important;
background-image: none !important;
color: rgb(0, 0, 0) !important;
}
CSS：user-select: all; で要素内の文字が全選択できるようになるんですねー！Safari用には -webkit- 必須。 pic.twitter.com/AfWiyDMyXr
— Webクリエイター ボックス (@webcreatorbox) April 30, 2020
その他
CSSだけで章、節に番号を振る方法
— ダーシノ / NES.css (@bc_rikko) March 29, 2020
counterを使うと実現できる。Markdown使いたいけど番号振るためだけにWordやその他の記法使うの嫌だってときに使えそう。
body { counter-reset : h2; }
h2 { counter-reset : h3; }
h2::before {
content: counter(h2) ". ";
counter-increment: h2;
} pic.twitter.com/1rrTbt2dao
これ -webkit-fill-available を与えた要素に上下の padding とかがあると挙動が変わってくるので、そのあたり注意。
— \ uto-usui // (@uto_ao) April 27, 2020
あと、chrome にも当たってくるので、safari 用に CSS hack するか、UA みて処理してあげる方がよいなど。
【CSS ハック】モバイルのビューポート（下のあたり）の高さをピッタリ合わせる記述方法 #CSShttps://t.co/Fzjgr9gy1U pic.twitter.com/oUDcjyw9ZH
— コムテ (@commte) May 30, 2020
🤓 readable, responsive hamburger inline SVG
— Adam Argyle (@argyleink) July 15, 2020
🦾 enhanced with accessibility attributes (see demo)
💪 display with `flex` & `place-items: center`
🎨 conic-gradient for a soft icecreamy button fillhttps://t.co/8cp8N0jPod
💡 see demo for updated mods for rounded linecaps! pic.twitter.com/ZZ9SW2oDb2
resizeプロパティってtextareaでしか使えないと思い込んでいたんだけど、どんな要素でも使えるんだね！
— ダーシノ / NES.css (@bc_rikko) March 16, 2020
.resizable {
resize: both;
overflow: hidden;
}https://t.co/9c99QrAHs6 pic.twitter.com/IWOiVF7tWR
Sass変数をJavaScript内で使う方法
— ダーシノ / NES.css (@bc_rikko) January 18, 2021
[env]
webpack
style-loader
css-loader
sass-loader
[vars.scss]
$primary: blue;
// 使いたい変数をexport
:export {
primary: $primary;
}
[xxx.js]
import Color from '@/path/to/vars.scss'
console.log("Primary color is", Color.primary) // ←blue
記事
リンク先にも書いていますが、今後は @use を使いましょう。
— Takeshi Kano 鹿野 壮 (@tonkotsuboy_com) May 12, 2020
移行ツールもあります。https://t.co/FCz6R68Tyg#CSS #Sass
ライブラリ
前の記事: レスポンシブ用にfont-size, margin, paddingなど、プロパティの値を一元管理できるSassの超軽量ライブラリ -SSCSS https://t.co/4cuIGibVpW
— コリス🍡 (@colisscom) January 9, 2021
CSS：CSSで描かれた水滴。すっごいリアル。 https://t.co/lIEVuST4Ax
— Webクリエイター ボックス (@webcreatorbox) July 28, 2020
Bootstrap v5はPostCSSじゃなくて、LibSassで続行っぽい? PostCSSだとプラグインのメンテがつらいだろうからなー
— 久保 知己 (@kojika17) June 19, 2020
tailwindcss
🔥 @tailwindcss tip: Add custom screen breakpoints to your tailwind configuration, allowing you do max-width (desktop first) transformations, or to apply a class at *only* a single breakpoint (and not larger/smaller).#tailwind #css #codeshowcase pic.twitter.com/T0nrZnYxxS
— Jake Dohm (@JakeDohm) July 16, 2019
わお…！サイト上のあらゆる要素をtailwindcssのコードに変換してくれるChrome拡張。これ神なやつじゃ…？ https://t.co/TNrsp5v6hz
— 新田聡一郎 (@soichiro_nitta) December 5, 2020
コメントは受け付けていません。