サイトやブログで使用しているスタイルシートをリファクタリングし、可読性・保守性を高めたCSS（Sassも）に変換してくれるオンラインサービスを紹介します。
スタイルシートの内容はそのままで、可読性・保守性を高めるオンラインサービス -CSS Trashman
サイトやブログで使用しているスタイルシートをリファクタリングし、可読性・保守性を高めたCSS（Sassも）に変換してくれるオンラインサービスを紹介します。
ウェブページがデザイン通りに実装されたか確認できるちょっとかっこいいツール -Image-A-Trois
表示中のページに画像をオーバーレイで表示し、デザインの確認をするためのブックマークレットを紹介します。 Image-A-Trois [ad#ad-2] Image-A-Troisは下記キャプチャのように半透明のパネルを表示することができ、パネルには画像を配置することができます。 パネルはサイズの変更やドラッグで移動も可能です。
わずか数秒で自分用のHTML5のテンプレート一式を作成するオンラインサービス -Initializr
HTML5でサイトを作成する時に必要なHTML5の雛形、jQuery, Modernizrなどのスクリプト、CSSのリセットなど一式を自分用にカスタマイズして作成できるオンラインサービスを紹介します。 Initializr - Start your HTML5 project in 15 seconds! [ad#ad-2] InitializrでHTML5のテンプレート一式を作成する方法 HTML5用のテンプレート一式を作成するのは、わずか数秒で簡単にできます。 トップページにアクセスし、4つの選択項目から自分の必要なものをチェックし、最後に「Download」をクリックするだけです。 Initializr - Start your HTML5 project in 15 seconds! 選択項目のキャプチャ [ad#ad-2] Initializrで作成されるHTML5のテンプレート
洗練されたデザインのローディングのアニメーション画像が作成できる -Chimply
サークルタイプやバータイプのローディングに使用するアニメーション画像がオンラインで簡単に作成できる「Chimply」を紹介します。
[CSS]スタイルシートを自動でIE6対応にするオンラインサービス -ie6fixer
手元のスタイルシートをフロートやネガティブマージンなどIE6のバグを回避する記述を自動生成するオンラインサービス「ie6fixer」を紹介します。 ie6fixer IE6に対応したスタイルシートを生成する方法は、以下の手順です。 「master stylesheet」の欄に、スタイルシートを入力。 「Give me my ie6 fixes」ボタンをクリック。 以上で、IE6のバグに対応したスタイルシートが生成。 IE6のバグに対応している箇所は、現在のところ下記の通りです。 「min-height」は、「height」に変更。 「float」は、「display:inline;」を追加。 「position:relative;」は、「zoom:1;」を追加。 ネガティブマージンは、「position:relative; zoom:1;」を追加。 「overflow:hidden;」は、
[CSS]スタイルシートの構造を把握しやすくするオンラインサービス -Styleneat
スタイルシートで使用しているセレクタの構造に合わせて、自動でインデントして整形するオンラインサービス「Styleneat」を紹介します。 Styleneat - CSS Organizer セットできるスタイルシートは、下記の３つに対応しています。 直接スタイルシートを入力して、インデント スタイルシートファイルをアップロードして、インデント スタイルシートのURLを指定して、インデント 記述の順番を変更することはないので、レイアウトの崩れは生じないとのことです。
費用をかけずにウェブページを最適化 Googleウェブサイトオプティマイザー活用術
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
見ておきたいCSSツール40選 – creamu
CSSのツールを便利に使ってみたい。 そんなときにおすすめなのが、『40+ “Must see” CSS Tools』。見ておきたいCSSツール40選だ。 以下にいくつかご紹介。 » CSS Type Set CSSをいじりながらフォントを確認できる。↑のキャプチャはこちら » CSS Sprite Generator 「80×15」「88×31」のボタンジェネレーター » CSS Optimizer CSSを圧縮してくれる » Grid Designer 2 カラム数と幅を指定することでグリッドを作ってくれる » Em Calculator ピクセル値を相対値であるemに変換してくれる その他のリストは以下から。 » 40+ “Must see” CSS Tools 見ておきたいCSSツール、チェックして使ってみてはいかがだろうか。 今日もいい天気ですねー。がんばろう。
【黄金比・計算ツール・2カラム対応】 - 黄金比計算ツール
重要なお知らせ：このページのツールは、Flashの技術を用いて表示させていたため、現在は動かすことができません。申し訳ございませんが、ご了承下さい。 Webデザインに黄金比を取り入れよう - Re:Creator’s Kansaiに、黄金比をWebデザインに活用する海外の記事の翻訳が載っていました。 黄金比とは、最も美しいとされる比「1:(1+√5)/2」のことで、近似値は1:1.618、約5:8です。「その美しさをWebデザインでも」というのがエントリの趣旨です。 Webデザインの場合、横幅を固定し、縦幅は固定しないデザインが一般的です（ディスプレイサイズを考え、文字数の増加は横方向のスクロールなしに、縦方向へのスクロールで対応している）。Flashで作られたサイトなどは、縦幅も横幅も固定している場合があります。 Webデザインに黄金比を取り入れようとした場合、全体の横幅と横幅の比からそ
HTMLから不要なコードを削除できるオンラインサービス -WordOff | コリス
WordOffは、WYSIWYGエディタでの作成時に生じるような不要なソースコードを削除できるオンラインサービスです。 WordOff 使い方は簡単で、ソースコードをフォームに入力し、「clean up」ボタンをクリックすると、不要なソースコードを削除します。 削除対象は、下記の通りです。 a要素以外のすべての属性 すべての<span>と<div> 空の要素 ソースコードはページのすべてを対象にするというよりは、テーブルだけなど一部を対象にするのが実用的かと思います。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3の制作をぐっと楽にする厳選20のオンラインツール
WordPressのテーマをさくっと検索できる『Quali Themes』 | 100SHIKI
あの有名なウェブサービスやサイトのクローンが作成できる -ScriptCopy.com
オンラインでドロップダウン型のナビゲーションを簡単作成 -Pure CSS Menu
HTML、CSS、JavaScriptの練習に最適な便利ツール『rendur』 - 100SHIKI ～ 世界のアイデアを日替わりで ～
商用利用もOK！BGMなどに気軽に使える無料の音楽素材『Purple Planet』 | 100SHIKI
ウェブ製作に役立ちそうなタグ付ダミーテキスト『HTML Ipsum』 | 100SHIKI