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

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

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

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

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

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

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

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

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

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

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

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

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

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