iPod touch活用術!

iPod touchの活用法、おすすめアプリやアクセサリのレビューなど、iPod touchに関することだけ紹介する情報サイト(たまにiPhone話も)

セール中
アプリを探す
価格から
アプリを探す
ランキングから
アプリを探す
レビューをみて
アプリを探す
  1. iPod touch活用術!
  2. iPod コラム一覧
  3. No.015 WEBサイトでスクリーンショットを美しく表示する
No.015 WEBサイトでスクリーンショットを美しく表示するをはてなブックマークに追加 はてなブックマーク - No.015 WEBサイトでスクリーンショットを美しく表示する No.015 WEBサイトでスクリーンショットを美しく表示するをYahoo!ブックマークに追加 No.015 WEBサイトでスクリーンショットを美しく表示する

iPod touch/iPhoneのスクリーンショットを美しくHTMLで表示する

シリーズで、iPod touchの便利な使い方やTIPSを紹介していきたいと思います。
今回はその第15回です。

今回は便利な使い方というより、BlogやWEBサイトでのHTML記述に関するもので、 iPhone/iPod touchのアプリレビューを書く人にとってのTIPSです。

iPod touchのスクリーンショットは、iPod touchの画面をきれいに保存するには?で 紹介しましたが、それをただWEBに貼り付けるだけでなく、本体の画像もつけて表示させてみます。

方法

まずは本体の画像を用意します。
今回は、以下のサイトにある画像を使わせてもらいました。
http://www.designerstoolbox.com/designresources/iphone/


(幅300pxに縮小して表示しています。元の画像サイズは幅550pxです。)

この画像の画面部分にスクリーンショットをうまく重ね合わせる、ということをします。

具体的には、CSSのbackground-imagesを利用し、上記画像を背景にしたブロックを作り、その中にスクリーンショットを表示させます。
スクリーンショットの画像位置はmargin-left、margin-topで調整します。

具体的には以下の通りです。

CSS
.iphone_ss {
width:550px; ←背景画像の幅
height:842px; ←背景画像の高さ
background-image: url("背景画像のURL");
}
.iphone_ss img{
margin-left:117px; ←スクリーンショットの左マージン
margin-top:141px; ←スクリーンショットの上マージン
}

HTML
<div class="iphone_ss">
<img src="スクリーンショットの画像">
</div>

実際の表示サンプル

関連するページ


コラム 一覧に戻る>>


iPod touch・iPhone用グッツ

iPod touchを安く買うには?

  • Apple Store限定 お得な整備済みiPod

    Appleによる、リサイクル商品。新品水準並みの品質を確認したアップルお墨付きです。新製品同様、1年間の特別保証書が付きます。これはお得です!

iPod touch・iPhoneリンク集

アクセスランキング(ipod コラム)

人気コラム一覧

Facebook

スポンサードリンク

このサイトについて


最近のトラックバック


検索

Powered by
Movable Type 4.21-ja

lolipop Rental Server


カレンダー

2012年4月
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30          
あわせて読みたいブログパーツ