実戦的 HTML & CSS 入門

投稿日： 2012年7月13日 最終更新日： 2013年10月3日
このエントリーをはてなブックマークに追加

このページは、約2時間で HTML と CSS の基本を理解し、それらをすぐ使えるようになってもらえることを目標に書かれています。

個々の HTML タグや CSS のスタイル名について、詳細を知りたいときは次のサイトが役に立ちます。
とほほのＷＷＷ入門 [HTML] [CSS]

HTML, CSS とは？

HTML… WEB ページの構造を記述するために使います。
CSS… WEB ページのデザインを指定するために使います。

HTML と CSS がこの様に役割分担されていることにより、開発しやすくなっています。

HTML 入門

HTML ファイルの拡張子は .html です。

ひな形

xhtml では、
<title> ～ </title> のように、通常は開くタグと閉じるタグをペアで記述します。
<br> タグなど閉じるタグが無いなタグは <br /> のように記述します。
また、すべてのタグ名と属性名は小文字で記述します。
さらに、属性の値は常にダブルまたはシングルクォートで括る必要があります。

html5 では必ずしも xhtml の書き方に準拠している必要はありませんが、xhtml の書き方に従っておくとマナーが良いと思います。

よく使う HTML タグ

<br>
break（改行）の略です。
<h1> ～ <h6>
見出しです。
<h1> はページ全体の見出しなので、各ページで一回だけ使うようにします。
<p>
段落を表します。
このタグで囲むとその前後に空行が入ります。
<a>
リンクです。次のように使います。
=> Yahoo! JAPAN
<div>
このタグは特に意味はありません。
汎用的なブロック要素として、スタイルシートを適用したり、JavaScript で操作するためによく用いられます。
<span>
このタグも特に意味はありません。
汎用的なインライン要素です。
=> 文字の一部を赤くする。
<table>, <tr>, <th>, <td>
表
<ol>, <ul>, <li>
リスト
<img>
画像を表示します。

⇓
ペリカンの画像

その他

Validation
このページ（Markup Validation Service）で HTML の妥当性チェックができます。
また、Opera では右クリックのコンテキストメニューから Validate を実行できます。
文字コード
文字化けを予防するため、HTML の head タグ内では常に文字コードを指定しましょう。

UTF-8 がおすすめ
HTML エスケープ
html の中で、>、 < や & の記号は、タグを表すなどの特別な役割を持っています。
これらの記号をWEBページ上に表示したい場合には、HTML の中にそれぞれ &gt;、&lt;、&amp; と記述します。
<h1>タグは1ページに一つ
<h1> タグはそのページ全体の見出しです。
一つのページには一つだけ使うようにしましょう。
パンくずリスト
WEB サイトの各ページが分かりやすい階層構造になっている場合、パンくずリストを表示するとユーザビリティが上がります。
パンくずリストの例
index.html
URL でファイル名まで指定せずに WEB ページへアクセスした場合、指定したフォルダ内の index.html へのアクセスとみなされます。（Apache のデフォルトの設定）
SEO について
基本的には上位表示させたいキーワードをどれだけそのページに含ませられるかがポイントになります。
<img>タグの alt 属性などを有効に利用しましょう。alt属性の値は普段は画面上に表示されないので、多少不自然なぐらいキーワードを詰め込んでも良いと思います。
ただしやりすぎは禁物です。

CSS入門

CSS ファイルの拡張子は .css です。

スタイルの定義方法

スタイルはタグ名、クラス名、IDごとに指定できます。

  • 外部ファイルによる指定

    スタイルを定義したファイル（例えば default.css）を用意し、HTML のヘッダに

    と記述することでそのスタイル定義を適用できます。

  • <style>タグによる指定

    styleタグの中にCSSを記述することができます。

  • 個々のタグに指定

    個々のタグの style 属性でスタイルを指定できます。
    （上記の span タグの例を参照）

よく使うスタイル名

color
文字の色を指定できます。
background-color
背景色を指定できます。


=> 文字の色と背景色を同じにすると文字が見えなくなる。
border
上下左右の枠線の太さ、スタイル、色を指定できます。

=>
枠線のスタイルには点線なども指定できます。
margin, padding
margin はボーダーの外の余白のことです。
padding はボーダーの中の余白のことです。

=>
margin を大きくするとこうなる
=>
padding を大きくするとこうなる
height, width
それぞれ高さと幅を指定できます。

=>
高さも幅も 200px
text-align
右寄せ、左寄せなどのテキストの配置を指定できます。デフォルトは左寄せです。

=>
センタリング

その他

WEBページの配色
色見本帳で自分のイメージに合う色の組み合わせを探します。
モニタは、設定などにより色合いが変わることがあるため、色見本帳の書籍を一冊所有しておくと、役に立つことがあります。
色見本を表示しているWEBページもあります。WEB色見本 原色大辞典
ページの横幅を制限する
解像度の高いフルハイビジョン液晶が普及した現在、ブラウザの横幅を大きく設定している人もいます。
そういった環境で文章が横幅いっぱいに表示されるととても読みにくいので、横幅の最大値を設定しておきましょう。
見出しのデザインテクニック
border を利用した方法がよく使われます。このページも <h2> のデザインに使っています。
一つのページを複数のブロックに分けるレイアウト方法
昔は <table> タグがよく使われていました。
現在は <div> タグに position: absolute スタイルを指定して実現しているサイトが多いようです。

Apacheについて

世界中でもっとも使われているWebサーバソフトウェアであり、大規模な商用サイトから自宅サーバまで幅広く利用されています（世界シェア 7割）。オープンソースであり、無料で利用できます。

Apache では、公開している各ディレクトリに .htaccess という名前の設定ファイルを置くことにより、そのフォルダ（およびサブフォルダ）だけの設定を定義できます。
例えば、自分の属しているネットワークが 192.168.0.0/24 で、外部からのアクセスを禁止したい場合は、次のように記述すればよいです。

詳しくはこちら

JavaScript

JavaScript を使うと、HTML と CSS だけでは出来ないことが実現可能になります。
例えば、MathJax を使うと、ブラウザ上に数式を表示できます。

html の中に以下の script タグを記述しておくと、html に含まれる TeX コマンドが自動で数式に変換されます。

単一行の数式は $ で囲む代わりに \( と \) で囲みます。

\[ J_\alpha(x) = \sum_{m=0}^\infty \frac{(-1)^m}{m! \, \Gamma(m + \alpha + 1)}{\left({\frac{x}{2}}\right)}^{2 m + \alpha} \]

数式を右クリックすると、TeX ソースを表示させることなどができます。

これから JavaScript を学ぶ場合には、JavaScript のライブラリである jQuery をベースとして学習するのが良いと思います。

次のステップ

とほほのＷＷＷ入門の HTMLの概要 や スタイルシートの基礎知識 を読むと基本的な知識を増やせます。 その後は必要に応じて書籍を読みながら、実際に自分でWEBページを公開してみるといろいろ学べると思います。

サーバーサイドのスクリプト言語である PHP などを学ぶと、さらに出来ることが広がります。

カテゴリー: 記事 タグ: , , パーマリンク

3 Responses to 実戦的 HTML & CSS 入門

  1. ピンバック: WordPress初心者必見！HTML・CSSが面白いほど身につく最強コンテンツ7選

  2. ピンバック: 独学におすすめ！HTMLを入門から学べる学習サイト20選 | TechAcademyマガジン

  3. ピンバック: HTML５&CSS３が身に付くおすすめサイト | TomoLog

コメントを残す