人気ブログランキング |
タグ:CSS ( 6 ) タグの人気記事
(HTML)Uniform 入力フォームの見栄えを良くするスクリプト+CSS
(HTML)Niceforms 入力フォームの見栄えを良くするスクリプト+CSSで、Niceformsの紹介をしました。

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

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

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

こんな感じになります。(Firefox5)
(HTML)Uniform 入力フォームの見栄えを良くするスクリプト+CSS_e0091163_7192681.jpg



IE8だと、テキストボックスの端の丸みがどうも出ないようです。
(HTML)Uniform 入力フォームの見栄えを良くするスクリプト+CSS_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
by Jehoshaphat | 2012-06-28 07:21 | Webがらみ
(HTML)Niceforms 入力フォームの見栄えを良くするスクリプト+CSS
3流PGのようにデザインセンスがヘタレでXHTML+CSSがどうも苦手なプログラマに役立つスクリプトが、Niceforms です。

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

こんな感じになります。
(HTML)Niceforms 入力フォームの見栄えを良くするスクリプト+CSS_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の場合下記のように、その下の各ボックスがずれてしまいます。
(HTML)Niceforms 入力フォームの見栄えを良くするスクリプト+CSS_e0091163_1483544.jpg

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


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

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

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

完成形は下記のような感じです。
(HTML)ul(リスト)を使って4列横並びにする_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です。。。
by Jehoshaphat | 2012-06-26 00:47 | Webがらみ
(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の下に回りこまないようにする。*/
}


こんな感じになります。
(HTML)定義リスト(dl,dt,dd)で2列横並びにする_e0091163_043397.jpg



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


参考:
CSSデザインカタログ | list | dt と dd を横並びにした定義リスト こちらのサイトさんのコードを拝借しました。
汎用性の高い横並びdlリストを作る [Cool Web Window]:IE6対応や罫線表示のコードも載せられています。
dlのdt dd を横並びに - CSS HappyLife
by Jehoshaphat | 2012-06-26 00:44 | Webがらみ
PukiWikiで表組み全体を左寄せしたい
PukiWikiで普通に表組み(テーブル)を作成すると、中央寄せ(センタリング)の状態で表示されます。

1行の内容が多ければ見栄えはいいのですが、少ないと見栄えが悪くなります。(特にワイド画面でブラウザを最大化している時)

ということで、左寄せする方法です。
Wiki記法では対応できないので、スタイルシートを直接編集しないといけません。

下記のファイルの .style_table のスタイルを変更します。

/skin/pukiwiki.css.php

.style_table {
padding:0px;
border:0px;
/*margin:auto; ←を削る*/
margin:1em auto 1em 0; /*←を追加*/
text-align:left;
color:inherit;
background-color:#ccd5dd;
}



(PukiWikiでIEだと問題ないのにFirefoxだとCSSが効かないの対策で、スタイルシートファイルを分けた場合は、そのスタイルシートファイルに上記を反映します。)

参考:
質問箱4/13
PukiWiki/1.4/ちょっと便利に/テーブルの中央寄せor右寄せ
by Jehoshaphat | 2011-09-21 23:37 | Webがらみ
NODがYahooのスタイルシートを脅威として検出した
昨年末の話になるんですが、ESET NOD32が朝からYahooのスタイルシートファイルを脅威として大量検知しました。

NOD32はそのスタイルシートファイルを CVE-2010-3962 というIEの脆弱性をついた攻撃であると判断したようです。

CVE-2010-3962 は IE6~8 のスタイルシートの設定内容の順番により、作業のために確保したメモリを解放しない脆弱性に起因するもので、そのメモリ領域に悪質なコードを埋め込むことで任意のコードが実行できるというもののようです。

スタイルシートの設定項目の順番により判断しているようなので、おそらくYahoo側がスタイルシートの設定を変更し、たまたまIEの脆弱性につながる順番となって NOD が検知したんじゃないかと思います。
まったく人騒がせな話です。

一時期ゼロデイ攻撃となっていたようですが、怖い話です。

参考:
CVE - CVE-2010-3962 (under review) Common Vulnerabilities and Exposures(CVE)という脆弱性情報データベースでの情報です。
JVNVU#899748: Microsoft Internet Explorer における無効なフラグ参照に起因する脆弱性 日本での脆弱性対策情報ポータルサイトでの情報です。
マイクロソフト セキュリティ アドバイザリ (2458511): Internet Explorer の脆弱性により、リモートでコードが実行される Microsoftでの脆弱性情報です。
MS10-090 : Internet Explorer の重要な更新 Microsoftでの修正パッチ情報です。
情報処理推進機構:情報セキュリティ: Internet Explorer の脆弱性の修正について(MS10-090) IPAでの情報です。

Internet Explorer(CVE-2010-3962/MS10-090) 実際にこの脆弱性をついてバックドアを仕掛け侵入する動画が掲載されています。
Internet Explorer 6, 7, 8 Memory Corruption 0day Exploit CVE-2010-3962を使ったエクスプロイトコード(脆弱性実証コード)が公開されています。上記の動画もこのコードで検証したと思われます。
Internet Explorer Memory Corruption 0day Vulnerability これもエクスプロイトコードですが、脆弱性となるスタイルシートの順番です。たったこれだけですが脅威抜群です。
by jehoshaphat | 2011-08-16 12:19 | 豆知識