本日の内容は下記のとおりです。

１．メニューいろいろ

リスト形式のメニュー

↑こんな感じです。↑

CSSの例は下記のとおりです。

.menu ul {
margin-left: 0;
padding-left: 20px;
}
.menu a {
color: #999966;
text-decoration: none;
}
.menu a:link {
color: #336666;
text-decoration: none;
}
.menu a:visited {
color: #999999;
text-decoration: none;
}
.menu a:active {
color: #999999;
text-decoration: none;
}
.menu a:hover {
color: #999999;
text-decoration: none;
}

HTMLの例は、下記のとおりです。

<div class=”menu”>
<ul>
<li><a href=”menu1.html>メニュー１</a></li>
<li><a href=”menu2.html>メニュー２</a></li>
<li><a href=”menu3.html>メニュー３</a></li>
<li><a href=”menu4.html>メニュー４</a></li>
</ul>
</div>

• ※uliタグのブラウザデフォルトの値が、
  　IE7から前のバージョンは、
  　{magin-left: 40px; padding-left: 0}　で、
  　IE8、Firefox、Sfariは、
  　{magin-left: 0; padding-left: 40px}　なので、
  　ブラウザの違いによる見え方の違いをなくすため、margin-leftとpadding-leftを
  　指定する。

リスト形式(リストマークが画像)のメニュー

↑こんな感じです。↑

CSSの例は下記のとおりです。

.menu ul {
margin-left: 0;
padding-left: 20px;
}
.menu a {
color: #999966;
text-decoration: none;
}
.menu a:link {
color: #336666;
text-decoration: none;
}
.menu a:visited {
color: #999999;
text-decoration: none;
}
.menu a:active {
color: #999999;
text-decoration: none;
}
.menu a:hover {
color: #999999;
text-decoration: none;
}
.menu li {
list-style-type: none;
background-image: url(icon.gif);
background-repeat: no-repeat;
background-position: 0 3px;
padding-left: 25px;
}

HTMLの例は、下記のとおりです。

<div class=”menu”>
<ul>
<li><a href=”menu1.html>メニュー１</a></li>
<li><a href=”menu2.html>メニュー２</a></li>
<li><a href=”menu3.html>メニュー３</a></li>
<li><a href=”menu4.html>メニュー４</a></li>
</ul>
</div>

• ※以前の記事「基金訓練に行ってきました。(40日目) (07/27)」も参考にしてください。
• ※このブログの左上にある「最近の記事」もこのやり方です。

階層構造のメニュー

↑こんな感じです。↑

CSSの例は下記のとおりです。

.menu ul {
margin-left: 0;
padding-left: 20px;
}
.menu a {
color: #999966;
text-decoration: none;
}
.menu a:link {
color: #336666;
text-decoration: none;
}
.menu a:visited {
color: #999999;
text-decoration: none;
}
.menu a:active {
color: #999999;
text-decoration: none;
}
.menu a:hover {
color: #999999;
text-decoration: none;
}
.menu li {
list-style-type: none;
}
li.submenu {
padding-left: 20px;
}

HTMLの例は、下記のとおりです。

<div class=”menu”>
<ul>
<li><a href=”menu1.html>メニュー１</a></li>
<li class=”submenu”><a href=”menu1_1.html>メニュー１-１</a></li>
<li class=”submenu”><a href=”menu1_2.html>メニュー１-１</a></li>
<li><a href=”menu2.html>メニュー２</a></li>
<li class=”submenu”><a href=”menu2_1.html>メニュー２-１</a></li>
<li class=”submenu”><a href=”menu2_2.html>メニュー２-１</a></li>
</ul>
</div>

• ※リストの入れ子構造で階層化する方法もありますが、上のほうが、頭が混乱しなくてわかりやすいと思います。

備考

まだまだ、メニューのやり方がありますので、残りは次回にします。

本日の内容は下記のとおりです。

１．フォーム

入力フィールド(１行)

お名前：

↑こんな感じです。↑

CSSの例は下記のとおりです。

input.text {
border: solid 1px green;
margin-left: 5px;
}

HTMLの例は、下記のとおりです。

<form action=”xxx.cgi” method=”post”>
お名前：

<input class=”text” type=”text” name=”フィールド名” size=”20″
maxlength=”30″ value=”これはvalueの属性値” />
</form>

• ※name属性の属性値には、フィールド名を指定する。
• ※size属性の属性値には、入力欄の長さを文字数で指定する。
• ※maxlength属性の属性値には、入力可能な最大文字数を指定する。
• ※value属性の属性値には、入力欄にデフォルトで表示させるテキストを指定する。
• ※ボックスのボーダ－の太さや色、フォントサイズ等は、CSSで設定する。

入力フィールド(複数行)

コメント：
<br /> デフォルトで表示する文字<br />

↑こんな感じです。↑

CSSの例は下記のとおりです。

input {
border: solid 1px green;
}

HTMLの例は、下記のとおりです。

<form action=”xxx.cgi” method=”post”>
コメント：<br />
<textarea” name=”フィールド名” cols=”30″ rows=”5″>
デフォルトで表示する文字
</textarea>
</form>

• ※name属性の属性値には、フィールド名を指定する。
• ※cols属性の属性値には、入力欄の幅を文字数で指定する。
• ※rows属性の属性値には、入力欄の行数(高さ)を文字数で指定する。
• ※<textarea>～</textarea>の間には、入力欄にデフォルトで表示させるテキストを指定する。
• ※ボックスのボーダ－の太さや色、フォントサイズ等は、CSSで設定する。

チェックボックス(複数選択可)

好きな季節は?
春
夏
秋
冬

↑こんな感じです。↑

CSSの例は下記のとおりです。

input.checkbox {
margin-left: 5px;
margin-right: 3px;
}

HTMLの例は、下記のとおりです。

<form action=”xxx.cgi” method=”post”>
好きな季節は?

<input class=”checkbox” type=”checkbox” name=”フィールド名” value=”春” />春
<input class=”checkbox” type=”checkbox” name=”フィールド名” value=”夏” checked=”checked” />夏
<input class=”checkbox” type=”checkbox” name=”フィールド名” value=”秋” />秋
<input class=”checkbox” type=”checkbox” name=”フィールド名” value=”冬” />冬
</form>

• ※name属性の属性値には、フィールド名を指定する。
• ※value属性の属性値には、チェック時送信されるテキストを指定する。
• ※checked=”checked”は、あらかじめチェックされた状態で表示する時、記述する。

ラジオボタン(単数選択のみ)

生まれたのは?
大正
昭和
平成

↑こんな感じです。↑

CSSの例は下記のとおりです。

input.radio {
margin-left: 5px;
margin-right: 3px;
}

HTMLの例は、下記のとおりです。

<form action=”xxx.cgi” method=”post”>
生まれたのは?

<input class=”radio” type=”checkbox” name=”フィールド名” value=”大正” />大正
<input class=”radio” type=”checkbox” name=”フィールド名” value=”昭和” checked=”checked” />昭和
<input class=”radio” type=”checkbox” name=”フィールド名” value=”平成” />平成
</form>

• ※name属性の属性値には、フィールド名を指定する。
• ※value属性の属性値には、チェック時送信されるテキストを指定する。
• ※checked=”checked”は、あらかじめチェックされた状態で表示する時、記述する。

回答選択メニュー(プルダウンメニュー)

性別：
男女

↑こんな感じです。↑

CSSの例は下記のとおりです。

select.pulldown {
border: solid 1px green;
font-size: 1.5em;
color: blue;
}

HTMLの例は、下記のとおりです。

<form action=”xxx.cgi” method=”post”>
性別：

<select class=”pulldown” name=”フィールド名”>
<option value=”男”>男</option>
<option value=”女”>女</option>
</select>
</form>

• ※name属性の属性値には、フィールド名を指定する。
• ※value属性の属性値には、選択時送信されるテキストを指定する。
• ※ボックスの大きさやボーダ－の太さや色、フォントサイズ等は、CSSで設定する。

回答選択メニュー(フィールド表示メニュー)

洗うのはどこから？：
頭から首から上腕二頭筋から足からその他

↑こんな感じです。↑

CSSの例は下記のとおりです。

select.field {
border: solid 1px green;
font-size: 1.5em;
color: blue;
}

HTMLの例は、下記のとおりです。

<form action=”xxx.cgi” method=”post”>
性別：

<select class=”field” name=”フィールド名” size=”4″>
<option value=”頭”>頭から</option>
<option value=”首”>首から</option>
<option value=”上腕二頭筋”>上腕二頭筋から</option>
<option value=”足”>足から</option>
<option value=”その他”>その他</option>
</select>
</form>

• ※name属性の属性値には、フィールド名を指定する。
• ※value属性の属性値には、選択時送信されるテキストを指定する。
• ※size属性の属性値には、フィールドの高さを行数で指定する。
• ※size属性の属性値が選択肢の数より少ない時は、スクロールバーがつく。
• ※ボックスの大きさやボーダ－の太さや色、フォントサイズ等は、CSSで設定する。

送信ボタン

↑こんな感じです。↑

CSSの例は下記のとおりです。

input.submit {
border: solid 2px green;
width: 130px;
height: 30px;
background-color: yellow;
font-size: 16px;
font-weight: bold;
color: blue;
}

HTMLの例は、下記のとおりです。

<form action=”xxx.cgi” method=”post”>

<input class=”submit” type=”submit” value=”送信” />
</form>

• ※value属性の属性値には、ボタンに表示する文字を指定する。
• ※ボタンの大きさや色、ボーダ－の太さや色、フォントサイズ等は、CSSで設定する。

リセットボタン

↑こんな感じです。↑

CSSの例は下記のとおりです。

input.reset {
border: solid 2px red;
width: 130px;
height: 30px;
background-color: green;
font-size: 16px;
font-weight: bold;
color: red;
}

HTMLの例は、下記のとおりです。

<form action=”xxx.cgi” method=”post”>

<input class=”reset” type=”reset” value=”リセット” />
</form>

• ※value属性の属性値には、ボタンに表示する文字を指定する。
• ※ボタンの大きさや色、ボーダ－の太さや色、フォントサイズ等は、CSSで設定する。

備考

このページの例は、フォームデコードのプラグラムの設置をしていないので、フォームを送信することはできません。
実際にメールフォームを設置しようと思っている方は、「メールフォーム　CGI」でググっていただくといいと思います。
また、CGIが使用できない環境の方は、「フォームデコードサービス」でググっていただくと、何か見つかると思います。

本日の内容は下記のとおりです。

１．テーブル(表組み)

左が見出しで右が説明で、普通の罫線の表

↑こんな感じです。↑