DTP→ほそぼそとWeb業界のカタスミでお仕事しています・・・

table、dl、ul、p でフォームを作ってみる

記事を書いたら長くなったので、ページ内移動をつけました。
▼何もない素のコード
▼table を使用(初心者にオススメ)
▼dl dt dd を使用(学校では習っていない)
▼ul li を使用(レイアウトによる)
▼p を使用(個人的には非推奨)

学校では、今日(12/6.金)からジャバスクリプトに入ることになりました。
その前に「フォームを作ってみましょう」と、いうことで・・・

↓各自 こんな感じのを作って、
↓自由にCSSできれいにしちゃってください みたいな課題がでました。
2013-12-06-form01.gif

・・・先生に何で作るか聞いたら、特に答えはなかったので
自分はテーブルかdlを使うのかなと思いました。
自分なりのまとめをメモしておきます。

↓まず、何もない素のコード
※nameとかは習ってないので入れてないです。
※先生は答えを言わない主義だそうなので、これから先、とりあえず自分のですすめます。
名前: ニックネーム: 性別:女 年代: いきごみ:
↓表示はこのような感じで、レイアウト感ゼロです。
(以下、画像部分はクリックで拡大します)
テーブルレイアウト用に、コードにテーブルのタグを追加
名前
ニックネーム
性別
年代
いきごみ
↓表示はこのような感じです。これをCSSで装飾したら良いと思います。
↓【参考】例えば、こんな感じ・・・
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を使いたい時は参考記事のように、テーブル風のレイアウトはしない方が良いと思います。
凝りたい時は、バックに画像を入れるなどしたら、いい感じにレイアウトできそうです。

エクセルの表をHTMLに・・・ (授業編)

昨日予習して行った件の、授業編です!

・・・結論から言うと
EmEditorとExcelを組み合わせて実務的にサクッとコーディング☆
という感じでした。

私がちまちま手打ちしていると後ろから先生に止められた&
委員長がプチ講習会を開いてくれましたm(_ _)m

おさらいです↓(画像はクリックで拡大します)
ちなみに、先生によると改行は「\n」だそうです。
正規表現というのは何のことだかナゾですが
そういう決まりがあるんでしょうね?(^^;)

エクセルの表をHTMLに・・・ (予習編)

学校で、小学校低学年くらいを対象とした
九九表をエクセルで自由形式で作る・・・というような
感じの課題がありました。

私はまったくもってダサダサの表を最初つくっていたのですが
クラスのほかのかたたちの美しい表を見せてもらって、
おぉっ!! w(゚o゚*)w すばらしい!!と感じました。
それで、何人かのかたに
どうやって作ったのか教えていただきましたm(_ _)m
みなさま、ありがとうございました。

個人的に、私は九九を覚えていないので
よみがなつきでつくっていたかたの式をうつさせてもらって
それを採用させていただきましたm(_ _)m
ありがとうございました。

・・・で、授業の終わりに先生が
「明日、この表をHTMLにしたいと思います」と
言われていたので、
それはエクセルをHTMLに書きだすことなのか
それとも<table>タグを使って自分で手打ちすることなのか?

もちろん手打ちでしょう!!
と思ったのですけど、いやいや実務経験のある先生だから
実はエクセルのHTML書き出しを使ったらこんなに簡単だよ
こだわらないならこれで良いですよ~とか
そんな話になるのだろうか?
いやでも先生は元プログラマー様兼元SE様だから
そんないい加減なコードでは許されない気がする。
エクセルから書きだしたコードはけっこう余分なものが入ってくるので、
書きだしたコードをそのまま使うとは考えられない・・・
(エクセルは書きだしたことないんですけど、ワードで
 書きだされたものを、仕事で修正したことがあるので)

ではエクセルからHTMLに書きだしたものを修正するのか?
それともゼロからの手打ち推奨なのか?

・・・などと、もやもや迷ったので、予習として
やったことなかったし、いい機会なので
エクセルからHTMLに書き出してみることにしました(^^;)

↓以下、参考までにエクセルからHTMLへの書きだし
↓(画像はクリックで拡大します)

・・・で、このコードを修正して使用するのか
それともゼロから手打ちなのか?
どっちがいいのかなぁ・・・?

業務的にはCSV形式でエクセルを書きだして
ドリームウィーバに読み込んだ方が早い気がしますが
いやいや、ここは学校なので、
練習のために私は手打ちで書きます(`・ω・´)キリッ

・・・って、先生が明日何と言うかなんですけど(^^;)
それによってやり方が変わるんですよね

↓参考までに、エクセルから書きだしたHTML
↓(ファイルの名前は変えていますが、内容はそのまま)
http://memo352.web.fc2.com/20131125/kuku.html

可変レイアウト(リキッドレイアウト)

追記
(もとの記事の、別画面で開くHTMLの上を右クリック→ソースを見るでも見えますが)
コードを見たいと言うかたがいたので、コードを下に追記しました。
コードの上でダブルクリックすると、全選択になりテキストをコピーできます。

▼可変レイアウト1段組み
▼可変レイアウト2段組み
▼可変レイアウト2段組み、1段固定

------------------------------------------------------------------
CSSむずかしいですねー・・・私にはやっぱりCSSむずかしいです(--;)
金曜日、先生は作り方には特に触れなかったのですが
可変レイアウトの話をしていました。(俗にリキッドレイアウトというやつ)
可変レイアウト、実は今まで1度もしたことなかったので
(だってデザインに合わせるから、と、いいわけしてみる

・・・と、いうわけで、やってみました(^^;)

いろいろなCSSの書き方があると思うので、参考程度に・・・

可変レイアウト1段組みの場合(別画面で開きます)

可変レイアウト2段組みの場合(別画面で開きます)

可変レイアウト2段組み、1段固定の場合(別画面で開きます)

概要・・・↓(画像はクリックで拡大します)

・・・こんな感じ?(^^;) で、意外とむずかしかったのが1段だけ固定の場合でした。

これは順を追って考えてみたいと思います。
もとは、先に作った「可変レイアウト2段組み」を使用。
先生が本文は先に書くほうが良いと言っていたので、
後から書いたサブの部分をメニューやバナーのエリアと考えて200pxにしてみました。
変更ついでに、左にもってきてみました。
------------------------------------------------------------------
可変レイアウト1段組み

本文見出し

文章が入ります。

本文見出し

文章が入ります。

/* 余白を0にします
------------------------------------------------- */
html,body,div,
dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,
blockquote,th,td,p {
	margin: 0;
	padding: 0;
}

body {
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "MS Pゴシック", "MS PGothic", sans-serif;  /* 基本の書体の設定 */
	text-align:center;  /* 内容をセンターに表示 */
	background-color: #DFDFDF;  /* 背景色を入れています */
}

/* コンテナー(ページ全体の囲み)
------------------------------------------------- */
#container{
	width: 80%;  /* 横幅を画面の80%に設定してみました */
	background-color:#FFF;  /* 背景色 白 */
	margin:0 auto 0 auto;  /* マージン 上0、右オート、下0、左オートでコンテナーをセンターに表示 */
	border:solid 2px #666;  /* 線を入れてみました */
	text-align:left;  /* コンテナー内の文字は左寄せ */
}


/* ヘッダー
------------------------------------------------- */
#header{
	background-color:#CCC;  /* 背景色 */
	padding:10px 30px 5px 30px;    /* 余白 上 右 下 左 */
}


/* メインコンテンツ
------------------------------------------------- */
#mainContent{
	padding:10px 30px 5px 30px;   /* 余白 上 右 下 左 */
}


#mainContent p{
	padding-bottom:20px;  /* メインコンテンツ中の<p>の下の余白 */
}



/* フッター
------------------------------------------------- */
#footer{
	text-align:center;  /* 文字センター */
	background-color:#CCC;  /* 背景色 */
	padding:10px 0 10px 0;   /* 余白 上 右 下 左 */
}

------------------------------------------------------------------
可変レイアウト2段組み

本文見出し

文章が入ります。

本文見出し

文章が入ります。

横の部分見出し

文章が入ります。

横の部分見出し

文章が入ります。

/* 余白を0にします
------------------------------------------------- */
html,body,div,
dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,
blockquote,th,td,p {
	margin: 0;
	padding: 0;
}

/* body
------------------------------------------------- */
body {
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "MS Pゴシック", "MS PGothic", sans-serif;  /* 基本の書体の設定 */
	text-align:center;  /* 内容をセンターに表示 */
	background-color: #DFDFDF;  /* 背景色を入れています */
}

/* コンテナー(ページ全体の囲み)
------------------------------------------------- */
#container{
	width: 80%;  /* 横幅を画面の80%に設定してみました */
	background-color:#FFF;  /* 背景色 白 */
	margin:0 auto 0 auto;  /* マージン 上0、右オート、下0、左オートでコンテナーをセンターに表示 */
	border:solid 2px #666;  /* 線を入れてみました */
	text-align:left;  /* コンテナー内の文字は左寄せ */
}


/* ヘッダー
------------------------------------------------- */
#header{
	background-color:#CCC;  /* 背景色 */
	padding:10px 30px 5px 30px;    /* 余白 上 右 下 左 */
}


/* メインコンテンツ 50%+余白2.5%+余白2.5%=55%
------------------------------------------------- */
#mainContent{
	width:50%; /* メインコンテンツ+サブコンテンツ=横幅100%にしないとうまくいきませんでした */
	padding:10px 2.5% 5px 2.5%;    /* 横部分の余白も全体の大きさに含まれるので%で指定しています */
	background-color:#CBFEFD;  /* 背景色 */
	float:left;  /* フロート左 */
}


#mainContent p{
	padding-bottom:20px;  /* メインコンテンツ中の<p>の下の余白 */
}

/* サブコンテンツ 40%+余白2.5%+余白2.5%=45%
------------------------------------------------- */
#subContent{
	width:40%; /* 横幅 */
	padding:10px 2.5% 5px 2.5%;  /* 余白 上 右 下 左 */
	background-color:#D6D6FA;  /* 背景色 */
	float:right;  /* フロート右 */
}



/* フッター
------------------------------------------------- */
#footer{
	clear:both;
	text-align:center;  /* 文字センター */
	background-color:#CCC;  /* 背景色 */
	padding:10px 0 10px 0;   /* 余白 上 右 下 左 */
}

------------------------------------------------------------------
可変レイアウト2段組み、1段固定

本文見出し

文章が入ります。

本文見出し

文章が入ります。

横の部分見出し

文章が入ります。

>

横の部分見出し

文章が入ります。

/* 余白を0にします
------------------------------------------------- */
html,body,div,
dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,
blockquote,th,td,p {
	margin: 0;
	padding: 0;
}

/* body
------------------------------------------------- */
body {
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "MS Pゴシック", "MS PGothic", sans-serif;  /* 基本の書体の設定 */
	text-align:center;  /* 内容をセンターに表示 */
	background-color: #DFDFDF;  /* 背景色を入れています */
}

/* コンテナー(ページ全体の囲み)
------------------------------------------------- */
#container{
	width: 80%;  /* 横幅を画面の80%に設定してみました */
	background-color:#FFF;  /* 背景色 白 */
	margin:0 auto 0 auto;  /* マージン 上0、右オート、下0、左オートでコンテナーをセンターに表示 */
	border:solid 2px #666;  /* 線を入れてみました */
	text-align:left;  /* コンテナー内の文字は左寄せ */
}


/* ヘッダー
------------------------------------------------- */
#header{
	background-color:#CCC;  /* 背景色 */
	padding:10px 30px 5px 30px;    /* 余白 上 右 下 左 */
}


/* メインコンテンツ 
------------------------------------------------- */
#mainContent{
	width:95%; /* 余白と横幅を足して100%にしています */
	padding:10px 2.5%  5px 2.5%; 
	background-color:#CBFEFD;  /* 背景色 */
	float:right;  /* フロート左 */
}


#mainContent p{
	padding-bottom:20px;  /* メインコンテンツ中の<p>の下の余白 */
}


/* メインコンテンツ 内側
------------------------------------------------- */
#mainContentInner{
	margin-left:200px; /* サブコンテンツの幅ぶん左にマージンをとっています */
}


/* サブコンテンツ 固定部分
------------------------------------------------- */
#subContent{
	width:180px; /* 横幅と余白の合計が200pxになるようにしています */
	padding:10px 10px 5px 10px;  /* 余白 上 右 下 左 */
	background-color:#D6D6FA;  /* 背景色 */
	float:left;  /* フロート右 */
	margin-right:-200px;  /* 右にサブコンテンツの幅ぶんマージンを取ることでカラム落ちを防いでいます */
}



/* フッター
------------------------------------------------- */
#footer{
	clear:both;
	text-align:center;  /* 文字センター */
	background-color:#CCC;  /* 背景色 */
	padding:10px 0 10px 0;   /* 余白 上 右 下 左 */
}

CSSのfloatいろいろ

今日、授業でCSSを習ったのですが
CSSだけで要素を移動できるんですよ、みたいな課題がありました。
(まだ答えはもらってないのですけど

そんなこと、考えたことなかったなーと感じたのでめも。

先生のご指定は<p>だったのですが、
個人的好みで<div>で試しています。
そして本来ならフッターにクリア入れますがいれてないです(^^;)
やっているうちに色の並びが、わからなくなってしまったので
とりあえず、いろいろと試してみました

ざっくり以下の感じ↓(画像はクリックで拡大します)
赤・青・緑緑・青・赤青・緑・赤
赤・緑・青緑・赤・青青・赤・緑


赤|青・緑緑|赤・青青|赤・緑
赤|緑・青緑|青・赤青|緑・赤


赤―青・緑赤・青―緑
赤―緑・青青・赤―緑

・・・って、明日答え聞いたら、違ってたりして