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デザインの解説書などを読むと、解決策とし
WordPressのテーマ「Lightning」でスマホのメインビジュアルを設定する。
スマホのメインビジュアルにこだわりたい場合には 久しぶりにWordPressのテーマ「Lightning」の記事を書きます。以下の環境で確認しております。 WordPress 5.1.1 Lightningバージョン: 6.8.0 PC: MacBook Air (11-inch, Early 2014) ブラウザ：Google Chrome スマートフォン: iPhone 8 ブラウザ：Google Chrome Lightningはご存知の通り、レスポンシブデザインですので、ページにアクセスしてくる、パソコンとスマートフォン（タブレットもですが）で表示幅を変えています。 スマートフォンで見た時のメインビジュアルがアンバランスになる。 パソコンは横幅の画面に対して、スマホの幅は小さく、表示できる情報量に限りがあります。モデルにも左右されますが、一般的にパソコンの表示幅の1/3と考えて良い
基礎から解説！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
Retinaディスプレイでブログやウェブサイトの画像をぼやけさせない方法 – ワードプレステーマTCD
さまざまなテクノロジーが発展する昨今、スマホやモバイル端末でも、とても美しい画質で画像や映像を見られるようになりました。しかし、iPhoneやMacなどで採用されているRetina（レティーナ）ディスプレイで画像がぼやけていたり、鮮明に表示されないことがあります。なぜ高画質な液晶で評判のRetinaディスプレイで画像がぼやけるのか。その理由と対策を本稿で説明いたします。 Retinaディスプレイとは Retina（英語で網膜という意味）はApple社の高精細ディスプレイの名称で、肉眼では判断できないほど細かな解像度のディスプレイのことです。液晶画面では無数の光が別々の色を発することで画像を表示しています。その光の数(ピクセル)が多いほど高解像度の画像や映像を表示することが可能です。Apple以外でも高精細なディスプレイを搭載した端末は多くあり、Retinaに限らず様々なデバイスで美しい液晶
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
