jQueryによるフォーム部品操作のレシピ - むつらつれづれ
テキストボックスやラジオボタンなどのフォーム部品は、論理モデルとしては単純なnameとvalueの組み合わせであるものの、jQueryを以ってしても画面上では統一的に扱えずに意外と苦労する。忘れがちなので纏めてみた。 フォーム部品共通 フォーム部品（のjQueryオブジェクト）を取得する var obj = $('#target'); // id指定 var obj = $('.targets'); // class指定 var obj = $('input[@name=xxx]'); // name指定 テキストエリア、リストメニューなど同一ドキュメントで唯一なものにはユニークなidを振っておき、チェックボックスやラジオボタンなど同一のname要素で複数存在するものにはそれらで共通のclassを振っておくか、name要素で指定するのが無難か。 テキストボックス（input[@type=t
素晴らしいHTMLメールテンプレート配布サイト – creamu
HONGKIATで、素晴らしいHTMLメールテンプレートがまとまっています。 ざっといくつかご紹介。 Campaign Monitor – 30 FREE HTML Newsletter Templates OutlookやThunderbird、Gmaiといった多くのメジャークライアント、Webメールでテストされたテンプレート集 Carbon Graffiti – 10 Free email marketing templates デザインに優れたテンプレート。シンプルなものから凝ったものまで Download PDFなどをダウンロードするリンクのあるテンプレート Welcome サービス登録時のサンクスメールに使えるテンプレート Blog Newsletter ブログをニュースレター形式で配信できるテンプレート。読者との関係作りに Malibu セール情報などをプロモーションする用のテ
ウノウラボ Unoh Labs: IEでlabelの子要素に画像を含める
yamaokaです。 HTMLのフォームでチェックボックスやラジオボタンを扱う場合、 対応したlabel要素を用意することが多いと思います。 <input type="checkbox" id="foo" name="foo"> <label for="foo"> キャプション </label> わざわざ小さなチェックボックスやラジオボタンを狙ってクリックする必要がなくなり、 labelタグで囲まれたキャプションの部分をクリックすればよいようになります。 しかし、次のような場合どうでしょう。 <input type="checkbox" id="foo" name="foo"> <label for="foo"> <img src="bar.gif"> キャプション </label> label要素の中にimg要素（画像）が含まれているような場合を考えてみます。 もっと具体的にいうと、ユー
Another HTML-lint gateway
HTML文書の文法をチェックし、採点します htmllint.cgi ver1.21 / htmllint.pm ver3.30 文法しか採点しません。内容の良し悪しは採点されません。結果に疑問を感じたら必ず結果の解説を読んでください。満点で慢心しないでください。 チェックしない警告は減点対象外で、満点は 100点です。チェックしても減点されない警告もあります。気に入らないチェック項目は外すことができます。お好みに調整してください。 また、基本的な設定項目だけの簡易ゲートウェイもあります。いちいちオプションなんかどうせ指定しないや、という方はご利用ください。 ダイアルアップはつらいので、ローカル環境でチェックしたいとお考えの方は、ダウンロードのページを参照してください。 チェック方式 チェックしたいHTMLのURLを指定するか、HTMLを下のテキスト領域に直接記述して、[チェック] ボタ
innerHTML と outerHTML の使用可否のまとめ
ie で読み取り専用になっている要素タグには innerHTML は使えません。代替手段として outerHTML を利用して動的に書き換えるテクなどがあります。読み取り専用の要素は例えば table 要素が該当しますが、ちょっとやそっと調べたところで何が読み取り専用の要素なのか資料がでてきません。 と言うわけで適当にスクリプト書いて調べてみました。取りあえず調べた要素は以下の通りです。Internet Explorer Developer Center < meta Object に記述されている要素一覧です。html 要素は outerHTML すると ie がフリーズするので調査対象外です。 <a> <abbr> <acronym> <address> <applet> <area> <attribute> <b> <base> <baseFont> <bdo> <bgSound>
送信ボタンの上にリンクがあればtabindex=-1に | ランサーズ社長日記
いいね！ 1 ツイート B! はてブ 86 Pocket 8 入力フォーム間の移動はマウスで行いますか？tabで移動しますか？ 例えばtabでログインフォームを移動していて、IDとパスワードを入力して、送信ボタンを押そうとする時に、送信ボタンの上にリンクがあって、間違ってリンクを押してしまい、とてもストレスを感じたことはありませんか？ 年始に興味がわくような話題ではないかもしれませんが、ちょっとしたTIPSに。。 ライブドアさんを例に出して申し訳ないのですが、ライブドアさんのログイン画面には「ID・パスワードを忘れた方」というリンクがあります。 パスワードを入力した後にtabを押すと、このリンクにカーソルが当たります。フォーム間の移動をtabで行い、最終フォームに来ると「tab + Enter」が癖になっている人に取って、このリンクを間違って押してしまうことが結構あります。リンク後に戻って
TABLEIZER! | Spreadsheets to HTML Tables Tool
Paste your cells from Excel, Google Docs or another spreadsheet here: Table Style Options
ウノウラボ Unoh Labs: CSSによるデザインワークと相性のよいHTMLって？
yamazakiです。最近だいぶあたたかくなってきましたね。おかげで日中眠くて仕方ないわけですがいかがお過ごしでしょうか。 ウノウに入る以前も含めてそれなりに長いことHTMLとCSSを書いてきたわけですが、今回は試みに、「だいたいこういうところに気を使われたHTMLだと、CSSでのデザイン適用やレイアウトがやりやすいな」というこれまでの経験則を簡単ですがまとめてみたいと思います。 まあ、このあたりはCSS書く人とHTML書く人の間でちゃんとルールを決めておけばいいだけの話なので、そもそも何の役に立つのか疑問といえば疑問ですが（笑 たとえばユーザがCSSを書いてスキンを作れるようなサービスを作る際、どういったHTMLにするかを決める、みたいな時には少し参考になる、かもしれません。 ID、クラスを適切に割り振って、要素がCSS側から一意に特定できるように たとえばグローバルナビゲーションとカ
ページ送り部分のデザイン研究:phpspot開発日誌
Pagination Gallery: Examples And Good Practices | Design Showcase | Smashing Magazine ページ送り部分のデザイン研究。 SmashingMagazine にて様々なサイトのページ送り部分を色々とまとめたエントリが公開されました。 なるほど、ページ送りといえど様々なデザイン方法があるようで、勉強になります。 色々なサンプルを見るうちに、自分のサイトのページャーはどんなのが合うか？といったことも分かってきそうです。 PHPでページャーを作る場合は、「PEAR :: Package :: Pager」を使えば簡単に作れます。
Particletree » Rediscovering the Button Element
IntroductionCreating a consistent interface for your users is a constant struggle for every application designer. Building consistency on the web is especially tough because the visual rendering differences across browsers and operating systems are wildly different and almost arbitrary in what can and cannot be done. No where does this become more apparent than when you’re dealing with form elemen
Tartan Designer - Tartan Maker - Tartan Background pattern generator
Warning: Undefined array key "page" in /home/mhd-01/www.tartanmaker.com/htdocs/modules/functions.php on line 5 Fatal error: Uncaught Error: Undefined constant "INACTIVE_USER" in /home/mhd-01/www.tartanmaker.com/htdocs/modules/authentication.php:5 Stack trace: #0 /home/mhd-01/www.tartanmaker.com/htdocs/sg_require.php(9): require_once() #1 /home/mhd-01/www.tartanmaker.com/htdocs/modules/user.php(5):
HTML JS版 Apollo アプリを作ってみる [てっく煮]
Apollo 開発の方法を丁寧に説明していく予定です。第１回目は HTML+JavaScript で Apollo アプリを作ってみます。 そこそこ実用的な例、ということでシンプルな RSS リーダーを作ることにします。Apollo での通信にはドメインの制約がない、という利点を体感することもできます。動作イメージはこんな感じです。 開発環境のインストールがまだの方は、Adobe Apolloメモ や はじめてのApolloプログラミング を参考にして準備しておいてください（手抜き）。 HTML と JavaScript の作成 まずは HTML を準備します。rss-simple.html として保存します。味気ないですが、あえてシンプルにしてます。 <html> <head> <title>Simple RSS</title> <script src="rss-simple.js"><
![HTML JS版 Apollo アプリを作ってみる [てっく煮]](https://cdn-ak-scissors.b.st-hatena.com/image/square/95abde13f7ed41248843e654a2f2ddcde8983db4/height=288;version=1;width=512/http%3A%2F%2Ftech.nitoyon.com%2Fapple-touch-icon-114x114.png){kind=icon}
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://css-tricks.com/examples/CleanCode/Beautiful-HTML.png
CSSによる段組（マルチカラム）レイアウト講座
Real-time HTML Editor
HTML/XHTML Character Entities : HTML.SU