table、dl、ul、p でフォームを作ってみる
▼何もない素のコード
▼table を使用(初心者にオススメ)
▼dl dt dd を使用(学校では習っていない)
▼ul li を使用(レイアウトによる)
▼p を使用(個人的には非推奨)
学校では、今日(12/6.金)からジャバスクリプトに入ることになりました。
その前に「フォームを作ってみましょう」と、いうことで・・・
↓各自 こんな感じのを作って、
↓自由にCSSできれいにしちゃってください みたいな課題がでました。
・・・先生に何で作るか聞いたら、特に答えはなかったので
自分はテーブルかdlを使うのかなと思いました。
自分なりのまとめをメモしておきます。
↓まず、何もない素のコード
※nameとかは習ってないので入れてないです。
※先生は答えを言わない主義だそうなので、これから先、とりあえず自分のですすめます。
↓表示はこのような感じで、レイアウト感ゼロです。
(以下、画像部分はクリックで拡大します)
↓テーブルレイアウト用に、コードにテーブルのタグを追加
名前 | |
---|---|
ニックネーム | |
性別 | 男女 |
年代 | |
いきごみ | |
↓【参考】例えば、こんな感じ・・・
table,td{ border:0px; /* 線の太さ0px */ margin:0; /* マージン0 */ padding:0; /* パディング0 */ vertical-align:middle; /* 文字は上下のまんなか */ } table{ border-collapse:collapse; /* 隣接するセルの線を重ねて表示 */ border-spacing:0; /* セルの線の間隔 */ } table{ border-top:solid 1px #666; /* テーブルの上に線を入れました */ } th,td{ padding:10px; /* th,tdセルのパディングは10px */ } th{ background-color:#E8E8E8; /* 背景色 */ border-left:solid 1px #666; /* thのセル左に線を入れました */ border-bottom:solid 1px #666; /* thのセルの下に線を入れました */ text-align:left; /* 文字は左寄せ */ } td{ border-right:solid 1px #666; /* tdのセル右に線を入れました */ border-bottom:solid 1px #666; /* tdのセルの下に線を入れました */ } .btn{ border-right:none; /* クラスbtnのセルの右の線はナシ */ border-bottom:none; /* クラスbtnのセルの下の線はナシ */ text-align:center; /* 文字はセンター */ }
↓次はdl dt dd を使用してみます。
↓CSSを使用しないと、表示はこのような感じです。
↓【参考】CSSでレイアウトすると・・・
dl,dt,dd{ margin:0; /* マージン0 */ padding:0; /* パディング0 */ } dl { background-color:#E8E8E8; /* 背景色 dt用の色をつけます */ border-left:solid 1px #666; /* 左線 */ border-right:solid 1px #666; /* 右線 */ border-bottom:solid 1px #666; /* 下線 */ width:500px; /* 全体横幅 */ } dt,dd{ padding:10px 0 10px 10px; /* パディング 上・右・下・左 の順 */ } dt { float:left; /* フロート左 */ clear:both; /* フロートをクリア */ width:130px; /* 横幅 */ border-top:solid 1px #666; /* 上線 */ font-weight : bold; /* 文字を少し太くしました */ } dd { margin-left : 130px; /* dtの幅だけ横にずらします */ background-color:#FFF; /* 背景色 */ border-top:solid 1px #666; /* 上線 */ } .btn{ width:500px; /* 横幅 */ text-align:center; /* 文字センター */ }
↓次は、先生がリストでも出来ると言っていたので ul li を使用してみます。
参考記事:[CSS]フォームをリスト要素で並べたスタイルシートのチュートリアル
↓CSSを使用しないと、表示はこのような感じです。
↓【参考】CSSでレイアウトすると・・・
ul,li{ margin:0; /* マージン0 */ padding:0; /* パディング0 */ list-style:none; /* マーカーを表示しない */ } ul{ width:500px; /* 全体横幅 */ border-left:solid 1px #666; /* 左線 */ border-right:solid 1px #666; /* 右線 */ border-bottom:solid 1px #666; /* 下線 */ } label{ width:130px; /* 横幅 */ float:left; /* フロート左 */ background-color:#E8E8E8; /* 背景色 */ padding-left:10px; /* パディング左 */ padding-bottom:10px; /* パディング下 */ padding-top:10px; /* パディング上 */ margin-right:10px; /* マージン右 */ margin-top:-10px; /* 背景色を入れない場合は不要 */ } li{ clear:both; /* フロートをクリア */ border-top:solid 1px #666; /* 上線 */ padding-top:10px; /* パディング上 */ padding-bottom:10px; /* labelに背景色を入れない場合は不要 */ margin-top:-10px; /* labelに背景色を入れない場合は不要 */ } .btn{ width:500px; /* 横幅 */ text-align:center; /* 文字センター */ } /* ↓labelに背景色を入れない場合は不要 */ li:after{ content:""; clear:both; display:block; }
↓それなら同じ原理で「p」も使えると思い、「p」を使用してみます。
↓CSSを使用しないと、表示はこのような感じです。
↓【参考】CSSでレイアウトすると・・・
p{ margin:0; /* マージン0 */ padding:0; /* パディング0 */ } .p1{ width:500px; /* 全体横幅 */ border-left:solid 1px #666; /* 左線 */ border-right:solid 1px #666; /* 右線 */ border-top:solid 1px #666; /* 上線 */ padding-top:10px; /* パディング上 */ padding-bottom:10px; /* パディング下 */ } label{ width:130px; /* 横幅 */ float:left; /* フロート左 */ background-color:#E8E8E8; /* 背景色 */ padding-left:10px; /* パディング左 */ padding-bottom:10px; /* パディング下 */ padding-top:10px; /* パディング上 */ margin-right:10px; /* マージン右 */ margin-top:-10px; /* 背景色を入れない場合は不要 */ } .p2{ width:500px; /* 横幅 */ text-align:center; /* 文字センター */ padding-top:10px; /* パディング上 */ border-top:solid 1px #666; /* 上線 */ }
・・・感想として、わかりやすいのはテーブルなので、
CSSに慣れないうちはテーブルで良いと思います。
ulを使いたい時は参考記事のように、テーブル風のレイアウトはしない方が良いと思います。
凝りたい時は、バックに画像を入れるなどしたら、いい感じにレイアウトできそうです。
2013年12月06日(金) | 職業訓練-HTML・CSS- ▲PageTop