schoo授業感想「Retina液晶対策とSVG画像」 | 創kenブログ
リンクをコピー オンライン動画学習サービスの「schoo（スクー）」。 授業の受講感想記です。 今回の授業は、 ＊SVGでWebフォント制作 https://schoo.jp/class/1968 田中先生の録画授業です。 「SVGでWebフォント制作」とのタイトルで、 ◇前半：SVGのアイコンフォントについて ◇後半：SVS画像について の二本立ての内容でした。 私が感銘を受けたのは後半の方です。 「Retina液晶」対策でSVGを使いましょうという内容でした。 Retina（レティナ）対策とSVG アップルがiPhoneやMacBookなどに搭載しているRetina液晶は高解像度で、これでWEBサイトでJPGやPNGの画像を見ると、原寸大の画像はぼやけがちになります。 Retina対策。 これ、WEBデザイナーにとって頭の痛い問題ですね。 WEBデザインの解説書などを読むと、解決策とし
基礎から解説！Webデザインにおける解像度とRetina対応について知ろう！ | D-FOUNT -大阪・京都のグラフィックデザイン／Webデザイン-
解像度とは？ まず最初に、解像度には下記の2つの意味があります。 ①密度という意味［単位：ppi］②ディスプレイのピクセル数（画面解像度）という意味［単位：px × px］ なので一言で解像度といっても、①と②のどちらの意味なのか、その時の文脈から判断する必要があります。 例えば、Webで使用する画像において「解像度2倍の画像」というと、密度が2倍なのではなく、ピクセル数（大きさ）が縦横それぞれ2倍という画面解像度の意味を指します。 ①と②について以下で簡単に見てみましょう。 ①密度としての解像度 密度としての解像度は、「1インチの幅の中に何個のピクセルがあるか」を表します。 単位はppi［pixel per inch（ピクセルパーインチ）］です。
iPhone/iPad/Apple Watch解像度(画面サイズ)早見表 - Qiita
用語解説 ポイント boundsやframe等で使用される論理的な画面サイズ。通常はこれを意識してプログラムを作成します。 ピクセル 描画が行われる論理的な画面サイズ。ピクセルパーフェクトな描画が必要な場合には、このグリッドに合うように描画を行う必要があります。 デバイス 端末に搭載された液晶の物理的なピクセル数。これが上記ピクセル数と一致しない場合には、ピクセルパーフェクトの描画は非常に難しくなります。 このサイトの解説がわかりやすいです。 https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions 拡大モード iPhone6, 6 Plusでは、画面設定から拡大モードが選択できます。 上記の表にまとめた通り、retinaの倍率はそのままで、ワンサイズ小さいiPhone相当のポイント数になります。 iPho
Retina対応のWebデザインをするときの注意点
こんにちは、ディレクターのせりなです。 このページにたどり着いたあなたはきっと クライアントにRetinaディスプレイに対応したWebサイトを作ってって言われたけど 「すみません、”れてぃーな”って何ですか？」 「あー、あの綺麗に見える画面のことね！・・・TVの話？」 「Retina対応って言うけど、何をどうすれば対応できるの？」 って思っているWebデザイナーさんではないでしょうか？ 世の中では一般的になりすぎて、今更ひとに聞けないRetinaディスプレイと そのWebデザインを作るうえで注意すべき点をまとめたのでご覧ください。 目次 1. Retinaディスプレイとは 2. Retinaディスプレイでデザインするときの設定方法 1. Retinaディスプレイとは 最近よく耳にするRetinaと言う言葉。そもそも何なのこれ？ Retina Display(レティーナ ディスプレイ) 「R
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
