スゴイのが登場！Webやスマホページを積み木感覚でデザインできる、日本語対応の無料オンラインツール -STUDIO
国産のツールでは初じゃないでしょうか。 Webサイトやスマホアプリのページデザインを積み木感覚で楽しくデザインできる無料のオンラインサービスを紹介します。 操作が非常に快適で、ちょっと触るだけでもかなり楽しめます。 STUDIO STUDIOは無料で利用できるオンラインサービスで、日本語版と英語版がリリースされています。 ヘッダやフッタ、コンテンツのコンポーネントなどをドラッグ&ドロップでぽんっと配置するだけで、レイアウトを完成させることができます。コーディングのスキルは一切必要ありません。 レイアウトはすべてレスポンシブデザインに対応しており、従来のデザインツールでは表現できない動きやスクロールの再現も可能です。 STUDIOの作例 さっそく使用してみました。 まずは、メールアドレスとパスワードを登録します。
無駄なdiv要素やclassだらけのマークアップから卒業する方法
グリッドベースのレイアウトを作成すると、ついついdiv要素を多用してしまいがちですが、意味のあるデータにはそれに適した要素を使用し、無駄なdiv要素やclassだらけのマークアップから卒業する方法をWebdesigner Depotから紹介します。 Fight Div-itis and Class-itis With the 960 Grid System 下記は各ポイントを意訳したものです。 はじめに CSSのフレームワーク：960.gsの場合 classの乱用を避ける リスト要素の使用 画像とキャプションの使用 複数の見出しとパラグラフの使用 子要素のclassは親要素に はじめに 数年前までウェブページの設計はテーブルがスタンダードでした。そしてCSSはそれを大きく変え、今日ではCSSのフレームワークがウェブページの設計を容易にしてくれています。 しかしながら、このCSSのフレームワ
実用的なユーザビリティの10のポイント：ガイドライン編 | コリス
ユーザーにあなたのウェブページを容易で、そして楽しくアクセスできるようにする実用的なユーザビリティの10のポイント（ガイドライン編）をSmashing Magazineから紹介します。 Tumblr 多くのフォームは2カラムのレイアウトを採用し、ラベルはフィールドの左に配置されています。一見よさそうに思えますが、これは採用すべきではありません。 なぜなら、フォームは一般に垂直に方向付けがされているためです。ユーザーが左→右→左下と視線を動かすことより、上→下と移動する方が容易です。 また、ラベルを左に配置することはもう一つの問題があります。 あなたはラベルを右揃えと左揃えのどちらで配置しますか？ 左揃えはラベルを読みやすくしますが、どのフィールドのラベルか判断するのが難しい場合があります。 右揃えはその逆です。フィールドのラベルを判断するのは容易ですが、ラベルを俯瞰するのが困難です。 2.
[JS]オルトを利用して、画像にキャプションをかっこよく表示するスクリプト -Captify
画像のオルトを利用して、画像の上にオーバーレイでキャプションを表示するスクリプト「Captify」を紹介します。 Captify demo デモでは、画像にマウスオーバーすると、下側からキャプションがスライドしてオーバーレイで表示されます。 オプションでは、キャプションの表示位置（上・下）、表示のスピード、不透明度、表示方法（フェード・スライド・常設）、クラス名などが変更できます。 キャプションはデザインを適用したものを表示することも可能で、下記のようにdiv要素を使用することもできます。
IE確認の必需品「IETester」がIE8 RC1に対応してバージョンアップ
複数のバージョンのIEを同時に確認できる「IETester」が、IE8 RC1に対応し、機能を強化してv0.3にバージョンアップしました。 IETester IETesterの動作環境はWindows Vista or XP +IE7となっています。 確認できるIEのバージョンは、IE5.5, 6, 7, 8 RC1です。 新機能としては、ウインドウ下部のズームバーから、表示のズームをコントロールできます。 また、ツールバーの「All IE versions」をクリックすると、IEの全てのバージョンでの確認が簡単にできるようになりました。
[JS]シンプルなjQueryのプラグインが揃っている -Aquaron | コリス
Aquaronは、ナビゲーション、フロートしたエレメントの操作、クッキー・文字列の操作、エレメントの装飾などのシンプルなjQueryのプラグインを配布しているサイトです。
クロスブラウザのためのHTML/CSSのテクニック集 | コリス
anthonyshortのエントリーから、クロスブラウザのためのHTMLとCSSのテクニックの紹介です。 How to get Cross Browser Compatibility Every Time 簡単な意訳なので、詳細やキャプチャは上記エントリーを参考ください。 サマリー doctypeはstrictを使用し、正しいHTML/CSSを使用してください。 スタイルをリセットするスタイルシートを使用してください。 Firefoxでのレンダリングのために、テキストのスタイルシートに「-moz-opacity:0.99」を指定してください。 Safari用には「text-shadow:#000 0 0 0」を使用してください。 画像のリサイズをCSS/HTMLで行わないでください。 全てのブラウザでフォントのレンダリングを確認してください。 「Lucida」は使用しないでください。 テキ
[CSS]IE6でよく遭遇する6つのバグとその解決方法 | コリス
CSS Trickのエントリーから、IE6でよく遭遇する6つのバグとその解決方法の紹介です。 IE CSS Bugs That’ll Get You Every Time ボックスモデルのバグ マージンが二倍になってしまうバグ min-width, min-heihgtと同等の指定 Stepdownバグ hover擬似クラスをa要素以外にも対応 透過PNGを透過表示に対応 ボックスモデルのバグ <textarea name="code" class="css" cols="60" rows="5"> div#box{ width:100px; border:2px solid black; padding:10px; } </textarea>
[JS]jQueryのプラグイン33 1選 -2008年3月 | コリス
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Galleria 画像ギャラリー。 jQuery Multimedia Portfolio 画像・動画・音声のスライドショー。 Ea
エクセルのデータを見やすくする5つの簡単なテクニック | コリス
Chandoo.orgのエントリーから、条件付き書式を利用して、エクセルのデータを見やすくする5つのテクニックを紹介します。 Learn Cool Microsoft Excel Conditional Formatting Tricks テーブルの横列・縦列をハイライト 条件付き書式を使用したガントチャート セル内に配置するグラフ ミスやエラー・データ欠落などのハイライト表示 直感的に把握できるデータテーブル [ad#ad-2] エクセルデータは、Chandoo.orgのエントリーの一番下からダウンロードできます。 テーブルの横列・縦列をハイライト テーブルのデータを見やすくするために、横列・縦列を交互にハイライト表示にします。 ハイライトにするテーブル全体を選択します。 メニューより、[書式] - [条件付き書式] を選択。 「数式」を選択し、「=MOD(ROW(),2)=0」を入力し
swfファイルを抽出・解析・flaにデコンパイルするアプリケーション集 | コリス
サイトで使用しているFlashのswfファイルを抽出したり、flaファイルにデコンパイルしたり、ActionScriptを抽出できるアプリケーションのリンク集です。 [ad#ad-2] ※バージョンやプロテクトにより、対応不可なものもあります。 flaファイルにデコンパイル Action Scriptの抽出 swf内で使用しているファイルの抽出 ページに使用しているswfを抽出・保存 flaファイルにデコンパイル SWF Decompiler swfファイルをflaファイルにデコンパイルするアプリケーションです。 $79.99。体験版あり。 Motion Decompiler: 日本語版 swfファイルの解析や、flaファイルにデコンパイルするアプリケーションです。 ダウンロード版：9,800円。体験版あり。 Action Scriptの抽出 Flare swfファイルから、Action
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
なんと！異世界の地図を生成できるジェネレーター -Fantasy Map Generator
プロユースにも耐えられるクオリティの高いフリーのフォント集
[JS]打ち出し画像をフラッシュのようにダイナミックに切り替えるスクリプト -s3Slider
[CSS]いろいろな問題を解決する1行のスタイルシート集 | コリス