HTMLとCSSのみでiOS7を作る
エイプリールフールのネタとして作成したブラウザからiOS7が使えるようになりました。はご覧頂けたでしょうか。もう少しでエイプリールフールも終わってしまうので、解説をしたいと思います。
※本ページは広告・アフィリエイトプログラムにより収益を得ています。
- 目次で流し読みする ･*･:≡( ε:)
こんなページを作りました
HTMLとCSSをフル活用して画像とJavascriptを使わないで作成しました。CSSプログラミングと言われているものを作ってみました。正月明けてから少しずつ作成していたので制作日数は約3ヶ月です。
ページを表示すると、左から右へスライドしながらホーム画面が出現します。
右上のスリープボタンを押すと画面が消えます。
再度スリープボタンを押すと画面が点灯し、ロック画面が現れます。
「スライドでロック解除」は本物同様に左から右へアニメーションしています。この部分をクリックすると、ロック画面がスライドしながらフェードアウトし、ホーム画面がフェードインで切り替わります。
ロック画面やホーム画面で通知領域の部分にマウスオーバーすると、通知センターがアニメーションしながら降りてきます。
画面の下側をマウスオーバーすると、コントロールセンターが下から上にアニメーションして出てきます。
ホームボタンを押すと、アイコンがアニメーションしながら元の位置に移動します。
サイドの音量ボタンを押すと音量のダイアログが出てきます。
アイコンなどは全てCSSやウェブフォントで作られているので、どんだけ拡大しても荒れることはありません。
仕組み
アイコンはiOS 7 icons with pure CSS – CodePenやWebフォントをお借りしていたり、力業で自分で作っていたりしているので解説は省略します。
画面のON・OFF
画面のON・OFFは:targetで行っています。このようなhtml構造になっています。
<div id="displayWrap" class="clearfix">
<!-- =====================================================
画面オフ
====================================================== -->
<div id="off" class="display"></div><!-- off -->
<!-- =====================================================
ロック画面
====================================================== -->
<div id="lock" class="display">
<div id="lockSlide">
〜省略〜
<!-- / #lockSlide --></div>
<!-- / #lock .display --></div>
<!-- =====================================================
ホーム画面
====================================================== -->
<div id="home" class="display">
<div id="homeInner">
<!-- / #homeInner --></div>
<!-- / #home .display --></div>
<!-- =====================================================
通知センター
====================================================== -->
<div id="notificationCenter" class="display">
〜省略〜
<!-- / #notificationCenter .display --></div>
<!-- =====================================================
コントロールセンター
====================================================== -->
<div class="display">
<div id="controlCenter">
〜省略〜
<!-- / #controlCenter --></div>
<!-- / .display --></div>
<div class="btn">
<a href="#lock" class="displayOn">on</a>
<a href="#off" class="displayOff">off</a>
<!-- / .btn --></div>
<!-- #displayWrap --></div>
<!-- =====================================================
ホームボタン
====================================================== -->
<div id="homeBtn">
<a href="#homeInner"> </a>
<!-- / #homeBtn --></div>
<!-- / #iPhone5s --></div>
ディスプレイを作っている<div>には.displayと付いており、それぞれパーツごとにid名が割り振られています。.display全体を#displayWrapで内包しており、その下に画面を動かすための.btnがあります。
ホーム画面が表示されているときにスリープボタンを押すと画面が消える仕組みを作りたい場合、このように組みます。
/* ===================================================
ディスプレイ画面オフ
=================================================== */
#off {
opacity:0; /* 最初は透明にしておく */
z-index:-1; /* 最初は後ろに隠しておく */
background-color:#333333;
}
/* ==========================
ボタン押下時動作
========================== */
/* 画面消灯 */
#off:target {
opacity:1 !important; /* 不透明度を100%に */
z-index:9999 !important; /* 一番前に持ってくる */
}
#off:target ~ .btn .displayOn {
display:block; /* 表示する */
z-index:9999; /* 一番前に持ってくる */
}
#off:target ~ .btn .displayOff {
display:none; /* 非表示にする */
}
#offで通常時のスタイルを指定し、#off:targetで<a href="#off" class="displayOff">off</a>がクリックされた時のスタイルを指定します。
ディスプレイのON・OFFボタンは隣接セレクを使ってボタンの表示・非表示を切り替えています。
意外と知らない!?CSSセレクタ20個のおさらい｜Webpark
ロック画面
ロック解除の表示やスライド動作などはこのようなCSSで対応しています。
/* ===================================================
ディスプレイロック画面
=================================================== */
#lock {
overflow:hidden; /* はみ出した要素を非表示 */
opacity:0; /* 最初は透明にしておく */
z-index:-1; /* 最初は後ろに隠しておく */
/* CSS transitionでアニメーション動作 */
-webkit-transition-duration:1s;
-moz-transition-duration:1s;
-ms-transition-duration:1s;
transition-duration:1s;
}
/* 画面点灯 */
#lock:target {
opacity:1 !important; /* 不透明度を100%に */
z-index:3000 !important; /* 前に持ってくる */
/* 点灯時はアニメーションしない */
-webkit-transition-duration:0;
-moz-transition-duration:0;
-ms-transition-duration:0;
transition-duration:0;
}
#lock:target ~ .btn .displayOn {
display:none; /* ONボタンを非表示 */
}
#lock:target ~ .btn .displayOff {
display:block; /* OFFボタンを表示 */
z-index:9999; /* 一番上に持ってくる */
}
/* ロック解除 */
#lockSlide:target {
/* CSS3アニメーションで1秒間掛けてアニメーションする */
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-name: unlock;
-webkit-animation-name: unlock;
}
/* CSS3草案 */
@keyframes unlock {
from {
/* 現在位置から */
-webkit-transform: translate3d(0, 0px, 1px);
-moz-transform: translate3d(0, 0px, 1px);
transform: translate3d(0, 0px, 1px);
}
to {
/* 画面の幅だけ右にずれる */
-webkit-transform: translate3d(100%, 0px, 1px);
-moz-transform: translate3d(100%, 0px, 1px);
transform: translate3d(100%, 0px, 1px);
}
}
/* Webkit向け */
@-webkit-keyframes unlock {
from {
/* 現在位置から */
-webkit-transform: translate3d(0, 0px, 1px);
-moz-transform: translate3d(0, 0px, 1px);
transform: translate3d(0, 0px, 1px);
}
to {
/* 画面の幅だけ右にずれる */
-webkit-transform: translate3d(100%, 0px, 1px);
-moz-transform: translate3d(100%, 0px, 1px);
transform: translate3d(100%, 0px, 1px);
}
}
画面を点灯する動作とロック解除をするための動作を分けてCSSで指定しています。画面の点灯は大枠の#lockがクリックされたとき、ロック解除は#lockSlideがクリックされたときに作動するようにしています。jQueryであればわざわざ分けて指定する必要もないと思いますが、CSSだと一度に複数の要素を動かす事が難しいということが勉強になりました。
スライド動作は「translate3d」で指定しました。positionで指定してもよかったのですが、スマホで動作が重くなってしまうので前者を使っています。以前スマホサイトの制作例の記事を作成した時に説明しております。
CSS3とjQueryを使ったスマホサイト作成テクニック | Creator Clip
ホームボタンを押した時にアイコンが中心に集まってくる動作も、アイコンごとにtranslate3dを指定して中心に移動させています。アイコンの数が多い分、調整が苦労しました…orz
音量ダイアログ
サイドにある音量キーを押した時の動作は「:checked」で指定しています。ホーム画面の<div>の中に#alarmAleatを作成し、表示・非表示をチェックボックスで切り替えています。
<!-- =====================================================
ボタン・センサー
====================================================== -->
<div id="lockBtn"></div>
<div id="silent"><label for="volume"> </label></div>
<div id="plus" class="volume"><label for="volume"> </label></div>
<div id="minus" class="volume"><label for="volume"> </label></div>
<!-- =====================================================
ホーム画面
====================================================== -->
<div id="home" class="display">
<div id="homeInner">
<input type="checkbox" name="volume" id="volume">
<div id="volumeAleat">
<div id="volumeAleatInner">
<p>Volume</p>
<i class="fa fa-bell-o"></i>
<span></span>
<!-- / #volumeAleatInner --></div>
<!-- / #volumeAleat --></div>
<!-- / #homeInner --></div>
<!-- / #home .display --></div>
/* ボリュームキー押下 */
#volumeAleat {
display:none; /* 最初は非表示 */
/* positionで絶対配置 */
position:absolute;
top:50%;
left:50%;
/* 見た目の調整 */
width:200px;
height:200px;
margin:-100px 0 0 -100px;
background:rgba(255,255,255,0.8);
text-align:center;
-webkit-border-radius:25px;
-moz-border-radius:25px;
border-radius:25px;
z-index:9999; /* 一番前に持ってくる */
}
/* ボリューム目盛り */
#volumeAleat span {
position:absolute;
top:160px;
left:47px;
display:block;
width:6px;
height:6px;
background:#333;
/* box-shadowで同じサイズの■を増やす */
box-shadow:8px 0 0 #333,16px 0 0 #333,24px 0 0 #333,32px 0 0 #333,40px 0 0 #fff,48px 0 0 #fff,56px 0 0 #fff,64px 0 0 #fff,72px 0 0 #fff,80px 0 0 #fff,88px 0 0 #fff,96px 0 0 #fff,104px 0 0 #fff;
}
#volume {
display:none; /* チェックボックスを非表示 */
}
.volume label,
#volume:checked + #volumeAleat {
/* 音量ラベルをブロック要素に
音量ダイアログを表示 */
display:block;
}
まとめ
今回初めてCSSプログラミングというものを作成したのですが、これはなかなか頭使いますね…jQueryなどと違ってセレクタを上手に使わないとうまく反映してくれません。html構造やCSSの指定を何度も変えながらどうにか完成したので、出来た時の達成感は何とも言えないですね！皆さんもぜひチャレンジしてみませんか？
