少しのCSSでラベル付きの枠を作る方法 | Select *
Web Web制作

少しのCSSでラベル付きの枠を作る方法

ラベル付き枠オハヨウゴザイマス!
今、仕事でWebデザイナーの真似事をしている@deepblue_willです。

Webデザインって本当に難しいですよね!
ここ1週間くらいいろいろ頭を悩ましてます。
その過程で←の画像のようなラベル付きの枠を簡単に作る方法を知りました。
多分、Webデザイナーにとっては当たり前すぎることなんでしょうでけど。。
個人的にあまりに衝撃だったので紹介しちゃいます。

fieldset、legendタグを使う

fieldsetタグはフォーム要素をまとめるタグです。
この中にラベルとなる文字をlegendタグで囲めば簡単にラベル付きの枠が作れます。

サンプル

入力してください♪

ソース

<fieldset class="border-with-label">
	<legend>入力してください♪</legend>
	<label>名前</label>
	<input type="text"></input>
</fieldset>

border-with-label{
	border: 1px solid #ccc;
	padding: 5px;
}
border-with-label legend{
	padding:0 10px 0 10px;
	margin-left: 5px;
}

最後に

fieldsetタグはフォーム要素をまとめるタグと書きましたが、別にフォーム要素でなくともこの方法は使えます。
ただあまり推奨されていないみたいなので、フォーム要素意外はおとなしくCSSでポジションをずらすなりして対応したほうがよさそうです。

ではでは。

このブログをRSS登録する! この記事をはてブする!

Comment

Zenback

Categories

  • Lifehack (57)
  • Web (140)
  • まとめ (172)
  • コンピュータ (132)
  • 仕事 (10)
  • 趣味 (104)
  • 雑記 (88)