第2回ホームページ作成講習会

準備

前回の内容について

前回講習会に出席できなかったor質問がある的なことは、昼休みに部室(塾生会館202奥)に来ればたぶん山口が丁寧に回答します。火曜の昼休みは高確率でいます。(2限語学なので来るのは遅れますが)

木曜も高確率でいますが、必修フルコマ+2,4,5時限目が語学(べ、別に再履した訳じゃないんだからね!週休5日だとこういうことになります)で死亡しているので、質問に回答できるだけの余力があるかは疑問です。

前回の内容について

質問や疑問への回答

前回の内容について

補足

タグは入れ子にできるってとこで触れ忘れましたが、p要素(段落)内でbr要素(改行)を使うこともできます。

クラナドは

禁止事項

入れ子に関する禁止事項

HTMLでは、やってはいけないことがいくつかあります。

まず一点目。前回の「タグは入れ子にできる」ってところで本来ならば触れるべき点なんですが、何が何でも入れ子に出来るわけではありません。例えば、

は誤りです。

なぜ誤りなのかはブロックレベル要素とインライン要素の概念を習えばよく分かるのですが、pは段落という大きい範囲を表しているのですがそのp外で小さな範囲を太字にするためのbは使えないということです。イメージとしては、小さいbの箱に大きいpの箱は入らないってことです。(後で触れるので今は分かんなくてもいいです。)

下は正しく書きなおしたソースです。pとbの位置が入れ替わりましたね。

ソフトフォーラム
パソコンクラブ

禁止事項

タグ、属性値の書き方

前回やっていた人がいたのを見つつさらっと流したのですが、以下のようなタグの書き方は駄目です。下2つは解釈してくれるブラウザもありますが、誤解釈の原因になるのでやめましょう。

また、属性値の括り方も3種類ありますが一番上が一般的

禁止事項

文字参照

タグは<と>で括りますが、その<と>自体をHTML文中に書きたい時はどう書くでしょうか。

勿論、<と>を直接入力してしまっては駄目です。ブラウザがその部分をタグと誤認して、表示が崩れてしまいます。<中野梓>とか入力しても、悲しいことにブラウザは何もしてくれません。

半角の<を全角の<で置き換えるという手もありますが、普通は文字参照(文字実体参照や数値文字参照)というものを使います。これは、特殊記号とタグとを区別するためや、キーボードでは直接入力できない記号を入力するのに用います。次のスライドにその代表例を示します。

禁止事項

文字参照

記号文字実体数値文字補足
<&lt;&#60;
>&gt;&#62;
©&copy;&#169;著作権マーク
&&amp;&#38;主にXHTMLで
"&quot;&#34;
'&apos;&#39;

文字実体参照とか数値文字参照の欄にある意味の分からん記号をHTML中にそのまま記述すれば、記号の欄に書いてある通りの文字が表示されます。(&はHTMLの場合直接記述しても問題ないのですが、XHTMLの場合は文字参照を必ず使わなければならないです。)

※「"」は「"」で括られた属性値内(align="ごにょごにょ")で使いたい時に主に使います。「'」は「'」で括られt(ry

文字実体と数値文字は何が違うの?→特に違いはない。強いてあげれば数値文字はUnicodeの……要は表現可能な文字が多い。
あと、&apos;はブラウザによっては表示不能なので&#39;の使用を推奨。

その他の文字参照は、http://w3g.jp/others/data/letters、とかを参考に。

禁止事項

改行について

HTML文中ではタグ内を除きどこででも改行できます。br要素の話をしているのではなく、実際のソース(HTML文書)中の改行の話です。ソースは、自分が読みやすいように改行しながら書きましょう。(この辺の規則はW3Cの勧告では定められてないです。ただしコーディング規約といって何らかの形で統一して書いたほうが後で自分や他人が見た時に見やすいので、後々講習会受講者用の書き方のルールを僕が勝手に定めます。ソフトフォーラムのHPはコーディング規約が滅茶苦茶なサイトの好例。)

ところで、本文中で(br要素でない実際の)改行を行うとどう表示されるんでしょうか。例えば以下のような感じです。

実際のブラウザでは以下のように表示され、改行が反映されません。が特別な理由がない限りこのような記述方法は避けるべきです。(しかも環境によっては改行するとスペースのような隙間ができてしまうので、文中では改行しないのが無難)

中野梓

禁止事項

改行について

ブラウザで表示した時に実際に改行させたいのならば前回習った通り

と書けば、




となります。あと、以下のようにタグ内での改行はしないでください。

禁止事項

非推奨要素、非推奨属性

前回はp要素のalign属性をやりましたが、実はW3Cではalign属性の使用は非推奨とされてます。

???と思う方が大半だと思いますが、HTMLというのは「文書の構造を示す」というのが本来の目的であり、要素やら属性やらを使ってやたらと文字の装飾とか配置をやるのは悪いHTMLの例です。それやるとそっち系の方々が怒りますし、実際、ソースがとても見難くなります。文字の装飾はCSSと呼ばれる装飾専用に開発されたものを使います。これは後々すごく触れます。なのでCSSをばっちり覚えるつもりの方は、「非推奨」とか山口が言ってたらとりあえず理解だけしておいてもらえれば確り覚えなくていいです。(ただし講習会では主にHTML4.01 Transitionalという文書型定義を利用するのですが、この定義では非推奨要素や属性は使用可能なので、使っても全然間違いにはなりません。ただしHTML5や将来策定されるであろうHTML6なり7なりでこの非推奨要素や属性は使用不可になる可能性があります。)

禁止事項

保存時のファイル名について

それと、メモ帳含めどのエディタでもそうですが、html文書を保存するとき安い参考書とかに「拡張子は『.htm』で保存します^^」とか意味の分からんことが書いてありますが、.htmlで保存して下さい。理由は色々あるのですが、レンタル鯖とかでインデックスファイルの拡張子の指定が.htmlになってることが多いのは理由の一つです。そもそも、.htmはWindows 3.1時代の拡張子の文字数制限の名残ですし、そんな遺産わざわざ使わなくていいです。

ちなみに、ローカル(自分のパソコン上)でHTML文書作ってる分には問題ないのですが、サーバー上にファイルをアップロードするとファイル名の大文字小文字が区別されます。混乱の元なので、ファイル名は全て小文字で統一した方が無難です。あと、ファイル名は「-」(ハイフン)と「_」(アンダースコア)と半角英数字以外は使わない方が無難です。日本語とか全角は情弱丸出しなんで駄目です。

最後に、前回さらっと流しましたが、サイトのトップページのHTML文書は「index.html」にする(ただしこれはサーバーによって異なりますが)決まりがあります。なんでサイトのトップページを作る時はindex.htmlで保存して下さい。まあ、後で詳しくやりますが。

タグと要素

あと、前回口頭で「タグ」と「要素」を同一のものとみなすとか前回言いましたが、W3CのExtensible Markup Language 1.0 Second Edition(http://www.w3.org/TR/2000/REC-xml-20001006)には、以下の様な定義があります。

つまり、要素は開始タグ+内容+終了タグを指し、タグは<p>とか</p>自体を指すとかW3Cさんは言ってます。

なんで以後はタグと要素を区別して用います。

個人的には「タグ」っつーよりも「要素(キリッ」っつった方が出来る人に見える気がしなくもない

前回の内容について

補足

前回話題に出たURLをここにまとめときます。

前回の内容について

補足

同じく前回話題に出たこと。……まあどうでもいいか。

エディターを利用する

本講習会で使用するエディターについて

初回講習会では、Windowsに標準搭載されているメモ帳を利用しました。

しかしながら、メモ帳はタグの色分けも入力支援もなく非常に使いづらいので、今回から別のエディタを使います。

候補としてはかなり色々あったのですが、今回は「初心者向け」かつ「学習用」に最適なもの、ということで、色分け機能と簡易的なタグの入力支援機能が付いたシンプルなHTMLエディタである「Crescent Eve」を利用しようと思います。

エディターを利用する

「Crescent Eve」について

「Crescent Eve」は、

SDI形式のHTMLエディタです。

エディターを利用する

「Crescent Eve」について

ダウンロードはhttp://www.kashim.com/eve/get.htmlから。

インストールウィザードの指示に従いインストールを完了させて下さい。

エディターを利用する

「Crescent Eve」について

アプリケーションの起動後、「ツール」→「Crescent Eve 起動時の設定」で設定画面を開き、

半角スペースの表示、フォントを滑らかにするをチェック。

「機能」タブをクリックし、「『画像の挿入』でalt欄が空欄でもalt属性を挿入する」をチェック。

その他、各自の好みで設定弄って下さい。

エディターを利用する

「Crescent Eve」について

使い方はいたって容易で、起動後、上部の青字の「∨」をクリックして、HTML 4.01 Transitionalをクリックし、タグを打ってけばいいだけです。

保存は上部のフロッピーディスクマークを押し、保存場所を選んで保存をクリックすればいいだけです。

その他、改行の入力機能とかもあるので、上のメニューのとこを適当に漁ってみてください。

エディターを利用する

「Crescent Eve」について

F9ボタンを押すことで一発でIEでの動作確認が出来ます。

あとはF7ボタンで文法チェックが出来るのも結構便利

エディターを利用する

ちなみに今回紹介したエディタは初心者向けです。プロなんかはその他ウェブに関連した機能がごっちゃになったWebオーサリングソフトのAdobe DreamweaverやMicrosoft FrontPageなんかを使うんですが、買うのに数万かかるんで今回は使いません。

無料で使える高機能Webオーサリングソフトなんかもあるにはある(EclipseベースのAptanaとか)んですが、使い方が難しいので取り扱いません。HTML講習会っつーかAptana講習会になりそうなんで。

あ、別に自分でもっと使いやすいエディタがあればそれ使ってもらっちゃっておkです。

っつーか情報工の人達がエディタとか作ってくれればいいんだがなー。(愚痴)

HTMLタグについて

下準備はここまでで、ここからは前回に引き続きタグをアレコレ学習していきます。

なんか下準備が本編以上の量になりましたね。

下はお約束です。実際にタグ打つときにはここの本文部分に記述して下さい。

HTMLタグについて

文字装飾タグ

太字斜体下線取り消し銀河英雄伝説
bおさらい。太字(物理強調)
i斜体。いわゆるイタリック
u下線。いわゆるアンダーバー。非推奨。
s取り消し線。非推奨。

基本的な文字装飾タグです。uとsは非推奨とかW3Cは言ってますが……これはCSS使わず普通に使われてる例外的なタグなんで特に気にしない方がいいと思う……。自分も普通に使ってますし。さっきの説明の矛盾してて紛らわしくてスマソ。

けいおん!けいおん!けいおん!けいおん!けいおん!けいおん!けいおん!けいおん!けいおん!けいおん!けいおん!けいおん!けいおん!けいおん!けいおん!けいおん!

取り消し線って一度書いたことを訂正するために使うのが本来の意味ですが、実際は↑みたいなネタ的な感じで使われることが多いです。ホントはやっちゃダメなんですが。

HTMLタグについて

文字装飾タグ

文字色文字サイズ
font(フォント)の指定
同時に指定することもできます
font文字の色やサイズを指定するタグ。非推奨要素の代表格(後述)
colorfont要素の属性で色を指定
sizefont要素の属性で文字サイズを指定。1-7の数値か、(現在の文字サイズからの差の)-3とか+2みたいな相対値でサイズ指定
facefont要素の属性でフォントを指定

訳あってレジュメ上じゃ文字サイズ指定が機能してませんが、コピペすりゃたぶん使えます。

font要素は非推奨要素の代表選手みたいなタグです。HTML5では非推奨どころかタグ自体が廃止されてます。とりあえずこんなタグがあるんだ、はーん的な感じでタグのことは流してもらっていいんですが、次スライド以降のカラーコードとかフォントの考え方は非常に重要なのでよく聞いてください。

HTMLタグについて

カラーコードとは

カラーコードとは、色を数値で表したものです。
font要素やさっきから散々話題に挙げてるCSSではこのカラーコードを使って色を指定します。
さっきのサンプルソースでは「color="#ff0000"」とかいって意味の分からん属性値を指定していましたが、この#ff0000は赤を表しています。
この#を除いた6桁の文字列(数値)部分は2桁ずつに分けられ、左から順にそれぞれ赤、緑、青の成分の強さ(絵の具みたいな感じ)を表しています。

color="#000000"

HTMLタグについて

カラーコードとは

ここで、いくつかの疑問が湧いてきたと思うのでお答えします。まず、なぜ赤緑青なのか。
これはRGB(Red Green Blue)カラーモデルという考え方に由来していて、実は今私達が見ている多くのディスプレイは、赤と緑と青の三原色を使って色を表しています。HTMLでもその考え方に合わせて赤緑青で色を表しているというわけです。
印刷業界なんかではCMYKを使うのですが、まあ今は忘れて下さい。

で、なんで数値なのに赤はff(ファイナルファンタジーじゃないよ)という英字なのか?赤の成分が最大なんだから99ではないのか?ですが、実はカラーコードの色指定は我々が普段使ってる10進数ではなく16進数を使って色を表しています。
進数の考え方はソフトフォーラムの上級生が4月に皆で受験した基本情報技術者の勉強でもしてもらえれば嫌でも理解できるんですが、例えば時計は60分で1時間増えますが、それを60進数(進法)といいます。
同じような考え方で、16進数では0-9の数字に加え、a-f(10-15)の英字を使って0-15の16数を表します。だからその最大値は99ではなくff(10進数では255)になります。

とまあ長々と説明しましたが、実際に色を考える時は
http://www.wanichan.com/web/resources/color.html、をコピペすればおkです。(この説明は一体何だったのか。)
まあ黒(#000000←全部の色がゼロなので真っ黒になります)とか白(#ffffff←黒の逆)とか赤(#ff0000)とか青(#0000ff)あたりは覚えておいたほうがいいかも。
カラーコード(というか属性の"値")は要素や属性名と異なり大文字小文字どっちでもいいです。

HTMLタグについて

カラーコードの補足

あ、ちなみにさっきのサイトのカラーコード(数値)の上に英単語の色名が書かれてますが、あの単語をcolor="red"みたいな感じで値に書いても赤字になります。(この時、「#」は付けないこと。#はこの先がカラーコードであることを示すので)
ただし、あんまりにもマニアックな色名を書いてもブラウザによっては解釈しないので、メジャーな色以外はカラーコードで記述したほうがいいです。

それと、カラーコードは6桁ではなく3桁(1桁区切り)でも記述できます。例えば赤ならcolor="#f00"みたいな感じです。

HTMLタグについて

フォントとは

フォントとは文字をコンピュータを使って表示する際の文字の形のこと。ワードとかで「MS明朝」とか「MSゴシック」とか文字の種類指定しますが、ズバリアレのことです。

さっきのfont要素とは話がずれますが、ウェブサイトを制作する際はこのフォントに気を配らなければなりません。
なぜならば、自分のPCにしか入ってないような特殊なフォントを指定しても、他の人がそのサイトを見たら別のフォントに置き換えられてしまうからです。

次のページで例を示します。

HTMLタグについて

フォントとは

機動警察パトレイバー

機動警察パトレイバー

上段:「白舟篆書教漢」という超特殊フォントをタグで指定 下段:山口のPCでの見え方

下段と上段の文字が同じ形ならば「白舟篆書教漢」が入っているということですが、こんな特殊なフォントは(攻殻機動隊好きでもなければ)入ってないと思うので、大体の人間にはMSPゴシックとかメイリオのような標準フォントで上段の文字が表示されてしまっている筈です。

ちなみに、フォントは「フォント フリー」とか検索すれば腐るほどダウンロードできます。特殊なフォントを使う時はCSS3のウェブフォント機能を使ってユーザにフォントをダウンロードさせるか、文字を画像化して表示させるのが一般的な手法です。

HTMLタグについて

フォントとは

厄介なのは、WindowsとMacでは標準フォントが異なり、更にフォントによって文字サイズが微妙に異なっているという点です。

ウェブサイトを作る時はこのフォントの違いを意識しつつ、WindowsユーザもMacユーザもサイトが美しく見えるようにデザインしていかねばなりません。

なお、http://alumnat.blog1.fc2.com/blog-entry-233.html、はWinとMacの共通フォントだそうなので参考までに。

HTMLタグについて

見出しタグ

超重要見出し

かなり重要

まあ重要

普通

普通未満
ゴミ
h1-h6見出し。1が重要で、6が一番弱い見出し

HTMLタグについて

見出しタグ

さっきも言いましたがHTMLは文書の構造(文章と文章の関係)を表すためのものなので、その意味ではこのhタグは文章(というか見出し)の重要箇所を表すことができる大切なものです。
ところで、例えば文字を大きくしたいって理由で文章全部をh1タグで括ったらどうなるでしょうか?それでは見出しの意味がなくなってしまいます。新聞を書くようなイメージで、重要な見出しほどここぞという時に使いましょう。これは後々やるSEO対策なんかでも使うので覚えておきましょう。

※ちなみに、なんでbr要素使わないのに文字が改行されてるの?ってのは、h1とかのタグは見出し+改行である(というと実は語弊がありますが……)からです。後で学習しますが。

HTMLタグについて

水平線

慶應義塾大学
文化団体連盟
hr水平線

水平線。終了タグは不要。前後で改行とかしなくても勝手に改行してくれます。

リストについて

ul要素

ulリストを作ることを宣言する
liリストの中身。必ずulやolの下で使う。こういうのを子要素と言う。

次スライド以降も参照。ちなみにリストの中身は僕の明日のチャイ語単語テストの範囲の一部です。勉強しなさ過ぎて今から徹夜です。

リストについて

ol要素

  1. 所以
  2. 富有
  3. 看病
ol番号付きリストを作ることを宣言する
typeol要素で項目タイプを指定する属性。
1→1,2,3...(デフォルト)
a→a,b,c
A→A,B,C
i→i,ii,iii
I→I,II,III
startol要素で開始番号を指定する属性。どのタイプでも数字で指定

リストについて

ulとolは番号付きかそうでないかの違いです。

で、大事なのは次の話で、たぶん今のリストを見て面倒くさがりな人は下のような代替案を思いついたかと思います。

・伴随
・就餐
・生病

「・」はキーボードの右下にあるちょんちょんマーク(なんて言うのか不明)で、一見するとさっきのリストと同じような表示になりました。しかしながら、この記述法はあんまり良くないです。さっきも言った通りHTMLは文書の構造を表すものなので、「これはリストだよ」とブラウザに教えてあげるのが大事なことなのです。

リストの話はこの話をするためにわざわざしました。

お知らせ

電子工学科2年の立壁がアフィリエイト仲間探してました。

アフィリエイトとは、ウェブサイトに企業の広告を貼って収入を得るための一連の活動のことです。月に数万ぐらい儲けてるらしいので、興味のある方は彼まで。

演習問題

演習問題やってみましょう。次スライドと同じ表示になるように、ソースを打ってみてください。
(表示はIE9でのものなので、動作確認はIE9でやった方がよろしいかと。)

ソフトフォーラム

演習問題

出来ましたか?お約束を忘れた人とかいると思いますが、ないとHTML文じゃないのでちゃんと打つこと。title要素もね。
あと、h1とかh2要素の後ろにbr要素を付ける必要はないです。
(br要素ではなく実際の)改行とかは任意の場所でしてもらえばおkです。