Mon, November 20, 2017

HTML5コーディングに役立つ優れたツール10選
10 Excellent HTML5 coding Tools Many Users Don’t Know About

 

■Initializr HTML5の雛形、jQuery等のスクリプト、CSSのリセット、サーバ設定などを自分用にカスタマイズしてパッケージ化し、ダウンロード出来るツールです。 使い方もとても簡単です。ウィザード形式で進ん...

HTML5のアウトライン(階層構造)解析ツール「HTML 5 Outliner」

 

HTML5ではアウトライン(階層構造)を意識してコーディングすることが重要ですが、 アウトラインの確認、チェックに役立つツールをご紹介します。 ■HTML 5 Outliner section、article、aside...

HTML5で使用可能な正規表現でのフォームのバリデーションを簡単にテストできる「HTML5 Pattern」

 

HTML5を使えば、正規表現でフォームの入力エラーチェック(バリデーション)が出来ます。 しかし、正規表現でバリデーションパターンを作って検証するのって結構面倒ですよね。 そんなときに役立ちそうなサイトがこちらです。 ■...

IE6、7、8でもCSS3のセレクタを利用可能にする「Selectivizr」

 

IEでもCSS3セレクタを利用可能にするJavaScript「Selectivizr.js」をご紹介します。 設置方法はとても簡単。jQueryのようなJSライブラリとselectivizr.jsを読み込むだけです。 ■...

HTML5の構文チェックツール「HTML5 Validator Bookmarklet」

 

最近スマートフォン対応等でHTML5を書くことが増えてきました。 HTML5のバリデータを探してた方は是非試してみてください。 使い方はとても簡単です。 url入力 or ファイルアップロード or ソース貼り付けを選択...

コピペで使える12のtext-shadowエフェクトサンプル集

 

ベーシックなものから3Dのような複雑なエフェクトまでいろいろありますよ。 コピペで使えるので重宝するかと思います。 ■The Basic Shadow ■Quick and Dirty Letterpress ■Hard...

HTML5のおさらい(続編)

 

以前ご紹介したW3G Blog Studiesさんのエントリーの続編になります。 ■続HTML5についてのおさらい – W3G Blog Studies 内容はこんな感じです。 hgroup要素 – 見出しの...

そのサイトで使われているHTML5の要素を元素表風にまとめたチートシート「Periodic Table of the Elements」

 

■Periodic Table of the Elements ページ上部にURLを入力してInspectしてみてください。 そのページで使用している要素をハイライトしてくれます。   要素をマウスオーバーすると、タグの...

HTML5ベースのオンライン・ダイアグラム図作成ツール 「Diagramo」

 

PNGやGIFなどで書き出すことも出来るようです。 使い勝手がよさそうですね。 ■HTML5 diagram editor   情報元:Diagram 情報元:HTML5でダイアグラム図を作成できる「Diagramo」 ...

見栄えを確認しながらコードを生成してくれるCSS3 Generator 「CSS3 Playground」

 

今まで紹介してきたCSS3ジェネレーターの中で一番使い勝手が良さそうです。 対応プロパティも角丸とボックスシャドウ、テキストシャドウ、CSS3 Transform(回転・変形)、ボーダー・背景周り、テキスト周りなど、豊富...

HTML5+CSS3+jQueryのテンプレートファイルセット 「HTML5 Boilerplate」

 

制作時のスタートキットとして利用出来るテンプレートファイルセットのご紹介です。 以前紹介した「HTML5 Reset」よりもプロフェッショナル向けとなっているようです。 ■HTML5 Boilerplate HTML5 ...

HTML5、CSS3のリセット用テンプレートファイルセット「HTML5 Reset」

 

HTML5+CSS3での制作時に汎用的に利用できるテンプレートファイルセットのご紹介です。 ■HTML5 Reset ファイル構成は以下のようになっています。 index.html テンプレートHTMLファイル css/...

Page 1 of 212»