お手軽にきれいでかっこいいフォームを作る

Beautiful CSS Form を参考にやってみました。多少いじってます。

# html

<div id="sasata299-form">
  <label>
    <span>メールアドレス</span>
    <input type="text" id="mail" />
  </label>
  <label>
    <span>パスワード</span>
    <input type="password" id="pass" />
  </label>
</div>

# css

div#sasata299-form {
    margin-left:30px;
}
div#sasata299-form label input#mail,
div#sasata299-form label input#pass {
    width:200px;
    border:1px solid silver;
    font-size:1.4em;
    color:#666666;
}
div#sasata299-form label {
    display:block;
    margin-bottom:4px;
    color:gray;
}
div#sasata299-form label span {
    display:block;
    float:left;
    padding-right:6px;
    padding-top:6px; /* おまじない */
    width:120px;
    text-align:right;
    font-weight:bold;
}

これでこんな感じのフォームになります。フォームって良く使うわりにピタッと揃えるのが大変ですよね。今まではテーブルタグ使ってやってたりしたんですがこのやり方は label と span を使うだけと結構お手軽だったのでオススメです。

このようなデザインのフォームになります。

モバイルサイト開発でh1タグにfont-sizeやcolorの指定が効かないときの解決法

こんばんわ(=ﾟωﾟ)ﾉ　いきなりですが最近はモバイルサイトを触ったりしています。わからないことがいっぱいです＞＜

で、本題です。モバイルサイトを開発していて、h1タグとか使いたくなったりするじゃないですか、やっぱり。SEO対策とかで。でも実際に使ってみたらうまくいかなかったんですよ...orz　大抵の機種では特に問題が無いんですが、今回試した限り、ドコモの古い機種では font-size や color の指定が効いていないようでした。。

<h1 style="display:inline; font-size:x-small; color:red">
適当な文字列
</h1>

これは困ったと、散々色々試してたどり着いたのがこれです。h1タグの中にspanタグを定義して、そこでfont-sizeやcolorを指定しています。これで何とか全ての（試した限り）機種で問題なく動作することが確認できました。よかったー。

<h2 style="display:inline">
<span style="font-size:x-small; color:red">適当な文字列</span>
</h2>

でもこれ凄いバッドノウハウ。。こんなんでいいのかな。それともこんなのって普段からモバイルサイトやってる方には常識なんでしょうか・・？詳しい人のコメント期待！！

CSSとDOCTYPEのメモ

つらづらと書いていきますよー(｡･ω･)ﾉﾞ　れっつごー。

これは必ず書くかな。全体のセンタリング。

#container {
　　width: xxxpx;
　　margin: 0 auto;
}

リンクの下線を表示したくないとき（タイトル部分とか）

#title a {
　　text-decoration: none;
}

マウスオーバーしたときに、背景に色を付けたくない

#title a:hover {
　　background-color: transparent;
}

textareaでスクロールバーを表示したくない

textarea {
　　overflow: hidden;
}

あと、標準準拠モードにするためにDOCTYPEはこれを宣言してます。
そうしないと、センタリングがIEで効かないのです(*´Д`)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">