Webサイトの品質をアップさせる便利ツール＆機能のまとめ | ベイジの社長ブログ
成熟市場においては、品質の高さでは優位性を築けなくなると言われます。しかし、だから品質にこだわらなくても大丈夫、と考えるのは早計です。裏を返せば、品質の高さが当たり前になっているため、少し品質が低いだけでブランドを大きく傷付けやすい環境になっているとも言えます。 そういった考えもあって、今年行っている当社のブランド再構築活動の中では、高い品質を担保するためのレギュレーションの整備に力を入れてきました。あわせて、当社として利用する品質を維持するためのツールや機能も改めて洗い出してみました。今日はこの内容を公開させていただきます。 JavaScriptエラーを無くす JavaScriptのエラーは、大きな問題が起こっていないように見えても、大事な機能が動かなくなったり、スペックの低いマシンで極端に挙動が遅くなったりすることがあります。各ブラウザのデフォルト機能で簡単にチェックできますので、エラ
[JS]一行追加するだけで、IE6/7/8でもHTML5のvideoとaudioを利用できる -html5media
HTML5のvideo要素やaudio要素をサポートしていないメジャーブラウザでもたった一行、ページに追加するだけでこれらを利用できるようにするスクリプトを紹介します。 html5media デモページ [ad#ad-2] html5mediaの実装 html5mediaの利用方法は簡単です。 ページに追加する一行 下記をページのhead内に記述します。 <script src="http://api.html5media.info/1.1.4/html5media.min.js"></script> これだけで、すべてのメジャーブラウザでHTML5のvideoとaudioを利用できるようになります。 video, audioに非対応のIE7でも期待通りに動画が再生されます。 IE6(IE Tester)でのキャプチャ 参考：video, audioのサポート状況 video, audio
さらなる「#!」URL批判 - karasuyamatenguの日記
このブログはlifehackerを含むgawkerメディア系サイトの#!URLへの移行を批判している。 http://isolani.co.uk/blog/javascript/BreakingTheWebWithHashBangs/ 以下、isolaniとテングの見解をごっちゃ混ぜに紹介する。 lifehacker他のgawkerメディアサイトが数日前に長時間におよびアクセス不能になった。(厳密に言うとページ内のコンテンツアクセス不能になった) #!URLベースのサイトはJavaScriptにエラーがあるとコンテンツが一切ロードせずのっぺらぼう状態になってしまうようだ。 #!について 「#!」は何で呼ぶの？ shebangと綴られる。 Hash=# Bang=!の略 発音すると「シバン」といったところか。(ちなみにUnixの#!とは無関係) 以下「#URL」は： サイト内のロケーション情
checkboxやradioボタンを個性的なデザインにできるjQueryプラグイン「ezMark」:phpspot開発日誌
ezMark jQuery Plugin - Stylize Checkbox and Radio Button Easily checkboxやradioボタンを個性的なデザインにできるjQueryプラグイン「ezMark」。 次のようなデザインにすることが可能です。CSSをカスタマイズしてiPhoneっぽくすることも出来ます $(element).ezMark() とするだけでスタイリングできるのはいいですね。 関連エントリ フォームのユーザビリティに貢献するjQueryプラグイン ドロップダウンメニューにテーブルやフォーム等何でも埋め込んでしまえるjQueryプラグイン「MegaMenu」 ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」 サイト内にTwitter投稿用のフォームを直接埋め込んでしまえるjQueryプラグイン「
jQueryの日本語の解説サイトと国産のプラグイン集
MopBox 複数パネル（デモには100以上のパネルも）の表示にも対応した、画像・Flash・動画などを表示できるドラッグ移動可能なボックス。
初心者さんのためのWebサイト制作に役立つリンク集
2017年6月29日 Webサイト制作 「Webサイト勉強するのにおすすめのサイトを教えてください！」との声が多いのですが、日本のWeb関連チュートリアルサイトをあまり見たことがなかったので、今までおすすめできませんでした…。ということでちょっとググって初心者さんによさそうなサイトをいくつか紹介します。小難しい単語が並んであるようなサイトは避けているつもりですが、わかりにくかったらすみません。他にもおすすめサイトがあればぜひコメント欄にて教えてください！ ↑私が10年以上利用している会計ソフト！ Webサイトを作る流れ まずはWebサイトを作る目的を考える 誰のため？何のため？Webサイトを作り始める前に。 サイトマップと呼ばれる構成図を作成 Webサイトの構成図を簡単に作れる便利ツール ワイヤーフレーム（Webサイトのレイアウト）を作成 Webサイトの骨組み: ワイヤーフレームを素早く・
webデザイナーのためのjQueryベストプラグイン＆チュートリアル10個
かなり人気のあるjQueryですが、そんなjQueryの私個人が選ぶ素敵なプラグインとチュートリアル10選。 とりあえず定番的なものをどうぞ。 ちなみにjQueryを自作できるレベルまで手軽になりたい人は以下記事参照。 web制作の現場で使うjQueryデザイン入門が激しくお勧めな件 タグクラウドの細分化 jquery Hover Sub Tag Cloud - Noupe サンプルデモ これかなり好き。 タグクラウドをさらに細分化させて表示させてます。 こういう発想は今までなかったので最初見たときちょっと感動しましたね。 ローディングページ How to Load In and Animate Content with jQuery | Nettuts+ サンプルデモのメニュー部分をクリックしてみてください。 右上にローディングのマークが若干出て、さらにアコーディオン風に内容が変わります
MOONGIFT: » jQTouch用のjQuery拡張「jQExtensions」:オープンソースを毎日紹介
jQExtensionsはjQuery/JavaScript製、iPhone/iPod Touch用のオープンソース・ソフトウェア。iPhone向けのWebサイトを開発する場合、いわゆる携帯サイトのように幾つかの特徴がある。とはいえPCのWebブラウザ並みの機能はあるので携帯電話ほどの制約はない。 フローティングウィンドウ ほとんどがデザイン的な特徴になる。既に幾つものデザインフレームワークが存在し、それらを上手に使うことで手早くiPhone向けサイトの開発が出来るようになっている。その一つとして知られるのがjQTouchであり、jQueryならではの拡張を行ったのがjQExtensionsだ。 jQExtensionsはjQTouch用の拡張を提供している。一つはフローティングウィンドウで、スライドさせても常に画面上部に表示される小窓機能だ。クリック一つで消したり、表示/非表示が切り替え
ドラッグやドロップを実装するjQueryプラグインいろいろ
初めてiGoogleを見た時に感動した ドラッグできるコンテンツ、jQueryの 普及で今や身近なものになっています。 WordPressも2.7になってからコンテンツの ドラッグが可能ですし、様々なWebサービス でも見かけるようになりました。そんな ドラッグやドロップを実装できるjQueryプラグインを まとめてみます。 こういったjsも道具である以上、使い方次第ではユーザビリティ向上にも繋がりますが損ねる事もあるかと思いますので、サイトにあわせて利用したいですね。 prettySociable jQuery plugin ドラッグ→リンク先を共有出来るサービス等に投稿するjQueryプラグイン。マウスオーバーするとコメントが出ますのでドラッグすればオーバーレイ状態になり、投稿先にドロップすればシェアできます。 PNGの透過バグのあるIE6対策のjsも同梱されています。試しに入れてみま
超簡単にソートやリサイズ、その場編集が可能なテーブルを作成できるJavaScriptライブラリ「TableKit」:phpspot開発日誌
超簡単にソートやリサイズ、その場編集が可能なテーブルを作成できるJavaScriptライブラリ「TableKit」 2007年05月31日- TableKit TableKit is a collection of HTML table enhancements using the Prototype framework. 超簡単にソートやリサイズ、その場編集が可能なテーブルを作成できるJavaScriptライブラリ「TableKit」。 次のようなExcel風テーブルが簡単に作れます。 どれぐらい簡単か、というと、必要なJavaScriptを読み込んだあと、table の class に次のように値を指定するだけ。 <table class="sortable resizable editable"> 最低幅の指定など、動作に関するカスタマイズも豊富なオプションによって指定可能です。 こ
Zen-Codingでさらにコーディングを1.5倍くらい速くするためのカスタマイズ方法 - EC studio デザインブログ
Zen-CodingでHTML/CSSコーディング作業の効率があがった人が増えてきたのではないかと思いますが、そこでさらにカスタマイズすることで効率化アップする方法を紹介します。 Zen-Codingではあらかじめ多くのHTML/CSSのショートコード、スニペットが登録されていますが、Zen-Codingを構成するファイルを少し修正するだけで、オリジナルのコードを登録することができます。 JavaScriptを触ることにはなりますが、JavaScriptを知らなくても大丈夫なぐらい簡単です。 zen_setting.jsに秘密がある Zen-Codingをダウンロードすると、対応アプリケーションごとのファイルをダウンロードすることができますが、そのダウンロードしたファイルの中にはzen_setting.jsというファイルが存在しています。 実はその中に、省略コードやスニペットがすべて書き込
40分で覚える！jQuery速習講座 (1/6)
いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは？ そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目：導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー本体（JavaScriptファイル）は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。
)
フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」:phpspot開発日誌
PHPからTwitterを簡単に操作できるPEARパッケージ「Services_Twitter」がアッ... 次の記事 ≫：PHP関数の挙動をちょっと調べたいときに助かる「PHP Functions Online」 jQuery Form Tips Plugin フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」 フォームにデフォルト値を入れておくことで利用者が何をいれていいのか、というのが直感的にわかり、かつスペースもとらないのでよく使われる手法ですが、実装も超簡単にやりたいですね。 jQuery Form Tips を使えば、フォーム要素の title 属性に値を入れておくだけでヒントを自動表示できます。 <p> <label for="i1">Field1</label><br /> <input type="text" name="i1"
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Components · Twitter Bootstrap
わずか8KBのjQuery用カレンダープラグイン「CalendarPicker」 | Web活メモ帳
http://moto-mono.net/2009/07/07/jqueryplugins-i-have-used.html
css-lecture.com
IDEA * IDEA
[JS]ブラウザのサイズに合わせてレイアウトがアニメーションで変更されるスクリプト -Sliding Resizable Grid
WEB制作者が一度は触ってみておくべきオープンソース『Ext』*ホームページを作る人のネタ帳
