You Look Too Cool

HTMLのテキストボックスに工夫を施す小技を。

---

input(text)

文字を選択。ボックスをクリックするとボックス内の文字列が自動的に選択されます。
<input type=”text” onclick=”this.select()” value=”abcde”>

---

文字を赤に。
<input type=”text” value=”abcde” style=”color:red;”>

---

文字のサイズを1.5倍に。
<input type=”text” value=”abcde” style=”font-size:150%;”>

---

ボックスの幅を200ピクセルに。
<input type=”text” value=”abcde” style=”width:200px;”>

---

textarea

abcde
文字を選択。
<textarea onclick=”this.select()”>abcde</textarea>

---

abcde
IMEをアクティブ。
<textarea style=”ime-mode:active;”>abcde</textarea>
abcde
IMEを非アクティブ。
<textarea style=”ime-mode:inactive;”>abcde</textarea>

目の前にパソコンはあるのだけれど、定規がない場合にパソコンのモニターで長さを測る方法です。WindowsXPで使えます。

スタート-コントロールパネル-画面を開き(デスクトップ上で右クリック-プロパティでも可)、設定タブを選択してください。
詳細設定をクリックすると「DPI設定」のところに「96DPI」などと書かれています。これは画面が1インチあたり96ピクセルであることを表します。以下、96DPIを前提に。

今、HTMLを使って10センチ(100ミリ)の線を書きたいとします。
1インチは25.4ミリですので、96×100÷25.4＝378(ピクセル)となります。
次のように書くと幅10センチの細長い四角が描かれます。

<img src=’temp.png’ width=’378px’ height=’20px’>

JavaScriptで書くならば次のような感じで。長さが変えられます。

<script>
var mm=100;//10センチならば「100」ミリ
var dpi=96;
var mmpi=25.4;//1inch=25.4mm
var pxl=mm*dpi/mmpi;
document.write(“<img src=’temp.png’ width=’”+pxl+”px’ height=’20px’>”);
</script>

10mm
20mm
30mm
40mm
50mm
60mm
70mm
80mm
90mm
100mm

Googleのサイト検索は、検索範囲をある特定のサイトに絞ることができる検索です。
サイト検索
「言葉 site:stabucky.com」のようにすればサイト検索ができますが、これをフォームにあらかじめセットする方法は次の通り。
Google AdSenseならばウィザード形式で作成することができますが、広告収入は要らない、簡単に作りたい、という場合に。

<form method=get action=”http://www.google.co.jp/search”>
<input type=text name=q size=31 maxlength=255 value=”">
<input type=submit name=btnG value=”stabucky.com”>
<input type=hidden name=sitesearch value=”stabucky.com”>
<input type=hidden name=ie value=UTF-8>
<input type=hidden name=oe value=UTF-8>
<input type=hidden name=hl value=”ja”>
</form>

「name=sitesearch」の「value」に特定のサイトをセットします。ボタンの名前は適当に。

HTMLで<li>を使ってリストを作ると縦に並びますが、これを横に並べる方法です。

CSS

ul{margin:0px;padding:0px;}
li{display:block;float:left;width:100px;}

HTML

<ul>
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
<li>リスト４</li>
</ul>

モノトーンでカラーネームの付いているものだけピックアップしました。
グレーよりもダークグレーの方が明るい？ 

カラーネーム	コード	色
black	#000000	The quick brown fox jumps over the lazy dog.
dimgray	#696969	The quick brown fox jumps over the lazy dog.
gray	#808080	The quick brown fox jumps over the lazy dog.
darkgray	#A9A9A9	The quick brown fox jumps over the lazy dog.
silver	#C0C0C0	The quick brown fox jumps over the lazy dog.
lightgrey	#D3D3D3	The quick brown fox jumps over the lazy dog.
gainsboro	#DCDCDC	The quick brown fox jumps over the lazy dog.
whitesmoke	#F5F5F5	The quick brown fox jumps over the lazy dog.
white	#FFFFFF	The quick brown fox jumps over the lazy dog.