しんぷるハック

Apple WatchのスクリーンショットをCSSでいい感じにしてみる

カテゴリ:

CSS

投稿日:2015年04月25日 08:42 投稿者:管理人

Apple Watchのスクリーンショットをブログにそのまま貼るとなんともダサい感じになります。

これがそのまま貼ったやつ↓

Apple WatchのスクリーンショットはCSSで手を加えないと超絶ダサくなる

なんか間抜けに縦長&馬面みたいでダサい。実際にApple Watchで見る画面ともかけ離れていて、イメージしにくい。

Apple Watchのユーザーガイドを見ると上手く加工してあります。
Apple WatchのスクリーンショットはCSSで手を加えないと超絶ダサくなる
いちいち画像を加工するのはめんどうなのでCSSで加工してやるのがいいでしょう。

こんな感じになります。
Apple WatchのスクリーンショットはCSSで手を加えないと超絶ダサくなる

ソースはこんな感じで
<div class="apple-watch-img">
<img src="apple-watch.jpg" alt="Apple Watch" />
</div>

/* スクリーンショットに黒背景・余白を足す */
div.apple-watch-img {
width: 370px; /* ①好みで数値を変えましょう */
height: 420px; /* ②好みで数値を変えましょう */
margin: 0 auto; /* 画像を真ん中に寄せたいのであれば */
border-radius: 40px;
background: #000000;
}

/* スクリーンショットを黒背景の真ん中へ */
div.apple-watch-img img {
width: 300px; /* ③好みで数値を変えましょう */
height: 375px; /* ④好みで数値を変えましょう ※③と④は縦横比を元のサイズ(312×390)からあまり変えないように */
border: initial;
position: relative;
top: 23px; /* ②-④/2で真ん中にくるように */
left: 35px; /* ②―③/2で真ん中に来るように */
}

こんなエントリーもどうですか?
©しんぷるハック All Rights Reserved.