HTML/XHTML&CCS017（preタグ,position,z-index,特殊記号）

★タグ

●preタグ

・・・<pre>～</pre>で囲まれた範囲のソースに記述されたスペース・改行、タブを、そのまま等幅フォントで表示します。

---

★CSS

●position

・・・ボックスの配置方法（基準位置）が、絶対位置か相対位置かを指定する際に使用します。
positionのプロパティで決めるのは配置方法（基準位置）だけです。実際の表示位置の指定は,top,right,bottom,left,（←※これらの値は数値pxとかautoです。）で指定します。

---

○{ position: static; }・・・特に配置方法を指定しません。この時にはtop,right,bottom,left,は適用されません。標準位置です。

<p><position: static<span class="statictest"> stalic</sapn></p>

position: static stalic

とりあえずCSSの設定は、
/*--.statictest設定----------------------------------------------*/
.statictest {
color: #ffffff;
background-color: #0000ff;
padding: 5px;
position: static;
}

---

○{ position: relative; }・・・配置方法を相対位置で配置します。positionでstaticを使用した時に表示される位置が規準位置になります。

<p>position: relative<span class="relativetest"> relative</sapn></p>

position: relative relative

とりあえずCSSの設定は、
/*--.relativetest設定----------------------------------------------*/
.relativetest {
color: #ffffff;
background-color: #0000ff;
padding: 5px;
position: relative;
left: 10px;
top: 10px;
}
leftで右に行きます。topで下にいきます。難しすぎてよくわかりませんね。はぁ・・・
標準位置からtopで上に10px空間が出来るって考えたほうがわかりやすです。

---

○{ position: absolute; }・・・絶対位置での配置になります。親ボックスにpositionプロパティの値がstatic意外が指定されてる場合、親ボックスの左上が基準位置となります。
親ボックスにpositionプロパティの値がstatic意外が指定されていない場合、ウィンドウ全体の左上が基準になります。

<p>position: absolute<span class="absolutetest"> absolute</sapn></p>

position: absolute absolute

とりあえずCSSの設定は、
/*--.absolutetest設定----------------------------------------------*/
.absolutetest {
color: #ffffff;
background-color: #0000ff;
padding: 5px;
position: absolute;
left: 10px;
top: 10px;
}
親ボックスにstaticを指定していなのでこうなります。ウィンドウの左上に表示されてます。（※見えない場合場合は一番上まで画面をスクロールさせてください。）

---

○{ position: fixed; }・・・絶対位置での配置になります。absoluteとの違いは、スクロールしても位置が固定されたままとなります。


<p>position: fixed<span class="fixedtest"> fixed</sapn></p>

position: fixed fixed

とりあえずCSSの設定は、
/*--.fixedtest設定----------------------------------------------*/
.fixedtest {
color: #ffffff;
background-color: #0000ff;
padding: 5px;
position: fixed;
left: 10px;
top: 50px;
}
親ボックスにstaticを指定していなのでこうなります。ウィンドウの左上に表示されてます。あのしつこくついてくるのはこれで作られてたんですね～

---

●z-index・・・position: absoluteかrelativedでしたとき重ね合わせになる順番を指定します。数字で「1」「2」「3」・・・またはautoで指定します。（たぶんautoがデフォルトです。）
（※「1」が一番下になるって考えです。）

---

★特殊記号
&lt;で<

&gt;で>

&nbsp;で半角スペース

&amp;+&の抜かした文字(※gt;とかのことです。）で&lt;とか&gt;とか&nbsp;を表示させることができます。

HTML/XHTML&CCS016（tableタグ,trタグthタグ,tdタグ,border-collapse,border-spacing）

★タグ

tableタグ

・・・表作成するタグです。中には、trタグ（table row=行です。)thタグ（table header=見出しです）、tdタグ（table data=データです。）などを使って表を作ります。
※tableの開始タグの次にはcaptionタグを入れます。captionは表のタイトルになります。
デフォルトで表の上部にセンタリングして表示されます。が、このブログではなりません。leftですね。

●パターン1
<table border="1" summary="メニュー一覧">
<caption>メニュー一覧</caption>
<tr>
<th>th</th>
<td>td</td>
</tr>
<tr>
<th>th</th>
<td>td</td>
</tr>
</table>で

メニュー一覧

th	td
th	td

●パターン2
<table border="1" summary="メニュー一覧" class="table01">
<caption>メニュー一覧</caption>
<tr>
<th>th</th>
<th>th</th>
</tr>
<tr>
<td>td</td>
<td>td</td>
</tr>
</table>で

メニュー一覧

th	th
td	td

●パターン3
<table border="1" summary="メニュー一覧" class="table01">
<caption>メニュー一覧</caption>
<tr>
<th>th</th>
<th>th</th>
<th>th</th>
</tr>
<tr>
<th>th</th>
<td>td</td>
<td>td</td>
</tr>
</table>で

メニュー一覧

th	th	th
th	td	td

これらの3パターン覚えとけば大体大丈夫だそうです。
他にいろいろパターンがやってみるとあります。

※tableタグのborderは必須属性ではありませんが、付けるとプリントするときに簡易的に枠線を付けてくれます。summaryはアクセシビリティ的なところから見ると必須属性です。

ちなみに上のtableの
CSSの記述は、

/*--.tabletest設定----------------------------------------------*/
.tabletest table {
border: solid 6px;
border-collapse: separate;
border-spacing: 10px;
width: 300px;
}

.tabletest th,.tabletest td{
border: solid 5px #0000ff;
background-color: #ff0000;
}

です。

★CSS↑のCSSで使ってます。

●{ border-collapse: collapse;}

・・・で隣接するセルのボーダを重ねて表示します。

●{ border-collapse: separate;}

・・・で隣接するセルのボーダを分離して表示します。（デフォルトでこっちです。）
※このブログのテンプレのCSSの設定が（※その辺のことはよくわかりません。）はたぶんcollapseになってます。

●{ border-spacing: ～px;}

・・・separateの時、セル間の余白サイズを指定します。単位はpx等です。%は無理でした。emはいけます。

罫線を重ねる順番はtable>th>tdです。ただしtableはth,tdよりborderが1px大きくないと表示されません。（現時点でchromeのブラウザでだけ確認しました。）



※どんな時に利用するのか、まだわからないけど、tableやdivなどのブロック要素はfloatを指定するときにwidthを指定してないとなとfloatが効かないそうです。とりあえず覚えときましょう。

thタグのデフォルトは{ font-weight：bold; text-align:center; }です。このブログではなってませんが本当はそうです。
tdタグのデフォルトは{ font-weight：normal; text-align:left; }です。

tableタグにはmargin,paddingがあります。
th,tdタグにはpaddingしかありません。
trタグにはmargin,paddingがありません。

●tableの特徴
ブロック要素です。
デフォルトでは親要素の幅です。（※ここで言う親要素とはつまりdivのことかな？bodyもあると思います。）
th,tdの幅は内容量によります。いっぱいまで広がります。（※th,tdにheightで数値を指定しても、内容が多いとそれ以上に広がります。）

★セルの結合
●colspan・・・colは列って意味です。横（列）の結合です。

<table border="1" summary="食事メニュー一覧">
<tr>
<th colspan="3">メニュー</th>
</tr>

<tr>
<td>ラーメン</td>
<td>カレー</td>
<td>トマトスープ</td>
</tr>
</table>で

メニュー
ラーメン	カレー	トマトスープ

こんな感じに1行目の列の3つセルが結合します。

●rowspan・・・rowは行って意味です。縦（行）の結合です。

<table border="1" summary="食事メニュー一覧">
<tr>
<th rowspan="3">メニュー</th>
<td>ラーメン<td>
</tr>

<tr>
<td>カレーライス</td>
</tr>

<tr>
<td>トマトスープ</td>
</tr>
</table>

メニュー	ラーメン
	カレーライス
	トマトスープ

●cellpadding属性・・・tableの属性です。枠線とセル内容の間隔をpxで指定します。

●cellspacing属性・・・tableの属性です。セルとセルの間隔をpxで指定します。


↑こんな感じのイメージで

↓先生おすすめのサイトシーイング

伊武　雅人

イエカキ　理想の住まい

RAKUGAKI

株式会社日本デザインセンター

HTML/XHTML&CCS015（formタグ,inputタグ,textareaタグ,）

★タグ

●formタグ

・・・入力・送信フォームを作るときに使うタグです。

●action属性

・・・formの送信先を指定します。ここで指定したURLに送信されます。
●method属性・・・formの送信方法です。getとpostがありますがデータ、セキュリティからみてpostがいいのでmethod="post"で行きましょう。

●inputタグ

・・・formタグの中にテキストを入力したり、ボタン的なものを作ったりするときに使います。
<input type="～">
的な書き方をします。

○type属性の種類
■text・・・一行のテキスト（文字）ボックスを作成する。
<form>名前:<input type="text" name="項目名" value="初期値（変更可）" size="10" maxlength="10"/></form>
で

になります。
sizeは文字数？(※正確ではないらしです。）長さかな？
maxlengthは最大文字数を表しています。
■password・・・パスワード入力欄を作成する。たぶん半角英数字しか使えないです。
<form>パスワード:<input type="password" /></form>で

になります。

■image・・・イメージの送信ボタンを作成します。
<form><input type="image" src="画像までのパス" alt="画像の代わりになるテキストを指定" /></form>

になります。（時間がないのでキラキラ画像を送信ボタンにしてみました。）

■file・・・ファイル名入力ボックスを作成します。
<form><p><input type="file" name="datafile" /></p><p><input type="submit" value="送信" /></p></form>

になります。

■checkbox・・・チェックボックスボタンを作成します。複数のボタンを選択できます。
<form><input type="checkbox" name="color1" value="red"/>赤<input type="checkbox" name="color2" value="bule" />青</form>で

になります。複数個選択できます。
checkedでボタン指定できます。


■radio・・・ラジオボタンを作成します。一個のボタンしか選択できません。
<form><input type="radio" name="color1" value="red"/>赤<input type="radio" name="color1" value="bule" />青</form>で

になります。一つしか選択できません。したがって使うときは普通2個以上使います。

■subumit・・・送信ボタンを作成します。
<form><input type="submit" value="送信" /></form>で

になります。velue属性名がボタンに表示されます。


■reset・・・リセットボタンを作成します。
<form>名前:<input type="text" /><input type="reset" value="リセット" /></form>で

になります。value属性名がボタンに表示されます。

●textareaタグ・・・複数行のテキストボックスの作成です。
<form><p>コメント<br /><textarea name="comment "rows="5" cols="30">らーめん食べたい</textarea></form>で

になります。rowsで何行、colsで一行の文字数を指定します。name名は送信先のメールで
[comment]
らーめん食べたい
みたいな感じで表示されます。

●selectタグ・・・セレクトボックスを作成するタグです。初期値ではプルダウン式になっており、size属性で指定する事でプルダウン式じゃなくすることも可能です。selectタグの中にoptionタグを入れることで作れます。

<form><select name="color" multiple="multiple" ><option value="red">赤[red]<option value="green" selected="selected">緑[green]<option value="bule">青[bule]</select></form>で


になります。selectの開始タグにsize属性を入れればプルダウン式じゃなくせます。
selectedは選択された状態を指定します。selectedを緑に設定したので緑[green]が設定されます。
multiple属性は複数個選択できる用意する属性です。（Ctrlキーを押しながらクリックするとできます。）
赤を選んだ場合、
name=color,value="red"なので。送信したらメールには
[color]
red
と送信されてきます。

<input type="hidden" name="項目名" value="値（変更不可）" />
hiddenは隠し項目です。したがってブラウザには表示されません。
PHPと絡んでくると思われるので後でちゃんとやろうと思います。

formタグは1ページに複数個使えます。<form>～</form>ので一つのformです。

↓id名、class名に困ったときは・・・

有名サイトが使っているid名class名集めてきました！

HTML/XHTML&CCS014（objectタグ,paramタグ,mapタグ,areaタグ,usemap属性,shape属性,coords属性）

★タグ
●objectタグ・・・objectは、画像・動画・音声・各種プラグインデータ・JAVAアプレット・他のHTML文書等の、 様々な形式のデータを文書に埋め込むための汎用的なタグです。
書き方は
<object data="元データのパス" type="MIMEタイプ" width="幅" height="高さ"></object>
難しので”オブジェクトはいいデータタイプだ”で覚えます。
data="～.swf（flashの拡張子）の場合MIMEタイプは、
application/x-shockwave-flashです。

●parame

・・・paramは、<applet>や<object>でデータが実行される際に、必要となるパラメータを指定するタグです。name属性でパラメータの名前を指定して、value属性でその値を指定します。

nameの値がsrcの場合valueの値はオブジェクトのファイルパスを指定します。

nameをautostart(自動再生する）やnameをloop(繰り返し再生する）にした場合はvalueは
true(再生する）やfalse（再生しない）になります。

難しいので”パラメーターは名前がバルエ”で覚えます。

↑のflashソースが↓です。trueにしてみました。
<p><object date="http://blog.cnobi.jp/v1/blog/user/50c7fe0bb94d9aff445a7fb29619ca3a/1359297053" type="application/x-shockwave-flash" width="300" height="200">
<param name="src" value="http://blog.cnobi.jp/v1/blog/user/50c7fe0bb94d9aff445a7fb29619ca3a/1359297053" />
<param name="autostart" value="ture" />
<param name="loop" value="ture" />
</object></p>

↑のflashソースが↓です。falseにしてみましたが止まりません・・・本当は止まるハズです。
<p><object date="http://blog.cnobi.jp/v1/blog/user/50c7fe0bb94d9aff445a7fb29619ca3a/1359297053" type="application/x-shockwave-flash" width="300" height="200">
<param name="src" value="http://blog.cnobi.jp/v1/blog/user/50c7fe0bb94d9aff445a7fb29619ca3a/1359297053" />
<param name="autostart" value="false" />
<param name="loop" value="false" />
</object></p>

★クリッカブルマップ
マップ全体を<map>タグで定義し、<area>タグでリンク領域とそのリンク先を指定します。 また、<src>タグでマップを適用する画像とその画像が使用するマップ名を指定します。

●usemap属性・・・#記号を頭につけたusemap属性の値と、map要素のname属性の値を関連付けます。imgタグに付ける。

●shape属性・・・リンク領域の形状を指定します。
種類は
rect・・・四角形（初期値）
circle・・・円型
poly・・・多角形です。

coords・・・リンク領域の座標をピクセル数で指定します。
rectは左上、右下です（XY,XY)です。
circleは中心点の座標と半径を指定します。（X,Y,半径)です。
polyは全ての角の座標を指定します。(X,Y,X,Y,X,Y・・・)です。
座標位置の計算は正直ムズイです。

★タグ

●mapタグ

・・・HTMLタグでひとつの画像に複数のリンクを設定することを、 クライアントサイドイメージマップといいます。

クライアントサイドイメージマップでは、 マップ全体を<map>タグで定義し、<map>～</map>間に <area>タグでリンク領域とそのリンク先を指定します。 また、<img>タグでマップを適用する画像とその画像が使用するマップ名を指定します。

↓これが上のクライアントサイドイメージマップのソースです。
<p><img src="http://blog.cnobi.jp/v1/blog/user/50c7fe0bb94d9aff445a7fb29619ca3a/1347722379" alt="3種類のフルーツジュース" usemap="#map" /><map name="map"><area shape="poly" coords="10,20,100,20,55,190" href="http://blog.cnobi.jp/v1/blog/user/50c7fe0bb94d9aff445a7fb29619ca3a/1347722395" alt="オレンジ" /><area shape="poly" coords="105,20,195,20,150,190" href="http://blog.cnobi.jp/v1/blog/user/50c7fe0bb94d9aff445a7fb29619ca3a/1347722385" alt="メロン" /><area shape="poly" coords="200,20,290,20,245,190" href="http://blog.cnobi.jp/v1/blog/user/50c7fe0bb94d9aff445a7fb29619ca3a/1347722399" alt="ストロベリー"></map><p>

HTML/XHTML&CCS013（linkタグ,rel属性 ,href属性,type属性,style属性,supタグ,subタグ）

★タグ

●link

・・・その文書ファイルと関連する別の文書ファイルを指定し、 その関係を定義するもので、～間で使用します。
これしか知らないのですが。

●rel属性

・・・現在のファイルとリンク先の外部のファイルの関係性を表すキーワードです。

●href属性

・・・リンクする外部リソースのURL。

●type属性

・・・リンクする外部リソースのMIMEタイプです。
（※MIMEタイプとは「タイプ名/サブタイプ名」の形式の文字列です。）

これしか知らないのですが、例えば
<link href="css/base.css" rel="stylesheet" type="text/css" />
これで外部CSSファイルが使えます。
※css/base.cssはリンク先のURL（パス）なのでこれは例で書いたもので、使う人の環境によってパスは違いますので。自分の環境のパスを入れてください。

●style属性

・・・style属性で、要素に対して直接スタイルを指定することができます。
CSSに記述するところをHTMLに書けます。今の時代は非効率なので、あまり使われません。たぶん。
使い方としては、
<p style="background-color: #ff0000">ラーメン</p>だと

ラーメン

になります。

●name属性・・・調べてもよくわからないのですがHTMLでは昔はid属性の代わりに使っていたそうです。

※XHTML1.0 Transition
formタグはnameのみは不可（HTML-lintで『