小技このページをクリックしてしまうほど困っているクリエイターのみなさん、こんばんは。このようなネタを書く河野です。今後は、自らの備忘録も兼ねて、できるだけ省エネでかつHTML上、悪影響にならないようなネタを提供していきたいと思います。今回は、最近のWEBページの作りではよく見られる固定ヘッダーに関するネタです。ページ内アンカーリンクもまだまだ使われる小ワザですが、この固定ヘッダーがあるばっかりに、本来の飛び先である到達ポイントがヘッダーに隠れてしまうことがありますね。これ、ググれば結構出てくるのですが、どれもjavascriptを使って制御する小難しいものばかり(本来はそうするのが正しいんですよ、HTML上は(^_^;))私は元々、すぐググって解決する方ではないので、ググる前にやっていた小ワザを紹介します。実は小難しいjavascriptなど利用しなくても、HTMLだけで済んでしまいます。するかというと...固定ヘッダーの高さが60pxという前提で、id=”tobisaki”に飛ぶアンカーリンクを設定します。・</div></div>このまんまだと、H3は固定ヘッダーの後ろに隠されてしまうわけです。動きは間違っていないんだけど、タイトルが隠れてしまうのでかっこ悪い。そこで私のようなノンプロが考える方法は単純なものです。H3の上に60pxの高さを持ったid=”tobisaki”の要素を作ってしまえばいいのだ。(美しいコーディングをしているみなさまごめんなさい)つまり、これだけのこと。・</div></div>ここで注意していただきたいのは、id=”tobisaki”を前の要素につけることです。こっちに付けないとアンカーはH3に向かってしまいますので。CSSは別にheightでもなんでもいいと思います。簡単でしょ?初心者の方は特に、javascriptよりは手が出しやすいのではないでしょうか。javascriptがわからない方、苦手意識がある方はぜひ試してみてください。実際に高さが出てしまうので、デザイン的に問題がない範囲でしか適用できません。デザイン上余白がどうしてもおかしくなってしまう場合は諦めて、ちゃんとjavascriptでコントロールしてあげてください。どちらかというと、あまり良いやり方でないのは確かですので、そこはご承知くださいね。この投稿へのコメントコメントはありません。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。この投稿へのトラックバックトラックバックはありません。