個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

iPhoneもMacも簡単OK!CSSだけであなただけのAppleデバイスを描ける無料ジェネレーター「Pure CSS Apple Device Generator」

iPhoneもMacも簡単OK!CSSだけであなただけのAppleデバイスを描ける無料ジェネレーター「Pure CSS Apple Device Generator」

CSSだけでAppleデバイスを描ける無料ジェネレーター「Pure CSS Apple Device Generator」をご紹介。
このジェネレーターを使えば、iPhoneもiMacも、MacBookもすぐに描くことができます。
サイトやアプリなどで、画像を利用しないでAppleデバイスを表示したい場合などに活躍してくれそうです。

CSSだけであなただけのAppleデバイスを描ける無料ジェネレーター「Pure CSS Apple Device Generator」

「Pure CSS Apple Device Generator」は、CSSだけでiPhoneやiMac、MacBookなどのAppleデバイスを描くことができる無料のジェネレーターです。
使い方も簡単で、デバイスタイプを選択し、サイズを入力して、モニター画面の色を選ぶだけ。

iPhoneもMacも簡単OK!CSSだけであなただけのAppleデバイスを描ける無料ジェネレーター「Pure CSS Apple Device Generator」

気に入ったデバイスが描画されたら、画面上の「SHOW CODE」を押せば、HTMLとCSSが表示されるので、コピーして利用します。

iPhoneもMacも簡単OK!CSSだけであなただけのAppleデバイスを描ける無料ジェネレーター「Pure CSS Apple Device Generator」

コードを改変して利用すれば、画面上にスライダーを実装したりといったこともできます。
そうしたアイディアについては、メニューの「Example」に掲載されているので、ご興味があるかはそちらをご覧ください。

iPhoneもMacも簡単OK!CSSだけであなただけのAppleデバイスを描ける無料ジェネレーター「Pure CSS Apple Device Generator」

またメニューの「Device Info」というページをみると、Appleの各デバイスの詳細なサイズが表記されています。
「Ratio Calculation」という空欄に制作したい描画のサイズを入力すると、各デバイスのサイズが瞬時に表示されるので、制作の際の参考になります。

iPhoneもMacも簡単OK!CSSだけであなただけのAppleデバイスを描ける無料ジェネレーター「Pure CSS Apple Device Generator」

Pure CSS Apple Device Generator

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 1
  • 3

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

文字をカラフルに!CSSとjQueryでテキストを2〜3色で表現してしまう「HalfStyle」

CSS3やWEBフォントの登場でテキスト回りの装飾がお手軽になってきましたが、1文字をだけを2〜3色

記事を読む

インパクト大!Gmailに一瞬にしてGIFアニメーションを添付できるChrome機能拡張「Gmail GifLine」

インパクト大!Gmailに一瞬にしてGIFアニメーションを添付できるChrome機能拡張「Gmail GifLine」

Gmailに一瞬にしてGIFアニメーションを添付できるChrome機能拡張をご紹介します。 メール

記事を読む

CSSボタンの参考になる!CSSでつくられたボタンが100以上コレクションされている「CSS Buttons」

CSSボタンのコピペに!CSSでつくられたボタンのコードが100以上コレクションされている「CSS Buttons」

CSSボタンの参考やコピペに使える、とても参考になるCSSボタンのコードがコレクションされているサイ

記事を読む

トップ固定でレスポンシブ対応のナビゲーション/メニューを簡単に実装できる「Fixed Nav」

トップ固定で、レスポンシブ対応のナビゲーションが増えていますね。 これだけ増えてくると、トップ固定

記事を読む

レスポンシブ対応のコンテンツスライダー/スライドショーベスト8

以前の記事「レスポンシブ対応などコンテンツスライダー/スライドショー用jQueryプラグイン50+」

記事を読む

CSSだけで作られた決済代行・クレジット決済サービスアイコン95種「PaymentFont」WEBフォントしても使える!

CSSだけで作られた決済代行・クレジット決済サービスの無料アイコン95種「PaymentFont」WEBフォントしても使える!

CSSだけで作られた決済代行・クレジット決済サービスの無料アイコンセットをご紹介します。 ピュアC

記事を読む

いまさら聞けない無料のアイコンフォントの導入の仕方・使い方

アイコンフォントを今頃になってようやく使ってみました。 最初は正直よくわからず、戸惑ってしまいまし

記事を読む

SVGベースのオリジナルなシームレスパターンを作ってダウンロードできる「Plain Pattern」

SVGベースのオリジナルなシームレスパターンを作ってダウンロードできる「Plain Pattern」

今回ご紹介するのはSVGベースのシームレスパターンを簡単につくれて、PNG形式でダウンロードできてし

記事を読む

スクロールした位置についてくるStickyプラグイン15

スクロールした位置についてくるStickyプラグイン15

スクロールした位置についてくる要素を実装するjQueryプラグイン「Stickyプラグイン」をまとめ

記事を読む

レスポンシブWEBデザイン対応のメニューが作れるチュートリアル17(ソースファイル付き)

レスポンシブWEBデザインを行ううえで重要になってくるのがメニューをどのようにするかということではな

記事を読む