Lightboxの表示位置がおかしい原因にこんなパターンも
HTMLの基本といえば、基本なのですが……。
つい忘れがちなんですよね。
DOCTYPE宣言って。
Lightbox系のプラグインの表示位置がおかしい、という内容の嘆き兼無能告白を、何度かこのブログでしていると思うのですが。
またこのような現象が起きました。
jQueryのバージョンが1.11.0だったので、これが悪いのか？と思って2.3.0にしても変わらず。
bodyの閉じタグ直前に置いていたscriptタグが悪いのか？と思って位置を上にしても変わらず。
今度こそお手上げか？と思ったのですが、明らかと言える原因がありました。
明らかというか、盲点というか、灯台下暗しなのですが。
DOCTYPE宣言を忘れていたのです……！
DOCTYPEとは、各ブラウザに「このファイルはHTML4だよ」「このファイルの規格はXHTMLだよ」と最初に伝えるものです。
ファイルの最上部で宣言します。
これがなくても、cssなどは各ブラウザ毎の解釈によって大体の場合は正しく表示されるのですが、プラグインだとそうも行かないこともあるようです。
つい省略してしまいがちですが、やはり大きな意味があるのですね。
ちなみに、HTML4の場合
[code]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">[/code]
XHTMLの場合
[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/code]
HTML5の場合
[code]<!DOCTYPE html>[/code]
HTML5はこれまでの賑やかさがウソのような、シンプルなDOCTYPE宣言です。
ヘッダーは訳の分からない記述も多くて、つい何も考えずにコピー＆ペーストで済ませてしまいそうなのですが、1つ1つ意味を読み解くと、新しい発見があって楽しいです。
【ハートブレーン】https://blog.heart-kokoro.net
【ハートブレーン】https://heartbrain.netよろしければ、SNSでのシェアやランキングなど、応援よろしくお願いします。
