アンカーリンクを利用するとページの上部が切れる場合の対処

2015年03月28日
follow us in feedly

ホームページ制作

昨日はキリンチャレンジカップのチェニジア戦をテレビ観戦しました。

ヴァイッド・ハリルホジッチ監督にとっての初陣ということで、どんな采配を見せるのか楽しみにしていました。

結果は岡崎と本田のゴールで2-0で勝利でしたね。ハイボールがぐいぐい進みました。

ハイボール

個人的にはセンスあふれるパスや惜しいシュートを見せた宇佐美が代表に定着して欲しいと期待しています。

それでは、今回はサイト制作におけるちょっとしたレイアウト崩れの対処法を書きます。

アンカーリンクを使うとページの上部が切れる

ホームページやブログでアンカーリンクを利用して目的のコンテンツにジャンプすることがありますが、そうするとレイアウトが崩れてページの上部が切れることがあります。

症状を画像で説明すると、

▼ページを通常表示すると上部のテキストは見えていますが

before

▼アンカーリンクによりページを表示するとヘッダー部分が上がってテキストが切れています。

after

ページの上部が切れる原因

この症状が起こるのは親要素に指定したoverflowプロパティに原因があります。プロパティの値がhiddenの場合に上部が切れることがあります。

overflow:hiddenはよく使うことがありますが、特にfloatの解除に利用しているケースが多いのでは無いでしょうか。

同じ症状でお困りの方は親要素にoverflow:hiddenが指定されていないか調べてみてください。

follow us in feedly

関連記事

福岡でホームページ制作を依頼するなら【ハブワークス】

ホームページ制作・リニューアル・スマートフォンサイト制作・ECサイト制作は福岡のハブワークスまでお気軽にどうぞ。WEBサイト制作後の修正・更新・SEO対策もお任せください。リーズナブルな料金設定でサービスをご提供いたします。

webサイト制作・修正に関するお問合せ・ご相談・お見積りはお気軽にどうぞ