【ツール】コーディング時に役に立つツールをご紹介 | ホームページ・WEBサイト活用ノウハウ| PC周りの困りごと解決|SOS110番

◆RQRWD

http://rqrwd.com/

px→％への変換計算をしてくれるサイト。

レスポンシブサイトを構築する際に重宝しています。

レスポンシブ対応は要素を可変させる為に数値をpxではなく％で指定することが多く、

pxから％に変換する際には下記のような計算が必要になってきます。

求める要素の幅÷親要素のコンテンツ幅×100%

例えばレスポンシブサイトではサイトの左右に20pxの余白を設けたい場合、

求める要素の幅 40px（左右20pxずつ）

親要素のコンテンツ幅（サイト幅640px）となり、

式に当てはめると

40÷640×100 ＝ 6.25

となります。

サイト幅を93.75％

左右の余白はそれぞれ3.125％と設定する事で、

左右に20pxの余白を持ったレスポンシブサイトが出来上がります。

RQRWDでは「求める要素の幅」を「Width Of Child Element In px」に、

「親要素のコンテンツ幅」を「Width Of Parent Element In px」に入力するだけで％変換してくれる為、

計算時間を大幅に短縮することが出来ます。

◆PLACEHOLD.IT

http://placehold.it/

サンプル画像を用意する時に非常に便利なサイトです。

例えばURLがの後ろに「http://placehold.it/350x150」と入力し、エンターを押せば横350px、縦150pxのサンプル画像が生成されます。

生成された画像はimgタグを使ってこのように埋め込むことも可能です。

画像サイズの他にテキストやカラーを変更することもできます。

例として「sample」とテキストが埋め込まれた画像を作ってみましょう。

http://placehold.it/350x150?text=sample

画像サイズを指定した350x150の後に続けて「?text=表示したい文字」を入力しエンター。

sampleと文字が入った画像が生成されました。

※日本語には対応していません。

次に画像に色をつけてみましょう。

http://placehold.it/350x150/ff0000/ffffff/?text=sample

画像サイズを指定した350x150の後に続けて「/画像カラー/文字カラー」を入力しエンター。
※カラーコードは16進数で入力しましょう

赤い画像に白文字でサンプル画像が生成されました。

非常に便利なのでWEBサイト以外にも使えると思います。

◆Grad3

http://grad3.ecoloniq.jp/

CSS3の背景グラデーションを簡単に生成できる高機能な国産ジェネレーターです。

線形グラデーション、円形グラデーション、角丸、フォントサイズ、テキストシャドウ、ボックスシャドウ、ボーダー、アイコン、背景画像が設定でき、CSSの知識が無くても簡単にグラーデーションを使用したボタンを作成することができます。

試しに何個か作ってみましょう。

グラデーションパターンは赤、緑、青、水色、紫、黄色、グレーの７つの基本カラーからそれぞれ45パターンずつ用意されています。

この中から選ぶもよし、カラーコードを入れて好きに設定することも可能です。

また、グラデーションは何個でも追加できます。

◆アイコン付きのボタン

ボタン

◆レインボーカラーのボタン

ボタン

◆背景画像を入れたボタン

ボタン

このように簡単にグラデーションを用いたボタンが作成可能となっています。

CSSの知識がない人でもGrad3で生成されるスタイルをコピペしclassに指定するだけで使用することができます。

◆box-shadowジェネレーター

http://www.bad-company.jp/box-shadow

ボックスシャドウに特化したジェネレーターです。

枠に影をつけたい時に簡単に設定できるので地味に重宝しています。

試しに1個作ってみましょう。

設定項目は大きく分けて２つあります。

■borderの設定

・border-width：ボーダー（線）の太さを指定します。

・border-style：線の種類を指定します。

・border-color：線の色を指定します。

・border-radius：4隅の角丸を指定します。

■shadowの設定

・shadow-color：影の色を設定します。

・shadow-color-opacity：影の色の透明度を設定します。

・shadow-offset：影の位置を設定します。

・shadow-size：影の大きさを設定します。

・shadow-spread：影の大きさを設定します。

◆PXtoEM

http://pxtoem.com/

pxとemの相互変換を行ってくれるサイト。

たとえばベースとなるフォントサイズが16pxの時、

12pxの文字は何emになるのかという時に使えます。