--- title: "純粋な HTML 5 + CSS 3 で iPhone 6 のモデルを描く - 憂いを忘れる一枚" description: "B站で、純粋なコードを使って iPhone のレンダリング画像を描いた HTML5 作品を見かけました。とても面白いと思ったので、みなさんの参考になればと思い、紹介します。まずは完成イメージをご覧ください：" canonical_url: "https://www.ikxin.com/ja/article/html-css-iphone6-model" last_updated: "2026-09-16T09:59:27.259Z" locale: ja meta: "og:description": "B站で、純粋なコードを使って iPhone のレンダリング画像を描いた HTML5 作品を見かけました。とても面白いと思ったので、みなさんの参考になればと思い、紹介します。まずは完成イメージをご覧ください：" "og:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~57SU57KL44GqIEhUTUwgNSArIENTUyAzIOOBpyBpUGhvbmUgNiDjga7jg6Ljg4fjg6vjgpLmj4~jgY8gLSDmhoLjgYTjgpLlv5jjgozjgovkuIDmnpo%2Cc_Article%2Ctitle_~57SU57KL44GqIEhUTUwgNSArIENTUyAzIOOBpyBpUGhvbmUgNiDjga7jg6Ljg4fjg6vjgpLmj4~jgY8%2Cdescription_~QuermeOBp-OAgee0lOeyi-OBquOCs-ODvOODieOCkuS9v-OBo-OBpiBpUGhvbmUg44Gu44Os44Oz44OA44Oq44Oz44Kw55S75YOP44KS5o-P44GE44GfIEhUTUw1IOS9nOWTgeOCkuimi-OBi-OBkeOBvuOBl-OBn-OAguOBqOOBpuOCgumdoueZveOBhOOBqOaAneOBo-OBn-OBruOBp-OAgeOBv-OBquOBleOCk-OBruWPguiAg-OBq-OBquOCjOOBsOOBqOaAneOBhOOAgee0ueS7i-OBl-OBvuOBmeOAguOBvuOBmuOBr-WujOaIkOOCpOODoeODvOOCuOOCkuOBlOimp-OBj-OBoOOBleOBhO-8mg%2CsiteName_~5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2CsiteHost_www.ikxin.com%2Cp_Ii9qYS9hcnRpY2xlL2h0bWwtY3NzLWlwaG9uZTYtbW9kZWwi%2Cs_IAIJu4tvPjF39aVJ.png" "og:image:alt": "純粋な HTML 5 + CSS 3 で iPhone 6 のモデルを描く - 憂いを忘れる一枚" "og:image:height": "630" "og:image:type": image/png "og:image:width": "1200" "og:title": "純粋な HTML 5 + CSS 3 で iPhone 6 のモデルを描く" "twitter:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~57SU57KL44GqIEhUTUwgNSArIENTUyAzIOOBpyBpUGhvbmUgNiDjga7jg6Ljg4fjg6vjgpLmj4~jgY8gLSDmhoLjgYTjgpLlv5jjgozjgovkuIDmnpo%2Cc_Article%2Ctitle_~57SU57KL44GqIEhUTUwgNSArIENTUyAzIOOBpyBpUGhvbmUgNiDjga7jg6Ljg4fjg6vjgpLmj4~jgY8%2Cdescription_~QuermeOBp-OAgee0lOeyi-OBquOCs-ODvOODieOCkuS9v-OBo-OBpiBpUGhvbmUg44Gu44Os44Oz44OA44Oq44Oz44Kw55S75YOP44KS5o-P44GE44GfIEhUTUw1IOS9nOWTgeOCkuimi-OBi-OBkeOBvuOBl-OBn-OAguOBqOOBpuOCgumdoueZveOBhOOBqOaAneOBo-OBn-OBruOBp-OAgeOBv-OBquOBleOCk-OBruWPguiAg-OBq-OBquOCjOOBsOOBqOaAneOBhOOAgee0ueS7i-OBl-OBvuOBmeOAguOBvuOBmuOBr-WujOaIkOOCpOODoeODvOOCuOOCkuOBlOimp-OBj-OBoOOBleOBhO-8mg%2CsiteName_~5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2CsiteHost_www.ikxin.com%2Cp_Ii9qYS9hcnRpY2xlL2h0bWwtY3NzLWlwaG9uZTYtbW9kZWwi%2Cs_IAIJu4tvPjF39aVJ.png" "twitter:image:alt": "純粋な HTML 5 + CSS 3 で iPhone 6 のモデルを描く - 憂いを忘れる一枚" --- > Index of every page on this site: [llms.txt](https://www.ikxin.com/llms.txt) # **純粋な HTML 5 + CSS 3 で iPhone 6 のモデルを描く** 2017.07.11 4,331 0 B站で、純粋なコードを使って iPhone のレンダリング画像を描いた HTML5 作品を見かけました。とても面白いと思ったので、みなさんの参考になればと思い、紹介します。まずは完成イメージをご覧ください： ![完成イメージ](https://www.ikxin.com/_ipx/animated_true&w_1734&f_webp/https://img.8b5.cn/2019/06/25/5d11dac82c0e0.png) コードは 60 行近くありますが、実際には 60 行にも満たず、すべて純粋なコードで書かれており、画像素材は一切使っていません。バッテリーアイコンや電波アイコンも同様です。本来、上部のステータスバー中央には小さなロックアイコンを置く予定でしたが、手間がかかるため、ハートの記号で代用しました。HTML を学び始めてまだ間もないため、文法が少し冗長な部分も多く、もう少し簡潔にすれば、おそらく 10％ほど縮小できると思います。以下にコードを掲載します： HTML ``` iPhone 6 演示 | 夜色静好
4G
49% ♥
15:29
6 月 4 日 星期日
丁酉年五月初十
``` ## **コメント** (0) まだコメントはありません ## **コメントを投稿** ```json {"@context":"https://schema.org","@graph":[{"@id":"https://www.ikxin.com/ja#website","@type":"WebSite","description":"「憂いを忘れる一枚」は、技術探究と日々の暮らしをテーマにした個人サイトです。Web 開発、バックエンド、DevOps の実践を記録し、ソフトウェアツールやデジタル体験、コードの外で得た見聞と思索を共有します。","inLanguage":"ja-JP","name":"憂いを忘れる一枚","url":"https://www.ikxin.com/ja","translationOfWork":{"@id":"https://www.ikxin.com/#website"}},{"@id":"https://www.ikxin.com/ja/article/html-css-iphone6-model#webpage","@type":"WebPage","description":"B站で、純粋なコードを使って iPhone のレンダリング画像を描いた HTML5 作品を見かけました。とても面白いと思ったので、みなさんの参考になればと思い、紹介します。まずは完成イメージをご覧ください：","name":"純粋な HTML 5 + CSS 3 で iPhone 6 のモデルを描く","url":"https://www.ikxin.com/ja/article/html-css-iphone6-model","isPartOf":{"@id":"https://www.ikxin.com/ja#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ikxin.com/ja/article/html-css-iphone6-model"]}]}]} ``` ## Sitemap See the full [sitemap](https://www.ikxin.com/sitemap.md) for all pages.