webデザイナ向けアレコレ計算式、略してweb計。 WordPressのfunctions.phpでのカスタマイズをコピペで簡単にできるWP-functions generatorもどうぞ 大丈夫だとは思いますが、計算が違ってても責任は負いかねます。いちおう免責として。
覚え書き、それはいわゆる日記的なもの。月別アーカイブもあります。 Raindrop.io Bookmarks 05/21/2024 2024年5月21日 著 The accessibility community is not the disability community • Buttondown"there is the disability community, composed exclusively of disabled people, who have to interact with disability constantly, and are largely focused on getting through their(/our) daily lives with a minimum amount of bullshit." Studio by WordPress.
通常はお目にかかれませんが、リンク切れの画像があるのはいただけませんね。 画像がリンク切れだと、こんな風に表示されてしまいます。 もちろんリンク切れがないのがベストですが、絶対に存在しない訳ではありません。 よりよいユーザエクスペリエンスを提供するために、リンク切れの画像要素にスタイルを定義しておくことができます。 Styling Broken Images 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 img要素の2つのポイント リンク切れの画像要素のスタイル ブラウザのサポート状況 img要素の2つのポイント リンク切れの画像要素をどのようにスタイルすることができるか理解するために、最初に理解しておくべきimg要素の2つのポイントがあります。 img要素に通常の文字関連のスタイルを定義できます。 定義したスタイルは代替テキスト(
HTML Standardの4.8.1.1 Requirements for providing text to act as an alternative for imagesをざっと把握できるように日本語で箇条書きにしただけのものです。最終的には原文をしっかりと読むべきでしょう。 基本 必ず定義されるべきである その値は空であってはならない その画像に代わりになる最適な文字列である ページ上の全ての画像をそのalt属性の値で置き換えてもページの意味合いが変わってはならない 画像のキャプションや題名、銘とみなされるような補助的な説明を意味するものであってはならない 前後で解説されている情報の繰り返しであってはならない 画像以外に何も含まれていないリンクやボタンで使われる場合 リンクやボタンの目的を明確に伝える文字列を指定する わかりやすく説明するために文章ではなく画像のチャートやグラフを
4.8.4 画像4.8.4.1 導入4.8.4.1.1 アダプティブ画像4.8.4.2 source、imgおよびlink 要素の共通属性4.8.4.2.1 srcset共通属性4.8.4.2.2 size属性4.8.4.3 Processing model4.8.4.3.1 When to obtain images4.8.4.3.2 Reacting to DOM mutations4.8.4.3.3 The list of available images4.8.4.3.4 Decoding images4.8.4.3.5 Updating the image data4.8.4.3.6 Preparing an image for presentation4.8.4.3.7 Selecting an image source4.8.4.3.8 Creating a source s
HTML5: Techniques for providing useful text alternatives W3C Working Group Note 21 May 2015 This version: http://www.w3.org/TR/2015/NOTE-html-alt-techniques-20150521/ Latest published version: http://www.w3.org/TR/html-alt-techniques/ Previous version: http://www.w3.org/TR/2014/WD-html-alt-techniques-20141023 Editors: Shane McCarron, Applied Testing and Technology, Inc., shane@aptest.com Liam R E
最適な画像の書き出しは、JPG, GIF, PNG、どれを使うべきか 2011-07-26 デザインされたものをコーディングする上で、画像はサイトのパフォーマンスにも影響する重要な要素の1つです。 画像形式には、jpg, gif, pngなど種類があり、それぞれの特性を理解した上で選定できているでしょうか? 画像形式についてまとめてみます。 画像の種類 JPEG インターネットでよく使用される画像形式で、静止画像を圧縮する方法の1つです。 ブロック単位で圧縮変換を行うため、圧縮率を上げるとブロックノイズというノイズが生じます。 特に小さくすると赤の部分でノイズが発生しやすい。 IE6~8(IE9は未確認)において#02050aというバグがあり、 JPEG画像でopacityを使用すると#02050aの部分が透過jpgになるバグがあります。 上記の点を注意する必要がありますが、1670万色ま
The World Wide Web Consortium public-html@w3.orgメーリングリストに「Adaptive images」という興味深い提案が投稿された。Dominique Hazael-Massieux氏が提案したもので、HTML img要素で複数の画像を指定できるようにする内容になっている。PC、タブレットデバイス、スマートフォンなど多種多様なスクリーンが混在するようになった現在、検討に値する話題といえる。 異なるスクリーンサイズに対してそれぞれ適切なデザインを提供する方法はいくつもある。最近の流れはCSS3のメディアクエリを使うというもの。スクリーンサイズに応じて適用するスタイルシートを切り分ける方法で、CSSのみの対応で済むという特徴がある。ただしその場合でも、スクリーンサイズに応じて利用する画像を切り替えるという方法はあまり優れた方法が提供されていない。
ページ内に大量に同じタグを出力する場合 ページ内に同じタグ(imgタグなど)を大量に出力する場合も従来とは異なる方法を使います。大量に出力しない場合でも以下に説明する方法が有効な場合があるでしょう。まず、従来の方法で同じ画像を20個表示させるスクリプトを見てみましょう。document.write()を使ってページの構築時にタグを書き出します。【サンプル1を実行】 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Sample</title> </head> <body> <p>ページが読み込まれると画像を20枚を表示します</p> <sc
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く