タグ: 初心者向けツール

いままで、WEBページでグラデーションを表現したいときは、グラデーションの画像を作って、それをスタイルシートで背景画像に設定して、縦か横に繰り返し表示させるようなことをしていたんですが、画像の読み込みを行う分レスポンスは悪くなるし、スタイルとは別に画像を書き出さなきゃならないといった手間もあります。

しかし、HTML5と並ぶ次世代WEB標準規格であるCSS3から、グラデーションをはじめとした、今まで画像をつくら名ければ表現できなかったスタイルを実装できるようになりました。

ですが、そうは言っても新しい技術を習得するのは大変ですし、各種ブラウザに対応させようと考えるととても労力がかかります。しかし心配は要りません。この『Grad3』ならね。

グラデショーンボタン生成ツール:Grad3
grad3

 使い方は簡単

  • Prefixで適用したいブラウザを選ぶ
  • グラデーションのカラーやパターンを編集する
  • お好みでフォントや角アール、アイコンのスタイルを編集
  • スタイルシートが自動的にセットされるので、それをコピーして、自分のサイトのCSSにペーストする。

ボタンを作るうえで必要な要素はすべて満たしており、ものの数分でボタンを一つ作れてしまうので、大変お勧めです。

 ただし、IE8以前のブラウザだとそもそもレンダリングしてくれない可能性が高いので、使いどころや代替のスタイルは考えておいたほうが良いでしょう。

今回紹介したGrad3や以前に紹介した、簡単・便利なWEB制作ツールをこれからも紹介していきたいと思います。



さて、ブログやWEBサイトを自分で作ってみたいと考えている人も多いでしょうが、画像作成で苦労する人も多いと思います。特にロゴはサイトを象徴するものなので、それなりにイケてるものを使いたいというのが心情です。

でもIllustratorやPhotoshopを持っていない人や、どうやってロゴをつくればよいかわからない人も多いとおもいます。そこで以下のようなサイトを使ってみるのはいかがでしょうか?

ロゴ作成サイト 「GRAPHIC SPRING」

rogo01


このサイトを使うと、ものの数分でロゴを作成することが可能です。まずはアイコン選択から。
アイコンは500個からありますので、自分のサイトのイメージあったものを選びましょう。

rogo04


ロゴを選択したら、編集画面に移ります。Company Nameを自分のサイト名に書き換えます。フォントもいくつか用意されているので、お好みで。編集」が完了しましたら、ページの右下にあるDownloadボタンをクリック(図では見切れていますが)。

rogo03


後は出来上がったロゴをダウンロードするのですが、FaceBook、もしくはTwitterでシェアをする必要があるんで、シェアが完了しましたら、Downloadボタンを押してダウンロード完了!

rogo02


実に簡単でしょ?ロゴでお悩みの方は是非一度使ってみてください。


先日のエントリーで紹介した「HTML5 Boilerplate」を使って、お粗末ながらレスポンシブサイトを作ってみました。

initializrを使えばあらかたレイアウトが組まれている状態ですので、後はスタイルシートとHTMLを使って自分好みのサイトに仕立てあげることが出来ます。

レスポンシブサイトのサンプル

素のテンプレートからあまり大きくレイアウトを変更していませんので、この程度のカスタマイズであれば、ものの数時間で完成できちゃいます。レスポンシブデザインの骨子はウインドウサイズを取得して、それによって読み込むスタイルを切り分けるということになりますので、あまり大掛かりな変更を加えない限り、HTMLとCSSに手を加えるだけで完結してしまいます。

ただ、ちょっと難しいというか、厄介だと感じたのは、サイズやブラウザごとにスタイルが定義してあって、それを考慮に入れて手を加えないと一方ではいい感じになっても、もう一方では…。みたいなことが頻繁に起こってしまいます。後はHTML5で記述されているので、とてもシンプルなソースですが、見慣れていないと少しわかりにくいかもしれません。でも慣れてしまうと4.0の<div>~</div>だらけのソースよりかはるかに楽ですけどね。

因みにあらかじめスタイルを決めておくべき画面サイズは、以下のような感じ。

  • オールサイズ対応
  • 横幅1140ピクセル~
  • I横幅480ピクセル(場合によっては320px)~
  • 横幅768ピクセル~

デバイスごとに更新の手間やソースの管理をしなくて済むし、クローラー対策やインデックス化の手間の省略などSEOの観点でも有利とされているので、一度試してみてはどうでしょうか?

HTML5 WEBテンプレート集「HTML5 Boilerplate 4」