ホームページ制作＆SEO
解りやすいよう、全て<p>タグに枠線をつけ、その配置に関する指定を記述していきます。
以下のように記述ることにより、その記述された<p>で囲まれた箇所のボックスを、上を基準に20ピクセル、左を基準に20ピクセルの位置に指定することができます。
| <p style="top:20px;left:20px;position:relative;border-style:solid;"> |
ボックスの配置を、上を基準に20ピクセル、左を基準に20ピクセル指定しています。
次に下を基準に20ピクセル、右を基準に20ピクセルの位置に指定してみます。
| <p style="bottom:20px;right:20px;position:relative;border-style:solid;"> |
ボックスの配置を、下を基準に20ピクセル、右を基準に20ピクセル指定しています。
全て2行改行で統一していますが、その表示される位置が変わってきます。
上の赤文字の部分が、ボックスの位置を指定する記述になります。
もうお分かりだと思いますが、赤文字の【top】は上を基準に、【bottom】は下を基準に、【left】は左を基準に、【right】は右を基準にを意味しています。
ページの<head>内に記述する場合、外部のCSSファイルに記述する場合もこの赤文字の部分は同じになります。
以下のように<head>内に記述することにより、その記述されたページの<p>で囲まれた箇所全てのボックスを、上を基準に20ピクセル、左を基準に20ピクセルの位置に指定することができます。
解りやすいよう、<head>から記述します。この場合の表示は前のものと同じなので省きます。
| <head> <style type="text/css"> <!--p{top:20px;left:20px;position:relative;border-style:solid;}--> </style> </head> |
以下のように外部CSSファイルに記述することにより、そのファイルの読み込まれたページの<p>で囲まれた箇所全てのボックスを、上を基準に20ピクセル、左を基準に20ピクセルの位置に指定することができます。この場合の表示も前のものと同じなので省きます。
