フォームのテキストエリアにCSSのfield-sizingとlh単位を使用すると便利、入力された文字量に合わせてサイズを自動変更
CSSはどんどん便利になっていますね！ これまではJavaScriptを使用しないとできなかったことがCSSで簡単に実装できるようになっています。 CSSのfield-sizing: content;でフォームのテキストエリアのサイズを入力された文字量に合わせて自動変更したり、テキストエリアの高さを行の高さで設定するlh単位を使ったCSSのテクニックを紹介します。 フォームのテキストエリアに使用するCSSのテクニックは、2つあります。 field-sizing: content;で、コンテンツに合わせてテキストエリアを自動的にサイズ変更する。 lh単位で、テキストエリアの高さを行の高さで設定する。 HTMLは、textareaを用意するだけです。
知っておくと便利なCSSの単位: フォントに基づく相対単位（em, rem, cap, ch, ex, ic, lhなど）の便利な使い方を解説
CSSでよく使用する単位といえば、px, r(em)あたりでしょうか。 CSSはそれら以外にもたくさんの単位が使用できます。フォントに基づく相対単位（em, rem, cap, ch, ex, ic, lhなど）の便利な使い方を紹介します。 Relative length units based on font -Going beyond pixels and (r)ems in CSS by Brecht De Ruyte 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの単位: capとは CSSの単位: chとは CSSの単位: emとは CSSの単位: exとは CSSの単位: icとは CSSの単位: lhとは CSSの単位: remとrlhとは CSSの単位: rex, rch, ricとは はじめに
lhで行数分の高さが便利（最近便利なCSSおれおれAdvent Calendar 2023 – 21日目） | Ginpen.com
最近便利なCSSおれおれAdvent Calendar 2023 – 21 日目 長さの単位で、1lh で 1 行分の高さになります。 lh = Line Height です。L の H です。数字の 1 じゃないです。 例 デモ：https://codepen.io/ginpei/pen/eYXOoRv line-height を変えると箱の高さもそれに合わせて変化します。デモの数字いじってみてね。 行数が必要になる line-clamp と一緒に使うの便利そう。 line-clampで複数行の文の省略がちょっと便利 ルート要素の参照 em に対する rem と同様に、lh にも rlh というのがあります。 おしまい 読みづらいね。3lh が “31 H” にしか見えないね……。 仕様はまだ draft 段階みたいです。ブラウザーの実装は一通り済んでます。 参考 デモ：https://
CSSの新しいプロパティ「field-sizing: content;」が便利！ フォームのサイズを入力された文字量に合わせて自動変更
今まではJavaScriptを使用しないとできなかったことが、たった1行のCSSで簡単に実装できるようになります。フォームのtextareaに文字を入力すると、その文字量に合わせてサイズを自動で変更するCSSの新しいプロパティを紹介します。 下記のように入力された文字量に合わせてサイズを自動で拡張してくれます。また、min-heightやmax-heightを同時に設定できるので、上限下限のサイズを設定することもできます。 CSSの新しいプロパティはfield-sizingです。field-sizingプロパティを使用すると、フォームコントロールのデフォルトのサイズを無効にし、フォームのサイズをコンテンツに依存させることができます。そのため、自動で拡張されるtextareaを実装するのが簡単になります。 参考: Feature: field-sizing CSS property CSSは
CSS height 0 から auto で transition を有効にする方法 - by Takumi Hirashima
CSS で height 0 から auto で transition を有効にする方法を紹介します。 例えば、height 指定 0 から hover 演出を有効にしたい時に便利な方法です。 max-height を指定する height:auto; の指定では transition が効かないため、max-height を指定することで transition を有効化します。 div a { max-height: 0; transition: max-height .4s ease; } div:hover a { max-height: 100px; // 高さの数値は適宜変更してください } まとめ CSS で height 0 から auto で transition を有効にする方法を紹介しました。
Responsive Height Design -レスポンシブを高さの観点から、Webサイトやスマホアプリの実装で役立つテクニック
レスポンシブ対応と言うと、通常は幅、水平方向のサイズのバリエーションですが、最近では高さ、垂直方向のサイズに対するニーズも高まっています。スマホではさまざまな高さのサイズがあるだけでなく、横向きのランドスケープもあります。またデスクトップでもブラウザをスクリーンいっぱいの高さにしているとは限りません。 レスポンシブを高さの観点から考慮した、Webサイトやスマホアプリの実装で役立つCSSのテクニックを紹介します。 Responsive Height Design by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに なぜ高さに対してテストするのか デベロッパーツール CSSで垂直方向を考慮する 垂直のメディアクエリの使用例 終わりに はじめに Responsive Height Design！
Vue.jsにも対応の優れ物！高さが異なるカードでもグリッドにレイアウトできる超軽量ライブラリ -Magic Grid
カードの高さが常に一定であれば、CSS GridやFlexboxで簡単に実装できます。しかし、ユーザーが作成したデータを使った動的コンテンツでは高さが同じになることはほとんどありません。 カードの高さがそれぞれ異なる動的グリッドを簡単に実装できる超軽量JavaScriptライブラリを紹介します。 動的コンテンツはもちろん、静的コンテンツにも対応しています。 Magic Grid Magic Grid -GitHub Magic Gridの特徴 Magic Gridのデモ Magic Gridの使い方 Magic Gridの特徴 Magic Gridは、高さが異なるアイテムでもグリッドに揃えてレイアウトすることができます。高さを調整するために、下部に異なるスペースは必要ありません。 高さが揃っていたり、たくさんの行にそれぞれが何行にまたがっているか定義できる場合はCSS GridやFlexb
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Matt Smith on Twitter: "🔥 TIL a #CSS trick to handle that annoying mobile viewport bug with `100vh` in WebKit (iOS Safari)! #WebDev #ProTip https://t.co/lefD0Klqzd"