スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
RSSフィード twitter Google Bookmarks スポンサーサイトをはてなブックマークに登録 はてなブックマーク
タグ /

HTMLや画像編集の手間を省く為の8つのツール

サイトを運営していると、CSSや画像の編集などのメンドイ作業にしょっちゅうブチ当たることになります。その中には、これだけは苦手なんだ、っていう作業が一つはあるのではないでしょうか(私だけ?)。

そんな作業を楽チンにしてくれる無料ツールをまとめて紹介です。

ホームページ作成に役立つツール集

テーブルタグの表を生成

エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)

読んで字のごとく、.csvをテーブルタグに変換しちゃうツールです。

やり方は簡単でエクセルでテーブルの元となるデータを入力し、それをコピペでサイトに貼りつけるだけでOKです。

ホームページ作成に役立つツール集

こんなテーブルが簡単に出来上がります。

pricefunctionoperability
PhotoShopCS499,750★★★★★★
GIMP Free★★★★★
PixiaFree★★

背景色や文字色の設定もできます。

ホームページ作成に役立つツール集

このように↓HTMLとともにCSSも生成される仕組みになっています。なので、cssだけ別ファイルに分けている人は移動させてください。

<style>table { border-collapse: collapse;}th { border: solid 1px #666666;color: #000000; background-color: #ff9999;}td { border: solid 1px #666666;color: #000000; background-color: #ffffff;}</style><table><thead><tr><th></th><th>price</th><th>function</th><th>operability</th></tr></thead><tbody><tr><th>PhotoShopCS4</th><td>99,750</td><td>★★★</td><td>★★★</td></tr><tr><th>GIMP </th><td>Free</td><td>★★★</td><td>★★</td></tr><tr><th>Pixia</th><td>Free</td><td>★</td><td>★★</td></tr></tbody></table>

ちなみに、もっとシンプルに使いたいんだという方はこちらもどうぞ

TABLEIZER!

設定出来るところは少ないですが、自分で編集できる人はこちらの方が良いかも。

HTML特殊文字をマークアップ文字に一発変換

HTML特殊文字を手動で変換するとなると、それはまさに、大阪から東京まで歩いて行くようなもの。それくらい辛い作業であります(いや、ホントに)。

しかし、タグをそのままの状態でブログなどでシェアしたい時など、この作業は欠かせません。(前項のテーブルタグの“引用”部分も特殊文字からマークアップ文字に変換しています)

そんな時、超便利なのがこちらのHTML特殊文字変換ツールです。

HTML特殊文字変換ツール

変換したい特殊文字をコピーして、フォームに貼り付け「変換」ボタンを押せばOKです。変換したタグは、HTMLファイルにそのまま載せても大丈夫です。

HTML特殊文字変換ツール

背景画像が生成出来るジェネレータ

フォトショップを開くまでも無いシンプルな背景ならこちらのツールで作れます。

Background Image Maker

4種類のタイプ(スラッシュ、ストライプ、ドット、グラデーション)からマージンや色、サイズを選ぶだけです。

背景画像が生成出来るジェネレータ

stripegenerator2.0

こちらのツールはストライプの太さを調節出来ます。

背景画像が生成出来るジェネレータ

CSSメニューボタンを生成するツール

Free CSS MENU Generator

メニューボタンの画像とHTML/CSSを生成してくれるジェネレータ。

CSSメニューボタンを生成するツール

縦横メニュー、またはボタンのタイプも選択出来ます。

ダウンロードすると、ボタン画像とこんな感じのタグもそのまま入っていますので、後は自サイトに埋め込むのみとなっています。

CSS

#menu ul,#menu li { margin:0; padding:0; } #menu li {list-style:none;float:left;} #menu a { display:block;margin:0 auto;color:#fff;text-decoration:none; background:url(_right.png) right top no-at;} #menu a span { display:block;text-align:center;background:url(_left.png) left top no-repeat; font:bold 12px/ Arial, Helvetica, sans-serif; padding:0 20px; } #menu a:hover { background-position:right bottom;text-decoration:underline} #menu a:hover span { background-position:left bottom; }

HTML

<div id="menu"><ul><li><a href="http://menubuilder.me"><span>Home</span></a></li><li><a href="http://menubuilder.me"><span>About</span></a></li><li><a href="http://menubuilder.me"><span>Blog</span></a></li><li><a href="http://menubuilder.me"><span>Contact</span></a></li></ul></div>

カウントダウンタイマーのスクリプト生成

カウントダウンタイマーNEO

カウントダウンタイマーを作るツールですが、かなり自由度が高いです。

計測単位、文字色、背景色、サイズ、言語いろいろ変えられますので、販売サイトやブログパーツの部品など様々な方法に凡庸が効きそうです。

カウントダウンタイマー

とってもインスタントな問い合わせフォーム

驚くほど簡単に、それなりにしっかりした問い合わせフォームが完成します。

faary

例えば、こんなフォームが作れます。

問い合わせフォーム生成ツール

日本語も入力出来ますので、ご自身で入れたい文章をサイト左側で入力して、「GENETARE!」ボタンを押すだけです。あとは、「Download it FREE」のリンクを押せば、データをダンロードすることが出来ます。

他にもまだまだありますが、体を労って今日はこの辺で。笑

■関連記事

Webサイトの画像作りに猛烈に役立つ17のジェネレータ

関連記事

RSSフィード twitter Google Bookmarks HTMLや画像編集の手間を省く為の8つのツールをはてなブックマークに登録 はてなブックマーク
コメント一覧
コメントを残す


管理者にだけ表示を許可する

 | BLOG TOP | 

人気記事

スポンサードリンク

新着記事

プロフィール

日刊ウェブログ式を運営するナカタと申します。まだ開設して日も浅い拙いブログですが、どうぞよろしくお願いします。

リンク

LOOMICDESIGN

タグクラウド

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。