タグ

WEB制作と運用に関するkyo_agoのブックマーク (3)

  • 日本語におけるtext-wrapプロパティの運用

    CSStext-wrapプロパティを使うと、テキストの行の折り返し方法を変更できる。text-wrap: balanceを適用すると、適用しない場合と比べて次のように変化する。 CSS text-wrap: balance  |  CSS and UI  |  Chrome for Developers text-wrap: balanceが適用された下の例では、すべての行の長さが均等になるように制御されている。 しかし正確に言えば、すべての行の長さが必ずしもまったく同じになるわけではない。文字の適切な折り返し位置を考慮した上で、おおよそ同じくらいの長さになるように分配される、というのが正しい。その際、一つの英単語の途中で行が分割されるようなことは通常起こらない。これは、英語では単語の区切りに空白文字を挟んで記述されるが(わかち書き)、それが改行位置を決めるためのヒントとなるからである。

    日本語におけるtext-wrapプロパティの運用
  • 自治体サイトWebアクセシビリティ調査 | 有限会社ユニバーサルワークス

    JIS試験、正しく実施できていますか 自治体サイトと言えばユニバーサルワークス。自治体サイト調査のユニバーサルワークスが、毎年9月1日にお届けする、都道府県、政令指定都市がドキドキする、Webアクセシビリティ愛好家がニヤニヤする、「自治体サイトWebアクセシビリティ調査」です。 22回目となる今回のテーマは「JIS試験、正しく実施できていますか」です。今年5月に公開された「みんなの公共サイト運用ガイドライン(2024年版)」では、実際のウェブアクセシビリティ品質と公開されている試験結果や準拠状況との間に差異があるとの指摘がなされています。今回の調査は、自治体公式サイトにおける試験の実施状況と試験結果に関する書式や記載内容を明らかにし、規格や指針に即していない点、今後の取り組みを進める中で優先してほしいことなどを記しました。 ➡ 調査概要

    自治体サイトWebアクセシビリティ調査 | 有限会社ユニバーサルワークス
  • デベロッパツールの新機能が便利! そのCSSがなぜ機能しないのか、どう修正すればよいのかが分かる

    デベロッパーツールの地味だけど便利な新機能が実装されるので、紹介します。CSSの非アクティブなプロパティを表示し、それがなぜ機能しないのか、どう修正すればよいのか教えてくれる機能です。 たとえば、親がdisplay: flex;ではないのにFlexboxのプロパティを設定しまった場合は、下記のように表示されます。 CSSに携わる人なら、この機能をオンにしておいて損はないでしょう。 display: flex;ではないのにFlexboxのプロパティを設定 ほかにも、widthを設定したのに効かないときは、それインライン要素ですよ、と教えてくれます。 インライン要素にwidthを設定 デベロッパーツールのこの新機能は「Find inactive styles」と呼ばれるもので、要素に適用されている非アクティブなスタイルを見つけることができます。 Find inactive styles -Ca

    デベロッパツールの新機能が便利! そのCSSがなぜ機能しないのか、どう修正すればよいのかが分かる
  • 1