Webコンテンツの適正画像サイズをディスプレイ解像度の利用者統計データを元に検証します。 ホームページに載せる適正画像サイズをデータで検証という記事から11年も経ってしまいましたので2018年版を載せました。 (StatCounterによる統計データを元にしています。) 2018年版が確定したのでデータおよびグラフを修正しました。 2019年版も(確定版ではありませんが)掲載しました。 Webコンテンツに使用する画像サイズ結論 掲載データが多くなってしまいましたので、結論を先に書いておきます。 パソコンのモニター幅いっぱいの可変サイズの画像(ヘッダ等)を想定するのであれば、(w)2,000ピクセルは必要。これくらいあれば(w)2,560ピクセルで表示したとしても耐えられるクオリティ。10年前に比べると回線環境は良くなったとはいえ、画像サイズが大きくなれば読み込みに時間がかかり、またスマホユ
「あ〜、夏も終わるな〜。リキッドレイアウトなんだけどサイドバーの幅は固定でメインコンテンツ幅だけ可変にできないかな〜。」 って思ったこと、皆さんありますよね?夏ですしね。 どうもこんにちは、制作部の崎本です。 固定要素と可変要素が組み合わさるとめんどくさい!通常、cssのプロパティ値はpx, %, em, rem, vw, vhなど単一の単位を以って値の指定をします。 pxで絶対指定したり .hoge { width: 100px; }%などで相対指定したり .hoge { width: 70%; }色々な指定が可能なのは基本のキですよね。 基本的なレイアウトであればこれらの単位指定の使い分けでレスポンシブ対応含め実装可能かと思います。 では、冒頭のような場合はどうでしょうか? 例えば以下のようなレイアウトを想定してみましょう。 コンテンツ全体(#container)最大幅 1000px左
皆さん、WAI-ARIAってきいたことありますか? 聞いたことはあるけど、なんの事かはあんまり知らない、そんな人はいませんか? 実際私がそうだったので、今回はWAI-ARIAについて調べてみました。 (タグ付けしながら、WAI-ARIAタグの記事の少なさに驚愕しました) WAI-ARIAって何? まず、WAI-ARIAについての話です。 WAI-ARIAとは、簡単に言うと、ウェブアクセシビリティを良くするためにHTMLに付与する言語です。 Accessible Rich Internet Applications (WAI-ARIA) 1.1(公式ドキュメント) Accessible Rich Internet Applications (WAI-ARIA) 1.1 日本語訳 HTML自体にすでにどんな要素かを表す意味がついていますが、 WAI-ARIAではそれだけでは説明ができない要素や
role 属性は、要素が示す役割を明確にするための属性です。 例えば、header 要素はコンテンツの header か、あるいはサイト全体の header を示すことなどができますが、 どちらの header であるかを明確に区別する手段はありません。 しかしながら、role 属性の値 banner によって、コンテンツ固有の header ではなく、サイトの持つ header であることを示すことができます。 HTML5 以降の HTML は、ある役割を示す要素が多く存在しますが、role 属性はより強く役割を示します。 role によって役割を明確にする意味 role 属性は HTML などで使いますが、role 属性に与える値や役割は HTML とは切り離された ARIA と表記される区分に定義されています。 Accessible Rich Internet Application
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く