CSSで雑にiPhoneを描いてみる
こんにちは。桜が見頃ですね。
なにか楽しいことをしたいと思い、CodePenを開きました。CSSの上達のために何でもいいからやろうと思い、手元にiPhoneがあったのでそれをCSSで描くことにしました。
取り組み方
とにかくまずは雑にやってみようと思いました。そのため、iPhoneの仕様さえ見ずに、てきとうにiPhoneの画像を検索してChromeの別タブで開いて、それをCmd + Shift + 4で幅と高さのピクセルがいくつかをざっくり見ながら、CSSに書き起こしていきました。
ただ、せっかくCSSでやるのだからpx指定だと面白くない。なので、スクリーンの90%（90vh）をiPhoneの高さとして、これをベースに幅を出し、さらにこれをもとにほかの要素の幅と高さをひたすらCSSのcalc()で出していく形にしました。こうすることで、iPhoneが常にスクリーン内に収まります。だからなんだよという感じですが。
できたもの
こんな感じになりました。のぺっとしたiPhone(?)の出来上がりです。iPhone好きから怒られそうです。色々と足りていません。
とはいえせっかくできたので雰囲気を出すために、ホームボタンを押すとスクリーンが明るくなり自分のブログが表示されるようにして、ブラウジングしてる雰囲気を出すなどしてごまかしました。
学び
たったこれだけでも、CSSのちょっとしたテクニックというか慣用句みたいなのをいくつか練習できました。
leftプロパティとtransformプロパティを使ったX方向の中央寄せ
なにかを中央寄せにしたいときはflexboxのjustify-content:center; align-items: center;とかをよく使いますが、何らかの都合で親要素ではなく中央に持っていきたい要素そのものに指定して中央寄せにしたいときがあります。今回がそれでした。
position: absolute; left: 50%; transform: translateX(-50%);
こんな感じで、左から50%の位置に持ってきて、transformプロパティで自身の半分位置をずらすことで、ちゃんと中央になります。今後もよく使いそう。
親要素にposition: relative; 子要素にposition: absolute
これもよく使うやつでした。思えばなんでこう書くんだろなという感じのまま長年使っているのですが。親からの距離で子要素を配置したいときに使えるやつですね。
ひとこと
こういうのは時々やると楽しいので、自分にもできそうな題材を見つけてちょこちょこと続けていきたいです。