ドットインストール HTML入門16
実体参照
一部文字や記号は文字列として書いたつもりでもそう扱われないことがある。
そうしたものを文字として表現する時に用いる。
下記の例では「<」が「<」に、「>」が「>」に代わるものとして入力されている。
<p>これは<p>です。</p>
style属性
レイアウトやスタイリングは基本的にはCSSで行う。
しかし多くの要素にはstyle属性でスタイルを指定することができる。
試しに見てみたい時やごく一部の例外処理として使うことがある。
<p sytle="color:red;">こんにちは！</p>
<script>
JavaScriptを用いる際に使うタグ。
基本的には<head>タグで使われるが<body>タグで使う時は読み込みに配慮して<body>タグの最後に記述する。
下記の例ではsrc属性の値で示した場所から読み込みを行っている。
<script src="myscript.js"></script>
ドットインストール HTML入門14～15
スタイリング
文書をそれぞれの意味や持っている機能などでひとまとめにして整理する。
これらは区画整理が目的であって～でなければならない、ということはないようである。
<header>
<h1>起業日記</h1>
<nav>
home
profile
</nav>
</header>
<article>
<h2>リリース完了！</h2>
<p>うれしい！</p>
</article>
<aside>
<h3>このサイトについて</h3>
<p>@taguchiの起業日記です。</p></aside>
<footer>
copyright 2013 @taguchi
</fotter>
<header><footer>
そのままヘッダーやフッターとしてまとめるのに用いる。
整理する上でヘッダーやフッターが複数存在していても構わない。
<nav>
ナビゲーションリンク等をまとめるのに用いる。
主にヘッダーやフッター内部に存在していることが多くなりそうである。
<article>
記事の内容などに使用することが推奨されるセクション。
入れ子状にした時下位のものは上位のものに関連しているものとするのが原則。
<aside>
文書内において補足的な事柄についてまとめるのに用いる。
<section>
その他の区分を設けるのに用いる。
ただし上記の他のタグを優先しなるべく意味のある分け方をするように。
意味や機能ではなくレイアウトなどを目的とした整理・区分などは以下のようなタグを用いる。
<div id="main">
<p>こんにちは！こんにちは！</p>
<p>こんにちは！こんにちは！</p>
</div>
<p>こんにちは！<span class="notice">こんにちは！</span></p>
<p>こんにちは！こんにちは！</p>
<div><span>
囲った範囲をひとかたまりとしてグループ化する。
<div>タグは識別子にid属性をとり、<span>タグは識別子にclass属性をとる。
<div>タグはその前後で改行が入り、また識別子のid属性は同じ文字列を文書に１つしか設定することはできない。
そのため大きなまとまりでスタイリングする時に用いる。
<span>タグは前後に改行が入らず、また識別子のclass属性は同じ文字列を複数文書内に持つことができる。
そのため離れて何度も出る特定の文字を何個もまとめてスタイリングするなどの用途に向いている。
また<div>タグはid属性を持つためリンク時の移動先として設定することもできる。
ドットインストール HTML入門12～13
Formの基礎２
フォームを活用する基礎の続き。
選択形式のものを扱う。
<form action="survey.php" method="post">
<p>
Colors:
<label><input type="radio" name="color" value="red">Red</label>
<input type="radio" name="color" value="blue" id="blue"><label for="blue">Blue</label>
<input type="radio" name="color" value="green">Green
Colors:
<input type="checkbox" name="color" value="red">Red
<input type="checkbox" name="color" value="blue">Blue
<input type="checkbox" name="color" value="green">Green
</p><p><input type="submit" value="送信！"></p>
</form>
<input type="radio"><input type="checkbox">
複数の項目の中から選択するタイプのオブジェクトを作成する。
radioは選択項目が１つのラジオボタン、checkboxは複数選択が可能なチェックボックス。
name属性の値が同じものが同一のグループとして扱われる。
value属性の値はテキストボックスなどと異なり送信されるデータのみ、表示されるテキストはただの文字列としてタグの外に記述する。
checked属性の値にcheckedを入れることで最初から選択されている状態にすることができる。
<label>
フォームの部品と項目を一致させるのに用いるタグ。
例えば上記のラジオボタンやチェックボックスでは文字列はボタンとは別物として扱われる。
そのため文字部分をクリックしても選択されたことにはならない。
<label>で囲むことでこれらの部品と項目と１つにすることができる。
またfor属性の値でフォーム部品のidを指定することで内部の文字列と同一として扱うこともできる。
<form action="survey.php" method="post">
<select name="color" size="5" multiple>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
<p><input type="submit" value="送信！"></p>
</form>
<select>
リストの中から選択する形のオブジェクトを作成する。
size属性の値が2以上であればスクロール式、そうでなければプルダウン式となる。
形式は異なるがラジオボックスやチェックボックスとの置き換えが可能。
multiple属性により複数選択が可能となる。
項目を内部の<option>タグにて指定する。
<option>
<select>タグの項目を示す。
タグで囲んだ部分が表示文字列、valueの値が送信する情報となる。
同一<select>内でグループを分けるのであれば<optgroup>タグで囲むこと。
ラジオボックスやチェックボックスと同様にchecked属性の値をcheckedとすることで最初から選択されている状態にすることができる。
ドットインストール HTML入門10～11
Formの基礎１
フォームを活用する基礎。
テキストボックス形式のものを扱う。
<form>
入力・送信用のフォームの塊を作る、actionとmethodの属性が必須。
form内部の様々なオブジェクトに入力された情報をサーバーに送信する機能を持つ。
action属性は値には情報の送信先となるサーバーを指定する。
method属性は値にgetもしくはpostどちらかの送信方法を選ぶ。
getは情報をURLとして送信する方法で小さな情報を扱う形式。
postはデータ本体を送信する方法でより大きな情報を扱う形式。
これより<form>タグ内で扱えるフォームのパーツとなるタグを示す。
<form action="survey.php" method="post">
<p>名前:<input type="text" name="name" size="60" maxlength="5"></p>
<p>メモ:<textarea type="text" name="memo"></textarea></p>
<p><input type="submit" value="送信！"></p>
</form>
<input type="submit">
フォームの情報を送信する送信ボタンを作る。
これから示すタグは全てname属性とvalue属性を持つがこの２つの値をセットとした情報を送信することとなる。
この送信ボタンの持つvalueの値はボタンにテキストとして表示される。
<form action="survey.php" method="post">
<p>名前:<input type="text" name="name" size="60" maxlength="5" required></p>
<p>パスワード:<input type="password" name="password"></p>
<p><input type="hidden" name="user_id" value="32"></p>
<p>日付:<input type="date" name="birthday"></p>
<p>URL:<input type="url" name="url"></p>
<p>email:<input type="email" name="email"></p>
<p><input type="submit" value="送信！"></p>
</form>
<input type="text">
<input>タグの最も基本的なテキストボックス。
以下全てのタグに共通するがsize属性の値に最大表示文字数を、maxlength属性の値に最大入力文字数を指定することができる。
またrequired属性を入れることで入力必須の項目となる。
テキストボックス内の文字列がvalueの値となりname属性の値と共に送信される
<input type="password">
パスワード入力用テキストボックス。
入力した内容が秘匿表示される。
<input type="url">
URL入力用のテキストボックス。
URLの形式をとっているかどうかのチェックが自動的に行われる。
<input type="email">
メールアドレス入力用のテキストボックス。
簡易にだがメールアドレス形式をとっているかどうかのチェックが自動的に行われる。
<input type="hidden">
ユーザーからの入力を必要としないが送信したい情報がある時に用いる。
形式上テキストボックスと同様の型を持っている。
<textarea>
複数行に渡る入力欄を作りたい時に用いる。
cols属性の値に一行の文字数、rows属性の値に行数を指定する。
また最大文字数をmaxlength属性の値に指定することもできる。
<input type="date">
日付入力欄を作る。
他のオブジェクトと異なりsize属性やmaxlength属性は存在しない。
ドットインストール HTML入門9
画像ファイルの読み込み
<img src="cart.jpg" width="500" height="283" alt="カートの写真です。" title="カートの写真">
<img>
画像ファイルを使用する、ファイルはsrc属性の値にURLを指定する。
<link>や<a>といったタグと異なりhref属性ではないことに注意。
width、height属性により画像の表示サイズを指定することができる。
画像は自動で拡大縮小され、指定しない場合は等倍となる。
特にサイズを変更しない場合でも正規のサイズを指定した方が読み込みは早い。
alt属性には画像が表示されない時の代替表示を、title属性にはポップアップ表示をそれぞれ入力する。
終了タグは必要ないため</img>と書かないように。
ドットインストール HTML入門8
各種リンクの作製
<p>こんにちは。</p>
<p><a href="http://google.com" target="_blank">Google</a></p>
<p><a href="hello.html">Hello</a></p>
<p><a href="#hello2">hello 2</a></p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p id="hello2">hello 2 !!!</p>
<p>こんにちは。</p>
<a>
ハイパーリンクを作るタグ、href属性の値にURLを指定する。
指定する先は相対パスでも構わない。
同文書内へのジャンプを作る場合は上記の「#hello2」のようにハッシュ＋ジャンプ先のidとなるように記述する。
「hello.html#hello」のように組み合わせることも可能。
またtarget属性で値を_blankと指定すると新しいウィンドウでリンク先を開くことができる。
逆に現在のウィンドウを指定したい場合は値を_selfとする。
ドットインストール HTML入門7
表の作成
まず表を作ることを<table>タグで示し内部に見出しを表す<thead>と<tbody>を用意する。
<table>
<thead>
<tr><th>name</th><th>2010</th><th>2011</th></tr>
</thead>
<tbody>
<tr><td>@taguchi</td><td>200</td><td>210</td></tr>
<tr><td>@fkoji</td><td>300</td><td>420</td></tr>
<tr><td>@dotinstall</td><td>500</td><td>380</td></tr>
<tbody>
</table>
<tr>
table row、表の行を表す。
この内部にセルを表す<th>もしくは<td>タグを用いて表を成形する。
<th><td>
それぞれ table header、table data、表のセルを表す。
conspan属性の値の数だけ複数の列が結合したセルを作ることができる。
同様にrowspan属性の値の数だけ複数行にまたがるセルを作ることができる。
<th>は見出しセルであり通常太字で示される。
このままでは整列して各要素が並んでいるだけだが、<table>タグにborder属性を値1で記述すると罫線有りの表らしい形となる。
今回の例では<thead>に見出しは１行しか存在していないが複数行あってもかまわない。
また<tbody>内に<th>を用いて見出しのセルを作ることもできる。
