[HTML5] img要素の正しいalt - Qiita
alt属性の正しい書き方について書いてあるサイトを検索していたらSEOに関する記事ばっかりで萎えたので書いておく。 alt属性の意味 HTML5でのaltはスクリーンリーダーやロボット等、画像を見る事ができないユーザーに対しても適切な情報を伝えるためのフォールバック。 alt属性には「その画像が表している”文脈”」を書く 例としてたまたまTLに流れてきた画像を拝借します。 おいしそうですね。 via (8) Twitter 例文 ある晩、私はimg要素のalt要素について正しい説明をしているサイトを探していた。 ところがなかなか見つからないのに業を煮やし、仕方が無いので自らQiitaに記事を書くことにしたのだった。 記事を書くためには画像が必要である。私はおもむろにTwitterのURLを叩き、タイムラインを表示する。やあ、おあつらえ向きな画像があるじゃないか。 リボンの串が刺さっていると
![[HTML5] img要素の正しいalt - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/c6f437b3db9034e965b6319757d34011d420fa11/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCSFRNTDUlNUQlMjBpbWclRTglQTYlODElRTclQjQlQTAlRTMlODElQUUlRTYlQUQlQTMlRTMlODElOTclRTMlODElODRhbHQmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTI3M2Y5NWU5ZjQzMzE4ZDdjNzcwYmE2MjMzZmMwYjNl%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBtYWNjb3RzYW4mdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTcxNjEyOWEyNzFlNGYyYjgzMGE2YTMwZGU0NTNlMmEx%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dec1ba116cace9d1db6108ec5a4866faf)
画像サイズに依存しない絶対中央配置 - dskd
公開日2013-05-14タグCSSウェブページ作ってると画像を画面の中央に配置したいし、どんなサイズの画像が来ても真ん中にしたいし、どんなサイズの画面で見ても画像をはみ出させずに表示させたい欲求はよく出てくる。これってもはや人類の欲望と言っても過言ではない。 要件 画像を縦方向にも横方向にも画面の中央に配置したい 画像のサイズに依存したくない ウィンドウサイズが画像サイズより小さくなっても画像がはみ出ない この人類の欲望をを CSS で書くと、こう。 <body> <img src="image.jpg" /> </body> img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; max-width: 100%; max-height: 100%; } 前のエントリで書いたスニペット（F
画像の最適化をCLIだけで行うgrunt-imageを作った
画像の最適化をCLIだけで行うgrunt-imageを作った Webにおける画像については以前記事にしたが、 そのフローをより良くするべく最近gruntのモジュールを作ったのでその話を。 前置き 私の業務は弊社サービスのパフォーマンス改善を業務。何がボトルネックになっているかは各プロジェクトでまちまちだが、共通しているのが 「とにかく画像が多い」 というところ。どのサービスもペイロードサイズの80%程を画像が占めている。 画像の最適化を忘れるだけで（例えば）100KBとか平気で増えるので、これではCSSやJavaScriptのファイルサイズを減らしても本末転倒である（もちろんCSSもJavaScriptも結合と圧縮は非常に重要だけど！）。 各種最適化ツール ではどうやって画像を最適化するのか、という話になるが、GUIだと以下の3つが有名で優秀。 ImageAlpha: フリーソフト。24b
無料でJPG、PNG、GIF、SVG画像を圧縮して小さくしてくれる「Compressor」
アカウント登録不要・無料で利用でき、手元にある画像ファイルをブラウザでアップロードするだけで瞬時にファイルサイズを小さくしてくれるサービスが「Compressor.io」です。 Compressor.io - optimize and compress your images and photos http://compressor.io/ ページを表示させるとまず目に飛び込んでくるのがこのカメレオンの画像。画像の上には白いバーが表示されており、マウスで左右に動かすことで圧縮前と後での画質変化を確認することができます。 画像の下には、圧縮前後のデータ容量の変化と圧縮率が表示されています。 このサイトで対応しているのはJPEG、PNG、GIF、SVGの4形式。圧縮時には、元の画質をキープできる可逆圧縮と、圧縮率重視の非可逆圧縮を選択することが可能となっています。 使い方の説明はこれだけ。あと
croppic - JavaScriptを使って画像切り抜き
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 操作性も悪くないですし使い勝手良さそうです。 スマートフォンの隆盛もあって写真コンテンツがオンライン上に溢れるようになっています。そんな写真をなるべく格好よく見せようと思うと機械的にサムネイルを生成しているだけではいけません。CGMであればユーザが手作業で加工したって良いのです。 ということで今回はJavaScriptを使って写真をクロップするcroppicを紹介します。JavaScriptを使うことでUI/UXに優れた形でクロップができます。 croppicの使い方 まずHTML/JavaScript/スタイルシートを下記のように設定します。 JavaScriptはこんな感じ。シンプルですね。 var cropperHeader = new Crop('yourId'); 続いて
フロントエンドチューニングの箇条殴り書き
普段気をつけてるよリスト "モバイルで、WebViewとブラウザのコンパチで、特にセオリー化されていないデザインモジュールのなか、装飾画像もふんだんに使うぞ系サービス開発" の文脈における、パフォーマンス確保のため気をつけてるよリスト。 よく、パフォーマンス「向上」とか「確保」とか申しますが、メンテナンスコストなどと天秤にかけて、「必要十分」のラインを狙うのが重要だと思う次第。 画像リソース 画像リソースを揃えるときのセオリ。圧縮率とか最適化とか細かいチューニングはあれど、大雑把に下記を守る。そしてImage Optim（or 相当の処理）。 JPEGはプログレッシブで画質60くらい（オレ目安） PNGは差し支えない範囲で色数をきちんと削る 50px未満のサムネイルは@2.0xなリソースにしない 案外、Androidあわせの@1.5xや@1.0xでも大丈夫なことすらある GIFアニメを入れ
最適な画像書き出しの基本
はじめに こんにちは、クラスメソッド株式会社の野中です。 前回の『Webサイト高速化に必要な画像形式の基礎知識』から3回に渡って、画像の最適化に必要な知識とテクニックについて紹介しています。今回は前回の基礎知識を使い、一般的に利用頻度の高い画像タイプの最適な書き出し方法について紹介します。 対象者 この記事では、前回と同じくWebデザイナーを対象としています。 フロントエンドエンジニアの方は、Webデザイナーから受け取ったPSD（Adobe Photoshop Data）ファイルや、AI（Adobe Illustrator Data）ファイルから画像を書き出すこともあると思うので、その際の参考にしてください。 Webデザイナー フロントエンドエンジニア Webディレクター Web担当者 前回と同様にビギナーも含めた広い層に向けて解説しているので、当たり前と思われる説明も多く含まれます。また
WordPress 2.9 の新機能の投稿サムネイル画像の使い方 – わーどぷれすっ!!
New in WordPress 2.9: Post Thumbnail Images « Mark on WordPress を参考に、WordPress 2.9 の新機能の投稿サムネイル画像の使い方をご紹介。 基本的な使い方 まず編集画面で専用のインターフェースを使えるようにするため、テーマの functions.php ファイル内に次を追加します: add_theme_support( 'post-thumbnails' ); これで投稿と固定ページの両方の編集画面で投稿サムネイルのインターフェースが有効になりますが、もしどちらか一方だけで有効にしたいのなら次のようにします: add_theme_support( 'post-thumbnails', array( 'post' ) ); // 投稿で有効 add_theme_support( 'post-thumbnails', a
text-indentでテキストを消す代わりに使っている背景画像を表示する方法（youtubeも採用） | バンクーバーのうぇぶ屋
もはや太古の昔から存在した錯覚に陥っているtext-indent:-9999px;でテキストを消して背景画像を表示するという方法ですが、どこでも同じような議論はされてきているらしく、これってSEO的にどうなん？って話はやっぱり耳にします。 結果僕は「サイトの内容に関係あるテキストであれば消しても問題ない」と思っている派で、Google先生のお話だと隠しテキストがユーザーの為ならOKで、検索エンジンのためならNGってことでOK？ ただ、画像の内容と CSS や alt 属性による代替テキストが完全に一致していなければならないわけではありません。前回の記事 に も書きましたように、代替テキストが、ユーザーに読ませることを想定し、ユーザーにとって有益なものであると考えられるものであれば ( 例えばテキストブラウザや、テキスト読み上げソフトをご利用のユーザーのために書かれたものである場合 ) 、問
画像アップロードで作成される画像の種類を追加する – Simple Colors
画像をアップロードするとき、自動的に作成される画像のサイズは、デフォルトでサムネイル、小、中、大の４サイズですが、簡単な記述で、この種類を増やすことができます。 この作成されるサイズを増やすには、functions.phpにadd_image_sizeを追記してあげればよいです。 下記は、横430px、縦320pxの gallery_large というサイズと、横203px、縦149pxの gallery_small というサイズを追加する記述例です。 CODE 1 add_image_size( 'gallery_large', 430, 320, true ); add_image_size( 'gallery_small', 203, 149, true ); ただし、挿入される画像サイズのリストには表れませんが。。。
Photoshop で Web 用に画像を切りだすと画像の彩度が上がってしまうのは Adobe RGB と sRGB の違いが原因だった
ディスプレイを新しく買い替えたら Adobe RGB に対応して、なんかかっこいいので何気なく設定したら、画像を切り出すと片っ端から赤くなってて使い物にならなくなって困っていました。 原因が分からないのでとりあえず Adobe RGB について調べました。 Adobe RGB とは アドビアールジービー： – IT用語辞典バイナリ sRGBで撮影したものをAdobeRGBで表示させると、彩度が上がってしまうなどの困難がある。 ということだそうで、このことを知らずに画像を切りだして彩度が上がってしまっていたようです。要は Photoshop はプロファイルに合わせて表示してくれているけど、いざ切りだすとモニタのカラー設定によって彩度が上がってしまうみたいです。 結局 Web デザインをする際のモニタと Photoshop の理想の設定 モニタの設定 プリセットなど呼び方はわかりませんが sR
背景画像を使わずに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
PHPでの画像のリサイズ、切り抜きが自由自在「class.image.php」:phpspot開発日誌
PHPでの画像のリサイズ、切り抜きが自由自在「class.image.php」 2008年02月21日- Icebeat | class.image PHPでの画像のリサイズ、切り抜きが自由自在「class.image.php」 class.image.php を使えば、分かりやすいコードで、簡単に画像のリサイズ、切抜きが可能です。 例えば、3行で、画像のサムネイルが作れてしまいます。 まずは、画像を幅200pxでリサイズ＆保存のコード $thumb = new Image('image.jpg'); $thumb->width(200); $thumb->save(); そして、画像を50%のサイズにリサイズのコード $thumb = new Image('image.jpg'); $thumb->resize(50); $thumb->save(); そして、左0px、上30pxの位置
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【今日のお気に入り】 画像に使われているフォント名を判定「フォント自動判定」NOT SUPPORTED