- ベストアンサー
画像をRetinaディスプレイに対応させるには？
せっかくの高画質ディスプレイに綺麗に表示させたいのですが いつも掲載する画像が500×342pxだとして 倍のサイズの画像（1000×684）をアップしておいて 編集画面で #IMAGE|c00***.jpg|***/**/**/|mid|1000|684# ↑ 最後の数値を|500|342#と置き換えました. これで一応綺麗に表示されましたが 大小2枚の画像をアップしておいて 見る人の環境に合わせて自動的に切り替える方法をどなたか教えて戴けませんか？ CSSに書き加えたりして可能でしょうか？よろしくお願いします。
- kenta67
- お礼率100% (4/4)
- ブログ
- 回答数3
- ありがとう数13
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
だとすればjsを使うのが早いかな、と。 要はユーザーの画面サイズを取得するわけですが… http://www.shurey.com/js/samples/1_tips10.html こんな感じ。 で、cssを読み分ければ出来ます。 そこまでする意味あるかな？とは思いますけどね。
その他の回答 (2)
- thrashhhhhhhh
- ベストアンサー率7% (8/114)
注意 OSを更新したからと言ってRetinaディスプレイになるわけではない。
お礼
実はiPad mini Retinaの購入を検討してまして 質問の方法でブログ更新してアップルストアで確認してきました 購入前にブログの画像を綺麗にしておきたいなと思ってます。
- sumiyama800
- ベストアンサー率1% (1/53)
現状ではそのような対応が多いと思います。 あまり大事ではない場所の画像の画質を下げるのも手だと思います。(1,5倍程度に)
お礼
ありがとうございます これぞという画像だけ二倍の大きさですね ＞現状ではそのような対応 他の方法はないのでしょうかね？
関連するQ&A
- ｊｐｇ画像のRetinaディスプレイ対応方法
http://kray.jp/blog/retina-web/ 上記記事等を参考にしました。 2倍の密度のディスプレイは倍のサイズの画像を用意して半分のサイズで表示させる方法があると理解しました。 そこでふと疑問に思ったのですが、 多くの場合は72dpiで作られる画像を、同じサイズで144dpiで作る方法でもいけるんじゃ？ と思いました。 が、私は高精細ディスプレイ持ってないので試せません。 どなたか正解かどうなのか教えてください。
- 締切済み
- HTML
- 背景画像上に複数枚の画像配置について
お世話になります。 まだまだcss勉強中なので教えて頂きたいことがございます。 １枚の背景画像に対し、別箇所にマウスオーバー時のみ表示されるように複数枚画像を配置し、そのマウスオーバー用の複数枚の画像にリンクタグをつけて、別ページへのリンクを貼りたいのです。 しかし、ネットで調べた方法ですと、うまくマウスオーバーが反映されず 余計な画像も出てきてしまいます。 おそらく間違ったcssを記述していると思うので ご指摘いただけると助かります。 -------------------------------------------------------------- 【html】 <div class="demo"> <div class="demo1"><a href="#"></a></div> <div class="demo2"><a href="#"></a></div> <div class="demo3"><a href="#"></a></div> <div class="demo4"><a href="#"></a></div> <div class="demo5"><a href="#"></a></div> </div> 【css】 .demo { background: url("../img/imgbg.jpg") no-repeat; display: block; width: 800px; height: 1108px; } .demo1 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; } .demo1 a:hover { background-image: url("../img/img1.png"); position:relative; top:475px; left:635px; display:block; } .demo2 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; /*text-indent: -9999px;*/ } .demo2 a:hover { background-image: url("../img/img2.png"); position:relative; top:469px; left:480px; display:block; } .demo3 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; } .demo3 a:hover { background-image: url("../img/img3.png"); position:relative; top:477px; left:322px; display:block; } .demo4 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; /*text-indent: -9999px;*/ } .demo4 a:hover { background-image: url("../img/im4.png"); position:relative; top:477px; left:167px; display:block; } .demo5 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; /*text-indent: -9999px;*/ } .demo5 a:hover { background-image: url("../img/img5.png"); position:relative; top:477px; left:10px; display:block; } -------------------------------------------------------------- a のクラスの時に背景画像を指定しなくても良いんじゃないかと思い 消してみたら画像が表示されなくなってしまったので そのまま記載しています。 上記の記述のままですと、マウスオーバーが正しく反応しないですし マウスオーバー時に別箇所に背景画像が表示されてしまいます。 やりたいことは画像にしましたのでご確認ください 黒○は背景画像内にある形で、その上に同じ形の赤○を マウスオーバー時の画像として表示したいです。 （図が下手ですみません） わかる方、ご教示をお願いします。
- 締切済み
- CSS
- ボタンのa:activeの画像が表示されません
●質問させて頂きます。cssで指定したa:activeの画像が表示されません。 html <ul> <li class="sogo"> <a href="index.html">●●</a> </li> <li class="kinri"> <a href="kinri.htmi">●●</a> </li> <li class="shinsa"> <a href="shinsa.html">●●</a> </li> <li class="gendo"> <a href="gendo.html">●●</a> </li> <li class="raiten"> <a href="raiten.html">●●</a> </li> </ul> css ● >996 付け足しです。関係あるかわかりませんが、書いたcssの上に次のようなソースもあります。 css .sogo { background-image: url("../images/sogo.jpg"); display: inline; height: 45px; text-indent: -9999px; width: 180px; .sogo a { background-image: url("../images/sogo.jpg"); display: block; float: left; height: 45px; text-indent: -9999px; width: 180px; } .sogo a:hover { background-image: url("../images/sogo_on.jpg"); } .sogo a:active { background-image: url("../images/sogo_on.jpg"); } このように指定すると、a:hoverでは画像が変わるのですが、a:activeではaの画像のままです。どうぞご教示ください。
- ベストアンサー
- CSS
- Dreamweaverのh3に使った画像がみえません
Dreamweaver MX2004を使用しています。 サンプルページから作り始め、見出し3を編集して背景画像に images/banner.jpg を設定しました。 ところが、プレビューでは意図通りなのに、アップロードすると画像が表示されません。 じかに画像にアクセスしてみると、タイトルが「banner.jpg（GIF画像、32×32ピクセル）」となっていて、画像タイプも大きさも別物になっています。 これはデフォルト設定でこうなっていたと想像できますが、CSSの中身を見てもどこが変なのかわかりません。 h3{ font: normal 24px "ＭＳ Ｐゴシック", Osaka; color: #003DF0; text-align: center; height: 30px; width: 450px; background-image: url(images/banner.jpg); } 画像がGIFで32×32、という情報はどこに設定されていて、どう直せばいいのでしょうか。
- ベストアンサー
- ホームページ作成ソフト
- cssの画像切り替え
宜しくお願いします。 cssでのhoverを使った画像の切り替えを教えてください。 ○html <dl id="dl"> <dt id="dt"><a href="#"><img src="img/image1.jpg" alt="" /></a></dt> <dd>あ</dd> </dl> ○css #dl { width: 170px; height: 170px; margin: 0; } #dt a { text-decoration: none; } #dt a:hover { background-image: url(img/image2.jpg); text-decoration: none; } というソースで、cssを使い画像を切り替えたいのですが、できません。 html指定で、<img src="～">で画像を表示させておき、 切り替える方法としましては、hoverを使いbackground-imageを使うしかないと思います。 background-imageからbackground-imageへの切り替えは、できるのですが、今回の場合は、どうしてもhtml指定で、<img src="～">からの切り替えを行いたいです。 そもそも、html指定の、<img src="～">で画像を表示する場合、cssで切り替えれるものなのでしょうか? 出来る限り、cssでの切り替えをしたいと考えています。 どなたか、分かる方お願いします。
- ベストアンサー
- HTML
- スタイルシートで、背景画像が表示されない
スタイルシートで、背景画像（header.jpg'）を設定してるのですが表示されません。 --- style.css newpage5.html --- ｉｍｇ ┐ header.jpg スタイルシートは border-bottom: 1px solid #FF9900; background-image: url('img/header.jpg'); padding: 20px; ホームページビルダーでは、簡易表示されてるんですが アップロードすると、画像が表示されないのですが・・・ 以上宜しくお願いします。
- ベストアンサー
- HTML
- JPGE画像をphotoshopで保存するとき
JPGE画像をphotoshopで保存するとき、元の容量を軽々と超えるのは何故でしょうか？ photoshop ５を使っています。 画像編集ソフトはphotoshopしか使ったことがないので分かりませんし、 すべての画像編集ツールやがそういう仕様かどうかわかりませんが、 JPG(JPEG)画像をphotoshopで、何も弄らずに名前だけを変えて保存するとき 画質(Q)12の最高画質や低圧縮率でなどにして保存すると、元の画像のサイズより 遥かにサイズが大きくなるのは何故なのでしょうか？ 例えば200KB前後のjpg画像を、photoshopで読み込ませんて「別名で保存」を選択して、 保存するファイル形式に、元の画像の拡張子と同じ「JPGE」を選択します。 保存しようとすると「JPGEオプション」が出てきて、「画質オプションで」 ファイルを(大)の方にシークして、画質(Q)の数値を１２にしたとします。 すると保存後のファイルサイズが約６００KBになります。 なんの変更もしてないのに元のファイルサイズの約３倍です。 画質(Qの数値が９や１０でも、サイズが４００～５００KBになります。 （ちなみに元の画像はネットで拾ってきたものです。） いくら高画質(低圧縮率)で保存しても、元の画像より画質が良くなることはありませんよね。 何の編集もしてないにもかかわらず、画像編集ツールで保存しようとすると ただ無駄に容量だけ増えてしまうということですか？
- ベストアンサー
- その他（インターネット・Webサービス）
- firefoxでcssを使った時背景画像が表示されない
CSSでfloatを設定し、その中のそれぞれに背景画像を表示しようとすると、上手くいきません。 背景画像も背景色も表示されません。 構文に間違いがあるのでしょうか？ それともそのような仕様なのでしょうか？ よろしくお願いいたします。 ###CSS### #container { width: 900px; background-image: url(images/back.jpg); background-repeat: no-repeat; } #header { width: 900px; } #contents { width: 748px; background-color: #FFFFFF; background-image: url(images/image.jpg); background-repeat: no-repeat; background-position: top; padding: 0px; margin-left: 76px; } #footer { clear: both; width: 748px; margin-left: 76px; } #sidebar { float: left; background-image: url(images/side.jpg); width: 180px; margin-top: 14px; background-color: #FFFFFF; } #main { float: right; width: 568px; padding: 0px; background-color: #FFFFFF; background-image: url(../images/image2.jpg);
- 締切済み
- HTML
- 画像を 並べる
サイズの違う画像を並べているのですが、 サンブル通りにやると全て並んでしまいます。 3.4個おきに折り返したいのですが、cssを教えてください。 html <div class="flex-container"> <div class="flex-item"> <div class="image-wrap"> <img src="image1.jpg"> </div> </div> <div class="flex-item"> <div class="image-wrap"> <img src="image2.jpg"> </div> </div> <div class="flex-item"> <div class="image-wrap"> <img src="image3.jpg"> </div> </div> <div class="flex-item"> <div class="image-wrap"> <img src="image4.jpg"> </div> </div> </div> css htmlflex-container { display: flex; } .flex-item { flex-basis: 100%; } .image-wrap{ position: relative; overflow: hidden; padding-top: 60%; margin: 10px 5px; } .image-wrap img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; }
- ベストアンサー
- CSS
- 画像の上に、背景を表示させテキストを非表示させたdisplay:block;を表示させたい
よくliなどでテキストを非表示にさせ、背景画像を表示させたメニューがありますが、それを画像の上に表示させる方法を教えてください。 通常ならその画像をcssで背景画像に出来るのですが、 画像に順番ずつじんわり表示させるjavascriptの指示をしており、 その画像をcssで背景画像とするわけにいかないのです。 現在ですと、Dreamweaverのデザインプレビューだと正しい位置にdisplay:block;が存在するのですが、 実際にブラウザで確認すると、何も表示されていないように見えます。 下記がソースです。 よろしくお願いします。 ------------------------------------------------------------ 【HTML】 <div id="containerTop"> <div id="titleTop"> <h1><a href="index.html">タイトル</a></h1> <h2>サイト説明</h2> <ul> <li id="profile"><a href="#">プロフィール</a></li> <li id="photo"><a href="#">写真</a></li> <li id="blog"><a href="#">ブログ</a></li> <li id="contact"><a href="#">お問い合わせ</a></li> </ul> </div> <div id="topbgphoto" class="pics"> <img src="img/top/001.jpg" /> <img src="img/top/002.jpg" /> <img src="img/top/003.jpg" /> </div> </div> ------------------------------------------------------------ 【CSS】 /* container [ ----------------------------------------------------------- */ #containerTop { width:1024px; position:relative; margin:106px auto auto 0; } /* titleTop [ ----------------------------------------------------------- */ #titleTop { width:661px; position: absolute; top: 241px; left: 0px; height: 138px; } #titleTop h1 a{ display:block; text-decoration:none; text-indent:-7777px; width:246px; height:24px; position: absolute; top: 25px; left: 370px; padding:0; font-size:12px; } #titleTop h2{ display:block; text-decoration:none; text-indent:-7777px; width:310px; height:16px; position: absolute; top: 70px; left: 304px; padding:0; font-size:12px; } /* menu [ ----------------------------------------------------------- */ #titleTop ul { position: absolute; top: 87px; left: 0x; padding:0px; list-style:none; } #titleTop li { } #titleTop li a { display:block; text-decoration:none; text-indent:-7777px; height:17px; width:59px; } #titleTop li a:hover { background-image: url(../img/top/menu_ov.jpg); } #titleTop li#profile a{ background-position: 0 0; position: absolute; top:17px; left:344px;} #titleTop li#photo a{ background-position: -70px 0; position: absolute; top:17px; left:414px;} #titleTop li#blog a{ background-position: -140px 0; position: absolute; top:17px; left:484px;} #titleTop li#contact a{ background-position: -210px 0; position: absolute; top:17px; left:554px;} /* ゆっくり表示させる背景画像 [ ----------------------------------------------------------- */ .pics { width:1024px; height:587px; padding: 0; margin: 0; }
- ベストアンサー
- HTML
お礼
ありがとうございます お示しのリンク先 何処をどう弄るのか私のスキルでは理解できません 虫の良い話ですが このまんまコピペしろという様なスクリプト期待しております ＞そこまでする意味あるかな？ 確かに高画質ディスプレイの普及はまだまだでしょうから 自己中、自己満足の欲求ですね