e日記風 独り言

気まぐれ & 気まま & 天邪鬼な老いぼれ技術屋の日々の記録のうち、主に Perl・CGI・HTMLなど Web技術に関連した記事です。
右端上端の同一カテゴリージャンプボタンで他の同じカテゴリーの記事を順番にご覧いただけます。
Access Counter:  総アクセス数
-1285- HTMLメモ
以前からずっと疑問に思っていたことが氷解した。
HTMLでこのページのような Webページを作成した場合、私のページのように ヘッダー部をウインドウ上端に固定して、その下にメインのコンテンツがくぐっていくようなレイアウトをすると、ページ内のリンクでページの途中を指定した場合に その部分がウインドウの上端に表示されるので、結果ヘッダー部の下に隠れてしまう。隠れるのはわずか 1行程度のことだが、アンカー位置はタイトルなどの行の事が多いので見る人からすると ちょっと戸惑うと思う。paddingなどの属性値をいじれば何とかできそうだと思ったが、今までなかなかうまくいかず、このページのようにヘッダーの左側を透明で透けるようにして逃げていた。まぁそれはそれでデザインとしては面白いとは思うんだが、出来ないとなると気持ちが悪かった。
それが今日たまたま 再び気になったので検索したら技が見つかってスッキリ。
要は、アンカーを<a name=" "> タグの代わりに id="" でブロック要素のタグの中に記述しておいて、そのクラス指定に padding-top を指定して、それと同じだけの負の数値を margin-top に指定するということ。こうすることでその要素の上端部分(負のマージン)がアンカーと見なされるが、実際の表示はマージンと同じだけパディングがとられて元に戻るという仕掛け。
具体的には css部で
.pd50 {padding-top: 50px; margin-top: -50px;}
などとしておいて、実際のコーディングではアンカー部分を
<p id="anchor1" class="pd50"> 本文・・・・ </p>
として、リンク部分は通常通り
<a href="#anchor1"> リンク文字 </a>
とする。 ブロック要素なら pタグ以外でも使用可能。 但し、そのブロック要素の高さがパディング+1行に満たない時だけは上にスペースが表示されてしまう。
サンプルのページを作ってみた。

昨夜からこの辺りもかなり寒くなったと思っていたら、今朝は霜柱が。朝日を浴びた霜柱が光ってきれいだった。
2014/12/03