WordPress

サイト制作に効率を!コーディングで使えるサイト5選

みなさんどうもこんにちは!これからまた投稿を徐々に増やしていこうと前向きに考え始めてきたキスケです。(すごい遠回り)

今回は、サイト制作をするにあたっての効率化を目的とした、コーダーのコーダーによるコーダーのためのコーディング効率化ツールをご紹介したいと思います!

1.16進数カラーコード・RGB・RGBA変換ツール

16進数カラーコード・RGB・RGBA変換ツール」はその名の通り、カラーコードをRGBA形式に変換してくれるツールです。左側では、上の空欄にカラーコードを入れてEnterを押すとRGB形式とRGBA形式で出力してくれます。

逆に、右側のフォームではカラーコードからRGB形式、RGB形式からカラーコードの相互での変換ができます。

このツールでは、opacityを調整するときを変更するときやRGBの細かい調整などを行うときに便利に使うことができます。

2. CSS triangle generator

CSS triangle generator」は、三角形を作成するツールとして私はこのツールはとても重宝しています。8方位もの三角形をクリックして選択することで作成することができ、サイズやカラーも入力・選択するだけでカンタンに(本当にありがたく使わせてもらってる)三角形を作成することができます。あとはCSS欄のコードをコピーして貼り付けるだけです。

最初三角形の作り方を知らない中このツールに出会って、三角形ってこうやって作るんだー。と学ばせてもいただいた代物。とってもおすすめ。

3. Table Tag Generator

tableを複数作らなきゃいけない時に、

何度も同じコードを書くのが大変

PC版とスマホ版で使い分けをする時に素早くコードを生成したい!

tableのセルの結合がよくわからないから生成ツールに任せたい

そんな時にはこの「Table Tag Generator」が便利です。ページ上の行と列の部分の数字を変更してセルを追加します。指定の部分をtdタグとthタグの切り替えが可能で、特定のセルを選択してclassをつけることも簡単です。Excelのようにセルの結合も簡単に行えるので、自分の理想の状態のテーブルになった時に左下にあるコードをコピペで終了。このツールにはいつも助けられています。theadタグがこのツールは生成されないので、theadタグを使用したい場合はご自分で追加する必要があるのが唯一のデメリットかと思います。

4. Free Online Image Map Generator

画像全体ではなく、画像の中の一部にリンクを付与させたい。

そんな時にはこの「Free Online Image Map Generator」がとてもおすすめです。サイト上でのリンクもしくはPCのローカル環境から画像をアップロードすることで作業をスタートすることができます。

リンクは複数設定することができ、設定したいリンクを選択する時に左側のactiveボタンをクリックし選択した状態で範囲を指定します。「Shape部分」で円形なのか四角なのかを選択することもでき、画像に合わせて融通のききやすい仕様になっています。「Link部分」は遷移させたいリンク、「Title部分」は画像のaltとなる文言、「Target部分」でクリック時に新規タブで開くかそのままかを選択することがそれぞれ可能です。

一番下にあるボタンを押すことでコードを出力することができます。これをサイトにコピペすることで完了します。画像のパス部分だけ実際のディレクトリ階層に合わせないといけないので、コピペしてから画像のパス部分は確認するようにしましょう。

5.CSS3 Generator

手軽にボタンの装飾をしたい!

そんなあなたにはこの「CSS3 Generator」がとても使いやすいです。

それぞれにマウスカーソルを合わせると、それぞれに適用されているホバーアクションを確認することができます。この中で実装したいものホバーアクションをクリックします。

クリックするとそのホバーアクションの詳細画面が表示されます。ここでfont-sizeだけでなくmarginの設定や文字色の設定、font-weightの設定など、文字や色に関する設定をこの画面で行うことができ、最終的に一番下にあるテキストフィールドにそれぞれの項目で設定した内容がCSSプロパティとして出力されます。あとはこれを適用したい部分にコピペで適用するだけ。自分で選んだホバーアクションを簡単に実装することができます。ホバーのアクションに飽きてきたり、何か新しいホバーアクションを実装したい時などにこのようなツールがとても便利で、実装コード自体もあまりみないのでとても勉強にもなります。

コーディングツールでサイト制作に効率化を!

いかがでしたでしょうか?

今回紹介したツールはどれも私が愛用しているツールになります。コーディングする時に何度お世話になっていることか・・・(笑)

クライアントに初稿を提出するまで、どれだけスピーディーに実装・対応していくことができるかがフリーランサーにとっても一従業員としても大切なことだと思います。現状の環境が必ずしも効率的でいい環境であるとは限りません。

皆さんもこのコーディングサポートツールを使用してサイト制作に効率化を!

この記事が気に入ったら
いいね ! しよう