QOXホームへ

HTML組み込んだらなんか変、な時のチェックポイント

Yuko Hashimoto

Yuko Hashimoto

エンジニアさん向け。
デザイナー/コーダーから受け取ったHTMLをWEBアプリに組み込んだら、なんだか見栄えがおかしくなったなあ……、という時に注意すると良いかもしれない点を挙げてみました。

なんか要素のデザインが変わっちゃった気がする

全体のサイズ感が違う気がするとか、余計な装飾がついちゃってる、とかいう時。

可能性1. 余計なフレームワークを読み込んでいませんか?

プロジェクト作成時にフレームワーク側でBootstrapなどのCSSフレームワークを用意してくれることがあります。

そのCSSフレームワークをもともとは使用していないとか、使用する場合でもバージョンが違ったりすると、見栄えや動きがおかしくなります。

使っていないものは読み込まないのが大事です。

可能性2. 全称セレクタを追加していませんか?

全称セレクタはこういうのです。

この「*」ですね。これがですね!

すべての要素に適用されてしまうんですね!

リセットCSSで使用しているのをよく見ますが、そこからコピペしてきて組み込み後のCSSに書き加えると地獄です。変更したい要素にだけピンポイントでスタイルを当てましょう。

可能性3. 親要素のプロパティが無視されていませんか?

組み込み前後で高さや横幅が変わってしまった!という時にありがち。

要素の高さや幅を親要素に対して何%かで指定している時に起こりがちです。

親要素やさらに上のbody、htmlで高さなど指定している場合があります。フレームワークが用意するデフォルトCSSや別に読み込んだCSSフレームワークが打ち消している場合もあるので検証してみてください。

経験上、height・min-height・overflowあたりが怪しい。

可能性4. marginが死んじゃったかもしれない。死なないでmargin!

margin-top、margin-bottomで起こりがち、あったはずの余白が消えてしまう問題。

HTMLで綺麗に見えた時とは隣り合う要素が違うとか、中身がカラになった時に起こります。

marginの相殺は割と有名なあるあるです
(参考記事:
[CSS]marginの相殺を正しく理解しておこう!相殺はいつ起こるのか、相殺を回避するテクニック|coliss
が、クセがあるので厄介な時はpaddingやborderで回避しましょう。

marginの相殺を意図して使っている場合も(その上で表示に変な点が出ている場合も)あるので、変更する場合はデザイナー/コーダーに相談した方が無難です。

HTMLに要素を挿入したらなんか変

可能性1. 構文が間違っている場合

例えば

このような入れ子は正しくない構文という事でブラウザが無視することがあります。

入れ子を適切な形にするか、デザイナー/コーダーに相談してください。

HTMLは文書構造の正しさが重要です。何でもかんでもdivやspanで突っ込まないこと。

可能性2. ブロック要素とインライン要素の使い分け(というかdisplayの設定)がぐちゃぐちゃ

div=ブロック要素、span=インライン要素、として紹介されることもありますが……。

ブロック要素だと思ってdivを使ったら親要素の影響でブロック要素ではなかった、とか
display:table;の中で使っていた、とか
display属性を指定したらFlexboxの設定を上書きしちゃって全体が吹っ飛んだ、とか

デザイナー/コーダーに(略)

手を入れる時に注意してほしいこと

デザイナー/コーダー目線で、HTML/CSSに後から手を加える際になるべく避けてほしいことです。

これらもレイアウト崩れの原因になります。

タグにstyle=””で直接CSSを書かない

  • 後から変更する時に大変(メンテナンス性が下がる)
  • どんなにclassをつけようとスタイルが上書きできない
  • メディアクエリでの書き分けができない

よほどの時以外は使わないでほしい(魂の叫び)

でも急ぎの対応の時は使ってしまいがち。使う時は最小限で!!

!importantはなるべく使わない

  • 何が優先されているのかわからなくなり、!importantをつけたスタイルをさらに上書きするための!important祭りが始まる
  • ユーザースタイルシートより優先されるのでアクセシビリティ的にアレ

CSSの優先度には法則があります。!importantを使わなくても大体何とかなるので何とかしよう。何とかならない時には影響が最小限度になる範囲で使おう。

参考:!importantはもう使わない!CSSの優先順位をおさらいしよう

探せばまだまだありそうですが、今のところ思いつくのはこの辺です。
怪しいポイント探しの一助になれば幸いです。

Yuko Hashimoto

Yuko Hashimoto デザイナー

デザインって何だろう、と悶々としながら、オシャレさん目指して試行錯誤する日々です。ハト好き。寺社と散歩と時代劇が好きです。気がつくと荷物が多くなるのが悩み。

記事一覧
Go up