Cliphttps://creatorclip.info/このブログについてプロフィールお問い合わせTwitterFacebookはてなブックマークFeedlyPush7ホームWEB制作CSSHTMLとCSSのみでiOS7を作るCSSHTMLとCSSのみでiOS7を作る4502002014/04/01ライター:鹿エイプリールフールのネタとして作成したブラウザからiOS7が使えるようになりました。ご覧頂けたでしょうか。エイプリールフールも終わってしまうので、解説をしたいと思います。ブラウザからiOS7が使えるようになりました。ε:)1.こんなページを作りました2.仕組み2.1.画面のON・OFF2.2.ロック画面2.3.音量ダイアログ3.まとめこんなページを作りましたHTMLとCSSをフル活用して画像とJavascriptを使わないで作成しました。CSSプログラミングと言われているものを作ってみました。正月明けてから少しずつ作成していたので制作日数は約3ヶ月です。ページを表示すると、左から右へスライドしながらホーム画面が出現します。右上のスリープボタンを押すと画面が消えます。再度スリープボタンを押すと画面が点灯し、ロック画面が現れます。「スライドでロック解除」は本物同様に左から右へアニメーションしています。この部分をクリックすると、ロック画面がスライドしながらフェードアウトし、ホーム画面がフェードインで切り替わります。ロック画面やホーム画面で通知領域の部分にマウスオーバーすると、通知センターがアニメーションしながら降りてきます。画面の下側をマウスオーバーすると、コントロールセンターが下から上にアニメーションして出てきます。ホームボタンを押すと、アイコンがアニメーションしながら元の位置に移動します。サイドの音量ボタンを押すと音量のダイアログが出てきます。アイコンなどは全てCSSやウェブフォントで作られているので、どんだけ拡大しても荒れることはありません。CodePenやWebフォントをお借りしていたり、力業で自分で作っていたりしているので解説は省略します。画面のON・OFF画面のON・OFFは:targetで行っています。このようなhtml構造になっています。--></div>ディスプレイを作っている<div>には.displayと付いており、それぞれパーツごとにid名が割り振られています。.display全体を#displayWrapで内包しており、その下に画面を動かすための.btnがあります。ホーム画面が表示されているときにスリープボタンを押すと画面が消える仕組みを作りたい場合、このように組みます。class="displayOff">off</a>がクリックされた時のスタイルを指定します。ディスプレイのON・OFFボタンは隣接セレクを使ってボタンの表示・非表示を切り替えています。意外と知らない!?CSSセレクタ20個のおさらい|Webparkロック画面ロック解除の表示やスライド動作などはこのようなCSSで対応しています。1px);}}画面を点灯する動作とロック解除をするための動作を分けてCSSで指定しています。画面の点灯は大枠の#lockがクリックされたとき、ロック解除は#lockSlideがクリックされたときに作動するようにしています。jQueryであればわざわざ分けて指定する必要もないと思いますが、CSSだと一度に複数の要素を動かす事が難しいということが勉強になりました。スライド動作は「translate3d」で指定しました。positionで指定してもよかったのですが、スマホで動作が重くなってしまうので前者を使っています。以前スマホサイトの制作例の記事を作成した時に説明しております。Clipホームボタンを押した時にアイコンが中心に集まってくる動作も、アイコンごとにtranslate3dを指定して中心に移動させています。アイコンの数が多い分、調整が苦労しました...orz音量ダイアログサイドにある音量キーを押した時の動作は「:checked」で指定しています。ホーム画面の<div>の中に#alarmAleatを作成し、表示・非表示をチェックボックスで切り替えています。*/display:block;}まとめ今回初めてCSSプログラミングというものを作成したのですが、これはなかなか頭使いますね...jQueryなどと違ってセレクタを上手に使わないとうまく反映してくれません。沖縄ワイモバイルでNexus5が投げ売り中。mobile、ワイモバイルに続く「UQゼロ学割」を発表。3月末まで基本料金0円、データ容量がずっと2倍に。鹿このブログを管理している鹿。Webデザインとガジェットが好き。Meこのブログを運営している”自称”カワイイ鹿。フロントエンドエンジニアを目指して勉強しているなかで、スマートフォンやタブレットなどのモバイルガジェットを集めています。Tabletに代わる防水タブレットが出てこない。Wifiの3年使用レビュー。Simsellerで「梅の花満開!ウインターセール」を開催中。キャンペーン2020」で事務手数料無料+SIMのみプランが激安価格で申し込める!Satechiの電流・電圧チェッカー「ST-TCPM」レビュー。UBOOM」レビュー。Clip(クリエイタークリップ)は、ウェブデザインやガジェットについて書いているブログです。フロントエンドエンジニアを目指して勉強しているなかで、スマートフォンやタブレットなどのモバイルガジェットを集めています。ClipHOMEABOUTPROFILECONTACT。