コンピュータサイエンス入門・トップへ

HTML/CSS入門

[XMLとは] [HTML以外のXMLの用途] [HTMLの基本的な構造] [よく使うHTMLタグ] [表の書き方] [CSSとは] [その他]

HTMLとは

Hyper Text Markup Language の略。 Webページの記述に用いられる。 基本的には XML (Extensible Markup Language) の一種。

とほほのWWW入門

XMLとは

<タグ1>
...タグ1がマークアップする範囲...
<タグ2>
...タグ2がマークアップする範囲...
</タグ2>
</タグ1>

タグで囲まれた部分をマークアップされた部分と呼ぶ。 また、このタグを含めた部分を要素と呼ぶ。

HTML以外のXMLの用途

XMLを使った言語の一覧

HTMLの基本的な構造

お約束

<!DOCTYPE html>
<html>
  <head>
    <title>
      タイトル
    </title>
  </head>
  <body>
    内容
  </body>
</html>

改行は無視される

以下の2つは同じ結果になる: 

Hello World

Hello
World

表示結果:

Hello World

HTML/XMLタグ

開始と終了がある場合:

開始タグ 終了タグ
< title
タグ名		 > ... < / title
タグ名
(同じ)		 >

中身が空な場合:

空要素タグ
< hr
タグ名		 / >

よく使うHTMLタグ

見出しと段落

段落

レベル1見出し
レベル2見出し
レベル3見出し
レベル4見出し
レベル5見出し
レベル6見出し

箇条書き

<ul>
<li> 項目1
<li> 項目2
<li> 項目3
</ul>

強調、下線、斜体

<b>強調 (bold)</b>, <u>下線 (underline)</u>, <i>斜体 (italic)</i>
強調 (bold), 下線 (underline), 斜体 (italic)

このような「見た目」の情報をHTMLに入れるのはあまりよくないとされる。

ソースコードなど

<pre>
  int main(void) 
  {
     printf("Hello, World\n");
  }
</pre>

  int main(void) 
  {
     printf("Hello, World\n");
  }

コメント

<!-- この部分は表示されない -->

画像

これは <img src="image.jpg" alt="キャピタルドームの写真" /> です。
これは キャピタルドームの写真 です。

リンク

<a href="http://www.yahoo.co.jp/">Yahoo! Japan</a>へのリンク
Yahoo! Japanへのリンク

改行

ここで
改<br/>行
ここで 改
行

表の書き方

使用するタグ

<table border>
  <tr><!-- 見出し行 -->
    <th>1列目</th>
    <th>2列目</th>
    <th>3列目</th>
  </tr>
  <tr><!-- 1行目 -->
    <td>(1行目 1列目)</td>
    <td>(1行目 2列目)</td>
    <td>(1行目 3列目)</td>
  </tr>
  <tr><!-- 2行目 -->
    <td>(2行目 1列目)</td>
    <td>(2行目 2列目)</td>
    <td>(2行目 3列目)</td>
  </tr>
</table>
1列目 2列目 3列目
(1行目 1列目) (1行目 2列目) (1行目 3列目)
(2行目 1列目) (2行目 2列目) (2行目 3列目)

CSSとは

Cascading Style Sheet の略。単に「スタイルシート」とも呼ばれる。 各HTMLタグがマークアップする部分の見た目を指定する。

例:

<p style="color:blue;">
  ここは青
</p>
<p style="color:red;">
  ここは赤
</p>
<p>
  ここは?
</p>

ここは青

ここは赤

ここは?

タグの属性

HTML(XML)の開始タグには属性がある場合がある。 

<タグ名 属性名1="値1"
        属性名2="値2"
        ...>

よく使われる属性:

style="CSS指定"
そのタグのCSSを直接指定する。
class="クラス"
そのタグのクラスを指定する。(後述)

よく使われるCSS指定

書き方:

CSS指定名: 値;
color
要素の色を指定する。
background
要素のバックグラウンドを指定する。
margin
要素のまわりの余白を指定する。
border
要素のまわりの枠線を指定する。
font-size
文字の大きさを指定する。
page-break-before
この要素の前で改ページを指定する。

単位の書き方:

px
ピクセル。(例: 10px など) あまり使うべきではない。
%
文字あるいは要素の大きさに対する比率。
em
1em = 1文字分の大きさ。

複数のタグをまとめて指定する

本来 CSS は別のファイルとして指定することもできるのだが、 ここでは HTML ファイルの中に埋め込む。 

<!DOCTYPE html>
<html>
  <head>
    <style>
      CSS
    </style>
    <title>
      タイトル
    </title>
  </head>
  <body>
    内容
  </body>
</html>
タグ名 { CSS指定; ... }
指定したタグすべてに CSS を指定する。
.クラス名 { CSS指定; ... }
指定したクラスのタグに CSS を指定する。
タグ名.クラス名 { CSS指定; ... }
指定したタグの指定したクラスに CSS を指定する。

例:

<style>
h2 { font-size: 120%; border-bottom: 2pt solid; }
ul { margin-bottom: 0.5em; }
.pb { page-break-before: always; }
.css { background: #ffffcc; }
.typed { background: #eeeeee; }
</style>

その他

CSS用のタグ

<div>タグ、 <span>タグは、 単体では何もしない。 これはもっぱら CSS を適用するのに使う。

例:

<div style="background: yellow; margin: 1em;">
Hello, <span style="font-size: 200%; color: green">World</span>
</div>
Hello, World

HTMLエンティティ

<, >, & などの 特殊な記号は、以下のようにして表現する。

他にもいくつかの記号が利用できる:

おまけ … 効率よくHTMLを書くには

Copyright (c) 2015 Yusuke Shinyama