WEB 基礎
Web 制作をマスターするには HTML と CSS の 2 つの言語を覚える必要があります。言語といっても決して難しいもの
ではありません。このテキストを理解することで、実作業でも Web ページができるようになります。分厚い辞書 1 冊分の知識をこのテキストに集約しています。HTML で文章構造を定義し、CSS で装飾部分を指定する。ややこしそうですが、それぞれひとつずつ押さえていけば、きっとできるようになります。Lets!

HTML& CSSEMPLOS

WEB 基礎

目次
HTML ------------------------------------------------------------------------------------------ 3
HTML とは ..................................................................................................................... 3
性格付け .......................................................................................................................... 4
まずは骨格を作る <HTML> <HEAD> <BODY> ......................................................... 5
タイトルを付ける <TITLE> .......................................................................................... 7
見出しを付ける <H1> .................................................................................................... 8
本文を書く<ｐ> ............................................................................................................ 10
リストを書く ................................................................................................................. 14
番号の無いリスト <UL> .............................................................................................. 15
番号のついたリスト <OL> <LI> ................................................................................. 18
定義型リスト <DL> <DT> <DD> ............................................................................... 19
画像を入れる <IMG> ................................................................................................... 26
ハイパーリンクを付ける <A> ...................................................................................... 28パスについて ................................................................................................................. 29
表を書く ........................................................................................................................ 35
グループ化 .................................................................................................................... 38
コメント ........................................................................................................................ 38

CSS ------------------------------------------------------------------------------------------- 39
CSS とは ....................................................................................................................... 39
文字の色 ........................................................................................................................ 39
文字のスタイル ............................................................................................................. 52
行の高さを指定する ...................................................................................................... 60
文字の間隔について ...................................................................................................... 61
文字の字下げ(インデント)を指定する .......................................................................... 62
ボックスモデルについて............................................................................................... 63
行内要素及び表のセルの垂直方向の位置 ..................................................................... 68
float について................................................................................................................ 69
グループ化 .................................................................................................................... 76
子、孫セレクタ ............................................................................................................. 76
練習問題 ........................................................................................................................ 77その他のよく使われる CSS .......................................................................................... 78
ショートハンド ............................................................................................................. 80
コメント ........................................................................................................................ 81
実体参照 ........................................................................................................................ 81
1WEB 基礎

総合問題 ------------------------------------------------------------------------------------- 82
総合問題 1 ..................................................................................................................... 82
総合問題 2 ..................................................................................................................... 83
総合問題 3 ..................................................................................................................... 85
総合問題 4 ..................................................................................................................... 86
総合問題 5 ..................................................................................................................... 87
総合問題 6 ..................................................................................................................... 88
総合問題 7 ..................................................................................................................... 89
総合問題【解答例】 ...................................................................................................... 90

2WEB 基礎

HTMLHTML とはHTML とは Hyper Text Markup Language の略で、みなさんがご覧になっている携帯ペー
ジや YAHOO、Google も含め、ホームページのほぼ全てが HTML という言語で書かれています。HTML を一言で言うならば、文章の論理情報をある単位で性格付けする文章です。
かつては、様々な独自使用の HTML が氾濫し、ブラウザによって表示されたりされなかったりといった具合に、非常に困った状態にありました(今も完全には解決していませんがとくに IE6…)。現在では、W3C (World Wide Web Consortiums)が勧告を出し、世界中がそれに従うように推奨されています。つまり、W3C の定めた HTML を使えば、より多くのブラウザで正しく表示されるページを作ったことになります。
現在、HTML には HTML4.0 と XHTML という 2 種類の規格が存在していますが、XHTMLのほうがより記述ルールが厳密で、特に文書構造と装飾の分離が厳格です。正確な言語学習のために、このテキストでは XHTML の方で説明を進めます。
理屈はさておき、実際に HTML で書かれた物を見ていただきましょう。
<HTML><HEAD><TITLE>Hello!! HTML</TITLE></HEAD><BODY >
<H1>HTML は簡単です</H1><P>いま何しているか分からなくても大丈夫！</P><P><IMG src="sample.gif" alt="サンプルの写真" /></P><UL><LI>必ず覚えられる。</LI><LI>ルールが分かれば簡単。</LI></UL></BODY></HTML>
いかがでしょうか。ややこしいそうですね。
…実は簡単なルールがあります。
3

ＷＥＢ基礎2011 年 10 月 1 日

初版発行

著作/制作：株式会社エンプロス〒672-8051 兵庫県姫路市飾磨区清水 189
URL：http://www.emplos.biz/
エフシーエス発 行 所： F C S 出版（富士コンピュータ販売株式会社）〒675-0031 兵庫県加古川市加古川町北在家 2723
URL：http://www.fujicomp.co.jp/

定価：本体 1,500 円（税込）

WEB 基礎EMPLOS