ホームページ作成/表示・非表示の切替 (HTML,CSS,JavaScript)

[第2回] 指定の場所(座標)に表示させる(3ページ目)

マウスを乗せるだけでサブメニューが展開されるドロップダウンメニューを作ってみましょう。今回は、座標(端からの距離)を指定することで、望みの場所にぴったり表示させる方法をご紹介致します。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

自由な場所(座標)に表示させるサンプル

それでは最後にサンプルとして、ページの右上に次のロゴを表示させる方法をご紹介致します。

All About JAPON バナー

HTMLファイルの中身は次のようになります。
※灰色の部分は、どう書き換えても構わない部分です。

<html>
<head>
   <title>サンプル</title>
</head>
<body>

<h1>All About JAPON</h1>
<h2>中身中身中身</h2>
<p>
中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身
</p>
<p>
中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身
</p>
<div style="position: absolute; top: 12px; right: 10px;"> <img src="logo.gif" width="207" height="61" alt="ロゴ"> </div> <p>
&copy; Copyright 2003 All About JAPON. All Rights Reserved.
</p>
</body> </html>

上記サンプルを実際に表示してみる

「右上に表示」するよう記述していますので、ウインドウサイズを変化させても、必ず右上に表示されていることがお分かり頂けると思います。

ここでは「右上」に表示させたいわけですから、位置指定に使ったプロパティは topright です。
top: 12px; right: 10px; 」で、上端から12ピクセル・右端から10ピクセルの位置に表示させることになります。

また、緑色の部分は、ロゴ画像を表示させる部分です。画像ファイル名が logo.gif となっていますが、ここは用意した画像ファイル名に書き換えて下さい。 width(横幅)・height(高さ)の値も同様です。

おわりに

さて、ドロップダウンメニューを作るシリーズ第2回として、今回は、座標を指定して自由な場所に表示させる方法をご紹介致しました。 次回は、第1回と第2回の内容を元にして、簡単なドロップダウンメニューを作ってみたいと思います。

【次回記事】

【編集部おすすめの購入サイト】
楽天市場でホームページ作成関連の書籍を見るAmazon でホームページ作成の参考書を見る
  • 前のページへ
  • 1
  • 2
  • 3
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます