Web制作者の念願がついに叶った！ height: 0;からheight: auto;へのトランジションをJavaScriptは無し、CSSで実装する方法

2023/12/07 176 users トランジション auto height トリガー スクロール

今までJavaScriptを使用しないと実装できなったことが、CSSだけで実装できるようになったものが増えてきました。たとえば、表示・非表示をdisplayプロパティでアニメーションできるようになったり、スクロールをトリガーにしたアニメーションなど、新機能が登場しました。 今回紹介するのは、height: 0;からheight: auto... 続きを読む

CSSでスムーズなアニメーションを実現する4つの新しい機能

2023/08/31 74 users CSS アニメーション トリガー スクロール 進化

今年もCSSの進化が止まりません！ 先日紹介した表示・非表示をdisplayプロパティでアニメーションできるようになったり、スクロールをトリガーにしたアニメーションなど、新機能が登場しました。 今まではJavaScriptや複雑なCSSを使用しないと実装できなかった、スムーズなアニメーションを実現するCSSの4つの新しい機能... 続きを読む

CSSの「display: block;」が「display: block flow;」になる、displayプロパティで2値構文がサポートされます

2023/06/06 121 users block display inline Flex CSS

CSSのdisplayプロパティはよく使用すると思います。値にflex, gridを設定したり、ブロックやインラインにしたい時にblock, inlineを設定します。 そんなdisplayプロパティで2つのキーワードを...記事の続きを読む 続きを読む

【CSS】displayプロパティに2つ値が入るってマジ！？ どゆこと！？ - Qiita

2023/01/19 12 users Qiita Flex Grid display CSS

はじめに みなさんは、CSSのdisplayプロパティを知っていますか？ CSSを扱う上で、一番使うのがdisplayプロパティではないのでしょうか？ 最近では、display: flex; や display: grid; が追加され、いろいろなレイアウトが作りやすくなったのは、記憶に新しいかと思います。 そんな中で、CSS Display Module Level 3で、... 続きを読む

CSSを使ったレイアウトのテクニックがしっかり学べる良コンテンツ -Learn CSS Layout | コリス

2013/01/10 326 users コリス プロパ CSS レイアウト テクニック

全部英語ですが、CSSを使ったレイアウトのテクニックがしっかり学べるコンテンツを紹介します。 Learn CSS Layout コンテンツは最新のモダンブラウザでご覧ください。 以下、簡単な説明を添えて紹介します。 no layout まずはレイアウトが無い状態から、ここではブラウザのサイズを変更して一行の長さを考えてみましょう。 displayプロパティ レイアウトをコントロールする最重要プロパ... 続きを読む

ページ送りナビゲーションには display:inline-block が超便利 | バシャログ。

2009/09/09 417 users inline-block display ishida 以下

こんばんは、ishidaです。 CSS2.1 で定義されている displayプロパティの値、inline-blockの使いどころを探してみたところ、ページ送りにかなり使えそうです。 まずは以下のサンプルをご覧下さい。Yahoo 検索結果のページ送りデザインをまねています。 ページ送りのサンプル 1 2 3 4 5 6 7 8 9 10 次へ> XHTML のサンプルは以下です。とてもシンプルです... 続きを読む