初心者向け
ホームページの
作り方講座

いよいよページのコンテンツ(内容)を詰め込んでいきましょう

トップページは最後に残しておいて、他のページから完成させていきます。

まずは会社概要(company.html)から

TeraPadでcompany.htmlを開きます。
<div id="contents">から</div>までの間に内容を入れていきます。

会社概要の情報を入れるボックスを作る

1つの内容のまとまりを示す場合、 <section>~~</section> というタグを使います。
※<section>の中には見出しが必要となるので注意して下さい。

<section>は汎用的に使えるものですが、<header>や<nav>や<footer>といったより意味のあるタグがあればそちらを優先して使って下さい。ちょっと難しいのでここでの説明は省かせて頂きます。

↓手打ちに自信がない人は以下のタグをコピペ。

「会社概要」の見出しを入れる

次に「会社概要」の見出しを入れます。上のステップでも書きましたが、<section>の中には見出しが必要なので忘れず入力して下さい。
上のステップで追加した<section>タグの間に入れていきます。
見出しには<h1>から<h6>まであり、数字が小さいほど大見出しになります。<h1>はサイト名に使っているので今回は<h2>タグを付けてみます。

↓手打ちに自信がない人は以下のタグをコピペ。

使う見出しは作り手によっても異なります。少し古いバージョンのhtmlだと、各ページに<h1>は1個限定である必要があったのですが、html5になり何個あっても構わなくなりました。自分に会った見出しを使うようにしていって下さい。

見出しを入れた所でcompany.htmlを一旦プレビュー

以下のように「会社概要」の文字だけ入っていますので、これに装飾を加えて見出しらしくしていきましょう。

style.cssファイルをTeraPadで開く

contentsの中に入っている見出し<h2>に同じスタイルを使いたいので、以下のように追加します。追加する場所は、#contentsの下あたりでOKです。

↓手打ちに自信がない人は以下のタグをコピペ。

まずは枠線から追加してみましょう

枠線はborderでしたね。borderは各辺の単位での設定もできます。
今回は、下線だけポイント的に設定してみる事にします。
border-top: 1px solid #CCC;
border-right: 1px solid #CCC;
border-bottom: 4px solid #726043;
border-left: 1px solid #CCC;
以下のように追加できましたか?

プレビューで見てみましょう

以下のように線は入っていますか?

さて、メニューとコンテンツがくっついてしまっていてちょっと見づらいので、隙間を空ける事にします。

contentsの上部に余白を空ける

style.cssに既に#contentsの指定は入れているので、ここに上部へ余白を空ける設定をしましょう。以前にも説明しましたが、余白設定には、 padding: (幅); というタグを使います。前回は4方向共通でよかったので設定する幅も1つでしたが、今回は上にだけ設定しますので、 padding-top: (幅); を使います。文字通り、上部(top)への余白設定です。今回は30pxほど空けようと思いますので以下のようにします。 padding-top: 30px;

以下のように追加できましたか?

改めてプレビュー

以下のように、メニューと見出しの間に適度な余白が空けばOKです。

続いて<h2>タグの文字サイズを調整する

見出しタグは<h1>ほど文字が大きく<h6>と数字が小さくなるほど文字も小さく表示されます。このままだと大きすぎるので調整します。
文字サイズに使うタグは、 font-size: (値); です。(値)の部分はpx%などで指定できます。
今回は、bodyタグで設定しているフォントサイズ(14px)のままでいいので、 font-size: 100%; にしました。お好みに応じて直接16pxなど指定して色々試してみて下さい。

引き続き、余白を調整します

見出し内の文字が左にくっついてしまっていたので、調整します。
使うタグはpaddingです。 padding: 5px 20px; 今回は、値が2つあります。2つある場合、左から、「上下(に5px)」「左右(に20px)」への設定となります。

company.htmlをプレビューで見てみましょう

以下のような感じになっていればOKです。

もう少し調整。グラデーションを加えてみます。

もう少し調整してみます。見出しの背景が白で平面的なのでメニューの時のようにグラデーションを加えてみます。 background-image: linear-gradient(#fff, #e5e5e5); 上記のタグを追加して下さい。#fffから#e5e5e5に向かってグラデーションがかかります。
今回は控えめに白系のグラデーションにしました。見出しはこれで完成です。

次に、会社概要の情報を入れるボックスを作りましょう

以下のようなボックスを作ります。

使うhtmlタグは <table>~</table> です。
説明の前にまずは以下のタグをcompany.htmlに加えてみて下さい。

↓以下のタグをコピペして下さい。

簡単にtableタグの解説です

<table>と</table>はテーブルの外枠みたいなイメージで。
<tr>から</tr>までが1行分。
<th>から<th>が左側の見出し。
<td>から</td>が右側の内容になります。

ちょっと難しいかもしれませんが、以下のようなイメージです。

一旦プレビューしてみます

枠線は入っていませんが、冒頭のイメージの並び方にはなっていますよね?

ここからtableのスタイルの設定に入っていきます。

tableタグは色々な所で使うので、このテーブル専用のスタイル名をつけてあげる事にします。

以前に何度かidで名前を付けてあげた事がありましたね。
<div id="contents">や<nav id="mainmenu">などです。
idの名前は1ページ内で1個しか使ってはならないのですが、1ページ内で複数使う可能性がある場合はclassを使います。class以外はidの時と同じ指定方法です。今回の場合は、
<table class="ta1">
にします。
以下のように入力できましたか?

さて、まだ名前を付けてあげただけなので、ここからこのta1に対してスタイルを設定していきましょう。

style.cssに「.ta1」スタイルを追加

まずは、テーブル1(ta1)のスタイルである事を示す見出しコメントタグで入れます。
続いて、.ta1のスタイルを設定します。

↓手打ちに自信がない人は以下のタグをコピペ。

<table>タグのta1というスタイルになるので、上記のような.ta1だけでなくtable.ta1という設定でもOKです。ta1のtaにはテーブルタグのtaを含めていたので当サイトではカットして使っています。

width: 100%;」というのは文字通り幅を100%で表示させるという設定です。

次に枠線を入れます

ちょっと見づらいかもしれませんが、テーブル外枠である「.ta1」と、左側見出しの「.ta1 th」と、右側内容の「.ta1 td」にまとめて指定をしています。まとめて複数を指定したい場合、カンマ「,」で区切って指定できます。

↓手打ちに自信がない人は以下のタグをコピペ。

枠線が入ったかプレビューで確認します。

続いてテーブル左側の<th>タグにスタイルを設定します

テーブル左側なので、「.ta1 th」になります。以下のように追加してみて下さい。

↓以下のタグをコピペして使って下さい。

簡単に説明します。
widthの値は何度かやっていますが、幅になります。今回は180pxとしましたがご希望に合わせて調整してもらってOKです。
paddingも何度かやりましたが、内側の余白部分の設定です。今回は10pxにしました。
text-alignもメインメニューのテキストの設定時にやりましたね。これは文字をセンタリングする設定でした。
backgroundもおなじみ背景の事です。

引き続き、テーブル右側<td>タグのスタイル設定をします

テーブル右側は、「.ta1 td」になります。以下のように追加してみて下さい。

↓以下のタグをコピペして使って下さい。

ここでは単純に、1個上で設定したthタグの余白(padding)と同じ設定をしておけばOKです。

プレビューしてみましょう

以下のようにスタイルが反映されていればOKです。中のテキスト情報(「会社名」や「サンプルカンパニー」など)はhtml側で直接入れ替えておきましょう。

補足:テーブルの行数が足りないという場合は

↓以下のタグを・・・

ここに追加して下さい。

<tr>から</tr>が1行分だったので、1行分の終わりのタグの</tr>の直後に1行分を追加すればOKという事です。

コピペ用のタグに入っている「&nbsp;」の文字は半角スペースの事です。これを入れていないと(空っぽの場合)、テーブルをプレビューで見た時にうまく出ないので入れておきましたが、実際にはこれは削除して文字を入力して下さい。

テキストで説明を入れてみましょう

今のはテーブルという枠組みにテキストを入れましたが、テキスト単体で入力してみましょう。
使うhtmlタグは、 <p>(ここにテキスト)</p> です。文章を入力する際はこの段落タグ<p>を使いましょう。

↓手打ちに自信がない人は以下のタグをコピペ。

一旦プレビューで見てみます。

以下のようにテーブルの直下にテキストが表示されましたか?
このままでも問題はないのですが、適度な余白を作ってみやすくしましょう。

style.cssに段落タグの余白を設定するタグを追加します

以下のように追加して下さい。

↓手打ちに自信がない人は以下のタグをコピペ。

contents内にある全ての段落タグ<p>に対して設定をしたいので、「#contents p」に設定します。
paddingは段落タグ内の余白です。3つ指定がある場合、左から、「上」「左右」「下」への余白となります。

改めてプレビュー

以下のように適度な余白ができていればOKです。

次のステップは…

「サービスページを完成させる」です。頑張りましょう!