alt属性をよくわかっていなかった私が代替テキストを書けるようになった話 - Pepabo Tech Portal
こんにちは。最近の猛暑に生存の危機を感じています、コーポレートデザインチームのmewmo(@mewmoppel)です。 突然ですがみなさん、alt属性ってご存知ですか？ alt属性とは、HTML文書においてimg要素に付随する属性のひとつで、画像によって伝えたい内容を説明するための代替テキストを提供します。最近ではTwitterやInstagramといったSNSでも代替テキストを用意できるようになり、より私たちの生活にとって身近なものになっているのではないでしょうか。 そんなalt属性について、最近私がやってしまった失敗とその改善から学んだことをこの場で紹介したいと思います。 alt属性はなぜ必要なの？ alt属性のここがよくわかっていなかった！ 代替テキストを適切に書くためのコツ 1. 画像をなくしてもページの文意が同等レベルで伝わる 2. スクリーンリーダーで読み上げたときに何の画像な
WebPが次世代画像フォーマット天下統一！ Safari 14でついにiPhoneもWebP対応・導入加速は間違いなし | アイデアマンズブログ
TOP > WebPが次世代画像フォーマット天下統一！ Safari 14でついにiPhoneもWebP対応・導入加速は間違いなし WebPが次世代画像フォーマット天下統一！ Safari 14でついにiPhoneもWebP対応・導入加速は間違いなし WebP Safari 14 で次世代画像フォーマットWebPへの対応が発表されました！ Safari 14 Beta Release Notes | Apple Developer Documentation かれこれ20年近く延々と続いた次世代画像フォーマット戦争に、WebPがついに終止符を打ちそうです。 WebPは、私の感覚としては現在のWeb画像のデータサイズを半分以下に削減できます。しかも主要なJpeg、PNG、GIF(アニメーション)をすべてカバー。Web画像のスタンダードは、一気にWebPに流れていくでしょう。 実は2016年に
WebPに関する10の誤解~5分で正しく理解するWebP | アイデアマンズブログ
WebPに関する10の誤解~5分で正しく理解するWebP WebP Web画像最適化 表示高速化 「WebPって聞いたことはあるけど...」という方に向けてまとめてみました！ 多くのWebサイトで画像を半分以下に軽量化できる優れたフォーマットですが、まだまだ知名度が低い状態にあります。曖昧だった理解をスッキリさせるためにご参考ください。 ※ 以前、Qiitaに投稿した記事のアップデート記事です。 1. ✖ ウェブピーと読む → ⭕ ウェッピー 標準的な発音はウェッピー (Weppy)とされています。 2. ✖ Googleの商用技術である → ⭕ オープンソース 特許技術ではなく、BSDライセンスに基づくオープンソースプロジェクトです。 3. ✖ Chromeしか対応していない → ⭕ Android、Edge、FirefoxもOK 2018年の後半から2019年にかけてWindowsの標
地図の代替テキストを考える
水無月ばけら @bakera 地図の代替テキストを空にするのはどうなのでしょう。代替テキストを空にすると、そこに画像があること自体が分からなくなります。地図は重要でさまざまな利用が想定されるので、少なくとも、そこに地図があると分かるような代替テキストを指定したほうが良いと思っています。 2016-10-24 10:56:44 水無月ばけら @bakera たとえば、通信速度が遅いので画像の表示をきっている、というケースについて文中でも言及されていましたが、そういう人は「地図」という代替テキストを見て、そこだけは画像を表示しようとするかもしれません。代替テキストが空だとそういう操作もできなくなります。 2016-10-24 10:58:38
「画像置換はアクセシブル」じゃないよ、という話 / JeffreyFrancesco.org
少し前に Twitter などで触れてた話だが、Web Accessibility Advent Calendar 2016 5 日目の記事として出そうと思って置いておいたネタ。すでに最近では「いにしえのテクニック」となってしまった感もあるので、いまさらこんな話どうでもいいような気がしないでもないが、画像置換とアクセシビリティの話。 そんな訳で、先日たまたま、画像テキストのCSS置換に代わる2016年版のベストプラクティスという記事を読んだ。簡単に言えば「画像置換はやめて Web フォントや SVG、もしくは普通に img 要素使おう」という内容で、それ自体にはまったく異論がないのだけど、後半に書かれている次の一文だけはどうも引っかかった。 画像置換は、控え目に言っても少数の例でアクセシビリティの観点からいまなお妥当であるといえます。これは驚くことではないでしょう。なぜならこれらの手法を使
Chrome 34ではimgタグで解像度に応じた複数の画像を出し分けられるよう、レスポンシブイメージ対応に
スマートフォンのような小さな画面からデスクトップPCのディスプレイまで、Webに対応するデバイスの画面の大きさや精細度の多様性は高まってきています。 多くのWebデザイナーは、こうした多様な画面に合わせてレイアウトなどを変えることで見やすくするよう努力してきましたが、こうしたダイナミックなレイアウトを実現する上で大きな課題だったのが画像の扱いです。画面の大きさや精細度に合わせて適切な画像を表示させようにも、そのための標準的な方法がないのがその理由です。 Chrome 34ではその、いわゆるレスポンシブイメージへの対応としてimg要素に新機能を実装することを明らかにしました。。 img要素のsrcsetで、画面解像度ごとに表示すべき画像ファイルを複数指定できるようになります。 <img alt="A rad wolf." src="pic1x.jpg" srcset="pic1x.jpg 1
身につけておきたいWebサイト高速化テクニック #3｜画像形式の基礎知識 | DevelopersIO
こんにちは、ご無沙汰しています。 Web担当の野中です。 前回の第2回「検証ツールとそもそもHTTPって何だ編」から少し時間が経ってしまいました。 というのもテクニックを紹介するために予想以上の予備知識の説明と検証・調査が必要になり、さらにどう順序立てて解説すべきか悩み時間がかかってしまいました。 ちなみに第2回では、Webサイト高速化に関連してくるHTTPについて基本的なことを紹介しています。 より詳しくHTTPについて解説したCodezineさまに寄稿している連載も是非チェックしてみてください。 本題 さて、今回から実践編ということでフロントエンド側のWebサイト高速化対策の１つ、画像の最適化について紹介します。 初学者向けに細かく基本的なことまで解説しますので、記事を3つに分けます。 画像最適化1回目の本記事では、画像に関する基礎知識について紹介します。 未だにWebサイト高速化の具
要約: Apple iPhone5のページのJPEGとJSとcanvasタグによるビデオの実装がやばいという話
2012 年 9 月 26 日 追記しました。 要約エントリー。 元記事 : iPhone 5 website teardown: How Apple compresses video using JPEG, JSON, and <canvas> アップルのサイトの iPhone5 のページにある「スライドしてアンロック」のアニメーションが、信じられない実装になっている、という話。簡単に要約してみた。（ミスなどの指摘は @lowply までお願いします） もともと h.264 と WebM の動画フォーマット戦争でブラウザ互換性の問題がまだ残っている上、iPhone などは「再生ボタン」を押さないと再生できなかったりするので、こうした短いアニメーションに video タグを使うことは最適解ではなかったらしい。 そこで発想の転換をして、Retina MBP のページでは、蓋が開くたった 2
CSSスプライトについてあれこれ。
「CSS Sprites（CSSスプライト）」についてまとめます。 すでにいろんなサイトで紹介されてるので、検索すれば制作手順から何から何までたくさんヒットしますが、それ故、どの方法が一番ベストなのかってのがいまいち不確かだったので、個人的にまとめ直してみることにしました。 TwitterやFacebookのスプライト用画像 CSSスプライトは、サイトの読み込みを高速化する目的で使われているCSSの小技です。TwitterやFacebookなどでは、ちっこいアイコンとかマークを表示するのに使われてますね（2012.8現在）。 具体的には「サイト内で使用するたくさんの画像（パーツ）をなるべく一枚画像にまとめて、サーバへのリクエスト回数を少なくする」という事をやってます。 画像とCSSだけで高速化が実現できるので大変お手軽なのですが、CSSスプライト用の画像を用意するにはちょっとした工夫が必要
どや！？ひよっこデザイナーにもできるWebページ高速化！鍵は「HTTPリクエストの数を減らすこと」 | デザインどや！？
Webページレイアウト、ナビゲーションプラグイン、フォーム、スライダー＆カルーセルプラグイン、チャート＆グラフプラグイン、イメージエフェクトプラグイン、ビデオプラグインなど。チェックしておきたいです。海外カジノ オンラインサイトの制作はワードプレスのプラグインを利用して様々な機能を付け加えて完成させることができます。2012年のjQueryプラグインまとめでは、デザインの一新や個別のカスタムにも対応した国際的で魅力的なサイト作成に役立つ情報を紹介しています。
こんなのが欲しかった、ヴィンテージの紙のテクスチャ素材集
paper5 各テクスチャ素材は一枚ずつダウンロードしてもよいし、全42枚をまとめたファイル（約150MB）もダウンロードできます。 利用にあたっては、個人でも商用でも完全に無料で利用できる、とのことです。 Paypalにて寄付を受け付けているので、気に入った方ぜひ！
リストに使えそうなフリーの小さいアイコンセットまとめ
リストアイコンをよく探してるので 自分用にまとめ。小さいアイコン だけにしています。結構迷うんで すよね、リストアイコン。そのまま 使えそうなのとか参考になりそう なものとか色々です。 リストアイコンいろいろです。諸事情で時間がなかったのであまりライセンス見ていません。一応フリーみたいですが利用条件等はご自身で判断してください。 Free Website Bullet Icons 使いやすそうです。 Free Website Bullet Icons Liste de puces pour design de sites internet. シンプルでいいですね。 Liste de puces pour design de sites internet. 300imagesfrom1800sites 有名なやつです。 300imagesfrom1800sites Mini Icons 小さ
背景画像を使わずにCSSスプライトをする方法 | アルペジオのように
背景画像を使わずにCSSスプライトを実現する方法が紹介されていたので、参考にしてメニューを作成してみました。背景画像ではないので、プリントアウトしても問題なく表示されます。 背景画像なしのメニューサンプル 画像を背景として指定するのではなく、普通に imgタグで設定します。 メニュー画像 サンプルで使用している画像はこうなっています。 サンプルのソース HTMLとCSSのソースです。 <style type="text/css"> #sample_menu { width: 500px; height: 60px; margin: 2em 0; overflow: hidden; } #sample_menu li { list-style-type: none; float: left; } #sample_menu li a { display: block; width: 125px
case:MobileDesign! モバイルサイトのデザイン紹介ブログ
case:MobileDesign! モバイルサイトのデザイン紹介ブログ 引っ越ししました。 http://case-mobile-design.com/ case:MobileDesign! モバイルサイトのデザイン紹介ブログ > 2010-02-15 >
1.5KBで実装できるスライドショー用JavaScript ライブラリ「TinySlider」:phpspot開発日誌
1.5KBで実装できるスライドショー用JavaScript ライブラリ「TinySlider」。 次のような、左右のナビゲーションとページ番号がついたスライドショーの実装スクリプトの紹介です。 jQueryプラグインではありませんが、jQueryバリに簡単に実装できる模様です。 var slideshow=new TINY.slider.slide('slideshow',{ id:'slider', // スライドショー用のdivのID auto:3, // 自動再生の秒数 vertical:false, // 垂直方向に移動するかどうか navid:'pagination', // ナビゲーションのID activeclass:'current', // ナビゲーションLIのアクティブなクラス名 position:0 // 最初のスライド位置 }); カスタマイズも容易ですね。 デモと
美しいHTMLの条件を綺麗にまとめた一枚の画像 - IDEA*IDEA ～ 百式管理人のライフハックブログ
ドットインストール代表のライフハックブログ
ブラウザのサイズに合わせて画像を伸縮する作業を全自動化するjQueryプラグイン「maxImage」:phpspot開発日誌
PHPからbit.lyやtr.im等のURL短縮サービスをまとめて扱える「PEAR::Services_Sho... 次の記事 ≫：Windows7風ナビゲーション作成チュートリアル ブラウザのサイズに合わせて画像を伸縮する作業を全自動化するjQueryプラグイン「maxImage」。 このプラグインを使えば、画像のサイズをブラウザサイズの変更があったとしてもページのサイズに合うように調整してくれ、デザイン崩れを防ぐことが出来ます。 以下にその機能を紹介してみます。 活用例１ 背景画像自動 背景画像をブラウザサイズ変更に合わせて自由に伸縮 ブラウザのサイズを変えても違和感がないようにすることが可能 活用例２ ブラウザ幅にあわせた画像の自動伸縮 ページの右端に画像があって、自由に伸縮します。 サイズを変えてもこの通り、画像が残りスペースのサイズになります 活用例３ ブラウザ幅に合わせる、がオ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Welcome to nginx!
岡崎公園の桜が開花しました。
Apple風デザインが美しい、スライドショーギャラリーのスクリプト