マーケティング

マーケティング

CSSとJavaScriptを使用した計算機の驚くべきコレクション

speckyboy

Speckyboy is an online magazine for designers with its focus on sharing helpful resources, exploring new techniques, sharing useful tips, and inspiring you to build a better web.

本記事は、Amazing Collection of CSS & JavaScript Calculators
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

249 views

読了時間 : 約2分45秒

オンラインと同じくらい便利になったツールの1つに計算機があります。 様々な機能が備わったものが開発されているので、想像以上に便利になっているかもしれません。

 

オンライン計算機は、ダイエットの管理からローンの支払い、距離の計算まで、様々なことが計算できます。 どんな目的であろうと、それにふさわしい計算機が存在します。ここでは、 CSSとJavaScriptを使用した色々な計算機を紹介します。

 

 

基本

馴染みのある計算機から見ていきましょう。 Reactを使用しているこの計算機は、かつて学校で使用していた計算機の形と似ています。

 

See the Pen
React Calculator
by Michael Jackson (@mjijackson)
on CodePen.

 

VW

一見すると「VW」という文字は、人気のドイツ車を思い浮かべさせるかもしれません。 しかし、Webデザイン空間では、VWは「ビューポート幅」の略です。 これは、ブラウザウィンドウの全幅の割合です。 この計算機は、VWを計算することができ、デザインの幅とビューポートの幅を入力して使用します。

 

See the Pen
VW Calculator
by Lakshmi (@lakshmiR)
on CodePen.

 

BMI指数

ボディマス指数(BMI)は身長と体重の関係から算出される値です。BMIは、健康な範囲内にいるかどうかを判断するために使用されます。この計算機は、身長(インチ)と体重(ポンド)を入力、Angularを使用してBMIを計算します。

 

See the Pen
Angular BMI Calculator
by Peter Girnus (@Gothburz)
on CodePen.

 

余裕を知る

車を買うのは一大決心です。ディーラーに行く前に、毎月の支払いに余裕があることを確認したいですよね。この計算機で、さまざまな支払いのシュミレーションができます。 JavaScriptを巧みに使用することで、その場で合計を変更して計算することもできます。

 

See the Pen
Daily UI #04: Auto loan calculator using Vue JS
by Bryan King (@brykng)
on CodePen.

 

比率

画像のトリミングなどを実行する際、歪みが生じることを防ぐために正しい比率を維持することが重要です。この計算機は、元のサイズと新しい幅を入力すると、設定すべき高さが計算されます。したがって、比率はそのままになります。

 

See the Pen
jQuery | Aspect Ratio Calculator
by Tobias Bogliolo (@tobiasdev)
on CodePen.

 

PXとREM

最近では、CSSでremを使用してテキストのサイズを設定するのが一般的です。 remは、ルート要素のサイズに関連しています。基本フォントサイズが16pxの場合、16pxは1remに相当します。この計算機は、スタイルシートに貼り付けることができます。

 

See the Pen
Pixel to REM calculator
by Andy Bell (@andybelldesign)
on CodePen.

 

CSS

これからCSSはますます使用されるようになるでしょう。ですが、CSS専用の計算機がJavaScriptを超えることはないでしょう。しかし、CSS計算機は、創造的な発想を加えると可能性が広がります。

 

See the Pen
From Integer Variable To Content: A basic pure CSS calculator
by seto89 (@seto89)
on CodePen.

 

走行距離

電気自動車の購入を検討している人にとって、最大の懸念は走行距離でしょう。この計算機は、さまざまなテスラモデルが1回の充電で走行できる距離を計算します。速度、外気温度、ホイールサイズ、空調システムが使用されているかどうかなども加味します。

 

See the Pen
Tesla Range per Charge Calculator in React / Redux
by DELAN (@DELAN)
on CodePen.

 

様々な計算機

JavaScriptなどの言語は数学に依存しているため、開発者がJavaScriptを使用してこれらの種類のアプリを開発するのはごく自然なことです。私たちはただ数値を入力するだけで答えが得られるので、本当に便利です。さらなる種類の計算機を見るには、CodePenをご覧ください。

【コンビニでも使える!メルペイ初回利用1000円分招待コード】

当サイト限定招待コード:CMUTDF

 
・利用可能店舗:メルカリ、コンビニ、ドラッグストア等
・金額:1000円分
※さらにメルペイスマート払で2000円分ポイント!
 友達招待でお互いに1000円分ポイント!2人以上招待でUSJ貸し切りイベントに抽選招待も!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

ピックアップ! さらに今このキャンペーン中です↓

期間中の金・土限定でd払い利用で最大20%のdポイント還元中!
■エントリー期間:2020/2/29(土)23:59 まで
■キャンペーン期間:2020/2/24/(月)23:59 まで

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【Uber taxi初回利用2000円オフクーポン】
JP20gd6nv7

 

以下のリンクから『プロモーション コードを追加する』で「JP20gd6nv7」を入れてください。初回利用が2000円オフになります!
※プロモコードは日本国内でのみ利用可能

 

2000円オフで登録» »当サイト限定の初回利用2000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber

Uber

 

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【UberEats初回1000円オフクーポン】
ins6je2v

 

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き

 

1000円オフで登録» »当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber Eats: 地元で人気の料理をお届け

Uber Eats: 地元で人気の料理をお届け

無料

 

おすすめ新着記事

おすすめタグ