これでCSSのみで実装できる！ スクロール方向に合わせてヘッダを非表示・表示する方法を解説
Webページを表示し、スクロールダウンするとヘッダが非表示になり、ページのどこからでもスクロールアップするとヘッダが再び表示される、というのを見たことがあると思います。 これまでは実装するにはJavaScriptが必要でしたが、CSSのみで実装できる方法を紹介します。 Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again when scrolling up. by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS Scroll-Driven Animationsでスクロール方向を検出する transition-delayプロパティを使ったテクニック ヘッダをスクロール時に表示
私がマージンをできるだけ使いたくない理由 - Qiita
はじめに 突然ですが、皆さんはCSSのmargin（マージン）をよく使いますか？ 私はマージンを多用しないように気をつけています。というより、あまりマージンと関わりたくないと思っています。今回の記事では、「どうして避けているのか」について自分なりの考えをまとめてみたいと思います。 あくまでも個人の意見なので、こういう考えの人もいるのだなと捉えていただけますと幸いです。もっとこうしたら良くなるのに！というご意見は大募集しているので、どんどん教えてください。 マージンを使いたくない理由 マージンを使いたくない一番の理由に、スタイルが崩れるというものがあります。「崩れる」と一言で言っても、わかりずらいと思うので落ち着いて考えをまとめてみました。その結果、下記の2パターンに分かれるという結論に行きつきました。 マージンが不可解な挙動をする コンポーネントとして使い回しずらい この二つの観点から、マ
ブラウザ側で文字サイズを変更してもレイアウトが崩れないようにするための方法をAirbnbのエンジニアが解説
視覚障害を持つ人々はブラウザの拡大機能やカスタムCSSを使用して文字を大きくしてウェブサイトにアクセスすることがありますが、サイト側の対応が不適切だとレイアウトが崩れてしまいます。レイアウトを維持したまま文字のサイズ変更に対応する方法が、Airbnbの企業ブログで解説されています。 Rethinking Text Resizing on Web. Airbnb has made significant strides in… | by Steven Bassett | The Airbnb Tech Blog | May, 2024 | Medium https://medium.com/airbnb-engineering/rethinking-text-resizing-on-web-1047b12d2881 視力が著しく低下してしまった人がAirbnbのページを見た時のイメージはこん
Webブラウザの日本語改行問題 -改行を実現するHTML/CSS-（1） - Qiita
日本語のWebサイト（ランディングページ等）をつくっていると、読みにくい所で改行されるパターンがありますよね？実際この記事もブラウザの横幅によって単語の途中なのに改行されています。普通に文章を読んでいる時には良いのですが、これがランディングページのヘッドラインで起きるとものすごいカッコ悪いです。 たとえばPhotoshopのページで「写真のレタッチ、合成、カラー変更」というヘッドラインが以下のようになってたらいかがでしょうか？この場合はできれば、「合成、」の後で改行されている方が自然で読みやすくなっています。（ちなみにこれは、Chrome Developer Toolsで編集して、わざと見にくくしたので、実際にはキレイに改行処理しています）。 よーしそれじゃあ<br>入れれば良いんだなと真っ先に思いついた方がいるでしょう。しかし今日はさまざまなデバイスが皆さんのWebサイトに訪れています。
CSS Generators: Your CSS code with less effort
The Easiest way to generate your CSS Code A wide range of CSS generators to make your developer's life easier! Get an optimized code with modern CSS in no time. Custom Borders Custom Corners Section Divider Triangle Shapes Starburst Shapes Polygon Shapes Wavy Shapes Flower Shapes Wavy Circle Ribbon Shapes Tooltips/Speech Bubbles Gradient Shadows CSS Shape CSS Pattern CSS Loaders
Animista - On-Demand CSS Animations Library
AboutAnimista is a place where you can play with a collection of pre-made CSS animations, tweak them and get only those you will actually use. Animista started out as a small side-project of mine. As I was increasingly using CSS animations, I thought it would come in handy to have them organised in a meaningful and accessible way so that they can be easily reused on different projects. The idea wa
【CSS】レスポンシブなfont-size指定テクニック4選 - Qiita
はじめに レスポンシブサイト構築の際に、何かと悩む（ちょっと煩わしい）のがfont-sizeの指定方法なのではないでしょうか？ 今回はそんな煩わしさがすこしでも減るように、レスポンシブデザインのためのfont-size指定方法テクをご紹介します☺︎ 目次 1. 単位のおさらい 2. テクニックたち（④が最もおすすめ！サクッと読みたい方は③（④の序章みたいな感じです）からどうぞ！） ① おすすめ度★★ px/rem × メディアクエリ ② おすすめ度★ vw ③ おすすめ度★★ calc × rem × vw ④ おすすめ度★★★ calc × rem × vw × clamp 単位のおさらい テクニックをご紹介する前に、押さえておきたい単位をまとめてみました。 単位
意外と奥深いCSSのfont-weightの話 - ICS MEDIA
普段なにげなく使っているフォントですが、文字の太さを表すフォントウェイトには注意したいポイントがあります。とくにどの環境でも同じフォントにするためのウェブフォントでも、CSSの設定やOSの違いによって見え方が変わってしまうことがあります。ほかにもCSSの設定によっては意図しないウェイトが適用されてしまうこともあります。 この記事ではフォントウェイトのまつわる落とし穴と、それを回避するための方法を紹介します。エンジニアだけでなく、デザイナーの方にも役立つ内容です。 Noto Sans JPを例にフォントのウェイトの設定を変えながら見え方を確認できるデモページを用意しました。ぜひ試してみてください。 サンプルを別ウインドウで開く コードを確認する アンチエイリアス まず、アンチエイリアスについて簡単に説明します。アンチエイリアスとは、画面上で表示される輪郭を色の濃淡などを用いて滑らかにする処理
CSSで角丸を美しく実装するテクニック、ネストされた外側と内側を相対角丸の美しいバランスで実装
カードやパネルの外側と内側に角丸を使用したときに、なんだかバランスが悪いなと思ったことはありませんか？ 角丸を二重にするときに外側の角丸と内側の角丸の値を同じに設定すると、内側の方がすこし大きく見えて、不格好になってしまいます。 外側の角丸と内側の角丸を美しいバランスで実装する相対角丸のテクニックを紹介します。 まずは、ネストされた角丸を美しいバランスで実装したデモをご覧ください。 See the Pen Inner Radius Design Tip with CSS Custom Properties by coliss (@coliss) on CodePen. 外側の角丸と内側の角丸を美しいバランスで実装するポイントは、「外側の半径 = 内側の半径 + パディング」に設定することです。こうすることで、外側の角丸と内側の角丸の中心点が同じになり、美しいバランスになります。 ちなみに、
【CSS】まだホバー時のスタイルを :hover だけで指定してるの？
はじめに結論から ホバースタイルは、 :hover だけで指定するのではなく、次のように指定しましょう！ @media (hover: hover) { /* リンクの場合 */ a:any-link:hover { } /* ボタンの場合 */ button:enabled:hover { } /* 特定できない場合 */ .button:where(:any-link, :enabled, summary):hover { } } ポイント 1 マウスのときだけホバースタイルを当てる :hover 擬似クラスで指定したスタイルは、タッチデバイスの場合フォーカス状態で適用されてしまいます。 つまり、タッチしたあとのスタイルがずっとホバースタイルのままになってしまいます。 これは意図と合わないため、マウスで操作しているかどうかを区別してスタイルを当てる必要があります。 マウス（正確には、ホ
React 18で使える新たなCSSユーティリティ「CSS Components」が公開 ー React 18以降主流になりつつあるサーバーコンポーネントに対応、CSS-in-JSのDX課題を解決
8月1日、React向けの組み合わせ可能なCSSコンポーネントの作成について発表がありました。 React 18のリリースにより、サーバーコンポーネントが一般的になり、Reactアプリを作成するためのデフォルトの方法になりました。 [LogRocketのブログ](https://blog.logrocket.com/writing-composable-css-components-react/)で、ReactとCSSを組み合わせるための新たな選択肢 「CSS Components」に関する解説記事が公開されています。 本稿では、日本のエンジニア向けに記事を要約して紹介します。詳しくは原文を参照してください。 CSS Componentsは、ReactコンポーネントにCSSクラスの組み合わせを行うための小型（2.3Kb）なモダンユーティリティです。このユーティリティは、開発者エクスペリエン
CSS Modulesの歴史、現在、これから - Hatena Developer Blog
マンガメディア開発チームの id:mizdra です。半年ほど前から「フロントエンドエキスパート」という肩書きをもらい、社内でフロントエンドの啓蒙活動をしています。具体的にどんな活動をしているかについては、社内のポッドキャストで少し話しましたので、興味があれば聞いてみてください。 developer.hatenastaff.com 最近、私はReactを採用する社内プロダクトでのCSSの書き方を検討していました。最終的にそのプロダクトでは、CSS Modulesを採用するに至りました。しかしその過程で、CSS Modulesのメンテナンス体制に対して懸念があり、将来的な存続を危ぶむ声が界隈にあることを知りました。 ただし、実際にメンテナンス体制について調べてみたところ、万全ではないものの引き続きメンテナンスがされていて、使用もできることが分かりました。そこで、今回はCSS Modulesに
React CSSで悩む全ての人へ【2022年版】 | ramble - ランブル -
こんにちは。株式会社インプルの平澤です。 ReactのCSSで迷われたこと、迷っていることはありませんでしょうか？ そんな方々へReactの各CSSをご紹介致します。 最初に言いますが、どの方法が良いかの正解はありません。「個人的な相性」・「開発チームの相性」・「パフォーマンス」など、どこに重点を置くかでも選択は変わってきます。 それを踏まえた上でご自身のベストプラクティスを見つけてみましょう。 本記事では ・Pure CSS ・CSS Modules ・CSS in JS (styled-component, emotion) ・CSSフレームワーク(Tailwind CSS) を皆さん大好きReactのトップページに適用して比較し、 各メリット・デメリットをまとめました。 ※下記コマンドでプロジェクトを作成した前提で進んでいきます。 $ npx create-react-app {プロ
Web制作の現場で使えるWebサービス13選！無料で使えるサービスを集めてみた | BUILD Journal
CSSコーディングに役立つサービスやWebサイト運用で役立つSEO関連のツールなど、Web制作の現場で使えるWebサービスを13個紹介します。ワンクリックで取得できるコードや、ドラッグ&ドロップだけで完結するものなど、直感的に作業できるサービスばかりです。あなたの現場でもぜひ利用してみてください。 Fancy Border Radius Generator CSSのborder-radius を使ってボックスや画像をユニークな形状に変化できるWebサービス。 Fancy Border Radius Generator シンプルなコードで実装可能です。 正方形の写真をCSSで変形させました 上のように正方形の写真をユニークな画像に見せることができます。 Fancy Border Radius Generator Clippy – CSS clip-path maker CSSのclip-pa
CSS Animo
div{display:inline-block;width:13px;height:13px;background:#f39c12;border-radius:50%;animation:bouncing-loader .6s infinite alternate}.animoBouncingLoader::after,.animoBouncingLoader::before,.animoBouncingLoader>div{content:''}.animoBouncingLoader>div{margin:0 5px}.animoBouncingLoader>div{animation-delay:.2s}.animoBouncingLoader::after{animation-delay:.4s}@keyframes bouncing-loader{to{opacity:.1;t
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Ultimate Website Code Generator
CSS3Generator by @RandyJensen
CSS Generators - CSS Portal
GitHub - css-modules/css-modules: Documentation about css-modules
How can I add the close icon in the top right corner of the Material UI Dialog Header?