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

次はサービスページを入力します

会社概要ページが完成しましたので、次はサービスページです。

service.htmlをTeraPadで開きます

会社概要ページの時と同様、<div id="contents">から</div>までの間に内容を入れていきます。

サービスページの情報を入れるボックスを作る

会社概要の時と同じように<section>~~</section>というタグを入力します。

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

「サービス」の見出しを入れる

次に「サービス」の見出しを入れます。

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

ここで一旦プレビュー

会社概要ページでh2見出しのスタイルを設定していたので、ちゃんと見出しの装飾がされていますね。

では、サービス紹介の為のボックスを追加していきましょう

会社概要で作ったtableタグでもOKですが、せっかくなので他のボックスデザインにしてみましょう。

まずは商品ボックス1個あたりの枠となる<section>と見出しの<h3>タグをを追加します。
このsectionボックスはcssで装飾しますので専用の名前を付けます。今回、この商品ボックスは複数ある為、idではなくclassを使って下さい。

↓以下のタグをコピペ。

スタイルを設定していきます

cssのコメントの見出しとともに以下を追加します。

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

簡単に解説をします。
まずは、contents内にある<section class="list1">に対してスタイルを設定したかったので、#contents section.list1にしました。
次に、borderの行は何度か設定したので分かりますね。1px幅の直線(solid)を#CCC(薄いグレー)で入れるという設定内容です。
次に、border-radiusですが、こちらは#container(HPの外枠)で使いましたね。ボックスの四隅を丸くする設定です。
次に、paddingですが、何度も出てきましたがボックス内の余白になります。
次にmargin-bottomですが、margin-rightというのをメニューでやりましたね、ボックスの外側に空けるスペースの事になります。今回はbottomと入っているので、ボックスの下に空けるスペースという事です。つまり、2個以上のボックスが表示される場合のボックス同士の隙間になります。
次に、backgroundですが、これもグラデーションで習いましたね。
次に、box-shadowですが、これもcontainerの外側への影として使いましたね。
最後に、overflowですが、これは後で配置する写真イメージがボックスから飛び出てしまうのを防ぐ為の裏ワザのようなものです。

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

以下のようにボックス枠とh3見出しが表示されればOKです。

上の<h2>見出しとボックスがくっついているので離します。

<h2>見出しの下にmarginを空ける事で対応したいと思いますが、下側に空けるmarginというのは結構使うので、汎用的に使えるスタイルを準備しておきます。

cssファイルに以下を追加します。

これは、html側で「class="mb15"」とついたものに対して下側(magrin-bottom)に15pxのスペースを空けるというスタイルになります。

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

スタイルを追加したら、service.htmlに戻って<h2>タグにこのスタイルを追加します。

追加できたらプレビューで確認

以下のように、<h2>見出しと下のボックスとの間にスペースが空いていればOKです。

次は<h3>見出しタグのスタイル設定です。

上で設定したlist1ボックスの中の<h3>タグという事なので、 #contents section.list1 h3に設定をします。

簡単な説明をします。
paddingは<h3>タグ内の余白です。4個ある場合は、左から、「上」「右」「下」「左」と時計順での設定値となります。
font-sizeは文字通り文字サイズです。<h2>設定の際に述べましたが、hタグは数字によって文字サイズが変わるので、きちっとセットしておきます。
border-bottomは下側への線です。1pxの幅、直線(solid)、#CCC(薄いグレー)です。
border-leftは左側への線です。 3pxの幅、直線(solid)、#000(黒)です。
margin-bottomは下側へ空けるスペースです。<h3>の下に画像や説明文が入るので、少し空ける設定を加えています。

設定したらプレビュー

以下のように見出しに装飾が加わっていればOKです。

写真と説明文を追加します。

写真を用意します

写真をご用意頂き、HPフォルダのimagesフォルダ内に移動しておきます。
テスト用で使う場合は、当サイトの姉妹サイト(PHOTO-CHIPS)のキーボード写真を使って下さい。

写真と説明文のhtmlを入力します。

<h3>タグの下に写真の<img>タグ、その下に説明文の段落用の<p>タグを入力します。

↓以下のタグをコピペ。

htmlタグの説明

今回、<img>タグの外側を<figure>タグで囲みました。 <figure>(ここに画像)</figure> 説明文から参照される画像である場合はこの<figure>タグで囲って下さい。その画像を抜いてしまうと本文の意味が分からなくなる場合には使いません。
<p>タグは会社概要ページで使いましたね。こちらは文章を入力する際に使う段落用のタグです。

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

ちょっと写真が大きすぎますね。左側に写真を小さ目に配置し、右側に説明文がくるようにスタイルを調整する事にしましょう。

style.cssをTeraPadで開きます。

contents内にある<section class="list1">の中にある、<figure>の中にある<img>タグに設定したいので、以下のようにします。
ちなみに、この商品ボックス内に将来他に画像(アイコンや他の商品写真)を配置する事がないなら、figureの文字は抜いても問題ありません。figureの文字を抜くと、<section class="list1">に入っている全ての画像(img)タグに対してこのスタイルが適用されます。

↓以下のタグをコピペ。

簡単に説明します。
floatは回り込みさせるスタイルです。以前にメニューでやりましたね。
backgroundは背景色です。
paddingは写真内の余白です。
borderは枠線です。1pxの直線(solid)を#CCCで入れる設定です。
widthは写真の幅の設定です。今回は40%とパーセンテージで設定しましたが、もちろんpx指定で構いません。 ちなみにパーセンテージにしておくと、レスポンシブWEBデザイン(タブレットやスマートフォンの画面サイズに応じて自動でレイアウトを切り替えるデザイン)にした際に便利です。
heightはauto(自動)という設定になっていますが、こちらもpx指定で直接指定が可能です。このautoもレスポンシブで使う場合の設定です。レスポンシブでwidthの実際の幅が変動してもheightをautoにしておくことで写真の縦横比率を維持したまま拡大縮小できます。

再びプレビューで見てみます

以下のように、写真が左側に、文字が右側に入っていますか?

次に段落タグ<p>の調整です

contentsの中にある、<section class="list1">の中にある段落タグ<p>に対して設定します。

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

簡単に説明します。
paddingは段落タグ内の余白です。今回なぜわざわざ0pxと指定したかというと、会社概要ページを作った際に「#contents p」に「padding: 10px 20px 15px;」を設定しており、この影響をリセットする為のものです。意味がよく分からない人は実際に「padding:0px;」を外してみると影響を受けているのが分かります。
margin-leftは段落タグの左側に空けるスペースの事です。左側には写真が40%の幅で入っているので、それより少し大きい44%にして設定しています。写真40%と説明文44%の数字はお好みに合わせて調整してもらってもちろん構いません。

商品ボックスを増やす

今1個作ったので、実際に紹介したい商品の数だけコピペで増やしていきます。今回は例として4商品あったとします。

選択できたら、TeraPadの上部にある「コピー」アイコンをクリック。
又はキーボードのCtrl+Cでも可。

今ある商品ボックスタグの下にカーソルを合わせておきます。

TeraPadの上部にある「貼り付け」アイコンをクリック。
又はキーボードのCtrl+Vでも可。

以下のように商品ボックスのhtmlパーツが1個追加されればOK。

引き続き、新しく追加した商品ボックスタグの下にカーソルを合わせて「貼り付け」アイコンをクリックし、必要な商品の数だけこの作業を繰り返して下さい。

再びプレビューで確認

以下のように必要な商品ボックスの数だけ増やす事はできましたか?うまくいったなら、後はhtml側に戻ってテキストや画像のタグを入れ替えて完成です。
(※ここではサンプルなので同じ情報だけ入ったままになっています。)

次のステップは…

「お問い合わせページを完成させる」です。頑張りましょう!