【初心者向け】ホームページを作成してみよう②

  • 2017年3月31日
  • by 
【初心者向け】ホームページを作成してみよう②

前回は「<header>」「<body>」「<footer>」「<h1>〜<h6>」「<p>」について、ご説明いたしました。初めての方やお忘れの方はご一読くださいませ。
<bitWave関連記事『【初心者向け】ホームページを作成してみよう①』>

今回は「<div>」や「<link>」、そして「style sheet」などの解説を交えて、前回作成したhtmlに追加していきたいと思います。

「<div>」タグとは?

まずは「<div>」要素を説明いたします。
汎用的なブロック要素(=一般的に前後に改行が入る要素)として、後記のスタイルシートを適用したり、JavaScriptで操作するのによく用いられます。

なお、「<div>」タグ似たものとして「 <span>」タグというものがあります。
これはブロック要素として定義されている「<div>」タグとは異なり、「<span>」タグはインライン要素(=一般的に前後に改行が入らない要素)として定義されています。

「<link>」タグとは?

よく、「リンクを踏んだ」なんて言葉を聞きませんか?
リンクを踏むことで次ページに遷移することができるわけですが、ここで言う「<link>」タグはその遷移先を指定する時に使われるものです。少し専門的な言い方をすれば、関連する文書ファイルを指定してその関係を定義するタグということになります。

「<link>」タグを指定することで、現在のページから「目次ページ」や「前のページ」、そして前記のような「次のページ」を表示させることができ、サイト全体の上下の階層関係や順序などの関係が明確になります。また、外部スタイルシート(後記参照)の参照も可能になるのです。

「Style Sheet」とは?

では、その「スタイルシート」をなぜ使うかというと、htmlだけでホームページを細かく設定することができないからです。
「スタイルシート」の中でも圧倒的にCSSが普及されており、このCSSを使ってホームページを作ることが推奨されています。なお、CSSは「カスケーディング・スタイルシート(Cascading Style Sheet)」の頭文字から取っており、これを使うことでホームページの見栄えを細かく指定することができるのです。

「Style Sheet」をCSSで作成し、「<link>」タグで呼び出したCSSを「<div>」タグ内の要素に反映させてみよう

今回覚えた「<div>」「<link>」「スタイルシート」を駆使して、htmlを装飾してみましょう。

まずは装飾内容を示す「Style Sheet」を作成します。すでに作成したhtmlファイルとは異なる、新しいファイルで下記のコードを書いてみましょう。ちなみに拡張子は「.css」で保存してくださいね。

上記内容のCSSファイルを作成し終えたら、すでに用意されているhtmlファイル内の<head></head>の間に「<link>」タグを使って、できたてホヤホヤのCSSファイルを呼び出してみましょう。
なお、今回作成したCSSファイルの名前は“home.css”としているので、以下のような感じになります。

これにより下の画像のように表示されました。

さらにhtmlファイルに「<div>」タグを追記し、指定範囲ごとに異なる「スタイルシート」を効かせてみましょう。今回はhtmlファイルとCSSファイルに手を入れます。コードは下記のような感じです。

■htmlファイルに「<div>」タグを追加すると……

■CSSファイルに「<div>」の値ごとの装飾内容に仕分けてみると……

※なお、今回は別ファイルとして用意したCSSファイルを呼び出してみましたが、htmlファイル内の「<div>」タグ内に直接CSSの記述を書き込むこともできますし、「<div>」タグに限らずclass値を設定し、CSSファイル内のclass名から対象の「スタイルシート」を呼び出すこともできます。

使いこなせば、キレイなサイト作成に役立つ!

「<div>」タグで範囲の仕分けができるようになれば、その範囲の中だけで効かせたい「スタイルシート」を指定することができ、オブジェクトの幅や背景といった自分が表示させたい形にいつでも変えることができるようになります。

ちなみに私が来日してすぐの専門学校1年生の時に「JavaScript」や「bootstrap」を使って作成したページがあります。参考までにご覧ください。
http://sv3.sctv-test.net/may/may_test/Team/index.html

また、HTMLは今回のようなホームページ作成だけではなく、ゲームも作れるのです。神経衰弱ゲームを作成した時のものも併せて公開いたしますので、ぜひ遊んでみてくださいね。
http://sv3.sctv-test.net/may/may_test/match.game/

コメント