HTMLのフォームの基礎知識1
HTMLで記述できるフォームとはなんでしょうか?
- ブラウザの操作画面で、ユーザーの情報を受け付けるもの
- 目的は、ユーザーの情報を集めるため
action
action="#"は、CGIまたはPHPが入りますが、現時点では「NULLリンク」にしておきます。
お問い合せフォーム
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>お問い合わせ</title> </head> <body> <h1>お問い合わせフォーム</h1> <form action="#" method="post"> <p>名前:<input type="text" name="name" size="20" maxlength="10" value="お名前"></p> <p>内容:<textarea name="subject" rows="5" cols="40">お問い合せ内容</textarea></p> <p><input type="submit" value="送信"></p> </form> </body> </html>
ラジオボタン
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ラジオボタン</title> </head> <body> <h1>ラジオボタン</h1> <form action="#" method="post"> <p>性別: <input type="radio" name="sex" value="male" checked>男性 <input type="radio" name="sex" value="female">女性 </p> <p><input type="submit" value="送信"></p> </form> </body> </html>
チェックボックス
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>チェックボックス</title> </head> <body> <h1>チェックボックス</h1> <form action="#" method="post"> <p>スマートフォン: <input type="checkbox" name="mobile" value="1" checked>iPhone <input type="checkbox" name="mobile" value="2">Android <input type="checkbox" name="mobile" value="3">その他 </p> <p><input type="submit" value="送信"></p> </form> </body> </html>
リスト
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>リスト</title> </head> <body> <h1>リスト</h1> <form action="#" method="post"> <p>言語: <select name="language"> <option value="" selected>以下の言語を選択してください</option> <option value="1">日本語</option> <option value="2">英語</option> <option value="3">フランス語</option> <option value="4">スペイン語</option> <option value="5">韓国語</option> </select> </p> <p><input type="submit" value="送信"></p> </form> </body> </html>
headには何を書けば良いのかを勉強しましょう!part3
さて、headタグについての最後の勉強です。
今回で、一通りheadタグについての理解ができたと思います。
headタグは、検索エンジン対策としてもとても大事なポイントになりますので、
しっかりと勉強をしましょう!
それでは、headタグについて勉強をしていきましょう。
画像
文字だけが長く続くと、それだけで読む気が起こりにくいものです。
そこで、より情報量が多い「画像」を挿入して、読みやすさのアクセントを作ります。
画像には、2種類の使い方があります。
- 説明・解説のための画像(キャプションなどをつけます)
- Webページの印象をつくるための画像
写真集でもない限り、写真が主張しすぎると全体のバランスを崩す原因にもなりかねません。
ハイパーリンク
現在、電子ドキュメントの中でもっとも重要な要素です。
文章の特定の場所から、関連する情報に移動できるような仕組みを指します。
WordでもPDFでも、この仕組みを使うことができるようになっています。
もちろん、Webページでは「ハイパーリンク」がなければ役立ちません。
文書構造
上記のドキュメント内容を、見る人が理解しやすくする形を「文書構造」と呼びます。
Webページの場合、「読みやすい」「体裁が整っている」「メンテナンス性が高い」以外に、「検索結果が上位表示」するということを求められます。
このことも、正しい文書構造をつくる必然性のひとつになっています。
この文書構造こそが「伝えるドキュメントの書き方」の本質です。
そして、Webの勉強は文書構造の書き方を中心におこないます。
プログラミングであっても同じことです。
伝える相手が人から「OS(機械)」に変わるだけのことです。
伝えようとする内容が、的確に効率よく伝わらなければ意味がありません。
記述(マークアップ)のルール
- 表示する内容(コンテンツ)は、必ず「開始タグ」と「終了タグ」で囲む
- すべて小文字で記述する
以下は、記憶する部分ではなく、入力の経験のみが優先されます。
まず、入力してみましょう。
段落 <p>
- 基本的には、2行以上の文章に指定する(1行でも可)
- 迷ったら、「p要素」にする
- 段落ブロックの下は、必ず1行分の空きができる
見出し <h1> <h2> <h3>
- ページ内容を表す1行
- 優先順位のレベルでマークアップする
- 見出しの拾い読みでも、ページのツリー講座がわかるように
本来は、段落(本文)と組み合わせて記述します。
箇条書き <ul> <ol> <dl>
- 必然性のある箇条書きを利用する
unordered list
順序が置き換わっても意味が伝わる並列な内容に使う。
- 行頭マークは「黒丸」
ordered list
順序が置き換わっては意味が伝わらない、順序が意味をもつ内容に使う。
- 行頭は数字
definition list
「名称(用語)」と「その説明文(定義)」をセットにしてリスト化するときに使う。
- リスト全体に対する dl要素:definition list
- 名称(用語)に対する dt要素:definition term
- 説明文(定義)に対する dd要素:definition description
画像挿入 <img>
img:images
src:source
画像の表示は、HTMLソースをブラウザが解釈して表示する段階で、もう一度サーバーまで「画像の置いてある場所」にとりにいってから表示されます。
このとき、幅・高さなどの情報がないと、その計算をしてから表示されるため、表示が遅くなります。
一般的に「レスポンスが悪い」という状態です。
ハイパーリンク <a>
リンクには「テキストリンク」「画像リンク」「メールリンク」の3種類あります。
詳細は、授業内で説明します。
a:anchor
href:hyper reference
headには何を書けば良いのかを勉強しましょう!part2
headタグに何を書けば良いのかについて、2回でお伝えすると言いましたが、
書いていたら量が多かったので、3回になります。
それでは、早速、前回の続きを勉強していきましょう。
ドキュメント(コンテンツ)
ドキュメントは、多くの人へ効率的に情報を伝達するために適したツールです。
その中に書かれる内容が「コンテンツ」です。
そのドキュメントをHTML形式で書いたものが、Webページです。
そして「body要素」内に書かれる部分を「コンテンツ」と呼びます。
以下、ドキュメントを「Webページ」と置き換えて読んでみてください。
なぜドキュメントを作成するのか?
誰かが誰かに情報を伝達する手段には、以下の方法があります。
- 口頭(相手が限られ、残らない)
- 手書きのメモ(整理されていない、必要な部分を取り出しにくい)
- 電子ドキュメント(複製・再配布が容易、検索可能)
いうまでもなく、パーソナルコンピュータが使われる理由がここにあります。
電子ドキュメントを作成するコスト
通常の企業に見られるように、ただ誰かが作った大量のドキュメントが効率的な情報伝達に役に立つかと言えば、必ずしもそうではありません。
そこには、コミニュケーション・コストの考え方が欠如しています。
- 作成のコスト(最初に作成するコスト、ツール次第でコスト削減ができる)
- 配布のコスト(伝えたい相手に比例して増大する、最新版を得るためのコスト)
- 理解のコスト(内容を理解するために必要なコスト、読みやすさがコストに跳ね返る)
- 保守のコスト(現状にあわせて、更新するためのコスト)
「Word」でドキュメントを作るときには、あまり意識していないコストの問題が、Webページを作ることを意識したとたんに、はっきり見えてきます。
本来、Wordなどのドキュメント作成ツールの場合でも、考える必要があります。
よいドキュメント
WordでもWebページでも、必要とされる要件は同じです。
- 読みやすい
- 体裁が整っている
- メンテナンス性が高い
もっとも誤解が生じやすいのが「読みやすい(見栄え)」という部分です。
読みやすい(見栄え)
- 見出しと本文の区別がある
- 適切な内容の分割がある
- 結論から内容への誘導がある
- 必要な場所へ移動できる
体裁が整っている
- 読み手のことを考えてある
- 必要十分な空きがある
- 文字の大きさで重要度に変化をつけてある
- ドキュメント全体の規則性がある
メンテナンス性が高い
- 繰り返し改訂・追記されることが前提
- 誰もがルールに則り更新ができる
- 無駄な作業をせずに価値ある作業に集中できる
つまり、コンテンツを作るということは、文章を書く技術を最大限利用しておこなう行為なのです。
それは、HTMLを暗記するなどという行為とはまったく意味の違うものです。
ですから、このクラスは「まる暗記」はしません。
コンテンツ内容
必ず以下の要素が必要になります。WordもWebページも同じです。
- 本文
- 見出し
- 箇条書き
- 画像(説明・解説用、イメージ)
- 補足要素(引用、脚注)
- ハイパーリンク
- ヘッダー・フッター(Wordのみ)
本文(ほんもん)
紙媒体の場合、日本では「9pt ≒ 13Q、中明朝体、正体、べた組み」と基準が決まっています。
Webページも同様に、ブラウザの標準文字サイズ「16px」が基準となります。
本文の文字サイズを指定しなければ、自動的に「16px」で表示されます。
ここで最も重要なことは、文字サイズは「スタイルシート」で設定することです。
とくに、Wordの場合「スタイルシート」を使わなければ、Wordの機能の1/10も利用したことになりません。
もちろん、Webページは言うまでもありません。
見出し
本文が数十行にわたって書かれていれば、誰も読む気はおこりません。
ですから、本文は段落ごとに分かれていて、なおかつ内容をわかりやすくまとめた1行、つまり「見出し」が必要になります。
見出しには、重要度によってランク付けがあります。
Wordの場合は、見出し1→ 見出し2→ 見出し3
Webページの場合は、h1→ h2→ h3→ h4→ h5→ h6
という風に基準が決まっています。
WordもWebページも、この指定がなくても表示上問題はありません。
しかし、よいドキュメントである条件
- 読みやすい
- 体裁が整っている
- メンテナンス性が高い
を満たしたことにはなりません。
つねに「本文と見出し」の組み合わせで書くことを意識しましょう。
箇条書き
しかし、実際には「本文と見出し」だけでは単調なもになってしまいます。
とくに説明する内容などは、全体が比較して見えないと理解につながりません。
そこで利用されるのが、「箇条書き」です。
箇条書きには、3種類あります。(Wordでは2種類)
番号なし箇条書き
順序の前後が入れ替わっても、意味や価値の変わらない場合に利用します。
番号つき箇条書き
順序の前後が入れ替わると、意味の通じない順序が重要なレシピなどの説明に利用します。
定義型箇条書き
語句の説明や、日ごとに起こったことを並列で並べて見せるときに利用します。
headには何を書けば良いのかを勉強しましょう!part1
今回は、headについての勉強です。
headについての勉強は今回と、次回の2回を予定しています。
headタグについては、以前も勉強したことがありますが、今回と次回は以前よりも丁寧にお伝えします。
それでは、headタグには何を書けば良いのかを勉強してみましょう。
head部
- UA(user agent)が表示するための必要な条件とページの目的、そして外部との関連づけを記述する
- あくまでもブラウザが理解するための部分
- 不可視(非表示)
現在のインターネットの利用の仕方は、ほぼ「検索」から始まります。
つまり、検索対象になるWebページを作成しない限り、見られることはないということです。
では「検索」は、何を検索するのか?
検索エンジンのサーバーに記録してあるデーターから検索します。
インターネットの世界にある「ありとあらゆるデータ」から検索されるわけではありません。
この「検索エンジンのサーバーに記録されること」を、インデックスと呼びます。
この「インデックス」をされるためには、HTML文書内の「head部」と「body部」のバランスが必要になります。
DTD
- Document Type Definition(文書型定義、DTD)とは、文書構造(文書型)を定義するためのスキーマ言語の一つ
- ごくごく簡単なDTDの説明
- Strict(厳密型)、Transitional(移行型)、Frameset(フレーム設定型)の三種類がある - 詳細はテキストに入ってから解説します
- 記述する位置は、ドキュメントの最上位部
HTML 4.01 Transitional
XHTML 1.0 Transitional
- 「XML宣言」は、IE6対策として記述しない場合もあります。
HTML5
XHTMLでの記述
- 2012年末の時点で主流の文書型です(HTML5は限定的)
XML宣言(必須)
省略する場合もあります。(IE6対策のときに説明します。)
DTD(Document Type Definition)DOCTYPE宣言
- 厳密な記述を目指していました
- 現在では、Transitional(移行型)に落ち着いています
名前空間(xmlns)と言語コード(xml:lang)を指定する
- xmlns:xml name space
XML言語は、データを管理するのには適しています。
メリットは、自由な名前を付けて管理しやすくできることです。
そのルールを規定しているのが「名前空間」です。
そのルールに則って名前を付けますよ。という意味になります。
HTMLとXHTMLの記述上の違い
- 要素名、属性名は小文字で記述する
- 必ず開始タグ・終了タグのセットで記述する(できない場合(非空要素)は、「 /」半角空き+スラッシュで閉じる)
- meta、hr、br、img などは、空要素として書く
- ‘id’および‘name’属性をもつ要素は、‘id’属性を使用する
外部リンク
rel:relative 関係性(HTMLドキュメントに対しCSSファイル)
「media属性」は「screen, print」場合によって「tv」を追加します。
※「media="all"」は、旧ブラウザにCSSファイルを認識させないための指定で、現在のようにPCサイトを携帯キャリア(ガラパゴス)で見る場合などに、大きい画像を読み込ませないようにするために使用しません。
HTML5
- XHTMLより簡潔な記述が可能
- 授業の中では、この記述を基本とします
meta
- Metainformation(メタ情報)の略
- 「超~」「高次~」「~の間の」「~の後ろの」「~を含む」などの意味を持つ英語の接頭辞
- metaphorが語源
HTML5の場合
- 「http-equiv」を自明として省略します
- 「keywords」も基本的には省略しますが、おまじないとして残すこともあります
HTMLの入力練習をして勉強しましょう!
さて、今回は、HTMLの入力練習をして、勉強してみましょう。
HTMLや、CSSはとにかく書きまくるのが大切です。
下記に、書いていますので、なぞるように書いていってください。
基本構造
- Firefox で表示(文法チェック)
※何も見ないで入力できるまで繰り返すこと。
head
- description(詳細)
- shortcut icon(ブラウザアイコン)
- link(外部リンク)
- script(スクリプトの読み込み)
body
- コメントアウト
- 大見出し
- 改行
画像を表示
- img:Image
- src:Source
リンク
- link(テキストリンク・画像リンク)
- target(別ページで開く場合は、_blank)
リスト
- ul:Unordered List (順序のないリスト) → 箇条書きリスト
- ol:Ordered List (順序のあるリスト) → 番号付きリスト
- li:List Item (リストの項目)
番号なしリスト
番号付きリスト
HTMLの基本的なルールについての勉強 part3
さて、HTMLの基本ルールについての勉強も今回が最後です。
HTMLの一通りの流れをご説明したつもりなので、今回の記事をしっかりと勉強していただければ、HTMLについては大体理解したといっていいでしょう。
といっても、私もまだまだ初心者なんですけどね笑
それでは、HTMLの基礎ルールについて、最後の勉強をしていきましょう。
表組み
table:table
tr:table row
th:table head
td:table description
文字と枠の修飾は「CSS」でおこないます。
ただし、枠線が見えないと表組みが確認できないため、便宜上「border="1"」を指定します。
最終的には「CSS」設定後、削除します。
アドレス
「住所や電話番号」など、ページ内容の管理者の住所を明示するために使用します。
一般的には「著作マーク (c)」を明示する場合にも利用されています。
水平線
hr:horizontal rule
リンク
Webは「リンク」こそ命です。
リンクには3つの使い方があります。
- テキストリンク
- 画像リンク
- メールリンク
a:anchor
href:hyper reference
新規ウィンドウで開く
- target="_blank"
この属性は、HTMLの解釈の変遷により、使わないほうが良いといわれたりしましたが、HTML5では使用可能になっています。
HTMLの基本的なルールについての勉強 part2
さて、前回の続きです。
HTMLを書いて、Web上にアップしたとしても、検索エンジンにすぐにインデックスされるわけではありません。
インデックスされることがなければ、ユーザーは、検索をしてあなたのサイトを見つけることは一生ありません。
どれだけ、素晴らしいサイトを作っても、検索エンジンにインデックスされていなければ、そのサイトは砂漠の上にお店を作っているようなものです。
つまり、誰も見つけることができないってことですね。
では、どうすればすぐにインデックスされるのでしょうか?
と、その前に勉強しなくてはいけないことがありますので、順を追って勉強していきましょう!
その他のmeta
- 「keywords」は、検索対象ではなくトリガーとしての役割しかありません。Googleは無視されますが「検索エンジンBing」対策として、記述する場合もあります
link要素
title要素
- 「title要素」には日本語サイトの場合は、日本語で記述しますが、何を記述すればよいかを答えなさい。
body要素
本来、body内は必要充分なテキストが入力してあるところから進めることが理想です。
その内容は「本文(ほんもん)」として、記述します。
その中から、内容を一目で把握できるように「見出し」を立ち上げます。
つまり、見出しで表すことのできる、文節の塊が「段落」となります。
この「見出し+段落」で表す内容が「パラグラフ」と呼ばれます。
「p要素」そのものも「paragraph」と呼ばれますが、段落要素には見出し要素が不可欠であると考えましょう。
文章だけが長く続くと、可読性が落ちます。
そこで、箇条書きが利用されます。
1行で完結に表現できるものは、箇条書きにします。
特に、Webの表現では「読み物」というよりも「レポート」として読んでもらうことがほとんどです。
まず「結論」を読んでもらい、「検証」で納得してもらうという手法です。
ですから、それには「箇条書き」が有効です。
つまりbody内には、常に
- 見出し
- 段落
- 箇条書き
が記述されることになります。
《課題》
次の内容をマークアップしなさい。
文書構造に必要な要素
- タイトル
- 見出しと本文
- 箇条書き(番号つき、番号なし)
- 補足説明の画像
見出し <h1> <h2> <h3>
- ページ内容を表す1行
- 優先順位のレベルでマークアップする
- 見出しの拾い読みでも、ページのツリー講座がわかるように
見出しは、段落(本文)と組み合わせて記述します。
段落 <p>
- 基本的には、2行以上の文章に指定する(1行でも可)
- 迷ったら、「p要素」にする
- 段落ブロックの下は、必ず1行分の空きができる
箇条書き <ul> <ol> <dl>
- 必然性のある箇条書きを利用する
ul(unordered list)
順序が置き換わっても意味が伝わる並列な内容に使う。
- 行頭マークは「黒丸」
ol(ordered list)
順序が置き換わっては意味が伝わらない、順序が意味をもつ内容に使う。
- 行頭は数字
dl(definition list)
「名称(用語)」と「その説明文(定義)」をセットにしてリスト化するときに使う。
- リスト全体に対する dl要素:definition list
- 名称(用語)に対する dt要素:definition term
- 説明文(定義)に対する dd要素:definition description
以下のような場合にも、利用されます。
いわゆる日付で明示する更新情報の場合です。