よくあるツールだが、使い勝手が良かったのと、名前が素敵だったのでご紹介。 ProCSSorは、いわゆるCSS整形ツールだ。 開発しているとごちゃごちゃしがちなCSSのソースをきれいすっきり見やすくしてくれる。 オプションも豊富で、インデントの桁数が選べたり、一行で一気に書いてしまうかとか、左右に要素とスタイルを分ける、といった指定が可能だ。 リリース前には細かいところにも気をつかいたいモノである。こうしたツールもたまには使ってみるといいかもですな。
「Periodic Table of the Elements」は、 指定したサイトでどれくらいHTML5の要素が使われているか調べられるサービスです。 サイトのURLを入力するだけで、使われてる要素をハイライトしてくれます。 面白いのが、各要素が元素記号の周期表のように並んでいるところ。 さらに、各要素が何回使われているかも調べられます。 以下に使ってみた様子を載せておきます。 まず「Periodic Table of the Elements」にアクセスします。 上部にURLを入力する欄がありますので、そこに調べたいサイトのURLを入れましょう。 「Inspect」で調査開始。 するとこのような結果がでました。 よく使うものほど明るくなっていますね。 マウスオーバーすると、このようにタグの説明および、何回使われているかが分かります。 アップルのHTML5デモページのひとつを試したところ
「CSS3 Playground」はCSS3を自動生成してくれるジェネレータです。 角丸やシャドウなどの調整を手軽に行え、コードを生成してくれます。 真四角の図形にほどこせる装飾ならお任せって感じですね。 以下に使ってみた様子を載せておきます。 まず「CSS3 Playground」にアクセスしましょう。 全体はこんな感じになっていて、真ん中にプレビューが表示されいます。 左側の設定をいじると、プレビューが変化していきます。 いろいろいじってみると、こういうのが作れました。 (角丸、シャドウ、テキストシャドウ、回転、背景、枠、テキスト本文がいじれました) CSS3のコードはプレビューの下に表示されています。 こちらを適用すれば、プレビュー通りに描けます。 CSS3ほんと便利ですね。 さらにこういったジェネレータがあると、コードを書くのが楽で嬉しいですね。 (本記事で紹介したサイト:CSS3
Six Useful CSS3 Tools | Tools 便利な6つのCSS3ツールがまとまったエントリを+αでご紹介。 まだ覚えていないプロパティなんかもWYSIWYGやジェネレート等で簡単に理解&覚えることが可能です。 CSS3 Button Maker CSS3なボタンメーカー。角丸やシャドウの指定が可能 CSS3 Generator CSS3を使ったスタイル効果をブラウザ上で簡単ジェネレート CSS3 Please! クロスブラウザ向けのradiusやshadow等を一括生成 CSS3 Gradient Generator CSS3のグラデーション生成ツール CSS3 Transforms WYSIWYGでCSS3のtransformプロパティを生成可能 CSS3 Selectors Test ブラウザのCSS3対応状況が分かるツール CSS3 Click Chart by Im
短縮URL発行、画像アップローダー、テキスト共有、クィックメール、パスワードの安全度チェック・生成などのツールが一つにまとまったオンラインサービスを紹介します。
Ham CutletはRuby/Sinatra製のフリーウェア(ソースコードは公開されている)。時々見かけるのだが、インデントが全く無視されたソースコードはとても見がたいものだ。Pythonだったら動きようもないが、他の言語の場合無視しようと思えばできてしまうので、とても辛い。 こんなに汚いソースコードが… プログラミング言語の場合、それでも統一はある程度できているのではないだろうか。問題はHTMLだ。時々ものすごいソースコードに出くわしたりすることがある。そんな時に使いたいのがHam Cutletだ。 Ham Cutletは既存のHTMLソースコードを貼付けて実行し、インデントを綺麗にして表示してくれるソフトウェアだ。インデントがきちんとすれば、タグの関連性が分かりやすくなりデザインの問題も発見しやすくなる。完了したソースはそのままコピーして利用できる。 こんな綺麗なHTMLに! 最近は
サイトの簡単な使い方を説明するガイドツアーを作りたいときもあるだろう。 ただ、そうしたガイドツアーを作るのはわりと大変だ。スクリーンショットを撮って、説明を書いて、というのはいかにも面倒くさい。 そこで登場したのがTourationだ。 使い方は簡単で、「このサイトではまずこういうメニューがあって」「ここを押すとこうなって」「これが○○です」といった説明書きを実際のサイト上にぺたぺた貼り付けていけばいい。 もちろんそうした説明には順番をつけることも可能だ。また、ちょっと試してみたところ日本語も問題ない。 こうしたガイドツアーをうまく使ってユーザーに疑問を抱かせないようにしたいですな。
CSS3 Generator CSS3の各ブラウザごとの対応状況の確認とソースコードの生成が同時に行える便利ツール。対応状況はブラウザのアイコンの上にカーソルを持っていくと表示されます。 Official Site CSS3 Gradient Generator v2.0 グラデーションのコードを吐き出すツール。カラーピッカーなどを使って直感的に操作できる Official Site CSS Border Radius ボーダーの角丸を表現するコードを吐き出すツール。四辺の周囲にある数値を変更するだけです。 Official Site Button Maker 画像を一切使わずにCSSだけでクールなボタンを作成。グラデーション、角丸、影などの調節が可能 Official Site CSS3, please! 左側のコードを書きかえると、プレビューが右上のプレビューが変化します。CSS3テス
オープンソースフレームワーク色々 個人的なメモです。今まであまり 使っていなかったので少し使って いこうと思い、いくつか自分でも使 えそうなフレームワークを探しました。 個人的なメモです。今まであまり使って いなかったので少し使っていこうと思い、 いくつか自分でも使えそうなフレーム ワークを探しました。表題の通り、PHP、 CSS、HTMLやJS等しか僕は能力が 無いのでこの辺のフレームワークの まとめになります。 使いやすそう、使いにくそうというのは個人差が出そうだなぁと触ってみて思ったのですが、それぞれ良し悪しな感じもしたのでとりあえず気になったものだけメモしておきます。おそらく有名所ばかりだと思いますが個人的なメモなのでご了承下さい。 順不同です。 Blueprint CSSのフレームワークです。シンプルな設計ながら素敵なレイアウトが組まれている印象でした。 Blueprint Sa
Webサービス使えるツール10選 Web制作時、個人的にかなり助かっ ているWebアプリやソフトウェアなど をご紹介。何度お勧めしても足りない 位、助けられています。低スキルな 自分にとっては無いと困る。そんな ツールをシェアしたいと思います。 Web制作時、個人的にかなり助かっ ているWebアプリやソフトウェアなど をご紹介。何度お勧めしても足りない 位、助けられています。低スキルな 自分にとっては無いと困る。そんな ツールをシェアしたいと思います。 もっと沢山あるんですが、特に利用しているものを。制作時には毎回利用しているかもしれません。基本的に無料のものを使っています。順不同。 960 grid system グリッドシステムです。ブックマークレットも含め、色々手軽なのが嬉しい。何よりグリッドレイアウトはお客さん受け良い傾向にある気がします。 960 grid system Fire
ネットで英語の記事を読むときに抑えておきたい英語翻訳ツール3選 に関するライフレシピをご紹介します。nanapi [ナナピ]は、みんなで作る暮らしのレシピサイトです。はじめに インターネットでは英語の記事が多いとされています。調べ物などをする際に英語の記事にぶつかった、という経験がある人も多いのではないでしょうか。 日本のサイトに出ている時点で古い情報というのはたくさんあります。英語が読める人が多くなってきた今、海外の情報を一切読まないビジネスマン、というものの価値が減ってきてしまっているかもしれません。 しかし、英語が苦手な人がいきなり読もうと思ってもなかなか難しいものがあります。だからといって英語を勉強するのも時間がかかりすぎてしまいますね。 そこで、英語が苦手な人でもなんとかなる方法を紹介します。 その1:キングソフト辞書を使う オンライン辞書&オフラインの電子辞書が完全無料「キング
「CSS Corners」は角丸ボタンを作成できるジェネレータです。 CSS3でコードをはいてくれますよ。 角丸の大きさやグラデーション、ボタン全体の大きさが設定できます。 簡単に角丸ボタンが作成でき、さらにCSS3でコードを出してくれるところが便利ですね。 以下に使ってみた様子を載せておきます。 まず「CSS Corners」にアクセスします。 サイト全体はこんな感じ。 真ん中にボタンのプレビューがあります。設定を変更する度に更新されます。 下の灰色部分にCSS3のコードがはきだされますよ。 角丸ボタンを作ってみました。 こんな感じ。 プレビューがとっても便利で、細かい調整などにもってこいです。 CSS3で角丸が表現できるようになって、画像を作成しなくてもよくなりましたね~。 今後いろんな場面で使えそうなのでチェックしておきたいです。 (本記事で紹介したサイト:CSS Corners)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く