CSSにハマる。目的通りのデザインにならない・・・

かわんです。

今、とあるホームページを制作しています。シンプルなレイアウトというか、ブログ風のデザインにしています。

右にメニュー、左にコンテンツという感じです。

とりあえず、出来るだけ楽しようと思ってて、まぁ、シンプルな2カラムレイアウトなのですが、floatを使わずにgridを使ってます。

floatでありがちなカラム落ちもなくて楽です。

まぁ、それでも穴にハマることがありまして・・・。

ま、gridには問題無いのですが、ブログタイトルをクリックしなくてもヘッダ全体をクリックするとジャンプします。

要するに、ブログタイトルの文字をクリックしなくても、ブログタイトル付近の場所をクリックしてもジャンプしてしまう・・・

何だこれ?!

CSSを見渡す・・・。

なんと498行・・・(笑)。

それを1から見直すのはアホなので、とりあえずロゴタイトル周辺のCSSを確認。

デフォルトでaに「display: block」を指定してます。これが原因か・・・。いつ書いたんだろ・・・。

a全体を「display: block」にしているのでサクッと「display: inline;」に変えればOK。

でも、「display: block」で上手くいってたモノが残念なお知らせになる可能性がある訳で・・・。

そこで、ブログタイトルの文字だけ「display: inline;」にして対応。これで上手くいきました。

「display: block」は便利だけど、厄介な場合もあるんだねって感じです。

a全体ではなくて、スポットで「display: block」にすると良いかも・・・。

ま、今回はやらないですけどね(笑)。

また不具合に頭を悩ます必要があるので、このままで行こうかなと・・・。