ホームページ制作に役立つサイト
公開日：
最終更新日:2023/12/18
レスポンシブデザインのホームページが主流になりつつある今
リキッドなデザインやレスポンシブにするために%でボックスの定義をすることも多々あるかと思います。
私もいちいち電卓たたいて%出したりしていました。とても時間の無駄です…
そんな時に便利なサイトをご紹介します。
Contents
ColorSpace
何らかの色から、様々なカラーパレットを生成してくれる
Cohesive Colors
同じくカラー
https://javier.xyz/cohesive-colors/
Paletton
使いたい色を設定し、カラールールに沿った色を作ることができる
material design
マテリアル
https://www.materialpalette.com/
Liveweave
エディターです。
HTMLやCSSのコーディングをブラウザ上でできる。似たようなものはいろいろとありますが、途中までコードを書くと自動で予測を表示してくれるので、私としては一番使いやすいです。
Clippy
CSSだけで好きな形に画像を切り抜いてくれる
https://bennettfeely.com/clippy/
RQRWD
親要素と子要素のピクセルをそれぞれ入れると、%になおして表示してくれる。
これホント使えます。
グリッドジェネレーター
親要素のpxを入れ、カラム数を入れると、自動的にカラムのpxやマージンなども計算してくれる
カラーコード変換ツール
16進数はもちろん、CMYK、rgbなど、様々なカラーコードを生成してくれます。rgbaもあるので透過も可能。
Dreamweaverなどは使わず直接WordPressにCSSを書いていくときなどに非常に重宝します。
http://www.webtoolss.com/colorcode2.html
FANCY BORDER RADIUS
歪んた形の円？をビジュアルで作っていけるジェネレーター
https://9elements.github.io/fancy-border-radius/
favicon generator
様々なブラウザやデバイスに対応したファビコンを一括で生成してくれる。
一番大きなもので512px×512pxなので、最低このサイズで元の画像を作りたいところです。
https://ao-system.net/favicongenerator/
EPS・SVG対応の印刷・看板用QRコード作成
スマホの普及に伴いQRコードの重要性がさらに増しています。高解像度の画像が必要なオフセット印刷に最適なベクターデータでQRコードがダウンロードできます。
https://display-sign-stand.com/qrcode_generator/
HTMLエスケープツール
主にWEBページにソースコードなどを記載する際のエスケープ
https://webtools.dounokouno.com/htmlescape/
