タグ

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

  • 関連タグはありません

タグの絞り込みを解除

CSSとHTMLとarticleに関するefclのブックマーク (7)

  • Default styles for h1 elements are changing | MDN Blog

    Browsers are starting to roll out changes in default UA styles for nested section headings. Developers should check that their sites don't rely on UA styles for certain cases to avoid unexpected results and failing Lighthouse checks. In this post, we'll have a look at what the incoming changes are, how to identify if it's an issue on your pages, and some hints for conformant and better-structured

    Default styles for h1 elements are changing | MDN Blog
    efcl
    efcl 2025/04/17
    セクションに基づいた暗黙的な`<h1>`要素のデフォルトのスタイル(UAのスタイル)が変更される。 Firefox 138、Chrome 136以降にこの変更が含まれる
  • CSSでチェックボックスやラジオボタンをカスタマイズする 2024年版: Days on the Moon

    HTMLのチェックボックス(<input type="checkbox">)やラジオボタン(<input type="radio">)をCSSで装飾したいというのはよく聞く話です。2024年現在は、HTMLの記述は簡単なまま、CSSで自由度の高い装飾も実現できるようになっています。 結論 従来の手法 appearanceプロパティを使う手法 外枠の配置 未チェックとチェック済みの切り替え 強制カラーモードへの対応 透明なボーダーやアウトライン 内向きの影や背景グラデーション 画像やテキスト ブラウザ組み込みの外観 状態に応じたスタイルの指定 参考文献 結論 単に色調を整えられればよいという場合は、accent-colorプロパティを使います。 input[type="checkbox"], input[type="radio"] { accent-color: #d31; } くだもの や

    efcl
    efcl 2024/05/25
    チェックボックス(`<input type="checkbox">`)やラジオボタン(`<input type="radio">`)をCSSでカスタマイズする方法について。
  • Combining CSS :has() And HTML <select> For Greater Conditional Styling — Smashing Magazine

    While the CSS :has() pseudo-class is widely celebrated for its ability to select a parent element up the chain conditionally based on its contents, there is more conditional logic it is capable of handling when we move it up the chain, so to speak. Amit Sheen demonstrates using :has() to apply styles conditionally when a certain <option> in a <select> element is chosen by the user and how we gain

    Combining CSS :has() And HTML <select> For Greater Conditional Styling — Smashing Magazine
    efcl
    efcl 2024/05/03
    `<select>`と`:has()`を組み合わせて、選択した値によってスタイルを変化させる方法について
  • 縦書きHTMLにおける文字の向きはどのように定まるか - ドワンゴ教育サービス開発者ブログ

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

    縦書きHTMLにおける文字の向きはどのように定まるか - ドワンゴ教育サービス開発者ブログ
    efcl
    efcl 2022/07/04
    縦書きHTMLの表示についての記事。 CSSの`writing-mode`と`text-orientation`での文字の向きの扱い、フォントとVertical_Orientationごとの表示の差異、ブラウザの実装の差異などについて
  • Hiding content responsibly

    I wrote about hiding content during the A11yAdvent calendar, namely how to make something invisible but still accessible for screen readers. I’m going to mention the “accessibility tree” a few times in this article, so be sure to read how accessibility trees inform assistive technologies by Hidde de Vries. In this article, I want to discuss all the ways to hide something, be it through HTML or CSS

    Hiding content responsibly
    efcl
    efcl 2021/03/08
    コンテンツの非表示を意味するCSSやWAI-ARIA属性のそれぞれの動作とアクセシビリティ的な挙動についてのまとめ。 データ、ビジュアル、レイアウト、セマンティクス、コンテンツ、キーボード、ポインター、スタイルなどの
  • 2021年のウェブ標準とブラウザ | gihyo.jp

    2021年になりましたね。 矢倉眞隆(myakura)です。ウェブ標準やブラウザに興味のあるウェブ開発者です。gihyo.jpでは2009年に「Web標準とその周辺技術の学び方」という連載をしていました。 今回は昨年の泉水さんに代わり、2021年のウェブ標準やブラウザの動向を占おうと思います。2020年は世界もブラウザもそれなりに大きな出来事がありましたので、2020年の動きをまずおさえ、そのうえで2021年はどうなるのかを考えてみました。 W3Cのプロセス改訂でLiving Standardライクな仕様の改訂が増えていく W3Cは2020年9月に、新しいプロセス文書と特許ポリシーを公開しました。 新しい文書プロセスはW3Cの組織の定義や標準化の流れ、意思決定などについて定めた文書です。ここ数年は毎年更新されていますが、2020年はこれまでと比べて最大級とプレスリリースでもうたわれています

    2021年のウェブ標準とブラウザ | gihyo.jp
    efcl
    efcl 2021/01/05
    2020年におけるHTML、CSS、DOM APIに変化についてまとめた記事。 また、IE 11と旧Edgeのサポート状況、UA Client HintやPrivacy Sandboxなどの取り組みについてなど幅広くウェブ(標準)の状況について扱っている
  • カクヨムでの縦組み表示の実装と、縦書きWebの将来に向けて (builderscon tokyo 2018) - Hatena Developer Blog

    こんにちは、Webアプリケーションエンジニアのid:nanto_viです。先日開催されたbuilderscon tokyo 2018において「カクヨムでの縦組み表示の実装と、縦書きWebの将来に向けて」という発表を行いました。Webブラウザ上で、小説を縦組みで読むという機能に関するものです。その発表資料に補足と質疑応答の内容を加えて公開します。 なお、当日は資料を単一のHTMLファイルに切り出して、それをFirefoxで開き200%にズームした画面を映しながらプレゼンテーションしました。 カクヨムでの縦組み表示の実装と、縦書きWebの将来に向けて 自己紹介 nanto_vi (TOYAMA Nao) 株式会社はてな Webアプリケーションエンジニア Perl, TypeScript カクヨム KADOKAWA × はてな による小説投稿サイト 2016年2月正式オープン 縦組み表示 補足

    カクヨムでの縦組み表示の実装と、縦書きWebの将来に向けて (builderscon tokyo 2018) - Hatena Developer Blog
    efcl
    efcl 2018/09/12
    縦書き表示を行った際のブラウザのバグや問題への対象方法について
  • 1