jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法:phpspot開発日誌
Justify elements using jQuery and CSS jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法が紹介されております。 何ができるか？というのは次の図を見て頂くのがはやいでしょう。 ビフォア ↓↓↓↓ アフター これを実現するために、CSSとマークアップによって実現するのが普通ですが、jQueryによってもっとスマートに出来るようですね。 具体的には、次のように、label の中で width がもっとも大きいもののサイズを得て、そのサイズにJavaScriptで調整しちゃうというものです。 $(document).ready(function() { var max = 0; $("label").each(function(){ if ($(this).width() > max) max = $(this).width(); });
jQueryでアコーディオンを設定する際の注意
jQueryでアコーディオンを設定する際の注意 ネタ元：jQuery.js トピックのしつもんの89 アコーディオンを設定する際に動作がカクカクすることがあります。 サンプル この対応方法はアニメーションを設定したい要素にCSSなどでheightを与えてあげれば大丈夫です。 高さが可変でCSSでheightを設定できない場合は以下のようなコードを追加します。 $("dl dd").each(function(){ $(this).css("height",$(this).height()+"px"); }); サンプル アニメーションを設定する場合はheightを指定、これ重要です。 リキッドレイアウトの場合 リキッドレイアウトの場合heightを固定してしまうとウィンドウサイズを小さくした場合、ウィンドウが拡張されませんね。 その場合は以下のclickイベントの最初で高さを指定しておき
送信ボタンの上にリンクがあればtabindex=-1に | ランサーズ社長日記
いいね！ 1 ツイート B! はてブ 86 Pocket 8 入力フォーム間の移動はマウスで行いますか？tabで移動しますか？ 例えばtabでログインフォームを移動していて、IDとパスワードを入力して、送信ボタンを押そうとする時に、送信ボタンの上にリンクがあって、間違ってリンクを押してしまい、とてもストレスを感じたことはありませんか？ 年始に興味がわくような話題ではないかもしれませんが、ちょっとしたTIPSに。。 ライブドアさんを例に出して申し訳ないのですが、ライブドアさんのログイン画面には「ID・パスワードを忘れた方」というリンクがあります。 パスワードを入力した後にtabを押すと、このリンクにカーソルが当たります。フォーム間の移動をtabで行い、最終フォームに来ると「tab + Enter」が癖になっている人に取って、このリンクを間違って押してしまうことが結構あります。リンク後に戻って
ウェブページでpdfをリンクするときのちょっと便利な小技 - 血統の森 はてな
ウェブブラウザで開くと何かと不便な向きもあるpdfですが*1、ちょっと幸せになれるかもしれない小技を見つけたので紹介。 pdfを開く際にページを指定するなんて芸当ができる。 例えば、2ページ目を開きたいなら、URLのあとに#で区切って、page=2と記述すればいい。 http://www.jitec.ipa.go.jp/1_01mosikomi/20a_annaisho/20a_all.pdf#page=2 （IPA*2） とまあ、少なくともAcrobat Readerのプラグインが入っているなら、2ページ目が開く。 また、ズームを指定することができる。例えば50%にしたいなら、zoom=50とする。 http://www.jitec.ipa.go.jp/1_01mosikomi/20a_annaisho/20a_all.pdf#zoom=50 2ページ目かつ、ズームを50%としたいなら、
Mozilla Re-Mix: Firefox 3をカスタマイズする１５のabout:config設定。
かなりの数のアドオンがFirefox 3に対応したことにより、そろそろ完全に乗り換えられたユーザーも多いかと思います。 そんなFirefox 3ユーザーのために、今回はFirefoxをあれこれカスタマイズするための[about:config]でできる設定を列挙してみたいと思います。 ＜about:configの使い方＞ まず、about:configって何？という方のために基本的な利用方法を書いておきたいと思います。 設定画面を開くのは至って簡単です。 ロケーションバーに[about:config]と入力し、Enterキーを押してみましょう。 デフォルトの場合、以下のような警告画面が表示されますので、[細心の注意を払って使用する]をクリックします。 表示された画面の最上部には[フィルタ]というテキストボックスがありますので、ここに以下に並べる設定名をコピペして設定名を表示し、値を変更するこ
東京下町WEBクリエイターのおぼえがきBlog
普段の業務ではがっつりコーディングすることが多い私です。 TOPページのトピックス部分を制作していたら、こんなトラブルに見舞われました。 [症状] liやdt・ddなどの、要素が複数縦ならびするページを制作時。 <img>の入った行だけ高さがずれる。 （IE6、IE7での検証時。Firefox2、safari3では問題なし） [修正方法] li { line-height: 1.8; layout-grid-line: 1.8; } layout-grid-line要素はIEのみに適用される行の高さを指定するスタイルで、 これにline-heightと同じ値を入れておけば、imgが入ってもズレません。 よく文頭・文末についている「New!」などのアイコンを入れるには便利だと思います。 line-heightを入れずにpaddingやmarginを設定する方法もありますが、それだと要素内が複
[CSS]テキストにグラデーション効果をつけるスタイルシート
Web Designer Wallにエントリーされている、テキストにグラデーション効果をつけるスタイルシートの紹介です。 CSS Gradient Text Effect 仕組みは、見出し要素(h1)に空のspanを記述し、グラデーションの背景画像を表示しています。 デモページでは、下記のようなさまざまなグラデーションをつけたテキストがあります。 CSS Gradient Text Effectのデモページ 利点としては、下記のような点が挙げられています。 テキストなので、ブラウザからのサイズの拡大・縮小が可能。 背景画像を変更することで、グラデーションを変更することが可能。 見出し画像をいちいち作成する必要がない。 数が多い場合、作成時間・帯域の節約になる。
CSS擬似クラスを使うべき理由 | エンタープライズ | マイコミジャーナル
A List Apart - For People Who Make Websites HTMLとCSSは規格通りに使うとすれば縦横無尽にさまざまな記述ができる。しかし規格上サポートされているからといって、馬鹿正直にそうした機能を使うのは避けたい。シンプルな記述であとから読んでも理解しやすい、他人が読んでも理解しやすいHTMLやCSSを書けるようになることが理想だ。しかし誰しも最初は素人だ。エキスパートがまとめたドキュメントを参考にして、そうしたテクニックであり勘どころを学んでしまいたい。 フロントエンドデベロッパであるAlex Bischoff氏は5日(米国時間)、A List ApartにおいてKeeping Your Elements' Kids in Line with Offspringという名のもと、CSSやHTMLの記述方法について細かい技巧をまとめて発表した。同ドキュメント
HTML5の新要素にCSSを適用するテクニック
HTML5では、これまでにはHTML4やXHTMLでは規定されていなかった新たな要素が追加されています。Firefox 2.0、Opera 9、Safari 3では、未知の要素に対してCSSルールを記述したとしても有効になりますが、Internet Explorerでは無視されてしまいます。 もし将来的にHTML5でサイトを構築するような時が来たら、少なくとも現在リリースされているInternet Explorer6, 7対策に苦慮しそうです。 ところが、なんと、すでに、Mozilla CorporationのJavaScriptエバンジェリストであるジョン・レシグ（John Resig）氏のブログ記事『HTML5 Shiv』で、HTML5の新要素に対してCSSを適用させるテクニックが紹介されています。 簡単にまとめると、次のような感じです。 CSS: figure { border: 1
Webデザイン・デザイナーに役立つネタのまとめ | デザインフィードデータベース
Webデザイン・デザイナーに役立つネタを収集して、データベースにまとめて公開しています
ie7の「ページの拡大」によるレイアウト崩れは「letter-spacing」で回避できる？:WebClip - ウェブのニュースと Second Life (セカンドライフ) - CNET Japan
[みんなのお題]ie7の「ページの拡大」によるレイアウト崩れは「letter-spacing」で回避できる？ 公開日時： 2008/01/09 01:40 著者： ミキ・オキタ この記事のトピック Internet Explorer 7「ページの拡大」機能でレイアウトが崩れる 「letter-spacing」で「ページの拡大」時のレイアウト崩れを回避 Internet Explorer 7「ページの拡大」機能でレイアウトが崩れる こんにちは。“時代の3歩先をねらうWeb屋さん”ミキ・オキタです。 このブログ「WebClip ウェブデザインのニュース」では、Webデザイン・Webマーケティングの話題をお届けしている。 今回は、Web制作者にとって悩ましいブラウザの問題のひとつ、Internet Explorer 7の「ページの拡大」機能によるレイアウト崩れの回避方法について。 僕
spry - to-R
spryの記事一覧 【Adobe Spry TIPS】 ツールチップ ツールチップは文字などにマウスが重なったときに、詳細内容など表示する為の機能になります。 2008年2月25日 17:02 【Adobe Spry TIPS 】タブパネル タブパネルはタブでコンテンツを切り替えるためのUIになります。 2007年12月28日 05:54 【Adobe Spry TIPS】RSSの表示する件数を変更してページングをつける。 質問があったので解説です。 2007年12月18日 02:40 【Adobe Spry TIPS 番外編】よくある質問っぽいののSpryを使ったサンプル ネタ元：よくある質問っぽいののjQueryを使ったサンプル Spryでまねしてみました。 2007年12月 7日 01:15 【Adobe Spry TIPS】メニューバー ひとまず毎日更新はこのエントリーで終了。次回
Firefoxでポップアップブロックを無効にしているのにブロックされてしまう人へ - なまくらがたな
未だに沢山の人が困ってるようです Permalinkを見てると例のエントリを見てくれてる方が沢山いらっしゃいます。1年前のエントリですが、お役に立ててるようでとてもうれしいです。 で、ふと気になってhttp://twitter.1x1.jp/search/で検索してみた。 http://twitter.1x1.jp/search/?source=&keyword=%E3%83%9D%E3%83%83%E3%83%97%E3%82%A2%E3%83%83%E3%83%97+%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF&lang= http://twitter.1x1.jp/search/?source=&keyword=firefox+%E3%83%9D%E3%83%83%E3%83%97%E3%82%A2%E3%83%83%E3%83%97&lang= http
DreamWeaverのデザインビューで、clearfixのレイアウト崩れを防ぐ方法 | F+R (FplusR)
今日は、DreamWeaverのデザインビューで、clearfixのレイアウト崩れを防ぐ方法を紹介します。 DreamWeaverのデザインビューで、clearfixを指定したときに、デザインビューではレイアウトが崩れてしまいます。 私はデザインビューをあてにしないで作業していますが、たまにはあてにしたくなる時もあります。 そんなときには、clearfixを指定している部分に、「overflow:hidden;」「overflow:auto;」のどちらかを指定します。 これで、デザインビューでclearfixが原因でレイアウトが滅茶苦茶になる時はなくなるでしょう。 ただし、「overflow:hidden;」「overflow:auto;」は、諸刃の刀ですので、本番環境でのブラウザ確認はしっかりとやられたほうがいいでしょう。 これが原因で本番環境でレイアウトが変になっても責任は取れな
[CSS]高さの異なるカラムを揃えるスタイルシート | コリス
Columnas 100% altas Columnas 100% altasのエントリーでは、下記のデモのように高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介しています。 sample:高さがばらばらのdiv sample:高さが揃ったdiv スタイルシートは、各divに対して「padding-bottom」と「margin-bottom」に同じ数値をプラス値とマイナス値で指定を行い高さを揃え、それらのdiv要素を包んだdivで「overflow:hidden;」を指定します。 詳しくは、最小限にしたサンプルを作成したので参照ください。 高さの異なるカラムを揃えるスタイルシートのサンプル 下記の「32768px」って、何か特別な意味があるのでしょうか。
白い背景で、白い被写体を上手に撮る方法
How to Photograph White Object on White Background 以下、上記エントリーの意訳です。 ポイントとしては、白い背景に使用するのは、紙ではなく布にすること。そしてその布の表面には、光沢がないこと。 撮影する際は、タングステンライトを使用した自然光の中、もしくはフラッシュを使用した環境で行い、フラッシュ使用時には光を和らげるディフューザ(フラッシュに被せる布みたいなもの)を使用します。 撮影のモードは、マクロモードかマニュアルモードを使用します。 白い被写体を白い背景で撮影するTIPS ソフトな自然なウェーブが作れる布を背景に使用する。 Use one little colored piece in your white composition as a reference. 大きな暗い影を避けるために、全方向からライトを使用する。 ディテールを
可変幅で両側にドロップシャドウ（div一重で）
てんぽ: 可変幅で両側にドロップシャドウ（div一重で） CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど background-positionを%単位で指定し、ドロップシャドウ用の画像の大きさを調整することで、 画面の両側に影をつけたリキッドデザイン（画像の使用を極力控えてかっこいいCSSデザインをやってみよう大会のような）を実現できます。 しかも必要となるdivはひとつだけです。 このようなデザインでは divを二重にして一方のdivの左端に左側用の影画像を、もう一方のdivの右端に右側用の影画像を背景画像として指定するのが簡単です。 <div id="left"> <div id="right"> </div> </div> #left { width: 90%; margin: auto; background: url(shadow-left.gif) top
chaloowsスタッフBlog｜テキストを縦幅中央配置する方法
先日、CSSでテキストを縦幅(height)中央に配置する方法を聞かれたんです。 う～ん、そういえば僕もCSSを覚えたての頃は頭を悩ませた部分でした。 よくナビゲーション部分などで引っかかりました。 ここから続き text-alignプロパティを使用することで、横幅(width)の位置を指定できるのだから、 vertical-alignプロパティで縦幅も指定できないかと。 しかし、vertical-alignプロパティが適用できるのはインライン要素とテーブルのセル要素なんです。 じゃあ、どうすれば縦幅の中央にテキストを配置できるかですが、 方法はボックスの高さと同じ数値をline-heightプロパティに指定すれば良いんです。 ---------------- サンプル ---------------- ----【まとめ】----- 高さ50pxのブロック要素内で、縦幅の中
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SitePoint CSS Reference
3分でわかる！仕事に役立つExcelテクニック：ITpro
