カテゴリー: HTML

メインコンテンツの作成

「ナビゲーション」のボタンの配置

「ヘッダー」のすぐ下に表示されるナビゲーションボタンを作りましょう。ナビゲーションボタンは、<nav></nav>タグ内に配置します。以下に手順を示しておきます。

①ボタンの画像を準備

ナビゲーションボタンに使う画像は「images」フォルダ内に用意しておきます。

②画像ボタンをタグで配置

「images」フォルダにあらかじめ保存されたボタン画像を<img src=””>タグを用いて配置しましょう。画像サイズは原寸で作成しているので、そのまま入力していきます。

<nav>
            <img src="images/naviButton_left.png" alt="ナビボタン左スペーサー" width="96"height="111">
            <img src="images/home_button.png" alt="ナビボタンホーム" width="192"height="111">
            <img src="images/menu_button.png" alt="ナビボタンメニュー" width="192"height="111">
            <img src="images/access_button.png" alt="ナビボタンアクセス" width="192"height="111">
            <img src="images/blog_button.png" alt="ナビボタンブログ" width="192"height="111">
            <img src="images/naviButton_right.png" alt="ナビボタン右スペーサー" width="96"height="111">
        </nav>

ボタン画像が横に並んだ状態をブラウザで確認すると以下のようになります。

③画像にリンクを設定する

サイト構造の設計図に従い、各ボタンにリンク先のURLを設定します。Blogボタンについては外部ブログへのリンク先が決まっていないので、便宜的に「http://xxxxx.jp」と架空のアドレスとしています。

<nav>
            <img src="images/naviButton_left.png" alt="ナビボタン左スペーサー" width="96"height="111">
            <a href="index.html"><img src="images/home_button.png" alt="ナビボタンホーム" width="192"height="111"></a>
            <a href="menu.html"><img src="images/menu_button.png" alt="ナビボタンメニュー" width="192"height="111"></a>
            <a href="access.html"><img src="images/access_button.png" alt="ナビボタンアクセス" width="192"height="111"></a>
            <a href="http://xxxxx.jp"><img src="images/blog_button.png" alt="ナビボタンブログ" width="192"height="111"></a>
            <img src="images/naviButton_right.png" alt="ナビボタン右スペーサー" width="96"height="111">
        </nav>

※現在のページとは別に新たなウインドウをそちらにリンク先を表示させる場合は、以下のように記述し、「target=”_blank”」という属性を付加します。

<a href="http://xxxxx.jp" target="_blank"><img src="images/blog_button.png" alt="ナビボタンブログ" width="192"height="111"></a>

ブロック構造を細かく設定する

読みやすく視認性の高いホームページを作成するために、メインコンテンツのブロック構造のパーツをさらに細かくしていきます。<div>タグと<section>タグを用いて、写真や文章といった各パーツをブロック化していきましょう。

info_photo01、info_photo02

ここは、<div>タグを用いて「info_photo01」「info_photo02」という名称の中に写真を収めます。実際のHTMLでは、<div class=””>を使います。

info01、info02

ここは、＜section＞タグを用いて「info01」、「info02」という名称のブロックの中に見出しと文章を収めます。実際のHTMLでは、<section class=””>を使います。

intro

<section>タグを用いて「intro」という名称のブロックを作り、その中に見出しや文書を配置します。実際のHTMLでは、<section class=””>を使います。

コードは先ほどの<nav>タブの記述の下に以下のように記述しましょう。

<div id="global_info">
            <div class="info_photo01">
                <!--ここに1段目の写真を配置-->
            </div>

            <section class="info01">
                <!--ここに1段目の見出しと文章を配置-->
            </section>

            <div class="info_photo02">
                <!--ここに2段目の写真を配置-->
            </div>

            <section class="info02">
                <!--ここに2段目の見出しと文章を配置-->
            </section>

            <section class="intro">
                <!--ここにサイトの紹介を配置-->
            </section>
</div>

メインの写真や文章を配置する

見出しを表す<h1>タグや文字を太くする<p>タグなどを用い、写真や文章を挿入していきます。

見出しの書き方

<h1></h1>というように記述します。この見出しで囲んだ文字は太く表示され、前後に改行が入ります。<h1>~<h6>まで規定されており、数字が大きくなるほど文字は小さくなります。

写真の見出しと説明文の記述

以下のコードのように記述し、各写真、文字を配置します。

<div id="global_info">
            <h1>おすすめ情報</h1>
            <div class="info_photo01">
                <img src="images/thumbnail01.png" alt="Hair of the Dog Brewing Company" width="300" height="224">
            </div>

            <section class="info01">
                <p class="item_heading">Hair of the Dog Brewing Companyのワイン</p>
                <p>地元特産のクラフトビールです。ここでしか頂けない味わいをポートランドの土地でお試しあれ！</p>
            </section>

            <div class="info_photo02">
                <img src="images/thumbnail02.png" alt="Grassa" width="300" height="224">
            </div>

            <section class="info02">
                <p class="item_heading">Grassaのパスタ</p>
                <p>普段食べられないオリジナルのクラフトパスタを召し上がれ！ラーメンやうどんの麺風のパスタも！！</p>
            </section>

            <section class="intro">
                <h1>サイト紹介</h1>
                <p>様々なお洒落なお店が立ち並ぶオレゴン州ポートランド、<br>
                全米NO.1の住みやすい街で生まれた美味しいレストランを紹介します！！</p><br>
                <p>このサイトでは、私が訪れたレストランの中でのおすすめと人気店をピックアップしています。</p><br>

                <h1>メールアドレス</h1>
                <p>「info アットマーク portlander.jp」(メールを送信する場合は、左記アドレスをメールソフトの送信先にコピペし、「アットマーク」を「@」に書き換えてください。)</p>
            </section>
        </div>

あらかじめ、必要となる写真を準備しておきます。写真の横幅は300ピクセル、縦幅は224ピクセルで合わせています。以前の写真の配置でも使用した<img src=””>を用います。

文章には<h1>~<h6>タグと<p>タグ、<br>タグを用いて記述しましょう。コードにもあるように<h1>タグで、見出しとなる文字を入力しましょう。その後に段落である<p>タグで、説明文を入力します。<br>タグは段落との間にスペースを入れる目的で使われます。

これらはブラウザで実行した結果がこちらになります。

メインのコンテンツが作成できたので、次からはフッターの作成に入っていきましょう。

ヘッダーの作成

コンテンツを収納する

ブラウザに表示されるページ内容は、<body>と</body>タグの間に記述します。まずは、ページレイアウト構造の外側に位置する「div id=”wrapper”」を記述しましょう。以下のように記述します。

<body>   
    <div id="wrapper">
        <!--全てのコンテンツをここに記述-->
    </div> 
</body>

ヘッダー画像を用意する

お店のロゴや大きなバナー写真を収める「ヘッダー」部分を作ります。あらかじめ画像ソフトなどを利用して画像素材を用意しておきましょう。今回はサンプルとして以下のように準備しています。

374×73ピクセルでロゴを作成し、PNG形式で保存しています。自分のロゴを作る際にはサイズを色々と探りながら、自分のサイトに合うものを見つけてください。

960×400ピクセルで作成し、3ページ分の画像を用意しています。

「ヘッダー」ブロックの記述

トップページのヘッダー部分にロゴ画像やメインの画像を配置するための画像を配置しましょう。細かな設定は後々CSSで行います。以下のコードを参考にHTMLを書いてみましょう。

<!DOCTYPE html>
<html lang="ja"> 
<head>
    <title>portlander</title>
    <meta charset="UTF-8">
    <meta name="description" content="ポートランドにあるレストランを紹介するサイトです。">
    <meta name="keywords" content="ポートランド,レストラン">
</head>

<body>   
    <div id="wrapper">
        <header>
            <a href="index.html"><img src="images/logo.png" alt="サイトのロゴ" width="374" height="73"></a>
            <img src="images/toppage.jpg" alt="バナー写真" width="960"height="400">
            <p>ポートランドのお洒落なレストラン</p>
        </header>
    </div> 
</body>
</html>

手順としては以下のようになります。

①<header>の記述

<body>   
    <div id="wrapper">
        <header>
        </header>
    </div> 
</body>

<div id=”wrapper”>と</div>の間に<header></header>を記述します。

②<img src=””>でロゴ画像の配置

<header>
      <img src="">
</header>

<img src=””>で画像ファイルを配置します。画像タグと呼びます。

③画像ファイル名を記述

<header>
      <img src="images/logo.png">
</header>

<img src=””>内に画像ファイルのパスとファイル名を記述することで画像を表示します。「logo.png」のファイルが「images」というフォルダに入っているので、上記のような記述になります。

④代替えテキストを記述

<header>
      <img src="images/logo.png" alt="サイトのロゴ>
</header>

代替えテキストとはブラウザで閲覧中に何らかの理由で画像が表示されない場合に表示される文字のことです。「alt=””」を記述することで表示されます。

⑤画像の表示サイズを記述

<header>
      <img src="images/logo.png" alt="サイトのロゴ "width="374"height="73">
</header>

画像タグ内に画像の表示サイズを指定するための数値を付加します。横のサイズを「width=””」、縦のサイズを「height=””」と記述します。

⑥バナー写真を配置

<header>
      <img src="images/logo.png" alt="サイトのロゴ "width="374"height="73">
　　　<img src="images/toppage.jpg" alt="バナー写真" width="960"height="400">
</header>

ロゴ画像と同じようにバナー写真を配置します。これを配置すると縦に画像が並びます。

⑦文字を挿入する

<header>
      <img src="images/logo.png" alt="サイトのロゴ "width="374"height="73">
　　　<img src="images/toppage.jpg" alt="バナー写真" width="960"height="400">
　　　<p>ポートランドのお洒落なレストラン</p>
</header>

<p>タグは通常、文章の段落を記述するのに用います。<p></p>で囲んだ文章の前後に1行空きが入ります。

⑧ロゴ画像にリンクを設定

<header>
       <a href="index.html"><img src="images/logo.png" alt="サイトのロゴ "width="374"height="73"></a>
　　　<img src="images/toppage.jpg" alt="バナー写真" width="960"height="400">
　　　<p>ポートランドのお洒落なレストラン</p>
</header>

<a href=””></a>でリンクタグと呼ばれ、リンクの設定に使います。上記の記述の場合、ロゴ画像をクリックするとトップページに飛ぶようになっています。

このトップページをブラウザで確認すると以下のようになります。

次からは、メインコンテンツを制作していきます。

ホームページの作成

ここからは、トップページにあたる「index.html」を作成します。以下のページで開発環境を作っておきましょう。自分の開発環境がある場合はスキップして次に進みましょう。

GitHubとVisual Studio Codeの連携

開発環境が出来たら、Visual Studio Codeの拡張機能でHTMLを扱えるように拡張しておきましょう。下の赤丸で囲まれた所から拡張機能を検索し追加します。

以下の2つを検索して機能を有効にしましょう。

上の機能は、これから説明するHTMLのタグの記述をサポートしてくれるものです。下の機能は自分が書いたコードを実際にプレビュー表示して確認するものです。確認するには、「F1」キーを押して、以下の画面を開きます。Open in browserかShow side previewでプレビューを見ることができます。

これで、HTMLでの開発ができるようになりました。ここから、HTMLとCSSを書き進める手順に移ります。先にHTMLを記述し、各コンテンツの大まかな配置を決めます。その後、CSSで細かなレイアウトを組んでいきます。

HTMLのルール

HTMLは大きく「ヘッダー」と「ボディ」の2つの構造に分かれます。

<html>
    <head>
        <title>ホームページのタイトル</title>
    </head>

    <body>
        ホームページの内容を記述
    </body>
</html>

①HTML全体…<html>で始めり</html>で終わる部分が、このページを表示するHTML全体を表しています。

②ヘッダー…<head>から</head>までをヘッダーと呼びます。ホームページのタイトルや表示に必要な情報をここに書いていきます。ここの内容はページ内のコンテンツとしては表示されません。

③ボディ…<body>から</body>は、ボディと呼ばれ、ホームページに表示させるコンテンツ（文章、画像など）を記述します。

タグの決まり

＜～＞で挟まれた半角の文字を「タグ」といいます。「タグ」を配置してページの大まかなレイアウトをを決めていきます。タグには様々な種類があり、ルール通りに記述することで、ページに反映されます。

タグは複数ある

ホームページを作成するために複数の「タグ」が用意されています。全部覚えなくてもルールさえ理解していれば大丈夫です。以下が良く使われるタグの例です。

• <font>~</font> 文字の大きさ、色を指定する
• <b>~</b> 太文字を指定する
• <a href=”URL”>~</a> 他のページにリンクを貼る

タグは半角で！

タグは全てスペースを空けないで半角で記述する必要があります。半角なら、大文字と小文字が混ざっていても大丈夫ですが、統一した方がミスになりにくいです。以下が良い例と悪い例です。

開始タグと終了タグで囲む

タグを記述する場合、原則として開始タグとスラッシュ付きの終了タグで挟みます。＜head＞</head>と書いた場合、前者が開始タグで後者が終了タグになります。終了タグを忘れると、ホームページに上手く表示されないこともあります。

終了タグが不要な場合も

終了タグが無くても機能するタグも存在します。終了タグが不要なものには、誤って記述するとエラーになることがあるので注意が必要です。以下がその例です。

タグは入れ子構造

タグは、開始タグと終了タグの間に別のタグを入れると「入れ子構造」にすることができます。下の図では、＜html>と</html>の中に＜head＞～</head>と<body>～</body>を記述しています。tabキーを利用して見やすくつくることがポイントです。

コメントの記述

HTMLには「コメント」と呼ばれる説明を記述できます。ブラウザには表示されませんが、制作中のメモとして役立ちます。コメントの前後に<!–と–>で挟み、記述します。

トップページindex.htmlを作成

準備ができたら、「index.html」のファイルを作成しましょう。基本的にはWebサーバーで、ディレクトリ内の「index.html」がそのURLのトップページと設定されています。

HTMLの基本タグを記述

まずは、以下のコードを入力してみましょう。

<!DOCTYPE html>
<html lang="ja"> 
<head></head>

<body></body>
</html>

HTMLで記述していることを宣言するために<!DOCTYPE html>と書きます。これは、このファイルがhtmlで書かれていることを示すタグになります。最後の</html>で終了を示します。

次に日本語であることを宣言するために<html lang = “ja”>と記述します。終了タグはありません。

<head>~</head>と<body>~</body>はヘッドとボディを配置し、この中に何を記述するかで見た目が変わってきます。

＜title＞タグでタイトルを入れる

下の図のようにヘッド内に<title>タグを挿入してみましょう。タイトルには自分の作りたいサイト名を入力しましょう。

<title>タグを記述するとブラウザのタイトルバーに表示されるので、確認してみましょう。

＜meta＞タグの記述

ヘッドに記述するのはページタイトルだけでなく、メタデータを合わせて記述すると良いです。メタデータは検索対策に必要な付加的な情報で、<meta>タグを用います。ここでは、使用頻度の高いものを紹介します。

文字化けを起こさないように指定

＜meta charset="UTF-8"＞

＜meta＞タグに「charset」という属性を追加することで文字のエンコーディングを指定できます。これを指定しないと文字化けを起こすこともあるので注意が必要です。

検索サイトの結果などに表示される説明

<meta name="description" content="ポートランドのレストラン紹介サイトです。">

「name=”description”」は、HTMLの説明を短い文章で記載しておくためのものです。Googleの検索結果に表示されるなど、サイトの認知度を上げるために大切な要素なので的確に言葉を選んで入力しておきましょう。

検索キーワードに利用される

<meta name="keywords" contant="ポートランド,レストラン">

「meta name=”keywords”」は、HTMLファイルがどのようなものか伝えるポイントとなるキーワードを記述するものです。カンマで区切ってキーワードを分けます。

レイアウトをブロック単位で規定する

ページ全体をブロック単位に分けて考えましょう。HTMLを記述する際もブロック構造を念頭に置き、進めていきましょう。

①外側のブロックを規定

div id ="wrapper"

＜div＞タグは、この中に記述されたコンテンツを一塊としてまとめるタグになります。<div>と</div>内のコンテンツが<div>という箱の中にあるイメージです。ブロックに幅や配置を規定するのに便利なタグです。

②ページ上部のヘッダー部分を規定

header

＜header＞タグは、ページ上部に配置したいバナー写真やロゴといった要素を含めるために設定します。ちなみに<header>と<head>のタグは別物なので気をつけてください。

③リンクボタンなどのナビゲーションを規定

nav

＜nav＞タグは、他のページへのリンクボタンを配置するために規定されたタグになります。

④情報を集めたコンテンツを規定

div id ="global_info"

①と同じ<div>タグですが、こちらは違う情報を集めたブロックとして規定しています。

⑤TwitterとFacebook欄を規定

div id ="side_bar"

再度<div>タグを使いますが、こちらはページ右横に縦長になるように配置しています。設計段階で以下のように960ピクセル＝670＋30＋260ピクセルの幅になるように値を決めています。

⑥ページ下部のフッターを規定

footer

ページ最下部のコンテンツは<footer>タグで配置します。コピーライト表記などを記述するために用います。

ホームページ作りの基本と準備

ホームページ公開までの手順

ホームページの作成から公開までは大きく3つの手順に分けられます。

1.素材を準備する

まずはホームページを構成するための素材をを準備しましょう。カメラで撮影した写真やグラフィックソフトでお絵かきした画像などのデジタルなデータを素材として用意します。

2.HTMLのデータを作成する

1で用意した素材をレイアウトし、文字を入力するなどの作業が必要でHTMLデータを作成しなければなりません。

3.インターネットに公開する

作成したものをインターネット上に公開するにはサーバーに転送する必要があります。プロバイダーやレンタルサーバー業者のものを使用します。

ホームページの設計

やみくもに作る前に、まずはページ構成を考えてからそれぞれに何を伝えるページにするのかといった構成を考えましょう。

Step1 どのようなホームページにするのか？

今回は例として、街のお洒落なレストランの良さを伝えるホームページを作ってみましょう。まずは、リスト化して外観をどのようにするか挙げてみましょう。

• お洒落な雰囲気を出すために全ページのトップに大きなバナー写真を用意する。
• メニューやアクセスのページは独立して設け、バナー写真下でナビゲーションボタンを作り、閲覧者がサイトで迷わないようにする。
• 落ち着いた色のトーンで統一する。
• お店の細かな情報やお店の出来事などは外部のブログを使う。そのため、ブログボタンを設ける。
• 集客を考慮してTwitterのタイムラインを表示する機能、Facebookページを埋め込むようにする。

Step2 サイトのページ構成を考える

ここでは、例としてトップページ、メニューページ、アクセスページ、外部ブログといった3ページ+αのつくりとします。

Point　無料で使えるホームページ設計ツール

「Cacoo」はユーザー登録を行うだけで、ホームページの設計に適した図版作成用のソフトを利用できます。作成した図はPDFやPNG形式で保存できるので試しに使うのも良いでしょう。

各ページのレイアウトを考えよう

サイト全体の設計が固まったら、次に各ページのレイアウトを考えます。

トップページ

トップページは以下の図のようなレイアウトにします。

メニューページ

全体のレイアウトはトップページとほとんど同じで、赤い点線部分のみ書き換えます。

アクセスページ

アクセスページも赤い点線で囲った部分だけを差し替えます。

ホームページのサイズを指定する

ページのサイズは閲覧する人にストレスをできるだけ与えないように作るといいでしょう。特に横幅のサイズに気をつけてスクロールしやすくします。

ページの横幅は初めに決めておこう

ホームページの設計段階で、ページの横幅（コンテンツを配置する幅）を決めよう。閲覧者のパソコンやスマートフォンによってスクリーンの表示解像度は変わります。1024～1280ピクセルのスクリーン解像度を想定しましょう。その画面でストレスなく閲覧できるように、幅720～960ピクセル程度に収まるホームページを作ります。

今回は横幅を960ピクセルにして作成します！

素材を保存する場所を準備する

ホームページを構成するファイルは分かりやすく管理しましょう。

作業用ディレクトリを作成

ホームページの設計をしたら、パソコン内に作業用の素材を保存する場所（作業用ディレクトリ）を準備します。ここでは、「Test」というフォルダーを作りながら、その中にHTMLや画像ファイルを保存しながら作業していきます。完成後はここで作ったディレクトリ内の全てをサーバーにアップロードするので、余計なものは保存しないようにします。