先日紹介した「レイアウト・ナビゲーション・画像・タイポグラフィ・アイコン・ボタン・リンク編」の続編となる、リスト・カレンダー・表・フォームなどのエレメントの実装や進歩したスタイルシートのテクニック集をSmashing Magazineから紹介します。
[CSS]スタイルシートの実用的なテクニック集：エレメント・CSS3・Tips編
先日紹介した「レイアウト・ナビゲーション・画像・タイポグラフィ・アイコン・ボタン・リンク編」の続編となる、リスト・カレンダー・表・フォームなどのエレメントの実装や進歩したスタイルシートのテクニック集をSmashing Magazineから紹介します。
Webデザイナーのためのスターターキット27 – creamu
HONGKIATで、Webデザイナーのための便利ツールがたくさん紹介されています。 ざっとご紹介。 » Web Form Elements タブやボタン、ドロップダウンといった要素がPSDファイルになっている » Browser Form Elements PSD MacのFirefox3とWin Vista IE7のブラウザのフォーム要素 » Deluxive Creative Pack ステッカーやバッジなどの要素がたくさん » 960px Photoshop Grid Template 960pxのPhotoshopグリッドテンプレート » (More) Browser Templates ブラウザのテンプレート集。↑のキャプチャはこちら » Photoshop Cursor Pack カーソルがたくさん » Magazine PSD 雑誌のテンプレート かなりいい感じのがそろってい
フォームタグの正しいマークアップとCSS | Nutspress
フォームのテンプレートを作成する際に正しいHTMLのマークアップをしましょうってことで、『How to create perfect form mark up and style it with CSS』というのを見つけたので自分用に覚書。 よく忘れられがちなのが、<fieldset>というタグで無料配布されているCGIやサーバー側で提供しているフォーム、Wordpressなんかでももともとのテンプレートの中に<fieldset>タグを見かけることはほとんどなかったりする。なので、そのままカスタマイズして忘れてしまうタグのひとつがこの<fieldset>タグと<lavel>タグ。 <fieldset>の役割としてはフォームの入力項目をグループ化するためのタグで抜けていてもとくに構文のエラーが出るわけでもないので、結構無視されがち。タグの勉強をしだした頃はしっかり<fieldset>を書くよ
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(); });
検索フォームをCSSでデザインするサンプル集 | CSS Lecture
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
チェックボックスを綺麗に並べるCSSサンプル:phpspot開発日誌
Checkbox alignment in IE and Firefox | Xinotes チェックボックスを綺麗に並べるCSSサンプル。 次のように、チェックボックスの横に、改行入りのテキストを入れても綺麗に配置するサンプルです。 簡単そうでなかなか難しいテクニックかもしれないので覚えておくとよいかも。 サンプル IEでもFirefoxでも動作。Chromeでも試してみたところ動作しました。 関連エントリ クリーンなデザインでピュアＣＳＳなフォームを作るサンプル CSSでクールなINPUTフォームを作成するサンプル CSSベースのクールなフォーム、サンプル集 CSSでフォームデザインをする際のチュートリアル
A-Form プラグインを使ってみた
アークウェブさんが開発、提供する Movable Type 用メールフォーム管理用プラグイン 「A-Form」 を使う機会があったので設置方法など含めてご紹介。 アークウェブさんが開発、提供する Movable Type 用メールフォーム管理用プラグイン 「A-Form」 を使う機会があったので設置方法など含めてご紹介。 A-FormプラグインはMTの管理画面から各種フォームを簡単に作成し管理できます。アンケートフォームとか、セミナー申し込みフォームとか、その都度設問内容が変わるようなフォームの管理に向いてると思います。非営利での利用なら無料、営利目的のWebサイトで使用する場合は有料です。 導入時の注意点は下記のとおり。（2008年8月18日現在のバージョンで） MT4.2 には対応していない MT4.0x だと不具合があるので MT4.1 以降が必須 対応する文字コードは UTF-8
inputのimageボタンのロールオーバー
■サンプル ■ソース <input type="image" src="img/btn.gif" value="submit" tabindex="1" onmouseover="this.src='img/btn_o.gif'" onmouseout="this.src='img/btn.gif'" /> もと画像 img/btn.gif オーバー画像 img/btn_o.gif Comments otogawa | 2007/08/30 06:43 PM ＞hamaさん buttonタグってよく見るけど、まだ使ったことないですわー。css対応など他のサイトでも便利そうに聞いてるので、今度試してみますー♪java使わなくてもオーバーできたら便利ですもんね。 hama | 2007/08/09 08:17 AM http://kikky.net/pc/css_ir.html B
[使える CSS テクニック] CSSを使った見栄えの良いフォーム | バシャログ。
第 8 回目は「CSSを使った見栄えの良いフォーム」です。 フォームまわりは、各ブラウザによってかなり差異があります。 よって CSS だけで見栄えをよくしようとすると、結構手間だったります。 例をあげると magin・paddingが異なる borderの線がでない 背景が画像があたらない などなど そんな時に便利なのが 「niceforms」 という javascriptライブラリです。 すいませんが、今回だけは javascript を使わせてください。 niceforms のサンプルはこちら 導入方法 まずは、niceforms をダウンロードします。 次に、必要な jsファイル および cssファイル をインクルード。 <script language="javascript" type="text/javascript" src="niceforms.js"></script>
![[使える CSS テクニック] CSSを使った見栄えの良いフォーム | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4390ea5b2b558adfd9c349b9a080aae407daff/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)
フォームのフリガナを自動入力させるAutoRuby.js | ホームページ制作・運営のヒント
&lt;script Language=”javascript” src=”http://ad.jp.ap.valuecommerce.com/servlet/jsbanner?sid=2456113&amp;pid=877160106″&gt;&lt;/script&gt;&lt;noscript&gt;&lt;a href=”http://ck.jp.ap.valuecommerce.com/servlet/referral?sid=2456113&amp;pid=877160106″ target=”_blank” &gt;&lt;img src=”http://ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2456113&amp;pid
超クールなカレンダー型日付入力補助用JSライブラリ:phpspot開発日誌
Calendar: a Javascript class for Mootools that adds accessible and unobtrusive date pickers to your form elements Calendar is a Javascript class that adds accessible and unobtrusive date-pickers to your form elements. 超クールなカレンダー型日付入力補助用JSライブラリ。 次のような個性的なカレンダーで入力補助が可能です。 オシャレでかわいいカレンダー スタイルされたクールなカレンダー 写真入りのカレンダー mootoolsを使っていて次のように初期化するだけで簡単に使えるみたい myCal1 = new Calendar({ date1: 'd/m/Y' }, { direc
ヨモツネット 実験室 » フォームに入力された全角文字を自動で半角に変換する
このスクリプトに機能を追加した valueconvertor.js を公開しています。アーカイブとしてこの記事は残してありますが、この replaceascii.js 機能をご利用する場合は、より安定している valueconvertor.js のご利用をおすすめします。 概要 フォーム入力時に『半角英数で入力してください』の項目があった場合、ユーザの入力ミスを少なくしてあげるために便利なスクリプトです。 ただし、JavaScript が使えない環境では動作しませんので、あくまでもオプションとしてお使いください。 動作確認用の DEMO ダウンロード 使い方 ダウンロードした replaceascii.js を XHTML ファイルの head 要素内などで読み込んでください。 このとき、replaceascii.js と読み込む XHTML ファイルの文字コードが同じになるようにしてくだ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
selectボックスをシンプルなプルダウンに拡張するjQuery.selectable.js :: 5509
http://www.designwalker.com/2009/03/form-design-2.html
スムーズなスライドショーを実現するスクリプト: Recently Ajax
https://blog.8-p.info/2009/03/textfield-js
Blogger
http://www.yomotsu.net/lab/archives/valueconvertor/demo.html
pForm - Free HTML Form Builder - Create Web Form Template Online