端までスクロールした時の振る舞いを、CSSで指定できる、というものです。仕様：CSS Overscroll Behavior Module Level 1 対応状況：Can I use... Support tables for HTML5, CSS3, etc MDNが分かりやすいです： overscroll-behavior - CSS: カスケーディン…

こういうものを作りたい： 画面にぴったり収まってほしい（background-sizeのcontainみたいな） 画面が横長なら縦の余白がゼロ、縦長なら横の余白がゼロ 画面リサイズに応じてこちらもサイズが変わる 作ったもの： See the Pen Square grid by Yu Watanabe (…

HTMLにはprogress要素があり、HTMLのみでブラウザ上にプログレスバーを表示することができます。2020年7月時点では、どのブラウザでも問題なく利用できそうです。 ブラウザ対応状況：https://caniuse.com/#feat=progress WHATWG仕様（Living Standard）： ht…

チェックボックスを使ってます。 JavaScriptを使ったほうが表現力は高いですが、他にJS使う予定もないしとりあえず隠せればいいか…みたいなページでたまにやるやつです。 See the Pen Toggle content by CSS by Yu Watanabe (@yuw27b) on CodePen. 補足みた…

letter-spacingとテキストの中央揃えを併用すると、左右の空白がずれて見えるのでpaddingで調整することがよくある。例えばこんな見た目のボタンを作るのに、 padding: 5px; font-size: 16px; letter-spacing: 1em; text-align: center; /*〜略〜*/ とする。…

久しぶりにCSSカウンター便利だな、と実感したのでメモ。CSSカウンターとはこういうものです： CSS カウンターの使用 - 開発者ガイド | MDN こんな感じの文書をWebページに掲載するときに（あくまで例ですがこういう構造）、 マークアップにはOL要素を使うの…

a要素やbutton要素のボタンのCSSは、最近よくこんな感じにします。 :active属性でボタンを押下した状態のスタイルを指定できますが、1px下に動かすだけでもユーザーに「ボタンを押した」ことが伝わります。 See the Pen button:active by Yu Watanabe (@yuw2…

51回に引き続き、第52回勉強会(2017/06/17) - 長岡 IT開発者 勉強会(NDS)に行ってきました。 前回も書きましたが、NDSは名称に「IT開発者」とあるとおり、幅広い分野の開発者さんが参加しているところが好きです。私は今回はCSSのお話をさせてもらいました。…

この記事は、今年お世話になったCSS Advent Calendar 2016の20日目です。擬似要素自体は特に今年どうこうなった仕様ではありませんが、大変お世話になりました。 擬似要素をよく使う場面 自分的頻出パターンとしてはこんな感じです： counterと組み合わせた…

※2016年9月13日更新：stylelintのアップデートに伴い、ルールの記述方法が古くなっていたものがありましたので、訂正しました。 stylelintって？ 名前のとおりCSSのlintツールです。 設定したルールから外れた書き方をすると警告してくれます。CSSを書くにあ…

CSSで縦書きテキスト CSSのみで縦書きテキストを実現するには、writing-modeプロパティを使いますが、Firefoxだけが長いあいだ未対応でした。 Can I use... Support tables for HTML5, CSS3, etc2015年11月現在、この仕様は勧告候補の段階なので、ブラウザに…