サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
CSSには便利な単位がたくさんあります。よく使用する単位として絶対単位（pxなど）や相対単位（em, rem, %など）をはじめ、Gridの単位（fr）やビューポート単位（vw, vhなど）があります。いくつかの単位は使う場所が限られていますが、複数もしくはどこにでも使用できる単位もたくさんあります。 Webサイトやスマホアプリでフォントのサイズ、スペース、ポジション、FlexboxとGrid、要素の幅または高さに使用する場合、どのようにCSSの単位を選べばよいのかを紹介します。 WhatCSS length unit should you use? 以下は、そのフローの解説です。 フローの入り口は、下記のように分かれています。 ポジショニング、ディテール・エフェクトに適したCSSの単位 スペースに適したCSSの単位フォントサイズに適したCSSの単位 FlexboxとGridに適したC
書籍「Webアプリケーションアクセシビリティ1」では、「3.1 ラベルと説明」のところで、紙版にして約1.5ページの分量を割いて、フォーム入力欄のプレースホルダー（<input> 要素や<textarea> 要素の <placeholder> 属性）の問題点を指摘しています。 この本で指摘されているプレースホルダーの問題点は以下の3つです。 プレースホルダーの色が薄く視認しづらい プレースホルダーとフォームコントロールの値との区別がつかない フォームコントロールに値を入力したときにプレースホルダーの値が見えなくなってしまう Webアプリケーションアクセシビリティ さらに、Nielsen Norman Groupによる「Placeholders in Form Fields Are Harmful」（日本語訳: 入力フォームのプレースホルダーを使ってはいけない）で数々の問題点が指摘されている
CSSのこの機能を待っていた人も多いと思います！CSSで、句読点括弧のカーニングが自動でできたり、フレーズの途中で改行されないようにしたり、日本語と英語が混在したテキストでスペーシングが自動調整されたり、10px以下でも指定サイズ通りに表示されたりなど、日本語が読みやすくなる最近サポートされた・近日サポートされるCSSの機能を紹介します。 Introducing four new international features inCSS by Jack J 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに word-break: auto-phrase;によるフレーズで自動改行text-autospaceによる文字間のスペーシングtext-spacing-trimによる句読
HTMLやCSSには、ユーザーインタラクション（ユーザー操作）を無効化するための方法がいくつか存在します。たとえば、マウスやタッチ操作を無効化したいときはCSSでpointer-events: noneを要素に指定するなど、制御したいユーザー操作によってさまざまです。 カルーセルやモーダルなユーザーインターフェイス（UI）では、非アクティブな要素が操作されないように「画面には表示されているが、あらゆるユーザー操作を受け付けない状態」にしたい場合があります。具体的には、以下のユーザー操作を無効化します。 マウスやタッチ操作を無効化したい テキスト選択を無効化したい キーボードフォーカスをあえて無効化したい 音声読み上げをあえて無効化したい 必要なプロパティや属性を複数指定することが考えられますが、そのようなときに役立つのがinertイナートと呼ばれるHTMLのグローバル属性です。 inert
ウェブサイト制作において見た目がきちんと実装されているのは大事なことですが、コードのちょっとした違いでユーザーの不便につながることもあります。本記事では見た目だけでなくユーザーの使い勝手にも気をつけたコーディングテクニックについて解説してます。今回はユーザーが特に使い心地を感じやすいインタラクション部分で、シンプルなHTML・CSSだけでより良くできる17個に絞って紹介します。 下記サンプルでNG例とよい例の両方を紹介しています。実際に違いに触れながら本記事を読むと分かりやすいです。 サンプルを別ウインドウで開く コードを確認する 1. divタグをボタンにするのは避けよう 見た目はボタンのようでも、<div>要素で実装したボタンはアクセシビリティの観点からもよくありません。ボタンとしての機能を持つなら<button>要素を用いるのが多くの場面でも有効です。もし、諸事情で<div>要素を用
ほとんどのWebページの見栄えをよくするたった58バイトのCSSを紹介します。 3つのプロパティだけですが、Webページを実装する時の最初のスタイルとして用意しておくとよいかもしれません。 また、ボーナスの100バイト版とオプションのさらに100バイト版も合わせて紹介します。 58 bytes ofCSS to look great nearly everywhere by @JoeyBurzynski 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Webページの見栄えをよくする58バイトのCSS 58バイトのCSSの解説 Webページの見栄えをよくする100バイトのCSS 100バイトのCSSの解説 オプションでさらに100バイト Webページの見栄えをよくする58バイトのCSS 58 bytes ofCSS -Code
表題のことについて検証してみましょう。 目次 目次 前提 Webページ上で独自のフォントを読み込むにはフォントファイルのサイズフォントファイルのサイズを抑える工夫フォントファイルを分割し、必要に応じて読み込むフォントファイルを圧縮する 前提おわり本題 規格によると 4.5. Character range: the unicode-range descriptor 4.5.1. Using character ranges to define composite fonts 実験する 準備 実験方法 実験結果 まとめ 前提本題に入る前に、Webフォントを配信する際の前提について説明します。分かっている方は読み飛ばしてもらって大丈夫です。 Webページ上で独自のフォントを読み込むにはCSSの font-family 属性に使いたいフォント名を書くことで、Webページ上のコンテン
すべてのHTML 要素に指定できる hidden 属性はこれまで真偽属性でしたが、このたび列挙型に変更され、新たに until-found が定義されました。 hidden="": Hidden 状態 hidden="hidden": Hidden 状態 hidden="until-found": Until found 状態 ← New!2022年3月24日現在、Chrome 102 (canary) は hidden="until-found" に対応しており、本記事で例示する挙動を確認できます。 これは以下の issue で提案されていたものです。 Proposal: beforematch event and hidden=until-found attribute · Issue #6040 · whatwg/html 例えばこんなHTML の場合。 <section>
先日の記事（2022年、注目しておきたいCSSの新機能のまとめ）の中でもすぐに使えたら便利な機能の一つが、コンテナクエリです。 コンテナクエリがすべてのモダンブラウザで動作するポリフィルがGoogleからリリースされたので、紹介します。 A New Container QueryPolyfill ThatJust Works by Chris Coyier 今まではメディアクエリを使用していましたが、ビューポートベースのメディアクエリでは限界が見えてきました。そこでコンテナクエリの登場です。コンテナクエリは、親コンテナのサイズに応じて要素のスタイルを設定できます。 たとえば、コンポーネントを1カラムに配置する時と2カラムに配置する時、そしてサイドバーに配置する時それぞれに適したスタイルを与えることができます。詳しくは、以前の記事をご覧ください。CSS コンテナクエリの基礎知識と便利な
棒グラフや折れ線グラフ、どうやって実装していますか？ Charts.cssなら簡単です。データをtableタグで実装し、CSSのクラスをtableに加えるだけで横棒グラフ、棒線グラフ、折れ線グラフ、エリアグラフなどを簡単に実装できるCSSのフレームワークを紹介します。HTMLは普通の表組みなのでアクセシブル、グラフやチャートはレスポンシブにも完全対応した優れものです。 Charts.css Charts.css -GitHub Charts.cssの特徴 Charts.cssのデモ Charts.cssの使い方 Charts.cssの特徴 Charts.cssはtableで実装した表組みにシンプルなCSSのクラスを加えるだけで、さまざまなグラフやチャートを実装できるフレームワークです。カスタマイズも簡単で、ユーティリティのクラスも豊富に用意されています。HTMLとCSSだけで実装 セマ
表計算ソフトのExcelでお絵描きする「Excelのミケランジェロ」のように、ソフトウェアの可能性を最大限に広げるアーティストが存在します。元Kickstarterの最高技術責任者アンディ・バイオ氏が、HTML/CSSの手書きコードだけで美しい絵を作り出す職人の作品をTwitterで紹介しています。 Diana Smith | Software Engineer | cyanharlow @GitHub http://diana-adrianne.com/ バイオ氏がCSSで作られたというイラストをTwitterで紹介しました。 This stunning illustration by @cyanharlow is pureHTML/CSS. Every element was typed by hand, drawing with only atext editor and Ch
1リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
