Dirty Markupは、HTMl、css、JavaScriptのコードをインデントして整形してくれるツールです。高機能ではありませんが、シンプルで使いやすく、動作も軽量です。 Dirty Markup
HTML、CSS、JavaScriptのコード整形ツール・「Dirty Markup」 - かちびと.net
Dirty Markupは、HTMl、css、JavaScriptのコードをインデントして整形してくれるツールです。高機能ではありませんが、シンプルで使いやすく、動作も軽量です。 Dirty Markup
[JS]便利で簡単！スクリプトやスタイルシートをブラウザ・OSごとに分岐して利用できる超軽量高速のスクリプト -Conditionizr
IE6/7/8/9/10, Firefox, Chrome, Safari, Operaなどのブラウザだけでなく、Win, Mac LinuxなどのOS、iPadやiPhoneのRetinaディスプレイ用に条件分岐して、外部スクリプトやスタイルシートをロードさせたり、classを付与してHTMLで利用できたりする超軽量高速の単体で動作するスクリプトを紹介します。 Conditionizr Conditionizrの特徴 Conditionizrの使い方 Conditionizrの特徴 ConditionizrはjQueryより50%高速に動作し、条件付きのJavaScriptとCSSをサポートする3KBの超軽量スクリプトです。 条件付きのHTMLタグ 条件付きの外部スクリプトやスタイルシートのロード カスタマイズされたスクリプトにも対応 IE, Firefox, Chrome, Safar
iPhone/iPadで使えるHTMLソースビューワー·Snoopy MOONGIFT
SnoopyはJavaScript製のフリーウェア（ソースコードは公開されている）。iPadやiPhoneの最適化サイトを構築していて面倒なのが、HTMLソースの閲覧機能がないことだ。シミュレータですら閲覧できないのでデバッグがしづらい。ユーザエージェントを変えればPCからでも見られるが、完全に真似する訳ではない。 プロパティ 必要なのは、iPhone/iPad上でその場でHTMLソースを見る機能だ。今表示されている内容をそのままソース表示する、そんなブックマークレット型ソフトウェアがSnoopyになる。 Snoopyは自分でサーバを立てても良いし、Snoopy配布サイトにあるブックマークレットを使っても良い。いずれにしてもiPhone/iPad上で実行するとフローティングウィンドウが表示される。文字コードやHTML構成についての情報が閲覧できる。 こちらは生成されたHTMLソース そして
[JS]派手な演出は無し！レスポンシブ対応のレイアウトを素早く構築するスクリプト -jquery.columns
サイズを変更するとアニメーションでパネルが移動するなどの派手な演出は一切無しで、レスポンシブ対応のレイアウトを素早く提供するjQueryのプラグインを紹介します。 jquery.columns -GitHub jquery.columnsのデモ jquery.columnsの使い方 jquery.columnsのデモ 対応ブラウザは、IE9/10, Firefox, Chrome, Safari, Operaです。 まずは、デスクトップサイズとして幅1,200pxでの表示から。 デモページ：幅480pxで表示 jquery.columnsの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.
HTML5でつくられた、ページ遷移・画面遷移のアイディアがすごい
HTMLファイ部のほんだです。シュッ 「ページ遷移」、聞くだけでゾクゾクしませんか？ 僕は大好きです。 Web Creator's Contest Q（HTML、CSS、JavaScript エンジニアのためのコンテストサイト）では、 ページ遷移・画面遷移をテーマにしたコンテストを開催中です。 とても好評で、5回目となった当コンテスト。 今回のテーマも、力の入ったコードがたくさん投稿されています！ 魅力的な画面遷移エフェクトのコード集！ Cubic Transition ※「▶Play」ボタンをクリック！
jQueryでFacebookページのウォールを自分のサイトに表示する方法（簡易バージョン）
Posted: 2012.08.21 / Category: javascript / Tag: jQuery FacebookページのウォールはFeedを出力しています。 これをGoogle AJAX Feedを利用してjsonpへ変換してjQueryで表示する方法をご紹介します。 FacebookページのID確認方法 FacebookページのURLを設定していない場合、URLの末尾がIDになります。 もしURLの設定をしている場合、IDはURLではわかりませんので「graph.facebook.com」にアクセスすると簡単に確認することができます。 たとえば「Nike Japan」だったら、Facebookページは下記ですね。 http://www.facebook.com/nikejapan そのままドメイン名を「graph.facebook.com」にしてアクセスします。 http
ドラッグ＆ドロップでファイルをアップできるHTML5のデモ:phpspot開発日誌
Creating a Complete HTML5 Drag and Drop File Uploader with jQuery | InsertHTML ドラッグ＆ドロップでファイルをアップできるHTML5のデモ。 デスクトップなどからファイルをブラウザにドロップしてサムネイルを表示→ボタンを押下でアップロード実施というインタフェースのアップローダ実装デモです。 ソースをDLしてそのまま使うことも可能です。 ドロップするとサムネイルと共にボタンが表示されます。 ボタンを押すとファイルがアップロードされます。 使い慣れるといちいちダイアログからファイルを選ぶのが馬鹿らしくなりますね。 サンプルにはPHPスクリプトもおまけでついてきますが、値をValidateしていなかったりするため、実際に利用するには注意が必要そうです。 関連エントリ これは必見のWEBデザインの近未来。HTML5で構築
HTML5の新要素を IE8以下を対応させる方法
HTML5が少しづつですが普及してきて日本の一般企業でも HTML5が利用されるようになってきました。ただ、その際に気になるのは IE です。IE6 はブラウザ対象から外れてきていますが、IE7, IE8 は対象から外すことはできません。しかしながら、IE7、IE8 は HTML5の新要素（nav, article, header, footer, section, hgroup）を認識することができません。そのため CSS が思った通りに表示されなかったりします。 どうしたら良いでしょうか？HTML5+CSS基礎講座で紹介している内容ですが抜粋してご紹介いたします。 これを解消するには JavaScript を利用します。イギリスのHTML5関連ブログ HTML5Doctor の筆者の一人でもある Remy SharpはIEにHTML5を対応する JavaScript を用意してくれてい
[JS]プロダクトの一覧表示を1クリックで、リストとグリッドに切り替えるチュートリアル
ベーシックなHTMLとCSSで実装されたプロダクトページの表示をリストとグリッドに切り替えるjQueryのチュートリアルを紹介します。 Building a List/Grid View Switcher with jQuery [ad#ad-2] デモ 実装 デモ 表示の切り替えは、右上のアイコンをクリックで。 デフォルトはリスト表示で、プロダクトのサムネイル、リンク、購入ボタンがセットになっています。 デモページ：グリッド表示 実装 HTML HTMLはそれほど複雑ではありません。 まずは、右上の切替用のアイコンのHTMLです。 <span class="list-style-buttons"> <a href="#" id="gridview" class="switcher"><img src="images/grid-view.png" alt="Grid"></a> <a hr
HTML5のmenu要素にも対応した、独自の右クリックメニューを実装するjQueryプラグイン・jQuery contextMenu
HTML5のmenu要素もサポートしている オリジナルのコンテキストメニュー を実装するjQueryプラグインです。 普通のサイトじゃ使わないでしょう けど、最近ではHTML5製のリッチコン テンツ等利用するシーンもあるかも なのでメモがてら。 基本的に通常のWebサイトでコンテキストメニューを変えてしまうのはユーザビリティを大きく損ないますが、HTML5によるペイントツールやゲームなど幅広いコンテンツの実装が可能になってきましたのでこういったライブラリも用途が出来始めた気がします。 右クリックメニューを独自のものに変えます。それだけならちょっとアレなんですが、このプラグインは左クリックメニューにも出来るので一応覚えておいてもいいんじゃないかなと。他にもmenu要素にも対応してたり、アイコンを付けたりなどいろいろ応用が利くみたい。 右クリックでフォームが出る・・なんてのも作れる。実際あった
IE8以前に救済。HTML5のタグを利用可能に·html5shiv MOONGIFT
html5shivはIEをはじめとするHTML5非対応WebブラウザでHTML5のタグとスタイルを使えるようにするソフトウェアです。 HTML5のWebサイトを作りたいと思いつつ、IE向けのデザイン適用について心配する声は多数あります。そこで使ってみたいのがhtml5shivです。HTML5非対応のIEでもHTML5の要素を使ったデザインをサポートします。 例えばこんなデザイン。HTML5を使っていますがちゃんとスタイルシートが当たっています。 ソースコード。sectionタグなどを使っています。 まだ開発中ということもあって全てのテストが通る訳ではなさそうです。 別なソース。markタグを使ったり、jQueryも使えています。 こんな感じのグラフも描けています。 グラフのソース。おそらくCanvasタグで描かれているはず。 html5shivを使えばHTML5非対応のWebブラウザであっ
SIE0.93betaの公開 - プラグインレスでSVGを表示する「SIE」開発ブログ
SVGのsymbol要素をサポートしてみました 本日、SIE0.93betaを公開しましたが、新しく、SVGのsymbol要素がサポートされています。ベータ版ですので、不安定かもしれませんので、ご注意ください。 ダウンロード http://sourceforge.jp/projects/sie/downloads/54706/sie-093beta.zip/ 更新履歴 version 0.92からの変更点 dur属性がindefiniteの場合に対応 endElementメソッドとbeginElementメソッドのリスト更新バグを修正 dur属性の規定値を、indefiniteから変更 NAIBU.stop関数をgetCurrentTimeメソッドを中心に修正 set要素に関するバグの修正 set要素のendEventが発火しないバグを修正 チケット #27038「symbol要素が未実装
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
sakurachiro.com
