CSS font-size: 100vw / 1200 * 36; @media (max-width: 750px) { font-size: 750px / 1200 * 36; } @media (min-width: 1601px) { font-size: 1600px / 1200 * 36; } こんな感じで設定できます。 上記の設定だと、 画面幅1200pxの際にフォントサイズ36px 画…

一行の場合 複数行の場合 一行の場合 text-overflowを使います。developer.mozilla.org overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-overflowをellipsisに設定しつつ、overflow:hiddenではみ出した箇所を非表示に、white-spaceを…

属性セレクタの前方一致を使って、href属性が#から始まる要素をまるっと取得すればページ内リンクを一網打尽にできます。 [attr^=value] attr という名前の属性の値が value で始まる要素を表します。 https://developer.mozilla.org/ja/docs/Web/CSS/Attrib…

iOSでウェブページのスクロールを止めるためにもろもろ調査をしていて、touch-actionたるものを知りました。developer.mozilla.orgその名の通り、許容するタッチ操作を指定できるプロパティで、 touch-action: none とすることで、スワイプ、ピンチなどのす…

DEMO See the Pen shape-outside by kimmy (@kimmy) on CodePen. CSSシェイプをつかって、テキストを斜めに段組してみました。developer.mozilla.orgやっていることは単純で、テキストの左右に三角形を置いて、floatで配置しているだけです。縦位置をセンタ…

アルファベットのユーザー名をデータベースには小文字で収納しつつ、HTMLに表示する際は大文字で表示したい。 最近そんな感じのケースがありまして、ReactやVueを使って、 <p className="username">{ username.toUpperCase() }</p> <p class="username">{{ username.toUpperCase() }}</p> といった感じにバインデ…

Three.jsでレンダリングした3Dモデルを、セガサターンのような見た目にしたいなと思い、ポストプロセスやシェーダーを書いていたんですが、CSSにimage-renderingたるものがあることを知り、早速試してみました。 developer.mozilla.org 使い方はものすごく簡…

HTMLのcheckボックス、CSSの隣接セレクタ、target擬似クラスを使って、JavaScriptを書かずにドロワーメニューをつくってみました。ざっくりとだけ解説すると、 メニューボタンに見える要素が実はinput要素（チェックボックス） inputにチェックの有無でメニ…

偶然気づきました。 iOSとAndeoirdでfont-familyを指定せずにfont-weightを指定すると、差異が出てくることに。font-weightがnormalとboldの2択なところは一緒なのですが、iOSはfont-weight:600からがbold、Androidはfont-weight:700からがboldとなっていま…

DEMO develop.kimizuka.org position: fixedを掛けた要素の親に、 transform: translate3d(0, 0, 0); や、 filter: blur(0); を指定すると効かなくなり、position: relative指定時の位置を取るようになります。 色々試してみましたが、対策は無くて、transla…

blog.kimizuka.org本当はこの記事で書こうと思っていたことなのですが、-webkit-overflow-scrolling: touchが不要になっていたことに驚きすぎて、記事を分けることにしました。さて、overflow: scrollを実装するとき、「スクロールバーを消したい」という要…

overflow: scrollと一緒に使うことで、慣性スクロールを有効にしてくれることでお馴染みの-webkit-overflow-scrolling: touchですが、いつのまにか不必要になっていることに気づきました。 iOS13.7のSafariとAndroid10のChromeで確認しましたが、overflow: s…

DEMO See the Pen Custom CheckBox without JavaScript by kimmy (@kimmy) on CodePen. 解説 checkboxとlabalと隣接セレクタをうまく使えば、JavaScriptを一切書かずにチェックボックスをカスタムすることができます。 ポイントとしては、❶ チェックボックス…

ウェブサイトにファイルをアップロードする際、ファイルをドラッグ＆ドロップするUIをよく見かけます。 そういったUIを実装しようとすると、HTML Drag and Drop APIを使いたくなることでしょう。developer.mozilla.orgしかし、実はinputタグでも簡単に作成す…

keyframeアニメーションでcontentって差し替えられるのかな。と思って試してみたところ動いた。 使いようによっては便利かもしれない。

DEMO See the Pen Fixed Header by kimmy (@kimmy) on CodePen.ヘッダーってfixedで実装されることが多いのですが、個人的には2つだけ心掛けて欲しいことがありまして、例えば、コードレビューのレビュアーになることがあったら、少なくとも❶は確実に指摘し…

先日、「最新のSafariとChromeで観覧できればOK！」というウェブサイトを実装することになりまして、これはチャンス！ということで、前々から気になっていたscroll-snapを実戦投入してみました。developer.mozilla.orgJavaScriptを一切書かずに、ぴたっと吸…

数字を入力することに特化した、input type="number"ですが、デフォルトで入力値をインクリメント・デクリメントさせるボタンがついてます。 webkit系のブラウザに限られますが、実はこちらのボタン、CSSを当てることが可能です。 その名も、-webkit-inner-s…

developer.mozilla.org CSS関数のattr()をつかえば、属性セレクタの値を取得することができます。 昨日、属性セレクタを調べているときに知りました。 HTML <div data-text="Ya-Ha-!"></div> CSS [data-text]:before { content: attr(data-text); } と書けば、 [data-text]:before { content…

結論 IE11ではdatasetでdata属性を更新してもスタイルが反映されない IE11でもsetAttributeでdata属性を更新すればスタイルが反映される！ 詳細 かれこれ、ずーっと悩んでいたことだったのですが、IE11では、 属性セレクタをつかってスタイルを指定 dataset…