フォームのインタフェースデザインを考える（1） - builder by ZDNet Japan
フォームのインターフェースデザイン フォームはユーザーから情報を送ってもらうのに欠かせない要素だ。ユーザーが入力で迷うことのないように、わかりやすくデザインすることが求められる要素でもある。 CSSではユーザーのアクションや入力項目の状態に応じてフォームのデザインを設定するセレクタがさまざまに定義・提案されており、FirefoxやSafariの対応も進んでいる。そこで今回から、フォームのインターフェースデザインに関連したセレクタを紹介する。 ユーザーのアクションに応じてフォームのデザインを変更する :hoverといったセレクタを利用すると、ユーザーのアクションに応じてスタイルシートを適用することができる。一般的にはリンク部分のデザインを変えるのに利用するが、フォーム部分のデザインを変えることも可能だ。利用できるセレクタは次の３種類となっている。 :hover 項目にカーソル（マウスポインタ
【レポート】Wicket入門 - JavaとHTMLだけで作るWebアプリケーション (1) Wicketとは? | エンタープライズ | マイコミジャーナル
WebアプリケーションフレームワークWicketが正式リリースされたのは2005年の6月。まもなく1年を迎ようとしている。Wicketは、Webアプリケーションの開発を容易にするため、それまでのフレームワークとは一風変わったアプローチを取っていることで注目された。Wicketの現在の最新版はバージョン1.1.1であり、6月には様々な改良が加えられたWicket 1.2がリリースされる予定になっている。本稿では、そのWicketを使用して簡単なWebアプリケーションを作成する方法を紹介する。 Webアプリケーションフレームワーク いわゆるWebブラウザから操作するWebアプリケーションを開発する場合、いちからすべて作成するということはまずない。まず基本となるWebアプリケーションを決め、実現したい機能から必要になるライブラリをそろえ、それらを組み合わせてシステムの開発をおこなう。 Javaを
HTMLの要素をSQLのように取り出せるPHPのライブラリ『htmlSQL』 | IDEA*IDEA
ドットインストール代表のライフハックブログ
MOONGIFT: » PHP『だけで』HTML2PDF「HTML2FPDF」:オープンソースを毎日紹介
HTMLをPDFにしたいという需要はある。面倒な帳票デザインをHTMLでできるとユーザ側で簡単な修正もできるし、画面をPDFでそのまま渡せると利便性も高い。 だが、実際にやろうと思うと色々問題がある。プリンタを使った方法で自動生成も考えられるが、さらに一歩進めてこれを利用してみてはどうだろう。 今回紹介するオープンソース・ソフトウェアはHTML2FPDF、PDFを使ってHTMLをPDFを作成するソフトウェアだ。 HTML2FPDFではHTMLをそのままPDFにする事ができる。実際のレンダリングにはFPDFを使っているので、PHPでHTML構造を解釈して位置をしているという事だ。 テーブルやCSSにも対応している。H1～H6タグやA/I/CODE/UL/OL/DIV/FORM/INPUT/TEXTAREA/P/DIV/SELECT等、様々なタグに対応している。画像はJPEG/PNG/GIFの
入力値を簡単に制限する「yav」とかフォーム入力チェックいろいろ
メール送信フォームやらアンケートの回答フォームやら、とにかくネット上には様々なフォームが存在しています。入力する値が間違っていると「エラー」表示を出すタイプのモノが多いですが、出される側から見れば「そんな値を入力できるようにするなよ！」「8文字までしか受け付けないんだったら、最初から入力可能な文字数を8文字に制限しておけよ！」「エラーが出たらどこを再入力すればいいのかわかりやすく表示してくれ！」などと思うこともしばしば。 というわけで、この「yav」は入力エラーチェックだけでなく、最初から入力できる値を制限したり、数字であれば範囲指定したり、入力チェック後にフォームの色を変えてわかりやすくしてくれたり、とにかくいろいろ便利な入力チェック機能を簡単に組み込むことができるオープンソースで開発されているJavaScriptファイルです。入力チェック後のエラー表示もポップアップウインドウやページ内
モバイルサイトのスピード構築術 - livedoor ディレクター Blog
こんにちは、櫛井です。 現在はPC版のPICSやAuthなどのPCサイトを主に担当していますが、昨年の4月に公開されたlivedoor PICSのモバイル版の開発についてお話しようかと思います。 （当時はモバイルの部署におり、livedoorのモバイルサイトを色々と作っていました） 機能面などはプレスリリースや開発日誌などをご覧いただくとして、livedoor PICSモバイル版の開発は以下の手順で行いました。 ■モバイルサイト作成の下準備 元々PC版でlivedoor PICSというPCサイトをスタートしていたので、基本的にはモバイル版で見る際の要件をまとめ、連携する他のコンテンツの状況を調査し、見せ方を資料に落とし込んでいく作業というのをまず行います。 私の場合は最初は手書きです。要件やイメージをざっくり形にするだけなので大抵は30分くらいで一気に書きます。 かなり汚いですが、こういう
CSSベースのクールなフォーム、サンプル集:phpspot開発日誌
Smashing Magazine | Blog Archive CSS-Based Forms: Modern Solutions In Web 2.0 registration and feedback forms can be found everywhere. Every start-up tries to attract visitors’ attention, CSSベースのクールなフォーム、サンプル集。 デザインにしにくい部分だからこそ、凝っておくと玄人受けはよい筈。色々なデザインがあって感心するばかりです。 Prettier Accessible Forms Badboy Niceforms Functional Pretty Forms Form Layout Templates Fun with forms - customized input elements Scr
HTML基礎講座/初心者のためのホームページ作り
■ 基礎講座 本講座をご利用するに当たって 本講座では、W3C が勧告している HTML4.01を中心に記述しています。Webページを制作する上で、HTML (Hyper Text Markup Language) は欠かせないものですが、本講座では、各種のブラウザが独自にサポートしている要素、スクリプトは掲載していません。 また、文書構造からビジュアルデザインを分離した、いわゆるアクセシビリティに重点をおいた講座内容となっています。 適切な文法、作法、知識などを身につけた上で、自由で独創的なコンテンツを作り、すばらしい Webの世界に情報を発信しましょう。 ■ Index HTML基礎講座目次 HTML4.01の概略 HTML制作の準備 WEB制作の作法 WEBとHTML HTMLの作成 文書の論理構造 要素の親子関係 ヘッダ情報 見出し 段落 ナビゲーションリンク フォントのコントロー
第４回 HTMLからXHTMLへの移行方法（1）：ITpro
HTMLからXHTMLにスムーズに移行するには、「書式の違い」をきちんと押さえておくことが不可欠。今回は「XML宣言」「文書型宣言」「XML名前空間と言語コード」「MIMEタイプ」「style要素とscript要素」について見ていこう。 HTMLよりも書式が厳格なXHTML XHTMLはHTMLをXMLで再定義したマークアップ言語であり、HTMLの簡便さを残しつつXMLの論理的厳密性を備えている。そのため、HTMLのようにルーズなコーディング（たとえば終了タグがないなど）でもブラウザで問題なく表示される、ということはほとんどない。したがって、書き方にエラーがないかどうか少し神経質にならなければならない。 また、CSSがきちんと適用されないというトラブルも、実はXHTMLが正しく書かれていないことに起因していることが少なくない。 これらの問題を避けるべく、エラーのないソースにするには、バリデ
RSS feed を JavaScript で HTML に埋め込む
RSS feed を JavaScript で HTML に埋め込む RSS を利用すると、自分の Blog サイトのサイドバーなどに、お気に入りの Blog サイトの更新情報などを表示することができます。このように、サイト間でのリンクの導線を動的に生成することができるのも、Blog の魅力の1つと言えます。今回は JavaScript Include と呼ばれる手法を使って、既存の Blog サイトに負荷をかけることなく、RSS を HTML に埋め込む手法を紹介します。 JavaScript Include 他サイトの RSS を自分の Blog サイトに持ってくるには、通常 Blog ツールに付属するプラグインやサードパーティツール(*1) を利用します。これらのツールは定期的に RSS を GET し、静的に生成される HTML を再構築したり、静的な HTML に書き出して、出力
HTMLタグ/ページ全般タグ/お気に入りアイコン（ファビコン）を指定する - TAG index
type属性の値には、使用する画像のMIMEタイプを指定します。 例えば、ファビコンで使用する画像がICO形式で作成されている場合は、以下のように記述します。 type="image/vnd.microsoft.icon" ファビコンで使用する画像は、ICO形式で作成するのが一般的です。（IEがこの画像形式にしか対応していないので） ファビコンの表示例 使用例 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>文書のタイトル</title> <link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon">
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WEBデザインセンス向上まとめ。カラー統一サイト30×5・計150サイト＋2200以上の無料HTMLテンプレ*ホームページを作る人のネタ帳
http://zymic.com/index.php
Collision du rythme