制作した理由
アイキャッチ画像を作成するときに、16:9の比で画像を作成したいと思ったけど、計算するのが面倒だと思った経験はありませんか？
実際に自分もアイキャッチ画像を16:9で作成しているため、今回16:9の変換ツールを作成しようと思いました。ぜひご利用ください。
jQueryを用いて実装しました。
また16:9の早見表も作りました。こちらは3200:1600までの整数の比が確認できます。
こちらはfunctions.phpにWordPressのショートコードの関数とforループを記述して作成しています。
16:9の比の計算
数字を入力してください。
片方を入力すると自動でもう片方の数字も表示されます。
16:9早見表
| 16の比 | 9の比 |
|---|---|
| 16 | 9 |
| 32 | 18 |
| 48 | 27 |
| 64 | 36 |
| 80 | 45 |
| 96 | 54 |
| 112 | 63 |
| 128 | 72 |
| 144 | 81 |
| 160 | 90 |
| 176 | 99 |
| 192 | 108 |
| 208 | 117 |
| 224 | 126 |
| 240 | 135 |
| 256 | 144 |
| 272 | 153 |
| 288 | 162 |
| 304 | 171 |
| 320 | 180 |
| 336 | 189 |
| 352 | 198 |
| 368 | 207 |
| 384 | 216 |
| 400 | 225 |
| 416 | 234 |
| 432 | 243 |
| 448 | 252 |
| 464 | 261 |
| 480 | 270 |
| 496 | 279 |
| 512 | 288 |
| 528 | 297 |
| 544 | 306 |
| 560 | 315 |
| 576 | 324 |
| 592 | 333 |
| 608 | 342 |
| 624 | 351 |
| 640 | 360 |
| 656 | 369 |
| 672 | 378 |
| 688 | 387 |
| 704 | 396 |
| 720 | 405 |
| 736 | 414 |
| 752 | 423 |
| 768 | 432 |
| 784 | 441 |
| 800 | 450 |
| 816 | 459 |
| 832 | 468 |
| 848 | 477 |
| 864 | 486 |
| 880 | 495 |
| 896 | 504 |
| 912 | 513 |
| 928 | 522 |
| 944 | 531 |
| 960 | 540 |
| 976 | 549 |
| 992 | 558 |
| 1008 | 567 |
| 1024 | 576 |
| 1040 | 585 |
| 1056 | 594 |
| 1072 | 603 |
| 1088 | 612 |
| 1104 | 621 |
| 1120 | 630 |
| 1136 | 639 |
| 1152 | 648 |
| 1168 | 657 |
| 1184 | 666 |
| 1200 | 675 |
| 1216 | 684 |
| 1232 | 693 |
| 1248 | 702 |
| 1264 | 711 |
| 1280 | 720 |
| 1296 | 729 |
| 1312 | 738 |
| 1328 | 747 |
| 1344 | 756 |
| 1360 | 765 |
| 1376 | 774 |
| 1392 | 783 |
| 1408 | 792 |
| 1424 | 801 |
| 1440 | 810 |
| 1456 | 819 |
| 1472 | 828 |
| 1488 | 837 |
| 1504 | 846 |
| 1520 | 855 |
| 1536 | 864 |
| 1552 | 873 |
| 1568 | 882 |
| 1584 | 891 |
| 1600 | 900 |
| 1616 | 909 |
| 1632 | 918 |
| 1648 | 927 |
| 1664 | 936 |
| 1680 | 945 |
| 1696 | 954 |
| 1712 | 963 |
| 1728 | 972 |
| 1744 | 981 |
| 1760 | 990 |
| 1776 | 999 |
| 1792 | 1008 |
| 1808 | 1017 |
| 1824 | 1026 |
| 1840 | 1035 |
| 1856 | 1044 |
| 1872 | 1053 |
| 1888 | 1062 |
| 1904 | 1071 |
| 1920 | 1080 |
| 1936 | 1089 |
| 1952 | 1098 |
| 1968 | 1107 |
| 1984 | 1116 |
| 2000 | 1125 |
| 2016 | 1134 |
| 2032 | 1143 |
| 2048 | 1152 |
| 2064 | 1161 |
| 2080 | 1170 |
| 2096 | 1179 |
| 2112 | 1188 |
| 2128 | 1197 |
| 2144 | 1206 |
| 2160 | 1215 |
| 2176 | 1224 |
| 2192 | 1233 |
| 2208 | 1242 |
| 2224 | 1251 |
| 2240 | 1260 |
| 2256 | 1269 |
| 2272 | 1278 |
| 2288 | 1287 |
| 2304 | 1296 |
| 2320 | 1305 |
| 2336 | 1314 |
| 2352 | 1323 |
| 2368 | 1332 |
| 2384 | 1341 |
| 2400 | 1350 |
| 2416 | 1359 |
| 2432 | 1368 |
| 2448 | 1377 |
| 2464 | 1386 |
| 2480 | 1395 |
| 2496 | 1404 |
| 2512 | 1413 |
| 2528 | 1422 |
| 2544 | 1431 |
| 2560 | 1440 |
| 2576 | 1449 |
| 2592 | 1458 |
| 2608 | 1467 |
| 2624 | 1476 |
| 2640 | 1485 |
| 2656 | 1494 |
| 2672 | 1503 |
| 2688 | 1512 |
| 2704 | 1521 |
| 2720 | 1530 |
| 2736 | 1539 |
| 2752 | 1548 |
| 2768 | 1557 |
| 2784 | 1566 |
| 2800 | 1575 |
| 2816 | 1584 |
| 2832 | 1593 |
| 2848 | 1602 |
| 2864 | 1611 |
| 2880 | 1620 |
| 2896 | 1629 |
| 2912 | 1638 |
| 2928 | 1647 |
| 2944 | 1656 |
| 2960 | 1665 |
| 2976 | 1674 |
| 2992 | 1683 |
| 3008 | 1692 |
| 3024 | 1701 |
| 3040 | 1710 |
| 3056 | 1719 |
| 3072 | 1728 |
| 3088 | 1737 |
| 3104 | 1746 |
| 3120 | 1755 |
| 3136 | 1764 |
| 3152 | 1773 |
| 3168 | 1782 |
| 3184 | 1791 |
| 3200 | 1800 |
その他の変換ツール
10進数16進数変換
10進数と16進数の変換ツールと1~255までの10進数と16進数の変換早見表をhtml、css、JavaScriptで作成をしました。1~255までの10進数と16進数の変換早見表の方はカラーコードの変換に役立ててください。
百分率・割り算計算
2つの数字を百分率と割り算の答えに変換する計算ツールを作成しました。Webサイトのレスポンシブコーディングで使用したいと思い作成しました。百分率の計算はwidthの%を出すために使用、割り算は画像の縦と横の比をpadding-topで保持す
