ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

メニューページの確認

メニューページの構成を確認しよう

メニューページを作成するまえに、構成と内容を確認しておきましょう。

ページの構成と内容

メニューページは、「さきちんカフェ」の取り扱いメニューを紹介するページとなります。

[ページの完成図]
完成図

「お食事」と「お飲み物」が用意され、商品画像をクリックすると拡大画像が開きます。

拡大画像は640x480pxサイズで開くので、クリック用の小さい画像と、拡大用の大きな画像の2つを用意する必要があります。
また、別ウィンドウで開くようにするので「_blank」を付ける必要があります。

スタイルの確認

メニューページのメインコンテンツには「minibox」スタイルが使われています。
これは商品画像を表示し、横並びにするためのスタイルです。

画像用のスタイル

縦横135px、右と下方向に10pxの領域間余白、左方向に回りこみを指定します。
この中に画像を配置し、別ウィンドウで開くようにします。

挿入する画像

メニューページに挿入する画像は、「img」フォルダ内の以下の画像です。

挿入する画像
  • 「drink01_min.jpg」「drink01.jpg」
  • 「drink02_min.jpg」「drink02.jpg」
  • 「drink03_min.jpg」「drink03.jpg」
  • 「drink04_min.jpg」「drink04.jpg」
  • 「food01_min.jpg」「food01.jpg」
  • 「food02_min.jpg」「food02.jpg」
  • 「food03_min.jpg」「food03.jpg」
  • 「food04_min.jpg」「food04.jpg」

上記16点の画像を挿入します。

「min」が付いている画像が表示用、付いていない画像がクリックしたときの拡大用となります。
数が多いので、間違いのないようにしましょう。

覚えておきたいポイント

たくさんの画像を挿入します

メニューページは取り扱いメニューの紹介ページとなります。新しいスタイルを作成し、商品画像をたくさん挿入するのでミスのないように気をつけましょう。

メニューページのスタイル作成
« 前のページへ 【STEP.6】他のページを完成させよう

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。