DAINASHI YESTERDAY

ウェブサイトを作るための言語について知ろう

guide04

ウェブサイトは、ただPhotoshopなどの画像編集ソフトでデザインを作れば完成するわけではありません。

ウェブサイトをウェブブラウザで表示できる形にするためには、ブラウザが理解できる言語にデザインを落とし込んであげる必要があります。

ここでは、これまでウェブサイトを作った経験がない人に向けて、ウェブサイトがどのようにできているのかについてお話ししていきたいと思います。

業者に頼らず自分で作る!初心者のためのウェブサイト制作ガイド【全10回】


ウェブサイトはHTML、CSS、JavaScriptでできている

ウェブサイトは、大きく分けて以下の3つの要素で成り立っています。

  • テキスト・画像などによるコンテンツ
  • コンテンツを見やすく表示させるための装飾
  • ユーザーの操作に合わせたアニメーション

そしてこれら3つの要素は、3つの言語によってそれぞれ役割分担されています。

文章を構成するためのHTML

ウェブサイトのもっとも重要な部分であるコンテンツは、HTMLという言語で作成します。

HTMLには文章の段落を示すタグ、画像を示すタグなどいろいろなタグがあり、タグで要素を囲むことによってその要素がどんな意味を持つのかをブラウザや検索エンジンに伝えることができます。

ウェブサイトを成功させるために でも詳しくお話ししますが、タグを正しく使うことで検索エンジンに「そのページには何について書かれているのか」などの情報を効果的に伝えることができます。

検索エンジンにページの内容を正しく把握してもらうことは、SEOの観点からもとても重要なことです。HTMLはできるだけルールに則って、正しく記述するように意識しましょう。

文章を装飾するためのCSS

ただの文章の羅列では、どこが重要な部分なのかは視覚的に分かりづらいですよね。

そのため、重要な部分は文字を大きくしたり太字にしたり、目立つ色を使ったりして目につきやすくしておく必要があります。またコンテンツを見やすくレイアウトしておくことで、ユーザーにストレスを感じさせることなく読んでもらうことができます。

CSSはそういった、ウェブサイトの見た目(装飾)の部分を指定するための言語です。

HTMLだけでは、基本的に文章は上から下へ強弱なく並んでいるだけです。HTMLで作成されたソースの見た目をCSSで整えてあげることで、ユーザーにどこが重要なのか、何を伝えたいのかを視覚的に伝えることができます。

コンテンツに動きをつけるためのJavaScript

メインビジュアルの画像が切り替わったり(スライダー)、マウスカーソルをボタンに合わせると色が変わったりなど、ウェブサイトにはいろいろな動き(アニメーション)をつけることができます。

この、ウェブサイトに動きをつけるための言語がJavaScriptです。JavaScriptはブラウザにHTMLやCSSのソースが読み込まれたあと、ユーザーの操作などをきっかけにウェブサイトの表示を変更します。

JavaScriptでアニメーションを実装する場合、動きをつけたい箇所ごとにプログラムを作成していくこともできますが、そうするとどうしてもソースの記述量が多くなり煩雑になってしまいます。

そこで、JavaScriptをより簡単に、より短いコードで実装できるようにフレームワーク化したものをJavaScriptライブラリというものを使います。フレームワークというとピンと来ないかもしれませんが、「みんなが使いやすいように、よく使う部分はあらかじめプログラミングしておいてくれているもの」とイメージして頂ければ大丈夫です。

JavaScriptライブラリにはいくつかありますが、もっともよく使われているのはjQueryというライブラリです。jQueryを利用することで、本来煩雑になるようなソースもとてもシンプルに記述できるようになります。

HTMLファイルを作成するためのソフト

HTMLファイルの作成・編集にはテキストエディターを使用します。

Adobe社製のDreamweaver(有料)が有名ですが、最近ではSublime Textなどの高機能なテキストエディターが無料で配布されていますので、それを使えば大丈夫です。

無料の高機能テキストエディター

一点注意して頂きたいのは、テキストエディターでHTMLファイルを作成する際には、文字コードをUTF-8(BOMなし)で保存するということです。

※TeraPadで文字コードを指定する場合、「UTF-8(N)」という感じで後ろに「N」がついています。これが「BOMなし」という意味ですので、「UTF-8(N)」を選択して保存すれば大丈夫です。

Webページの成り立ち

さて、ウェブサイトはHTML、CSS、そしてJavaScriptでできているという話をしました。

一般的なウェブサイト制作の流れでは、Photoshopなどの画像編集ソフトで制作したデザインをこれら3つの言語でブラウザが理解できる形に変換していくわけですが、この作業をマークアップとかコーディングといいます。

マークアップはまず、基本となるHTMLを記述して、次にCSSで成形し、JavaScriptで動きの部分を作る… というような流れで進めます。ページ全体のHTMLを作成した後にCSSを作成することもありますが、パーツごとにHTMLを作成して都度確認しながらCSSやJavaScriptを作成していくこともあります。

HTMLでWebページを作成するには、基本となるルールがありますので、まずはそれについてお話ししたいと思います。

HTMLの基本

HTMLファイルはそれがHTMLで書かれたソースであることを示すため、すべてのソースを<html>と</html>の間に記述する必要があります。

<html>
<!-- ここにソースを記述していきます。 -->
</html>

<html>のように<と>で囲まれたタグを開始タグ、</と>で囲まれたタグを終了タグと言います。基本的にHTMLはこの開始タグと終了タグで囲むことにより、その要素が見出しなのか画像なのかといった意味づけをしていきます。

タグの中にはimgタグや改行タグのように開始タグと終了タグが一緒になっているものもあります。

使用頻度の高いHTMLタグ

ここでは、HTMLファイルを作成していく中で特に使用頻度が高いと思われるタグをご紹介します。もちろんこのほかにも様々なタグがありますので、ウェブサイトを作成していく中で少しずつ覚えていって頂ければと思います。

h1~h6タグ
<h1>世界シェアNo.1のCMS、WordPressとは?</h1>

コンテンツに見出しをつけるためのタグです。h1~h6まであり、h1がもっとも大きな見出しで、h2、h3、h4… という順に中見出し、小見出し… というように(意味的に)小さくなっていきます。

「意味的に」と書いたのは、後ほど説明するCSSを使えばh1タグよりもh4タグの文字の見た目を大きくすることもできるからです。※

また、h1タグで見出しをつけた文章を分割して分かりやすくするためにh2、h3… などのそれより小さいタグを用いるという使い方をしますので、h2で見出しを付けたブロックの中でh1タグを使うというような意味的に逆転してしまう使い方はしないようにしましょう。

※しかし基本的には、h1タグの内容よりもh4タグの内容が重要であることはないはずですので、見た目としてもh1タグの方を目立つようにするのが一般的です。
pタグ
<p>CMS(コンテンツマネジメントシステム)とは、簡単に言えばウェブサイトのブログのような機能を持たせ、HTMLで制作された通常のウェブサイトよりも簡単にコンテンツを管理運用するためのシステムです。現在ではインターネット上のウェブサイトの8%以上がWordPressによって運用されているというデータもあります。</p>

pタグは段落を示すタグです。文章を作成するときは、一つの段落ごとに改行したり空行を入れたりして読みやすくしますが、HTMLタグではそれぞれの段落をpタグで囲むことでその文章が段落であることを示します。

divタグ
<div>
<p>CMS(コンテンツマネジメントシステム)とは、簡単に言えばウェブサイトのブログのような機能を持たせ、HTMLで制作された通常のウェブサイトよりも簡単にコンテンツを管理運用するためのシステムです。現在ではインターネット上のウェブサイトの8%以上がWordPressによって運用されているというデータもあります。</p>
<p>GoogleがWordPressのソースを解析しているという話があるくらい、WordPressはSEOに非常に強く、検索エンジンに情報を効果的に伝えることができます。またSEO系のプラグインを利用することで、ウェブサイト内の各ページに個別に詳細な設定をすることもできるうえ、管理も簡単です。</p>
</div>

divタグは、それが一つのまとまりであることを示します。たとえばdivタグの中に複数の画像や段落などの要素が入っていれば、それらが一つのまとまりとして扱われます。

ulまたはolタグ
<ul>
<li>世界シェアNo.1のCMS、WordPressとは?</li>
<li>WordPressはSEOに強い!</li>
<li>WordPressは有名サイトでも導入されている</li>
<li>WordPressのインストールから初期設定まで</li>
</ul>

ulタグやolタグは、テキストをリスト形式で箇条書きしたい場合に使用します。箇条書きの各項目はulまたはolタグの中でliタグを使用して記述します。

dlタグ
<dl>
<dt>WordPress</dt>
<dd>世界シェアNo.1のCMS(コンテンツマネジメントシステム)。PHPで開発されたオープンソースのソフトウェアである。</dd>
</dl>

dlタグは定義リストタグと呼ばれるもので、ある用語とその定義について説明する場合に使用します。用語を示すテキストをdtタグ、定義を示すテキストをddタグで囲みます。

tableタグ
<table>
<tr>
<th>WordPress</th>
<td>世界シェアNo.1のCMS</td>
</tr>
<tr>
<th>Movable Type</th>
<td>CMSの草分け的存在</td>
</tr>
<tr>
<th>EC-CUBE</th>
<td>ECサイト向けのCMS</td>
</tr>
</table>

tableタグは表を作成する際に使用します。商品比較や機能の一覧などの情報をユーザーに分かりやすく伝えることができます。

trタグで行を囲み、その中にthタグやtdタグでセル(表の項目)を記述します。thタグはセルの内容が見出しのときに使用し、通常のセルはtdタグを用いて記述します。

blockquoteタグ
<blockquote>
<p>WordPress(ワードプレス)は、オープンソースのブログソフトウェアである。PHPで開発されており、データベース管理システムとしてMySQLを利用している(後述のプラグインよりSQLiteでの使用も可能)。単なるブログではなくCMSとしてもしばしば利用されている。b2/cafelogというソフトウェアのフォーク(後継)として開発、2003年5月27日に初版がリリースされた[1]。GNU General Public License (GPL) の下で配布されている。(Wikipediaより引用)</p>
</blockquote>

blockquoteタグは、外部のウェブサイトや書籍などから文章を引用する場合に使用します。blockquoteタグを使用する際には、中に記述する引用文をpタグなどのブロック要素で囲むようにします。

aタグ
<a href="http://dainashiyesterday.com/">DAINASHI YESTERDAY</a>

aタグはWebページから他のWebページなどにリンクするためのタグです。href属性でリンク先を指定します。

imgタグ
<img src="image.png" width="640" height="400" alt="代替テキスト" />

imgタグは画像を表示させるためのタグです。src属性に画像へのパスを記述することで、その画像が読み込まれます。alt属性には何らかの理由で画像が表示されない場合に代わりに表示されるテキストを記述しておきます。

spanタグ
<p>WordPressは<span>世界シェアNo.1</span>のCMSです。</p>

spanタグは、文章の一部分にCSSなどによってスタイルを指定したいときに便利なタグです。たとえば、文章の強調したい部分などをspanタグで囲み、太字にしたり目立つ色にしたりという使い方をします。

すべてのWebページは”頭”と”胴体”から成り立っている

Webページは、私たちの身体と同じように頭と胴体で構成されています。

頭と胴体にはそれぞれ違った役割がありますので、ここではそれぞれの役割について整理してみましょう。

頭(head)はそのページを表示させるうえでの約束事

Webページの頭の部分には、そのページが何について書かれているのかを示す情報を記述したり、そのページをブラウザで表示させるためにどのCSSやJavaScriptファイル(以下、JSファイル)を読み込むのか、またそのページがほかのページとどのような関係にあるのかなどを示す情報を記述したりします。

中には記述しなくてもさして問題ない情報もありますが、ページタイトルやページ概要などSEOの観点からしっかりと記述しておくべき情報もあります。

このWebページの頭の部分は、HTMLソース内の冒頭部分に記述します。はじめに<head>と</head>いうタグを記述して、その中に上記のような情報を書いていきます。

<html>
<head>
<!-- ここにheadのソースを記述していきます。 -->
</head>
</html>

head要素内でCSSを読み込む方法

<link href="http://example.com/style.css" rel="stylesheet" type="text/css" />

WebページにCSSを読み込むには、head要素内に上記のように記述します。上記では、「style.css」というCSSファイルを読み込んでいます。

一般的には、CSSファイルをルートディレクトリにアップロードし、HTMLファイルのhead要素から読み込みますが、CSSファイルが複数ある場合などは、「css」などと名前を付けたディレクトリを用意してそこにCSSファイルをアップロードしておくと管理しやすいです。

「css」ディレクトリにあるCSSファイルを読み込む場合は、下記のような記述になります。

<link href="http://example.com/css/style.css" rel="stylesheet" type="text/css" />
※CSSファイルへのパスに「css」というのが入っているのが分かるかと思います。

head要素内でJSファイルを読み込む方法

<script type="text/javascript" src="http://example.com/functions.js"></script>

JSファイルを読み込むには、上記のように記述します。上記ソースでは「functions.js」というJSファイルを読み込んでいます。

JSファイルはhead要素内だけでなく、HTMLソースのどこからでも読み込むことができますが、ウェブサイト内の全ページで使用するJSファイルはhead要素内で読み込むように記述しておくと管理しやすいです。

しかしJSファイルのサイズが大きい場合などは、head要素内で読み込むとページの表示速度が遅くなってしまう(表示に時間がかかる)ことがあります。その場合にはbodyの終了タグ()の直前に記述したりします。

<html>
<head>
<!-- ここでJSファイルを読み込まずに…↓ -->
</head>
<body>
…
……
………
<!-- ここで読み込んだりもできます。 -->
<script type="text/javascript" src="http://example.com/functions.js"></script>
</body>
</html>

繰り返しになりますが、JSファイルはHTMLファイルのどこからでも読み込むことができます。そのため、ウェブサイト内でそのページでしか使わないようなファイルはhead要素内やbodyの終了タグ直前ではなく、JSファイルが必要となるコンテンツがある箇所で読み込むようにすることもできます。

たとえば「スライダーはトップページでしか使わない」という場合には、スライダー用のJSファイル(slider.js)をheadではなくbody内のスライダーのソースがある箇所で読み込む、という感じです。

<html>
<head>
<!-- 全ページで使うファイルはここで読み込んでおく -->
<script type="text/javascript" src="http://example.com/functions.js"></script>
</head>
<body>
…
……
………
<!-- スライダー用のJSファイルはここで読み込む -->
<script type="text/javascript" src="http://example.com/slider.js"></script>
<div class="slider">
<ul>
<li><img src="slide01.png" width="640" height="400" alt="スライド画像1枚目" /></li>
<li><img src="slide02.png" width="640" height="400" alt="スライド画像2枚目" /></li>
<li><img src="slide03.png" width="640" height="400" alt="スライド画像3枚目" /></li>
</ul>
</div>
…
……
………
</body>
</html>

CSSファイルやJSファイルを複数読み込むことができる

CSSファイルもJSファイルも一つのWebページから複数読み込むことが可能です。またその際には先ほども言いましたが「CSS」や「js」というような名前を付けたディレクトリにファイルをまとめておくと管理しやすいです。

<html>
<head>
<link href="http://example.com/css/style.css" rel="stylesheet" type="text/css" />
<link href="http://example.com/css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://example.com/js/slider.js"></script>
<script type="text/javascript" src="http://example.com/js/functions.js"></script>
</head>
<body>
</body>

胴体(body)は実際にブラウザで表示させる部分

Webページの胴体(body)の部分には、実際にブラウザで表示される部分のソースを記述します。

ブラウザはheadに書かれた約束事をまず読み込み、それをbodyに反映していきます。上で紹介したpやdivなどのタグを使ってコンテンツの意味・役割を考えながらマークアップしていきます。

たとえば、見出しにはh1タグを使う、箇条書きにはulタグを使う、段落はpタグで囲む… といった感じです。

胴体の部分はhead要素のすぐ下に、<body>~</body>というタグを記述して、その中に記述していきます。

<html>
<head>
<link href="http://example.com/css/style.css" rel="stylesheet" type="text/css" />
<link href="http://example.com/css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://example.com/js/slider.js"></script>
<script type="text/javascript" src="http://example.com/js/functions.js"></script>
</head>
<body>
<div class="header">ヘッダー</div>
<div class="content">コンテンツ</div>
<div class="sidebar">サイドバー</div>
<div class="footer">フッター</div>
</body>
</html>

HTMLタグは正しく使おう

マークアップをする際にもっとも意識して頂きたいのは、HTMLタグを正しく使うということです。

実際、見出しタグ(h1など)を使わなくても、pタグやdivタグで見出しとなるテキストを囲ってCSSで整形すれば、見た目としては見出しっぽくなります。

しかしそれでは、検索エンジンはWebページに書かれている情報のどこが重要なのかを判断できません。

常識的に考えて、見出しの内容は他の部分よりも重要な情報ですよね? 検索エンジンは、HTMLソース内のh1などの見出しタグによってそれが見出しであるということを把握しています。

ところが、本来h1タグを使うべきところにdivタグを使ってしまうことで、検索エンジンはそれが見出しだとは認識しなくなってしまうのです。

そしてそれが原因で、Webページの内容が正しく検索エンジンに伝わらず、なかなか検索結果の上位に表示されない… といったことも起こり得るのです。

ですから、見栄えさえよければいいという考えは持たないようにしましょう。

面倒なようでも、文書の各パーツの意味を考えて、適切なタグを使用するようにしましょう。こういった作業をていねいに行うことが、ひいてはウェブサイトの成功につながっていきます。

Webページを見やすくするためのCSSの役割

HTMLだけでは、基本的にすべての要素が記述した順に上から下へと表示されていくだけです。

しかしユーザーに情報を分かりやすく伝えるためには、見出しであることが見た目で分かるようにしたり、段落ごとに十分な余白と取ったり、サイドバーはコンテンツの脇に配置したり… というように装飾やレイアウトを整えてあげる必要があります。

新聞や雑誌などでも、見出しの文字が大きくなっていたり、目立つ色になっていたり、コンテンツの内容ごとにブロック分けされていたりしますよね?

CSSは、Webページの情報をそうやって整形する役割を持っています。

CSSの基本的な書き方

div {
width: 640px;
height: 400px;
padding: 20px;
margin: 20px auto;
background: #f2f2f2;
}

CSSは上記のように記述します。スタイルを指定したい要素(上記ソースではdiv)を指定し、サイズや余白、カラーなど細かく指定することができます。

CSSで指定できるプロパティにはさまざまなものがあります。

参考:CSSのプロパティ一覧

一度にすべて覚える必要はありませんので、実際にウェブサイトを制作しながら覚えていきましょう。

idとclassでスタイルを指定する

ウェブサイトを制作していると当然、「このdivにはこのスタイルを指定したいけど、あのdivには別のスタイルを指定したい」ということが起こります。

そういったときには、各要素にidやclassを付与することで、特定の要素を指定してスタイルを適用することができます。

<div id="box01">
「box01」というidが付いたdivです。
</div>
<div class="box02">
「box02」というclassが付いたdivです。
</div>
div#box01 {
width: 640px;
height: 400px;
padding: 20px;
margin: 20px auto;
background: #f2f2f2;
}
div.box02 {
width: 200px;
height: 180px;
padding: 10px;
margin: 10px auto;
background: #222;
color: fff;
}

上記のような感じで、idのついた要素を指定したい場合は「#」を、classを指定したい場合は「.」をつけます。なお、要素を指定せずidやclassのみでスタイルを指定することもできます。

#box01 {
width: 640px;
height: 400px;
padding: 20px;
margin: 20px auto;
background: #f2f2f2;
}
box02 {
width: 200px;
height: 180px;
padding: 10px;
margin: 10px auto;
background: #222;
color: fff;
}

idとclassの違い

HTMLのルールとして、同一idの要素はWebページ内のひとつだけ、同一classの要素はWebページ内に複数存在できます。また、idとclassに同じ文字列を指定しても問題ありません。

同一idは1ページに複数使えないので、下記のようなソースはダメです。

<body>
<div id="box01">
<p>1ページ内に同じidを2度以上使うことはできません。</p>
</div>
<div id="box01">
<p>1ページ内に同じidを2度以上使うことはできません。</p>
</div>
</body>

idとclassに同じ文字列を使えますので、下記のようなソースは問題ありません。

<body>
<div id="box01">
<p>idとclassの文字列は同じものを使っても大丈夫です。</p>
</div>
<div class="box01">
<p>classは1ページ内に同じものを何度でも使うことができます。</p>
</div>
<div class="box01">
<p>classは1ページ内に同じものを何度でも使うことができます。</p>
</div>
</body>

ちょっと分かりづらいかもしれませんが、「box01」というidのついた要素と「box01」というclassのついた要素は同じページに同居できますが、「box01」というidのついた要素が1ページの中に2つ以上あってはいけません。

「box01」というclassのついた要素が1ページの中にいくつあっても大丈夫、ということです。

なお、少し話がそれますが、idやclassの先頭に数字を使うことはできませんので注意しましょう。

<div class="01box">
<p>id、classの先頭は数字は使えないので、これはダメです。</p>
</div>
<div class="box01">
<p>先頭でなければ数字も使えます。</p>
</div>

head内でスタイルを指定する方法

<head>
<link href="http://example.com/css/style.css" rel="stylesheet" type="text/css" />
<link href="http://example.com/css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://example.com/js/slider.js"></script>
<script type="text/javascript" src="http://example.com/js/functions.js"></script>
<style type="text/css">
div.box01 {
float: left;
width: 230px;
height: 180px;
margin: 0 20px 20px 0;
}
</style>
</head>

上記のソースのようにhead要素内に直接CSSを書き込むこともできます。

しかし、head要素内に大量にCSSを書いてしまうと、ページの表示速度に影響したりとSEOの観点から考えるとデメリットもありますので、できる限り先の紹介したような形でCSSを別に用意して読み込むようにしましょう。

スタイルをインラインで記述する方法

<div style="color:#000;font-weight:bold;background:#ff0;">スタイルをHTMLタグに直接書き込むこともできます。</div>

各要素に適用するスタイルを開始タグ内に直接書き込む方法もあります。このような記述方法を「インラインで記述する」というふうに言ったりします。

インラインで記述したスタイルは外部CSSよりも優先して適用されますので、例えば全ページ共通で指定したいスタイルを別ファイルとして用意したCSSから読み込み、そのページだけスタイルを変えたいという場合には便利です。

しかし先に紹介したhead要素内に直接CSSを書き込む場合と同様、HTMLソースが長くなる(=ページ表示速度が遅くなる)というデメリットがありますので、できる限りは別にCSSファイルを用意して読み込むようにしましょう。

ブラウザのデフォルトスタイルをリセットするCSS

IE(Internet Explorer)やGoogle Chromeなどのウェブブラウザには、デフォルト(標準)で用意されているスタイル設定があります。

そのため、たとえばウェブサイトに一切CSSファイルを用意していなくても、見出し(h1タグなど)のテキストが大きく表示されたり、引用部分(blockquoteタグ)に余白が入っていたりします。

こう聞くと便利なように思えますが、実際自分でウェブサイトを制作する際には、自分で指定したスタイルにブラウザデフォルトのスタイルが影響したりとすごく邪魔です。

またデフォルトスタイルシートは、ブラウザごとに微妙に違うので、同じウェブサイトをそれぞれのブラウザで表示しても見え方に違いが出ます。

そのため、ウェブサイトのスタイルを整える前に、いったんブラウザデフォルトのスタイル指定をリセットしてあげるとよいでしょう。

html, body, div, span, applet, object, iframe, strong,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var, figure,
dl, dt, dd, ol, ul, li,
fieldset, form, legend, caption,
tbody, tfoot, thead, table, label, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
html,
body {
width: 100%;
height: 100%;
line-height: 1;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

上記のCSSを「reset.css」というような名前で保存し、あなたのウェブサイト用に作成したCSSファイルの前に読み込ませます。

<html>
<head>
<link href="http://example.com/css/reset.css" rel="stylesheet" type="text/css" />
<link href="http://example.com/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
…
……
………
</body>
</html>

こうしておくことで、ブラウザの方で勝手に適用されるスタイルをすべて解除した状態で、あなたが作成したCSSを読み込ませることができます。

くれぐれも、あなたが作成したCSSの前にリセットCSSを読み込ませるようにしてください。リセットCSSの方を後に読み込ませると、あなたが指定したスタイルまでリセットされてしまいますので。

実はウェブサイト制作を勉強し始めた頃、私はブラウザデフォルトのスタイルシートの存在を知りませんでした。そのためいくら試行錯誤しても思うようなレイアウトにならずイライラしたことを覚えています。

あなたは私のようにならないよう、ちゃんとリセットCSSを活用しましょう。

JavaScriptでWebページに動きをつける

ウェブサイトをブラウザで表示させる場合、ブラウザはHTMLソースを読み込み、次にHTMLで指定された外部のCSSファイルを読み込んで記述されたとおりにページを表示させます。

ブラウザは一旦ページを読み込んだあとは、勝手に再び読み込むことはしません。そのため、表示されたページがユーザーの操作に合わせて変化したりということはありません。※

しかしウェブサイトでは、ユーザーの操作に合わせてページの表示を変えたいという場面がよくあります。

たとえば、お問い合わせフォームの項目が未入力の場合に入力欄の色を変えたり、省スペースのためタブ構成にしてボタンをクリックすることでコンテンツの表示を切り替えたり、といったことです。

このように、ページを読み込ませた後にユーザーの操作などをきっかけにページの表示を変えたいときには、JavaScriptを使います。

※CSSスプライトという方法を使えば、マウスカーソルをボタンに合わせるとボタンの色が変わったりという動作は実現できます。しかしこれは、はじめにページを読み込む段階ですでにCSSによって指定されているもので、ユーザーの操作に合わせてスタイルを書き換えているわけではありません。

jQueryの使い方

先ほども紹介しましたが、JavaScriptを使用するにはjQueryなどのJavaScriptライブラリが便利です。

jQueryを利用するには、head要素内でJSファイルを読み込む方法 の項で紹介した要領でjQueryファイルを読み込む必要がありますので、まずはjQueryの公式サイトからjQueryをダウンロードしておきましょう。

jQuery公式サイト
jQuery公式サイト

jQueryをダウンロードできたら、ウェブサイトのディレクトリ内に「js」フォルダを作成し、そこにjQueryのファイルを格納したうえで下記の要領でhead要素内から読み込みます。

<html>
<head>
<script type="text/javascript" src="http://example.com/js/jquery.js"></script>
</head>
<body>
…
……
………
</body>
</html>

このようにjQueryのファイルを自分のウェブサイト内に格納して読み込む方法の他に、CDN(コンテンツデリバリネットワーク)から読み込む方法もあります。

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
</head>
<body>
…
……
………
</body>
</html>
CDN(コンテンツデリバリネットワーク)
CDNとは、Webコンテンツを配信するためのネットワークのことで、世界中に張り巡らされています。ウェブサイトで使用するファイルをウェブサイトが置かれているサーバーではなく、ユーザーがアクセスする場所からもっとも近いCDNに属するサーバーから読み込むことで、サーバーにかかる負荷を分散し、ページ表示速度の向上にもつながります。

jQueryで手軽にJavaScriptを実装しよう

下記は、JavaScriptでスクロールバーの位置を取得するためのコードです。

JavaScript
(document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;

これをjQueryで書くと下記のようになります。

jQuery
$(window).scrollTop();

だいぶシンプルになりますよね? このように、jQueryはJavaScriptで書くと複雑になってしまうコードを、シンプルに簡単に利用できるようにしてくれます。

以下によく使われるであろうコードのサンプルをご紹介しますので、あなたのウェブサイト制作のヒントにしてみてください。

マウスホバー時にボタンの色を変える

HTML
<div class="button"><a href="index.html">ボタン</a></div>
CSS
.button a {
display: block;
width: 300px;
background: #333;
font-weight: 700;
font-size: 18px;
text-transform:uppercase;
padding: 20px 0;
margin: 0 auto;
text-align: center;
}
.button a:link,
.button a:visited {
color: #fff;
text-decoration: none;
}
.button a:hover,
.button a:active {
color: #fff;
text-decoration: none;
}
jQuery
$('.button a').hover(
function(){
$(this).stop(true).animate({backgroundColor: '#666', color: '#fff'}, 300);
},
function(){
$(this).stop(true).animate({backgroundColor: '#333', color: '#fff'}, 300);
}
);

body要素の高さを取得する

jQuery
$(window).load(function(){
var height = $(document).height();
});
※body要素の高さを取得するには、WebページのHTMLソースがすべて読み込まれてからJavaScriptを実行する必要があります。そのため「$(window).load(function()」によって、ソースがすべて読み込まれてから実行されるようにしています。

スマホ表示時のナビゲーションの開閉

HTML
<div id="header">
<div class="nav"><div class="nav_btn"><img src="images/nav_btn.png" alt="ナビゲーションを開く" /></div></div>
<div class="nav_body">
<div class="nav_close"><img src="images/close.png" alt="ナビゲーションを閉じる" /></div>
<ul>
<li><a href="index.html">ナビゲーション項目1</a></li>
<li><a href="index.html">ナビゲーション項目2</a></li>
<li><a href="index.html">ナビゲーション項目3</a></li>
<li><a href="index.html">ナビゲーション項目4</a></li>
<li><a href="index.html">ナビゲーション項目5</a></li>
</ul>
</div><!-- .nav_body -->
</div><!-- #header -->
CSS
#header {
width: 100%;
margin: 0 auto;
position: relative;
padding: 20px 0 0;
}
#header .nav {
width: 50px;
height: 50px;
position: absolute;
top: 20px;
right: 20px;
}
#header .nav .nav_btn {
width: 100%;
cursor: pointer;
}
#header .nav .nav_btn img {
width: 100%;
height: auto;
vertical-align: top;
}
.nav_body {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10000;
width: 100%;
background: rgba(0,0,0,0.75);
color: #fff;
}
.nav_body ul {
width: 90%;
margin: 0 auto;
}
.nav_body ul li a {
display: block;
width: 100%;
height: auto;
border-top: 1px solid #999;
padding: 20px 0;
}
.nav_body ul li:first-of-type a {
border: none;
}
.nav_body ul li a:link,
.nav_body ul li a:visited {
color: #fff;
text-decoration: none;
}
.nav_body ul li a:hover,
.nav_body ul li a:active {
color: #fff;
text-decoration: none;
}
.nav_body .nav_close {
width: 100%;
height: 90px;
position: relative;
cursor: pointer;
}
.nav_body .nav_close img {
display: block;
width: 50px;
height: 50px;
position: absolute;
top: 20px;
right: 20px;
}
jQuery
$('.nav_body').hide();
var height = $(document).height();
$('.nav_body').height(height);
$('#header .nav .nav_btn, .nav_body .nav_close').click(function(){
$('.nav_body').fadeToggle();
});

ドロップダウンメニュー

HTML
<div id="nav">
<ul>
<li><a href="index.html">ナビゲーション項目1</a></li>
<li><a href="index.html">ナビゲーション項目2</a></li>
<li><a href="index.html">ナビゲーション項目3</a></li>
<li><a href="index.html">ナビゲーション項目4</a>
<ul>
<li><a href="index.html">ナビゲーション項目4-1</a></li>
<li><a href="index.html">ナビゲーション項目4-2</a></li>
<li><a href="index.html">ナビゲーション項目4-3</a></li>
<li><a href="index.html">ナビゲーション項目4-4</a></li>
</ul>
</li>
<li><a href="index.html">ナビゲーション項目5</a></li>
</ul>
</div>
CSS
#nav {
width: 1000px;
height: 70px;
margin: 0 auto;
background: #222;
}
#nav > ul > li {
float: left;
height: 70px;
position: relative;
}
#nav > ul > li > a {
display: block;
text-indent: -9999px;
}
#nav > ul > li > ul {
position: absolute;
top: 70px;
left: 0;
width: 200px;
background: #222;
color: #fff;
opacity: 0;
z-index: 10;
}
#nav > ul > li > ul > li {
width: 180px;
padding: 0 10px;
position: relative;
}
#nav > ul > li > ul > li > a {
display: block;
width: 180px;
padding: 10px 0px;
border-bottom: 1px solid #999;
position: relative;
text-align: center;
}
#nav > ul > li > ul > li:last-child > a {
border-bottom: 0;
}
jQuery
$('#nav > ul > li').hover(function(){
$(this).find('> ul').css({display: 'block'});
$(this).find('> ul').stop(true).animate({
opacity: 1,
}, 300);
},
function(){
$(this).find('> ul').stop(true).animate({
opacity: 0,
}, 1, function(){
$(this).css({display: 'none'})
});
});

ページトップへ戻る

HTML
<body id="body">
…
……
………
<div id="page_top"><a href="#body">ページトップへ戻る</a></div>
</body>
CSS
#page_top {
width: 100%;
height: 60px;
position: relative;
margin: 0 0 30px;
}
#page_top a {
display: block;
position: absolute;
width: 60px;
height: 60px;
top: 0;
right: 0;
}
jQuery
$('#page_top a').click(function(){
$('html,body').animate({scrollTop:0},'200');
});	

スクロール時にナビゲーションを固定

HTML
<div id="nav">
<div class="nav">
<ul>
<li><a href="index.html">ナビゲーション項目1</a></li>
<li><a href="index.html">ナビゲーション項目2</a></li>
<li><a href="index.html">ナビゲーション項目3</a></li>
<li><a href="index.html">ナビゲーション項目4</a></li>
<li><a href="index.html">ナビゲーション項目5</a></li>
</ul>
</div><!-- .nav -->
</div><!-- #nav -->
CSS
#nav {
width: 100%;
background: #222;
}
.nav {
width: 1000px;
height: 70px;
margin: 0 auto;
}
.nav > ul > li {
float: left;
height: 70px;
position: relative;
}
.nav > ul > li > a {
display: block;
text-indent: -9999px;
}
jQuery
var nav = $('#nav')
offset = nav.offset();
$(window).scroll(function(){
if($(window).scrollTop() > offset.top){
nav.css({
position: 'fixed',
top: 0,
zIndex: 100
});
}else{
nav.css({
position: 'relative',
top: 0
});
}	
});

CSS3によるアニメーションの実装

CSS3という技術が登場してから、CSSによってアニメーションを実装することもできるようになりました。

従来のCSS(CSS2)はウェブサイトの見栄えとか装飾の部分を定義するためのものでしたが、CSS3ではそれだけではなく、アニメーションなどさらに便利な仕様が追加されています。

そのため、これまでであればJavaScript(jQuery)で実装していたものをCSS3でさらに手軽に実装できるようになりました。

ここでは例として、ボタンをアニメーションで透過させるソースをご紹介します。同じような要領でテキストの色を変えたりもできますので、いろいろと試してみてください。

ボタンをアニメーションで透過させるCSSのサンプル

<div class="btn"><a href="http://example.com">ボタン</a></div>
.btn a {
display: block;
background: #C30D23;
box-shadow: 0px 3px 0px #A30D26;
border-radius: 10px;
text-align: center;
font-size: 18px;
height: 40px;
line-height: 40px;
text-shadow: 0px 0px 10px rgba(0,0,0,1.0);
font-weight: 900;
}
.btn a:link,
.btn a:visited {
color: #fff;
text-decoration: none;
opacity: 1;
transition: all 300ms linear;
}
.btn a:hover,
.btn a:active {
color: #fff;
text-decoration: none;
opacity: 0.7;
}

≫ 第5回:ウェブサイトをデザインするための基礎知識

投稿者: