「(HTML) + CSS」のみを使って、今「リアルな電卓」を作ってみた - Qiita

続編を書きました。CSSも大幅改善してるので、一度見てみてください。 【小数点実装】「(HTML +) CSS」のみを使って、今「もっとリアルな電卓」を作ってみた - Qiita 完成品 まずは、CodePenで完成品を紹介します。ボタンを押して計算を試してみてください。 ※ スマホだと反応が悪い場合があります。 See the Pen qiita_calc_last by j5c8k6m8 (@j5c8k6m8) on CodePen. はじめに はじめて、CSS カウンター の存在をはじめて知ったときは驚きました。 テーブルの行番号は (必要であればJavaScriptで動的に) HTMLに記載するしか方法がない と思っていたからです。 Qiitaにも、CSSカウンターのサンプルを載せた良記事があります。 CSS でテーブルに行番号を振る - Qiita CSSで見出しタグに連番をつけ

[miki3k]

ちゃんと電卓としてのデザインをしているところが良いですね

[TakamoriTarou]

普通に解説記事としても優れているのがなんかくやしい（何

[TERRAZI]

技術の無駄遣いだｗ

[Silica]

マリオメーカー計算機よりはわかる

[kanehama]

ストックはしないけど、LGTM押すやつのいい例だった。

[ifttt]

次は小数点の実装よろしくな！

[tsuki-rs]

リアルな電卓をCSSで作らないといけない案件の時に便利。

[masatomo-m]

やべー。中間言語みたいなの使ってもうちょっと書きやすくコーディングできるトランスパイラを作る人とかも出てきそうな勢い

[dazed]

すごい

[UDONCHAN]

変態すぎる

[peketamin]

LaTeXで3並べを作ってた人を思い出した https://iwatam-server.sakura.ne.jp/software/tictactoetex/index.html

[shikiarai]

変態の所業

[pado3]

閲覧はPC必須。1から10まで勉強になりました。Pugすごい

[fjwr38]

なぜCSSでやった

[for-my-internet-demo]

Codepen貼れるんだ

[EngineerYtr]

試したくなってくるな。

[nmcli]

完成品のソースコードのタグ量やばいな、なるほどな

[gyochan]

変態（褒めてる

[sippo_des]

　最近のHTML CSSのすごさって、見直されてほしい。アンギュラーとかでがむばるのも結構だけど、そんなシンプルなサイトにそんな労力いる？と言うのを見た。なんかやってるかも知らんけど知らんけど。

[securecat]

すごい。解説も丁寧。すごいわ。

[exsoul]

リアルってそういう意味か！上部にちっちゃなソーラーパネルとかをつけて欲しい

[nakayoshiyama]

わ

[dgen]

CSSで作る意味ｗ

[tikuwa_ore]

やっぱプログラマってすげえな……。

[natu3kan]

色や図形を重ねていくのがIllustratorっぽい。

[ustam]

すごいっていうか気持ち悪い。

[fried-tofu]

Windowsの電卓よりリアル電卓。ここまで再現できるのか……謎技術

[night_face]

尊敬する！けど、htmlもcssもコードがひどいことになっているからJSでいいのではと思ってしまう自分が憎い。ごめんなさい

[momo_t]

すごい

[FOx]

すげぇ

[nzxx]

すげえ

[udzura]

Pug便利そう（？

[kkobayashi]

CSSだけで作ってんのか！すげえな

[monacal]

せっかくCSSで厚みを表現したなら、あと一歩、列ごとにborderの割合を1pxくらいずつずらして厚みの角度を変えるとより本物っぽくなったのに！おしい。あと点光源を仮定して光の方向を計算も追加で。

[nkgr]

リアルだ

[netcraft3]

これはすごい

[htnmiki]

かっこいい