[CSS] 1つのdiv要素だけでゲームボーイを再現してみた

暇だったので、CSSグラデーションの勉強がてら、1つのdiv要素にCSSだけでゲームボーイ本体を再現してみました。画像を使わずにほぼCSSだけでやっています(テキストの部分だけ画像を使用しました)。

CSSでゲームボーイを再現

ここに表示させることはできないので、以下のリンク先ページにコードごと掲載しています。

CSSは、あまりにも長すぎるため、よく確認できず、変なところがあるかもしれません。また、あまりにも長くなりすぎてしまうため、ベンダープレフィックスは割愛しています。

ブラウザは、Chrome、Safari、Firefoxのそれぞれ最新版とIE11で問題なく表示されていることを確認しています。ただ、環境によってはきれいに表示されないかもしれません。特にwindowsの場合。

主にCSSのグラデーションを使って表現しています。CSSのグラデーションは、ブラウザによってはあまりきれいに表示されなかったりして、ちょっとまだ不安定な感じで残念なんですけど、使い方次第で様々な表現ができるので、ぜひ扱い方を覚えておきたいと思っていました。

当然、使ったことはあったんですけど、不安というか、苦手意識があったんですよね。

見ての通り、普通のグラデーションの使い方をしていないので、勉強になったのかどうかあれですけど、とにかくいっぱい書いたので、仕組みや書き方等は理解できたと思います、多分。

ブラウザの対応の問題もありますが、モダンブラウザではほぼ問題ないので、これから積極的に使っていきたいですね。

全てまとめて記載してしまうこともできたんですが、少しだけ楽をする為に、before疑似要素も使っています。スクリーンの部分がそうです。

細かいところを再現できなかったり、ボタンの影とか難しすぎて断念したりで、ややリアリティにかけますが、初めてなのでということで。。。

なんでゲームボーイにしたのか自分でもよく分からないんですけど、たまたま目について簡単そうだったので。ゲームボーイに思い入れはないものの、初代ゲームボーイを買ってもらった少年時代を思い出し、少し感慨に浸っています。