タグ

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

タグの絞り込みを解除

cssに関するkenzy_nのブックマーク (292)

  • CSSはどんどん進化している! マグネットのようにくっつくエフェクトを実装するテクニック -CSS Anchor Positioning


    CSS JavaScript Anchor Magnet Slide Menu   CSSChrome 125+使 See the Pen Anchor Magnet Slide Menu by coliss (@coliss) on CodePen
    CSSはどんどん進化している! マグネットのようにくっつくエフェクトを実装するテクニック -CSS Anchor Positioning
    kenzy_n
    kenzy_n 2024/05/22
    CSSもなかなか面白い表現を実装できるようになってきた。
  • 令和のHTML / CSS / JavaScriptの書き方50選


    Web 2024Web 調 1. HTML  Lazy loading <img>loading="lazy"
    令和のHTML / CSS / JavaScriptの書き方50選
    kenzy_n
    kenzy_n 2024/05/13
    少しづつ改変が加わる
  • 静的サイト向けの全文検索エンジンと UI ライブラリの Pagefind


     Pagefind  使 Pagefind  UICLI  UI UI Pagefind  UI UI <link href="/pagefind/pagefind-ui.css" rel="stylesheet" /> <script src="/pagefind/pagefind-ui.js"></script> <div id="s
    静的サイト向けの全文検索エンジンと UI ライブラリの Pagefind
    kenzy_n
    kenzy_n 2024/01/06
    両方対応してくれるのならばなにより
  • これはすごい! HTMLの新機能、popover属性でポップオーバーがJavaScript無しで簡単に実装できるようになります

    先日リリースされたChrome 114でPopover APIがサポートされ、HTMLのpopover属性が使用できるようになりました。 今まではポップオーバーを実装するのにはJavaScriptを使用し、ポップオーバーの開閉・フォーカス・アクセスフックなど面倒でしたが、popover属性で実装すると驚くほど簡単で、さまざまなUIコンポーネントに利用できます。 Introducing the popover API by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに HTMLのpopover属性とは ポップオーバーのデフォルト、オーバーライド 自動ポップオーバーと手動ポップオーバー popover属性とdialog要素の違い 近日公開予定の便利な2つの機

    これはすごい! HTMLの新機能、popover属性でポップオーバーがJavaScript無しで簡単に実装できるようになります
  • 覚えておくと便利なCSSデザインTipsを9つ集めてみた | BUILD Journal

    覚えておくと便利なCSSデザインTipsを9つ集めてみたUpdate2023.05.18Release2023.05.18Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する これまでは画像で表現していたデザインを今ではCSSのみで実装できるものが多くなってきました。今回は覚えておくと便利な現場で使えるCSSデザイン Tips を9個紹介します。いざという時に使えるものばかりですので、ストックしておくことをおすすめします。 見出しの改行位置をCSSで調整する見出しの改行位置を調整する見出しの文章が中央揃えである程度の文字数があると、スマホで見た場合意図したところで改行ができていないことがあります。上の動画をご覧ください。上側の文章は改行されると2行目3行目も中央寄りになるため、画面サイズによっては最終行が1〜3文字になってしまい

    覚えておくと便利なCSSデザインTipsを9つ集めてみた | BUILD Journal
  • 効率よくコーディングを進めるためにChatGPTを使ってみよう


      WebWeb emi稿 emiUSAGI DESIGN emi.WebWeb ChatGPT ChatGPTOpenAI ChatGPT使 headChatGPT HTMLChatGPT使 ChatGPT CSSChatGPTH
    効率よくコーディングを進めるためにChatGPTを使ってみよう
  • Tether elements to each other with CSS anchor positioning  |  Blog  |  Chrome for Developers

    How do you currently tether one element to another? You might try tracking their positions, or use some form of wrapper element. <!-- index.html --> <div class="container"> <a href="/link" class="anchor">I’m the anchor</a> <div class="anchored">I’m the anchored thing</div> </div> /* styles.css */ .container { position: relative; } .anchored { position: absolute; } These solutions often aren't idea

  • 使ってますか? CSSの:is()と:not()で複数セレクタ管理をラクにしよう


     a:hover  a:focus  .section1 a:hover, .section1 a:focus, .section2 a:hover, .section2 a:focus { color: lightpink; } :is() 使 :is(.section1, .section2) a:is(:hover, :focus) { color: lightpink; } :is() :where()  :not() 便使 使 :is() :where() :not() :is()
    使ってますか? CSSの:is()と:not()で複数セレクタ管理をラクにしよう
  • 1ミリ秒でも早く届けたい! HTMLで画像読込を高速化するために取り組んでいること - ICS MEDIA

    ウェブサイトの表示スピードはサイトの健全性における重要な観点の一つです。Googleが提唱するCore Web Vitalsコア・ウェブ・バイタルズと呼ばれる指標の中にもサイト表示スピードに関する項目があり、表示されるまでの時間が単なるユーザー体験だけでなく、SEOでも無視できない存在です。表示スピード低下の要因はネットワークやサーバーサイド、そしてフロントエンドまで広範囲におよびます。記事ではその中でも画像の読み込みについて改善できるテクニックを改善前と改善後を比べながら紹介します。 改善前サンプルを別ウインドウで開く 改善後サンプルを別ウインドウで開く 画像読み込みBefore / Afeter 上図はLighthouseによるチェックの結果です。Lighthouseはウェブサイト検査ツールで、ウェブページのパフォーマンス、アクセシビリティ、SEOなどの状態を計測できます。Googl

    1ミリ秒でも早く届けたい! HTMLで画像読込を高速化するために取り組んでいること - ICS MEDIA
  • HTMLとCSSを真剣に学びたい人におすすめ! 実務レベルの知識やテクニック、考え方がよく分かる解説書 -HTML/CSSブロックコーディング


    HTMLCSS HTMLCSS HTMLCSSUIWeb 
    HTMLとCSSを真剣に学びたい人におすすめ! 実務レベルの知識やテクニック、考え方がよく分かる解説書 -HTML/CSSブロックコーディング
  • リンク/ボタン/フォームをより良くするHTML・CSS 17選 - ICS MEDIA


    便使使HTMLCSS17 NG   1. div <div><button><div>
    リンク/ボタン/フォームをより良くするHTML・CSS 17選 - ICS MEDIA
    kenzy_n
    kenzy_n 2022/12/09
    UI・UXは大切だ!
  • CSSの100vhがスマホで高さいっぱいにならない問題はこれで解決! CSSの新しいビューポート単位の使い方と注意事項

    先日リリースされたChrome 108で、CSSの新しいビューポート単位(svh, lvh, dvhなど)がサポートされました。SafariとFirefoxではすでにサポートされていましたが、Chromeでもサポートされたのは朗報です。 この新しいビューポート単位の基的な使い方と注意事項を紹介します。 The large, small, and dynamic viewport units by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 はじめに おさらい: ビューポートとその単位 新しいビューポート単位の必要性 注意事項 リソース はじめに 先日リリースされたChrome 108で、動的なバーがあるスマホのビューポートを考慮したCSSの新しいビューポート単位がサポートされました。SafariとFirefoxではすでにサポート

    CSSの100vhがスマホで高さいっぱいにならない問題はこれで解決! CSSの新しいビューポート単位の使い方と注意事項
  • ダークモード時の画像の扱い方

    2023年2月7日 CSS, Webサイト制作 以前から個人的にダークモードの対応を推奨しています。基の書き方は過去記事「Webサイトをダークモードに対応させよう」を読んでもらうとして、今回は画像まわりのダークモード実装方法を中心に紹介します! ↑私が10年以上利用している会計ソフト! 画像の明度や彩度を落とす 明るい背景色の場合、画像は鮮やかで明るい色合いが目に止まりやすいですよね。しかしダークモードでは、まわりが暗くなるので画像だけ派手に眩しく見えてしまいます。そこで、CSSの filter を使って、ダークモードのときは明度や彩度を調整するといいでしょう。 実装するには filter プロパティーに、明度は brightness() 、彩度は saturate() を指定します。カッコの中にパーセントで割合を書けば完了。明度・彩度両方指定するなら以下のように値を続けて書きます。 @

    ダークモード時の画像の扱い方
    kenzy_n
    kenzy_n 2022/11/10
    暗さに引っ張られないように
  • マークアップのわかり方


    20221028DIST.37  CSSJavaScript  CSSOKJavaScript
    マークアップのわかり方
    kenzy_n
    kenzy_n 2022/11/03
    マークアップのススメ
  • Webページの見栄えをよくするたった58バイトのCSS

    ほとんどのWebページの見栄えをよくするたった58バイトのCSSを紹介します。 3つのプロパティだけですが、Webページを実装する時の最初のスタイルとして用意しておくとよいかもしれません。 また、ボーナスの100バイト版とオプションのさらに100バイト版も合わせて紹介します。 58 bytes of CSS to look great nearly everywhere by @JoeyBurzynski 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Webページの見栄えをよくする58バイトのCSS 58バイトのCSSの解説 Webページの見栄えをよくする100バイトのCSS 100バイトのCSSの解説 オプションでさらに100バイト Webページの見栄えをよくする58バイトのCSS 58 bytes of CSS -Code

    Webページの見栄えをよくするたった58バイトのCSS
  • CSSの新しい単位(lvh, svh, dvh)がすべてのブラウザでサポート、100vhがビューポートの高さいっぱいにならない問題を解決

    Safari, FirefoxでサポートされていたCSSの新しいビューポート単位「lvh」「svh」「dvh」などが、ついにChromeでもサポートされました! CSSの新機能で、Chromeが一番最後というのは珍しいですね。 最も活躍するのがiOSのSafariだからでしょうか。とはいえ、主要ブラウザすべてにサポートされるようになるのは、嬉しいニュースです。 画像: @bramus 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 新しいビューポート単位「lvh」「svh」「dvh」とは ブラウザのサポート状況 はじめに W3CのCSS Values and Units Module Level 4で、ビューポート単位についていくつか仕様が変更されました。Large、Small、Dynamicといったビューポートサイズ

    CSSの新しい単位(lvh, svh, dvh)がすべてのブラウザでサポート、100vhがビューポートの高さいっぱいにならない問題を解決
  • 有名サイトで使用されているCSSテクニックまとめ - Qiita


    CSSIE11CSS  CSS
    有名サイトで使用されているCSSテクニックまとめ - Qiita
    kenzy_n
    kenzy_n 2022/09/08
  • Webやスマホアプリに最適なSVGアニメーションのスピナー! 超軽量サイズで、くるくる快適に動くぞ -SVG Spinners


    SVG SVG300-2500 SVG Spinners -GitHub SVG SpinnersSVG24x24dpSVGMIT 44  <svg width="24" height="24" viewBox="0 0 24 24"xm
    Webやスマホアプリに最適なSVGアニメーションのスピナー! 超軽量サイズで、くるくる快適に動くぞ -SVG Spinners
  • CSSでこんなことができるの知ってた? 要素・コンテナのサイズに関係なく、ボーダーや背景をはみ出して配置するテクニック


    h1pCSS  h11CSS1 
    CSSでこんなことができるの知ってた? 要素・コンテナのサイズに関係なく、ボーダーや背景をはみ出して配置するテクニック
  • CSS設計における、すべてがコンポーネントであるという誤謬

    後日追記: WEB+DB PRESS Vol.133でさらに詳しく書いた。 BEMによってもたらされた、コンポーネントベースのアプローチでは、「ページはコンポーネントの集合によって表現されるべきであり、ページに含まれるのはすべてがコンポーネントである」と考える。しかしこれまでCSSを書いてきた経験から、これではデザイン意図をまともに表現することができないと感じ始めた。なぜなら、普通デザイナーはページのすべてがコンポーネントであるとは考えないからだ。 もちろんページの構成要素のなかには、明らかにそれが「コンポーネント」であると意識して作られたものもある。ただしそれは一部であり、全部ではない。「コンポーネントもあれば、コンポーネントではないものもある」という感覚のほうが普通なのだ。 典型的なUIライブラリにある、「ザ・コンポーネント」みたいなものだけではページは完成しない。例として、一貫してB

    CSS設計における、すべてがコンポーネントであるという誤謬
    kenzy_n
    kenzy_n 2022/06/12
    こんなはずじゃなかったさ。