Web製作メモ帳

Web制作で気づいたことをつらつらと

Google Crome で表示した時のタグ属性の落とし穴

HTML CSS

私が運営しているページで、スタイルシート(CSS)の floatプロパティを使って要素を右寄せをしているページがあり、FirefoxやIEではちゃんと float を付けたタグの中身が右寄りに表示されて、その後の要素がその左に表示されるのだが、Google Cromeを使ってそのページを見ると、floatプロパティが効かずにレイアウトが崩れてこちらの意図しないものになるという現象が起きていた。 Google Cromeで見ると、他のブラウザで見た場合とはレイアウトが異なって見えるのである。


Google Crome のバグなのかな？と思っていたが、実際は意外なところに落とし穴があった。まあ、要は私のHTMLでCSSを使用する時の仕様の勘違いなのだが。

私がスタイルシートをタグの中に直接記述する時に、

<div style="{float:right;}">

の様に記述している箇所があったのだが、実際にはstyle属性では { } の様な中括弧は不要で、

<div style="float:right;">

の様に中括弧を付けずに書くのが正しいようである。

中括弧付きでも他のブラウザではきちんと表示されるのだが、Google Crome ではstyle要素が有効にならなくなってしまう。中括弧は不要というだけではなく、付けてはいけないものだったのだ。

CSSの記述方法としては他に、

<head>
<style type="text/css">
<!--
div.rclass {float:right;}

    

  • 

      

    • >
      • 

    • 

</head>
<body>

:

<div class="rclass">

:
</body>

の様に、ヘッダ部でスタイルシートを定義し、実際に使用する箇所のタグではclass属性で指定する方法や、

<head>
 <link rel="STYLESHEET" type="text/css" href="style.css">
</head>

:

の様にファイルを外出しして外出ししたファイルの中でスタイルシートを定義する実装方法があるが、これらの場合は中括弧を付けなければならない。これらと混同して、style属性でも中括弧付きで書くのが正式だと勘違いしていたのである。

しかし、実際はstyle属性では中括弧は不要であり、付けてもスタイルシートが有効となるブラウザもあるが、Google Cromeの場合はならないのである。

style属性を例に出したが、これは他のタグ属性に関しても同様であろう。style属性が、他のCSSの実装方法では中括弧を使うだけに勘違いしやすいので特に注意が必要だ。

今後はGoogle Crome もウェブブラウザとしてのシェアがますます伸びてくると思われる。ホームページを作っているがGoogle Cromeでは動作確認・表示確認をしていなかった人は、一度確認してみてもいいだろう。意外なところに落とし穴があるものである。