-
ID:xjkI7h さんの質問

今製作するサイトってほぼRetina対応必要だと思いますが、矢印とかのシンプルなアイコンってどうしてますか？

1　svg
2　pngとかで大きめサイズで書き出す
3　cssでbeforeとかafterを書きまくる
4　Font Awesomeなどのアイコン用webフォント

サイトにより臨機応変にとは思っているのですが、毎回迷います。。

みんなの回答 14 件

ID:XDXKb7 さんの回答

2はやんない
2やってる人って結構いるの？
ID:6C9dpx

たまたま見たけどflickrはこれだったよ

ID:Tt.CAc さんの回答

というか全面的にRetina対応してるわけじゃないけど…ちょっと前は2だったけど最近は1か3かなー
ID:sxUZfP さんの回答

使用頻度
4 > 3 > 1
2はやらん。
ID:IysR67 さんの回答

4ですね
ID:BKY62/ さんの回答

それぞれ用途を分けてるからなぁ。

4.単色のアイコン用。Font Awesome等は使わずにsvgからアイコンフォントを生成することが多い。
1.単色じゃないアイコン。
3.borderで再現できる矢印、四角とかアイコンフォントにするまでもないような超単純なアイコンやWebアクセシビリティの関係でアイコンフォントを使えないときに使う。
ID:O89Iyz さんの回答

アイコン単色という前提であれば、個人的にはwebフォント一択のような気がする。webアクセシビリティ関係で不利っていうコメがあるみたいだけど、アイコンに意味づけしないならCSS:beofreで埋め込んでしまえばいいし、意味を用意したいならリガチャ使えばいい。画像のaltよりもよっぽどアクセシビリティに優れると思うよ。にっくきレガシーIEのサポートがなくなった今、webフォントにおけるデメリットはロードされてから表示されまでのラグしか思い浮かばない。
ID:BKY62/

なにを勘違いしてるのか知らんが、擬似要素を使っても音声ブラウザやスクリーンリーダーだと普通に読み上げられるぞ。
.
ttps://w3g.jp/blog/reader_pseudo-elements_readable
.
HTML側でaria-hidden="true"を指定するか、CSSでspeak:none;を指定すれば一応回避できるが、それでもすべてのブラウザに対応できるわけじゃない。
リガチャについても、[Twitterのアイコン]Twitterみたいに置く場合TwiitterTwitterって二重で読まれるから、根本的な解決にはならない。
ほんとにwebアクセシビリティに対応したことあんの？

ID:/UVDo8

あっ、ぷぷぷ…

ID:f8A6me

知ったかして、どうもすいませんでしたぁー(´Д`)y-~~

ID:AUFGiV さんの回答

ごめんなさい。2やります。
ID:dM4wgX

あたしも…

ID:MtlFsZ

わしも…

ID:9CV30M さんの回答

一番軽くて読み込みが早いから3
複雑なモノの場合は2

1と4はゴミ。
ID:f8A6me

うわ…(´△｀;)

ID:0rGdjE

矢印とか限定ですよね、ハハハ

  • ・・・・・ですよね？
ID:yHlST.

なんだこいつら
ID:BKY62/lgc9Nlを見習えよ
問題があるならちゃんと指摘しろ

ID:9CV30M

> ID:yHlST.NWwCWh

＞矢印とかのシンプルなアイコン
って文章すらきちんと読めない池沼（ID:f8A6me1xjmdW、ID:0rGdjEzLDFcN）共を相手にする必要はない。

ID:f8A6me

せやで！相手にする必要はないんやで！と、既に反応してしまっている奴が申しております。

ID:9CV30M

返信先を見れば良いのに本当に文盲なんだな・・・呆れるわ。

ID:ehg17r

相手してるコメ主えらいなｗ

ID:9CV30M

相手してるというか、池沼の恥ずかしさを晒し者にしてるだけよ。

ID:jfLjOH さんの回答

ごめんね俺も2だ
一番楽だから
ID:7PY2Xx さんの回答

4でしのいでるけどそろそろ1をちゃんと使うようにしないとなぁ・・・って感じです。
ID:Bexznq さんの回答

2です。対応ブラウザやOSにもよるけど。
svg使いたいけど、まだAndroidでバグでるしなぁ
ID:0lPjbM

↑これなんですわ。　あとサーバの影響もあるのでまで頻繁には使いづらい。

ID:CGod14

>svg使いたいけど、まだAndroidでバグでるしなぁ
これこれww 俺の場合はie エッジで影響受けた。

ID:0rGdjE さんの回答

1使う機会増えた。けどインラインSVGはソースの可読性下がるからキライ。
ID:P8Fm7m さんの回答

2です。iMac 5kでチェックしてるが特に問題ない。
ID:ihyfT9 さんの回答

4（CSSフレームワーク利用）です。汎用性高いのは凝らない方が却って無難なので
最終更新日:2016-09-16 (3,127 views)

関連するトピックス

ページ上部に戻る