yuw27b’s blog

技術メモと雑記

CSS

CSS: overscroll-behavior

CSS

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

CSS:画面にぴったり収まる碁盤の目を作りたい

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

HTMLのprogress要素を使ってプログレスバーを表示する

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

CSSでコンテンツのトグル表示を実装する

CSS

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

letter-spacingとtext-align: center(とcalc())

CSS

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

CSSカウンターを使って変則的な番号付きリストを実装する

CSS

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

ボタンを押したことが伝わるCSS

CSS

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

NDS第52回勉強会に行ってきたよ

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

CSSの擬似要素を使ったあれこれ

CSS

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

stylelintを使い始めたので設定例など (2016年9月更新)

CSS

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

writing-modeがFirefoxでも使えるようになっていた

CSS

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