タグ

関連タグで絞り込む (20)

タグの絞り込みを解除

cssに関するrryuのブックマーク (64)

  • 横スクロールバーの発生源を素早く特定する方法と最新の防止策 ｜ TAKLOG

    横スクロールバーの発生源はデベロッパーツールのConsoleですぐに特定できる横スクロールバーの発生源の特定方法として有名なのは全称セレクタですべての要素にoutlineを付与して確認する方法だと思われますが、次のスクリプトをデベロッパーツールのConsoleに貼り付けて確認したほうが手っ取り早いです。

    横スクロールバーの発生源を素早く特定する方法と最新の防止策 ｜ TAKLOG
    rryu
    rryu 2024/03/19
    getBoundingClientRect()でビューポートに対する位置と大きさが取得できるので、それではみ出していることが計算できると。
    リンク

  • 想定外の新機能！ HTMLの<input type="checkbox" switch>だけで、スイッチUIが実装できるようになるぞ


    WebサイトやアプリのUIで、スイッチを実装するのはなかなか面倒です。CSSで書くと、なかなかのボリュームになってしまいます。 そんなスイッチがHTMLだけで実装できるようになります。 Release Notes for Safari TP 185によると、HTMLの新機能としてswitch属性がサポートされました。これにより、スイッチUIがHTMLで簡単に実装できるようになります。 switchについては、かなり前から実装についてGitHubで議論されていました。スイッチは人気のあるUIコントロールだけど、CSSで実装するのは簡単じゃないよね、簡単に実装できるようにしよう。という感じです。 スイッチUIを実装するHTMLは、下記の通りです。
    想定外の新機能！ HTMLの<input type="checkbox" switch>だけで、スイッチUIが実装できるようになるぞ
    rryu
    rryu 2024/02/02
    元々はノブのへこんでいるところがオンオフのインジケータだったのになぜオフで全体がグレーになるんだ…
    リンク

  • CSSの進化がすごすぎる！ 2つの画像を比較するスライダーは数行のコードで実装できるようになりました


    2つの画像を重ねて表示し、画像を比較できるスライダーを実装するには、今まではJavaScriptのライブラリなどを使用していたかもしれません。 ほんの少しのJavaScriptと、あとはシンプルなHTMLとCSSで2つの画像を比較するスライダーを実装するテクニックを紹介します。 まずは、実際の動作をデモページでご覧ください。縦線のレンジバーをマウスでドラッグすると、2つの画像を比較できます。 See the Pen Easy comparison slider by coliss (@coliss) on CodePen. HTMLはシンプルです。2つの画像をsectionで内包し、縦線のレンジバーをinput type="range"で実装します。 <div class="compare"> <section class="before"> <img src="Runner.svg"a
    CSSの進化がすごすぎる！ 2つの画像を比較するスライダーは数行のコードで実装できるようになりました
    rryu
    rryu 2023/11/28
    ドラッグは input type="range" のスタイル変更としてその値の反映をどうするのかと思ったらそこはJSだった。
    リンク

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


    はじめに みなさんは、CSSのdisplayプロパティを知っていますか？ CSSを扱う上で、一番使うのがdisplayプロパティではないのでしょうか？ 最近では、display: flex; や display: grid; が追加され、いろいろなレイアウトが作りやすくなったのは、記憶に新しいかと思います。 そんな中で、CSS Display Module Level 3で、displayプロパティに2つの値を入れることができるようになることがわかりました。 ※ まだ、Firefox 70以上・Safari 15以上でのみ再現できます。(2022年1月20日) そのため、この記事では、displayプロパティに2つの値を入れられることについて解説しようと思います。 背景 まずは、displayプロパティに2つの値を入れられるようにした背景について解説します。 最近displayプロパティに
    【CSS】displayプロパティに2つ値が入るってマジ！？ どゆこと！？ - Qiita
    rryu
    rryu 2023/01/20
    今は自身の振る舞いと子要素の振る舞いを掛け合わせた inline-flex みたいな値を用意して凌いでいるが、種類が増えると掛け合わせが爆発するので今のうちに別々に指定できる様にしたということなのか。
    リンク

  • Tailwind考 - uhyo/blog


    皆さんこんにちは。最近とある事情でTailwind CSSにわりと真剣に向き合わないといけなくなった筆者です。 Tailwind CSSの話題は、Twitterのフロントエンド界隈では定番のトークテーマのひとつです。しかし、筆者の考えを文章にまとめたことは無かったので、このたびブログ記事にすることにしました。 結論筆者が一番みなさんに伝えたいことは、Tailwind CSSは考え無しに採用してよい技術ではなく、採用するには熟慮が必要だということです。とくに、フロントエンドのスターターキット的なプロジェクトの中にTailwind CSSが混ざっていることがありますが、あれはけっこうな罠です。気軽に採用すべきものではありません。 筆者の考えでは、Tailwind CSSの採用を考慮に入れてよいのは次の2つの場合です。 デザインにこだわりがなく、最低限整っていればいい場合。デザイナー不在のプロジ
    Tailwind考 - uhyo/blog
    rryu
    rryu 2022/10/02
    ユーティリティベースのCSSの欠点はHTMLからは同じコンポーネントかどうかが判別しづらいのでドキュメント化しておかないと無尽蔵にコンポーネントが作られてしまうところにあると思う。
    リンク

  • Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性

    Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性 最近リリースされたSafariとChromeで、CSSのSelectors Level 4（現時点でドラフト）仕様にある疑似クラス「:has()」が相次いで実装されました。 疑似クラス「:has()」は、カッコ内に要素を書くと、その要素を持つ親要素にのみ指定したスタイルを設定できる、という便利な機能を提供してくれます。 ところがこの「:has()」のChromeにおける実装は、jQueryで似たような機能（カッコ内の要素を持つ親要素を選択する）を提供する「:has()」に悪影響を及ぼし、このjQueryの「:has()」を使っているWebサイトでは、Chromeを利用した場合に一定の条件下でWebサイトが壊れるなどの問題を引き起こすことが分かりました（同じエ

    Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性
    rryu
    rryu 2022/09/21
    「:has()」の括弧内に書けるものがCSSとjQueryとで異なるが、ブラウザの実装がエラーにしないけどちゃんと処理もしない記述の挙動が変わってしまうということらしい。jQuery側の実装も割とアレで混乱している模様。
    リンク

  • 縦書きHTMLにおける文字の向きはどのように定まるか - ドワンゴ教育サービス開発者ブログ


    ドワンゴ教育事業Webフロントエンドチームの berlysia です*1。 はじめに この記事では、日本語の縦書きHTMLにおいて、﹁ある1文字が縦組みのなかで違和感なく縦書きとして表示される﹂とはどのように成り立っているのか、意図しない表記になりやすい文字とその理由について紹介します。 最後まで読むと、縦書き時の文字の縦横に関する問題をたちどころに分解できるようになるはずです。とりあえずフォントのせいだろうかと疑う日々には、これでおさらばしましょう*2。 はじめに N予備校における日本語縦書きHTML CSS の関連仕様 日本語の一般的な縦書きに設定する うまくいかないことが起こりやすい文字たち うまくいかない文字がうまくいかない理由を理解する 縦書きを考慮した文字の周りの方向の定義 CSS における縦書きでの文字の縦横 upright typesetting sideways type
    縦書きHTMLにおける文字の向きはどのように定まるか - ドワンゴ教育サービス開発者ブログ
    rryu
    rryu 2022/09/09
    縦書きはただ文字を縦に並べれば良いわけでもなく文字を回転させれば良いわけでもないのがめんどくさい。
    リンク

  • 【CSS】きみは "擬似クラス" 何個言えるかな？？ - Qiita


    はじめに あなたは "擬似クラス" 何個言えますか？ 擬似クラスには、:hover や :active、:focusといったよく使うものから、 :is()や:where()、:has()といったこれからサポートされていくものまで たくさん種類があるのは、ご存知ではないでしょうか？ でも、"擬似クラス" 何個言えますか？と聞かれると数個くらいしか思い出せないと言う方は多いのではないでしょうか？ もしかしたら、15個以上言えたら、CSS玄人と言えるかも知れません。 この記事では、たくさん種類があるのは知っているけど、詳しくはわからない "擬似クラス" が、 何種類あるか、どんな擬似クラスがあるかをまとめました。 知らなかった "擬似クラス" の数を数えながら、読んでいただけると嬉しいです。 擬似クラス 擬似クラスとは？ 擬似クラスとは、セレクタのあとにつけることで、 指定した要素の状態に応じて
    【CSS】きみは "擬似クラス" 何個言えるかな？？ - Qiita
    rryu
    rryu 2022/08/21
    いきなりis()から始まるのはなかなか厳しい感じがする。:indeterminateのサンプルが効いてないように見えるのはSafariが未対応だからっぽい。
    リンク

  • レスポンシブ対応する時に、どうしても綺麗に要素が収まらない時のほぼ完璧な対処法

    世界で一番初心者に優しいWeb制作のメディア。HTML/CSS/JavaScript、WordPress、Web制作の考え方を解説します。

    レスポンシブ対応する時に、どうしても綺麗に要素が収まらない時のほぼ完璧な対処法
    rryu
    rryu 2022/08/19
    収まらないというか、無段階で大きさの変わる画像に文字を乗せるなら文字サイズも無段階で変わるようにすればいいという感じ。
    リンク

  • CSSの新しい単位「lvh」「svh」これでiOSのSafariで100vhがビューポートの高さではない仕様に対応できる

    Safari 15.4（最新は15.5）で新しいビューポート単位「lvh」「svh」がサポートされました。ビューポートを基準にした単位で、この単位を使用することで、iOSのSafariで100vhがビューポートの高さではないという仕様に対応できます。 今まではCSSの-webkit-fill-availableがその対応方法でしたが、ネストされた要素やcalc()内では使用できません。新しいビューポート単位を使用すると、そういった問題もなくなります。 The Large, Small, and Dynamic Viewports by Bramus 2021年の記事ですが、Safari 15.4でこれらの新しいビューポート単位がサポートされたので、このタイミングで紹介します。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじ

    CSSの新しい単位「lvh」「svh」これでiOSのSafariで100vhがビューポートの高さではない仕様に対応できる
    rryu
    rryu 2022/05/27
    CSSのドラフトには既にlvh、svh、dvhが存在していて、vhをdvhと同等に実装しているブラウザと挙動が違うという問題に対してdvhを使えという回答になっているらしい。ただし他ブラウザはdvhに対応していない…
    リンク

  • 最近見かける、粒子の粗いグラデーション！ほんの少しのCSSとSVGで実装できるの知ってた？

    CSSとSVGでグラデーションにノイズを与え、粒子の粗いグラデーションを実装する方法を紹介します。 背景など通常のグラデーションに使用するだけでなく、暗くしてシャドウに使用したり、輝度とコントラストを上げてホログラムのような虹色のグラデーションとして使用することもできます。 Grainy Gradients by Jimmy Chion 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ノイズを加えたグラデーションを生成できるオンラインツール 実装: SVGノイズとCSSグラデーション SVGのturbulenceを使用する SVGとグラデーションを使用してCSS背景を作成する 明るさとコントラストを高める ノイズのカラーが均一でない CSSのブレンド機能 粒子の粗いグラデーションの使用例 さらに詳しく ブラウザのサポー

    最近見かける、粒子の粗いグラデーション！ほんの少しのCSSとSVGで実装できるの知ってた？
    rryu
    rryu 2021/09/22
    ノイズと半透明のグラデーションを合成しつつ、完全透明の部分のノイズが白飛びするようにコントラストを上げるとグラデーションのところだけノイズが残るということらしい。
    リンク

  • HTML tableの実装がこれまでと変わる！Googleデベロッパーによる変更点の解説 -TablesNG


    GoogleではCSSの新機能を導入するだけでなく、既存の機能を向上することにも取り組んでいます。その中の一つ﹁TablesNG﹂で、HTMLのtableの実装がこれまでと変わるのでその変更点を紹介します。tableは古くからあり、その後さまざまなCSSの機能がブラウザに実装されました。当然、それらの新しい機能にtableは対応していません。それらに対応し、不整合を修正するのが今回の取り組みです。TablesNG Resolves 72 Chromium Bugs for Better Interoperability by Una Kravets, Aleks Totic 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめにTablesNGの取り組み 1. テーブルの行にposition: sticky 2. バック
    HTML tableの実装がこれまでと変わる！Googleデベロッパーによる変更点の解説 -TablesNG
    rryu
    rryu 2021/07/09
    border collapseの時にどっちのセルのボーダーが生きるのか謎だったのだがバグってたのか…
    リンク

  • モーダルを開いている時に背面コンテンツのスクロールを抑制する方法

    TAK(@tak_dcxi)です。 モーダルやドロワーメニューを開いている時に背面コンテンツが勝手にスクロールされるとヘイトポイント溜まりがちなので、ユーザビリティ向上のためにも背面コンテンツのスクロールは抑制しておきましょう。 結論 // ドキュメントの書字方向を取得し、縦書きかどうかを判定 const isVerticalWritingMode = (): boolean => { const writingMode = window.getComputedStyle(document.documentElement).writingMode return writingMode.includes('vertical') } // スクロールバーの幅を計算する const getScrollBarSize = (): number => { const scrollBarXSize =

    モーダルを開いている時に背面コンテンツのスクロールを抑制する方法
    rryu
    rryu 2021/03/21
    リンク

  • 垂直方向のマージンにはmargin-topを優先的に使う理由

    margin-bottomではなくmargin-topを使う派である旨をツイートしたら理由を尋ねられたので、それに対する回答です。大きくは次の3つです。 末尾の要素の存在が任意である場合が多いため Stackレイアウトとの取り合わせやすさのため 隣接セレクターを使った場合分けができるようにするため CSS、基本コンポーネントの上にマージン取る派と、下にマージン取る派がいると思うですけど、自分は今までずっと下で。というのは、その方が直感的だと感じるからなんですけど、見出しの下って結構縮めるよね？それを上マージンでやると結構頭こんがらがらない？って思うんだけどどうなんだろう — Takazudo (@Takazudo) January 12, 2021 上です — 全部入りHTML太郎 (@_yuheiy) January 12, 2021 なぜですか? — u (@uknmr) Januar

    垂直方向のマージンにはmargin-topを優先的に使う理由
    rryu
    rryu 2021/03/21
    リンク

  • CSSの小ネタ: 画像に枠線をつける際、borderよりもbox-shadowの方がより美しく実装できる

    画像をページに配置する際、画像に枠線を与えることがあります。画像とページにメリハリがついて画像がはっきりと表示されますが、borderよりも内側にbox-shadowをつけた方がより繊細なコントラストを与えることができます。 高コントラストの画像では目立たず、低コントラストの画像では繊細なコントラストを与えるCSSのテクニックを紹介します。 borderとbox-shadowの比較 元ネタは、下記ツイートです。意訳すると、 インセットのbox-shadowを使用すると、画像と周囲のページの間に繊細なコントラストを追加するのに最適です。borderよりもシームレスで、カラーがフレキシブルです。 👨🏾‍💻 CSS tip: inset box-shadows are great for adding subtle contrast between images and the surro

    CSSの小ネタ: 画像に枠線をつける際、borderよりもbox-shadowの方がより美しく実装できる
    rryu
    rryu 2020/07/03
    透明度の高い枠線を画像の上に重ねることで枠線が要らないくらい画像が濃ければ枠線が目立たなくなるという小技。
    リンク

  • 元Webデザイナーのセキュリティエンジニアが警告する、CSSインジェクションの脅威 | セキュリティブログ | 脆弱性診断（セキュリティ診断）のGMOサイバーセキュリティ byイエラエ


    ※この座談会は緊急事態宣言以前に実施しました。 イエラエセキュリティの顧問を務める川口洋が、イエラエセキュリティを支える多彩なメンバーと共に、サイバーセキュリティやサイバーリスクの今を語り合う座談会シリーズ、第11回をお送りします。 川口洋氏は、株式会社川口設計 代表取締役として、情報セキュリティEXPO、Interop、各都道府県警のサイバーテロ対策協議会などで講演、安全なITネットワークの実現を目指してセキュリティ演習なども提供しています。 イエラエ顧問として、﹁川口洋の座談会シリーズ﹂を2019年に開始。サイバーセキュリティを巡る様々な話題を、社内外のゲスト達と共に論じ語ってきました︵川口洋の座談会シリーズ)。 今回ゲストとして登場するのは、イエラエセキュリティのペネトレーション課に所属する馬場将次。Webデザイナーとしての経験から、Webに関するセキュリティへの鋭い視点を持つ馬場。
    元Webデザイナーのセキュリティエンジニアが警告する、CSSインジェクションの脅威 | セキュリティブログ | 脆弱性診断（セキュリティ診断）のGMOサイバーセキュリティ byイエラエ
    rryu
    rryu 2020/05/13
    first-childを何個も指定することで同じ要素を指しながらセレクタの詳細度を上げられるというのは、important禁止派の秘伝の裏技的な感じで伝承されてそう。
    リンク

  • サイトマップやDOM構造など、階層構造のツリービューをリスト要素で実装するスタイルシートのテクニック


    サイトマップやDOM構造や家系図のように親ノードから複数の子ノードに接続線で繋げ、階層構造を明示するツリービューをHTMLとCSSで実装するテクニックを紹介します。 HTMLはul要素でシンプルに実装されており、接続線のカラーや幅や間隔などは自由にカスタマイズできます。 Tree view from unordered list まずは、実際のデモをご覧ください。 See the Pen Tree view from unordered list by Ross Angus (@ross-angus) on CodePen. 1つ目の﹁DOM構造﹂と2つ目の﹁サイトマップ﹂の実装は、基本的には同じです。順番に見てましょう。 DOM構造のツリービュー HTML1つのul要素で3階層分まで、4階層目からは新たにul要素が必要となります。矩形は﹁DOM構造﹂では<code>、﹁サイトマップ﹂で
    サイトマップやDOM構造など、階層構造のツリービューをリスト要素で実装するスタイルシートのテクニック
    rryu
    rryu 2020/04/13
    ul liの入れ子をdisplayでテーブルの入れ子に変換してbefore擬似要素でいい感じに線を付けているっぽい。右端の要素の線を左寄せに左端のを右寄せにして左右のはみ出しをカット。
    リンク

  • CSSを書く前にスクロールバーを表示しよう


    これを読むあなたはCSSを書く方だと思いますので、お尋ねします。 あなたは普段、幅と高さを持つ、クラシカルなスクロールバーを表示していますか？ していないのだとしら、それはどうしてなのでしょう。OSの初期設定から変えていないだけかもしれません。スクロールバーを醜いものだと考えていて、スクロールするときだけに出現する控えめなスクロールバーを好んでいるからかもしれません。 あなたがどう考えていようと、現実にはそのような、ユーザーの操作に応じてオーバーレイで表示されるスクロールバーが選択できない環境も存在します。 そういった環境では、スクロールバーはウェブページ上で幅と高さを持ち、レイアウトに影響を与えます。 それを忘れて書かれたCSSは、オーバーレイ・スクロールバー前提のレイアウトであったり、不必要なスクロールバーの存在を生み出してしまうことがあります。 スクロールバーを表示、つまり、ウェブ
    CSSを書く前にスクロールバーを表示しよう
    rryu
    rryu 2020/02/06
    このスクロールバーが付いてなければスクロールしないのに付いたからスクロールしてしまうというのを消し去りたいという願いが生み出したのがオーバーレイな感じがする。
    リンク

  • overflow-wrap: break-word; や word-break: break-all; が万能の改行処理だったなら、こんなに苦労していない - Qiita


    overflow-wrap: break-word; や word-break: break-all; が万能の改行処理だったなら、こんなに苦労していないHTMLCSS初心者 はじめに 今回解決したいのはこれです。 ﹁overflow-wrapかけたのに改行されないしテーブルwidthもなんか勝手に伸ばされちゃってる問題﹂です。 こんなんHTML / CSSの初歩中の初歩じゃんwwwという方は、どうぞごゆるりとブラウザバックしてやってくださいませ… ﹁それ地味に悩んでた！﹂という方がもしいらっしゃいましたら、少しでも助けになれれば嬉しいです。というか一緒に悩みましょう。 あ、でも、もしそんな方が本当にいたら、こんなことに悩むよりも、 ﹁全半角記号のブラウザテストだけ許容する﹂という呪文を唱えた方が5億倍早いです…というネタバレだけ先にしておきますね＞＜ もくじ 当記事は、以下の内容に関する
    overflow-wrap: break-word; や word-break: break-all; が万能の改行処理だったなら、こんなに苦労していない - Qiita
    rryu
    rryu 2020/01/31
    言えるのは中身に何が入るか分からないテーブルには幅を指定しておかないと大変なことになるということで、この例では行ヘッダの幅を指定しておけばよかったような気がする。
    リンク

  • CSSで実装した斜めのラインがギザギザになってしまうのを回避し、滑らかなラインで実装するテクニック


    CSSで斜めのラインを実装する時は、ちょっとした工夫が必要です。 画像やSVGでなく、CSSで実装すると角度やカラーを変更できる利点がありますが、斜めのラインがジャギってギザギザになってしまうことがあります。 CSSグラデーションで実装した斜めのラインがギザギザになってしまうのを回避し、すっきりとした滑らかなラインで実装するテクニックを紹介します。 Avoiding jagged edges on gradients. by Mandy Michael 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 斜めのラインがギザギザになってしまうのを回避する方法 よく見かけるデザインの一つに、コンテナの下部に斜めのカラーブロックを配置したものがあります。下記の画像のようなデザインです。 斜めのカラーブロック このデザインがたまたま、わたし
    CSSで実装した斜めのラインがギザギザになってしまうのを回避し、滑らかなラインで実装するテクニック
    rryu
    rryu 2019/11/26
    まあグラデーションの階調の境界にアンチエリアスなんでかけないからこうなるのか。
    リンク
  • 1 2 3 4 次のページ

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.