CSS その他

2021.04.09

コーディング作業に役立つサイト5選

ページをコーディングしていると三角形のCSSを簡単に作成をしたかったり、フォントサイズを計算したり…といった一手間かかるけど簡単に行いたい作業がいくつもあると思います。
今回はそんな時に役立つ、コーディング作業に役立つサイトを5つご紹介いたします!

htpasswd用の暗号化テキストを生成してくれるサイト

htpasswdファイル生成

basic認証をかける際に必ずといっていいほど必要になる「htpasswd」のファイル。
こちらのサイトでは入力欄にbasic認証で設定をしたいIDとパスワードを入力するだけできちんと暗号化したテキストを生成してくれます!
生成されたテキストを「htpasswd」のファイルに貼り付けるだけで良いため、サイトの準備をするときに役立ちます!

basic認証の設定方法はこちら

カラーコードを変換してくれるサイト

カラーコード変換(TECH-UNLIMiTED)

こちらのサイトはカラーコード、RGB、HSVといった色を入力すると他のカラーコードではどれになるか変換をしてくれるサイトです。
カラーコードしかわからないけれど、透過させたいからRGBAの値に変換したい!といった場合に簡単に変換することができるため、とても便利です!

TECH-UNLIMiTEDさんのページでは他にもコーディングに役立つツールを公開してくださっています!

グラデーションのCSSを生成してくれるサイト

Ultimate CSS Gradient Generator

少し作成するのに手間のかかるグラデーション。
何回も色を変えたい場合など、手打ちではとても手間と時間がかかってしまうと思います。
そんな時にこちらのサイトでは色や透過の%を指定することで簡単にグラデーションを生成してくれるので、簡単に複雑なグラデーションを作ることができます!
また、IEなどのブラウザに対応させる場合のCSSをきちんと生成してくれるため、そのまま貼り付けるだけでグラデーションを書くことができます。

三角形のCSSを生成してくれるサイト

CSS三角形作成ツール

こちらはサイズ、向き、幅、色などを入力するとそれに合わせたCSSを生成してくれるサイトです!
意外と書く内容も多かったり、書く場所がややこしい部分がある三角形を簡単に作成できると作業が短縮できると思います。

フォントサイズを変換してくれるサイト

px rem変換

pxやremなど、コーディングをする上で様々な単位でフォントサイズを指定する機会があると思います。
こちらのサイトでは、一つ入力をすると他の単位ではどのサイズになるかを変換してくれます!
自分で計算する方法を覚えておくことも大切ですが、こちらのサイトを活用することで計算する時間を短縮することができます!



いかがでしょうか。
色々な方が作成してくださっている作業効率を上げることができるサイトを活用するのもコーディングスピードを上げる一つの方法です!
ぜひご活用ください!

関連記事はこちら

0

関連記事

  • 2021.04.07

    【CSS】背景色のみを透過する方法

    CSS

  • 2021.03.31

    【HTML・CSS】納品前に確認したいコーディングチェックポイント

    CSS

    HTML5

  • text-alignがズレてしまうとき

    2021.03.24

    【CSS】text-alignがズレてしまうとき

    CSS

おすすめ記事

  • 2019.02.08

    【css】IEにobject-fitを簡単に効かせる方法

    CSS

  • 2021.02.06

    【CSS】疑似要素(before, after)に画像を表示させる方法【サイズ変更も可能】

    CSS

    HTML5

  • 2021.04.05

    【jQuery】jQueryのみでPC/SPの画像を切り替える方法

    JavaScript

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!