<   2012年 06月 ( 6 )   > この月の画像一覧
(HTML)Uniform 入力フォームの見栄えを良くするスクリプト+CSS
(HTML)Niceforms 入力フォームの見栄えを良くするスクリプト+CSSで、Niceformsの紹介をしました。

今回取り上げる Uniform もフォーム項目の見栄えを良くするスクリプトですが、Niceforms よりかは構造的にシンプルです。
Niceformsほど凝った処理をしていないので、ある意味使いやすいです。

動作には jQuery が必要です。(UniformはjQueryプラグインです)

入力フォームの input, textarea, select, button にだけ適用されるようですね。(選択することも可能です)

こんな感じになります。(Firefox5)
e0091163_7192681.jpg



IE8だと、テキストボックスの端の丸みがどうも出ないようです。
e0091163_7193763.jpg



ダウンロードは、http://uniformjs.com/からできます。

使い方はまず、下記のように、外部ファイルを読み込みます。(jQueryは必須です)
<link href="uniform.default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript" src="jquery.uniform.js"></script>


そして、下記のスクリプトを挿入します。
<script type="text/javascript" charset="utf-8">
$(function(){
$("input, textarea, select, button").uniform();
});
</script>



IE6には対応してませんが、デフォルトのフォームを表示するようです。

もし、MVCフレームワーク等の関係で、mod_rewriteを設定しURLと実際のパスが異なるような設定にしていて画像が表示されない場合は、uniform.default.css 内のbackgroundスタイルに指定している画像パスに適切な値を設定してみるといいかと思います。


参考:
セクシーなフォームがつくれるjQueryのプラグイン「Uniform」 | Web活メモ帳
jQueryでクールなフォームエレメント実装プラグイン「Uniform」:phpspot開発日誌
フォームの見栄え・使い勝手を強化するjQueryプラグインいっぱい | DesignWalker
[PR]
by Jehoshaphat | 2012-06-28 07:21 | Webがらみ | Trackback | Comments(1)
(HTML)Niceforms 入力フォームの見栄えを良くするスクリプト+CSS
3流PGのようにデザインセンスがヘタレでXHTML+CSSがどうも苦手なプログラマに役立つスクリプトが、Niceforms です。

これを使うと、入力フォームの見栄えを簡単によくすることができます。

こんな感じになります。
e0091163_1482373.jpg


使い方は簡単で、http://www.emblematiq.com/lab/niceforms/download/からスクリプトダウンロードし、niceforms.js , niceforms-default.css を読み込みよう設定します。
そして、form のクラスを class="niceform" とするだけです。

HTML側は下記のような感じにしています。(文字数制限のためハイライト無し)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>hoge</title>
<link href="niceforms-default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="niceforms.js"></script>
</head>
<body>
<form class="niceform" method="post" action="chk.php" id="input">
<fieldset>
<legend>個人情報入力</legend>
<dl>
<dt>氏名</dt>
<dd><input type="text" maxlength="20" id="name" ></dd>
</dl>
<dl>
<dt>氏名(カナ)</dt>
<dd><input type="text" maxlength="20" id="kana" ></dd>
</dl>
<dl>
<dt>性別</dt>
<dd>
<input type="radio" id="sex" value="男">男
<input type="radio" id="sex" value="女">女
</dd>
</dl>
<dl>
<dt>年齢</dt>
<dd>
<select id="age" name="age" size="1">
<option value="0">10代</option>
<option value="1">20代</option>
<option value="2">30代</option>
<option value="3">40代</option>
<option value="4">50代</option>
<option value="5">60代</option>
</select>
</dd>
</dl>
<dl>
<dt>利用出来る言語</dt>
<dd>
<input type="checkbox" id="pg" value="">C/C++
<input type="checkbox" id="pg" value="">C#
<input type="checkbox" id="pg" value="">Objective-C
<input type="checkbox" id="pg" value="">Java
<input type="checkbox" id="pg" value="">VB/VB.Net
<input type="checkbox" id="pg" value="">JavaScript
<input type="checkbox" id="pg" value="">PHP
<input type="checkbox" id="pg" value="">Perl
<input type="checkbox" id="pg" value="">Ruby
<input type="checkbox" id="pg" value="">Python
</dd>
</dl>
<dl>
<dt>連絡先(TEL)</dt>
<dd><input type="text" size="16" style="ime-mode: disabled" maxlength="15" id="tel"></dd>
</dl>

</fieldset>
<input type="submit" value="送信" class="submitstyle" name="Submit">
</form>
</body>
</html>


ただし、問題点もありdd要素に通常の文字列をいれると、IE8の場合下記のように、その下の各ボックスがずれてしまいます。
e0091163_1483544.jpg

と、おもったらIE8が互換表示になっているだけでしたorz


IE6に対応してないのも難点ですね。

参考:
NiceFormsデモ
[JS]既存のフォームをかわいいデザインに変更するスクリプト -Niceforms | コリス
フォームを鮮やかに彩るjavascript「NiceForms」|skuare.net
フォームの見栄え・使い勝手を強化するjQueryプラグインいっぱい | DesignWalker
[PR]
by Jehoshaphat | 2012-06-27 01:53 | Webがらみ | Trackback | Comments(0)
(HTML)ul(リスト)を使って4列横並びにする
(HTML)定義リスト(dl,dt,dd)で2列横並びにするで、2列の場合の表を定義リストで表現する方法を書きました。

今回は ul 要素を使って複数列の場合を試してみたいと思います。

完成形は下記のような感じです。
e0091163_04736.jpg


1行目は2列。2行目以降は4列といった感じにします。

まず、HTMLはこんな感じです。
<ul>
<div class="li_float">
<li class="left">項目1</li>
<li class="cl2_right">あいうえおアイウエオあいうえおアイウエオあいうえおアイウエオあいうえおアイウエオあいうえおアイウエオ</li>
</div>
 
<div class="li_float">
<li class="left">項目2</li>
<li class="float">ホゲホゲ ホゲホゲ ピヨピヨ ホゲホゲ ピヨピヨ ホゲホゲ ピヨピヨ ホゲホゲ ピヨピヨ ホゲホゲ ピヨピヨ ホゲホゲ ピヨピヨ ホゲホゲ ピヨピヨ ホゲホゲ ピヨピヨ ホゲホゲ ピヨピヨ </li>
<li class="float_title">項目3</dd>
<li class="right"><input type="text" size="16" maxlength="16" ></dd>
</div>
 
<div class="li_float">
<li class="left">項目4</li>
<li class="float">0<input type="text" size="16" maxlength="16" ></dd>
<li class="float_title">項目5</dd>
<li class="right">ホゲホゲ ホゲホゲ ピヨピヨ ホゲホゲ ピヨピヨ ホゲホゲ ピヨピヨ ホゲホゲ ピヨピヨ ホゲホゲ ピヨ</dd>
</div>
</ul>



次に,CSSはこんな感じです。
ul {
list-style:none;
padding : 5px;
}
 
/*左端にくる項目名*/
li.left {
clear: left;
float: left; /*liを横並びにするため、回りこみ許可*/
margin: 0 0 0.8em;
width: 7em; /*この幅の後に次のli要素が来る。列の位置揃えに必要。em指定でフォントサイズ変わっても大丈夫なようにする。*/
border-left: solid 12px #CCC; /*左に罫線描画*/
padding-left: 5px;
}
 
/*2列目*/
li.float {
margin-bottom: 0.8em;
float: left; /*liを横並びにするため、回りこみ許可*/
margin-left:2px;
width: 15em; /*この幅の後に次のli要素が来る。列の位置揃えに必要。em指定でフォントサイズ変わっても大丈夫なようにする。*/
 
}
 
/*3列目 項目名列*/
li.float_title{
float: left; /*li横並びにするため、回りこみ許可*/
margin: 0 0 0.8em;
width: 7em; /*この幅の後に次のli要素が来る。列の位置揃えに必要。em指定でフォントサイズ変わっても大丈夫なようにする。*/
border-left: solid 12px #CCC; /*左に罫線描画*/
padding-left: 5px;
 
}
/*4列目(右端)*/
li.right {
width: 15em
margin-bottom: 0.8em;
margin-left: 31em; /*この値は各列のwidthの計+2*/
}
 
/*2列の場合の右側の列*/
li.cl2_right {
margin-bottom: 0.8em;
margin-left: 7em;
}
 
/*これを指定しないと、折り返し文字がある場合、各列の上下位置がずれる*/
div.li_float{
clear: left; /*各行毎に回り込み解除*/
}


IE6だと上手く表示できませんでした。
また、IE8の場合、上記例の "項目4" のテキストボックスが何故かセンタリングされて表示されてしまいます。テキストボックスの前に何かの文字を入れれば問題有りませんでした。

罫線を引いて表形式にすることも試みましたが、どうやら難しそうです。


なかなかCSSに苦労させられている3流PGです。。。
[PR]
by Jehoshaphat | 2012-06-26 00:47 | Webがらみ | Trackback | Comments(1)
(HTML)定義リスト(dl,dt,dd)で2列横並びにする
よくWebページで使われるのに、2列の表があります。

昔はこれを table タグで書いていましたが、XTHM+CSS 全盛の今日ではdl要素を使用することが主流になってきたようです。


ということで、2列の表を dl タグ(定義リスト)で作成する方法です。
幾つか方法はあるようですが、3流PGは float を使って dd 要素が dt 要素に回りこむ方法を取りました。

ほぼ、参考先のコピペですが、こんな感じです。

●HTML
<div style="width:600px">
<dl>
<dt class="left">項目</dt>
<dd class="right"><input type="text" size="60" ></dd>
 
<dt class="left">項目</dt>
<dd class="right"><input type="text" size="60" ></dd>
 
<dt class="left">項目ホゲホゲホゲホゲ</dt>
<dd class="right">ホゲホゲ ホゲホゲ ホゲホゲ ホゲホゲ ピヨピヨ ホゲホゲ ホゲホゲ ホゲホゲ ピヨピヨ </dd>
 
<dt class="left">項目</dt>
<dd class="right"><input type="text" size="60" ></dd>
 
<dt class="left">項目</dt>
<dd class="right">ホゲホゲ ホゲホゲ ホゲホゲ ホゲホゲ ピヨピヨ ホゲホゲ ホゲホゲ ホゲホゲ ピヨピヨ </dd>
 
</dl>
</div>


●CSS
dt.left {
clear: left;
float: left; /*dt,dd横並びにするため、回りこみ許可*/
margin: 0 0 0.8em;
width: 7.5em; /*この幅の後に次のdd要素が来る。列の位置揃えに必要。em指定でフォントサイズ変わっても大丈夫なようにする。*/
border-left: solid 8px #CCC; /*左に罫線描画*/
padding-left: 5px;
}
dd.right {
margin-bottom: 0.8em; /*dtのmargin-bottomと同じ値が無難*/
margin-left: 8em; /*dtのmargin-leftより大きい値にする。多数行になってもdtの下に回りこまないようにする。*/
}


こんな感じになります。
e0091163_043397.jpg



borderを指定することで、ホントの表のように表現することもできるようです。(IE6の場合はバグで若干ずれるので調整要)


参考:
CSSデザインカタログ | list | dt と dd を横並びにした定義リスト こちらのサイトさんのコードを拝借しました。
汎用性の高い横並びdlリストを作る [Cool Web Window]:IE6対応や罫線表示のコードも載せられています。
dlのdt dd を横並びに - CSS HappyLife
[PR]
by Jehoshaphat | 2012-06-26 00:44 | Webがらみ | Trackback | Comments(0)
(Apache)特定ファイルにアクセスした時にリダイレクト
(Apache)複数ドメインで運用しているサイトを単一ドメインになるようリダイレクトの続きみたいなものですが、今回はディレクトリ内の特定のファイルへのリクエストがあった時にリダイレクトする方法です。

例えば、あるディレクトリに hoge01.html , hoge02.html , hoge03.html とファイルがあり、hoge01.htmlだけMod-Rewriteでリダイレクトしたい場合は以下のようにします。

Options +FollowSymLinks
RewriteEngine On
RewriteRule ^hoge01.htm$ http://newlink/ [R=301,L]


hoge01.htmlとhoge02.htmlを同じページにリダイレクトしたい場合は以下のようにします。

Options +FollowSymLinks
RewriteEngine On
RewriteRule ^(hoge01.html|hoge02.html)$ http://newlink/ [R=301,L]

RewriteRuleの指定は正規表現が使えるので、自由度は高いですね。

参考:
.htaccess - Rewrite
[PR]
by Jehoshaphat | 2012-06-26 00:35 | サーバがらみ | Trackback | Comments(0)
(Apache)複数ドメインで運用しているサイトを単一ドメインになるようリダイレクト
何やら多忙すぎて1ヶ月以上更新が滞ってしまいました。。。

Webサイトの一部を別ドメインに移したためリダイレクトさせてみたで mod_rewrite を使ったリダイレクトを書きました。

今回もそれに関連のある話ですが、あるWebサイトが hoge.jp , www.hoge.jp hoge.com どれでもアクセス可とします。
(DNSサーバの設定で同一サーバを見るようしています。VirtualHostは使っていません。)

これを www.hoge.jp でアクセスするように統一という話が出てきました。

調査すると、.htaccess - Rewriteにどんぴしゃな答えがありました。

Mod-Rewrite のリダイレクトを使って、下記のようにするとこれを実現できます。

Options +FollowSymLinks
RewriteEngine On
RewriteCond %{HTTP_HOST} ^(hoge\.jp)(:80)? [NC,OR]
RewriteCond %{HTTP_HOST} ^(hoge\.com)(:80)? [NC]
RewriteRule ^(.*) http://www.hoge.jp/$1 [R=301,L]

RewriteCond で条件を指定できるようです。
HTTP_HOST 変数にどのドメインでアクセスしてきたかの情報が入っているようですね。
複数条件も指定できるようで、今回はORを指定しています。


ちなみに、mod_rewriteを使うディレクトリでは「Options FollowSymLinks」を指定しないとエラーになるケースがあるので注意しましょう


参考:
mod_rewrite サンプル集/楽
RewriteCond - RewriteRuleの条件を設定
CPIレンタルサーバーでApache mod_rewriteの設定方法|ほっとのブログ
mod_rewriteを使うには「Options FollowSymLinks」が必要 kawama.jp:
[PR]
by Jehoshaphat | 2012-06-26 00:33 | サーバがらみ | Trackback | Comments(0)