HTML5で短くなったDOCTYPE宣言

HTML5には「頻繁に書く必要のあるものは簡単に書けるように」という考えがあり、これまで書いていたコードがより簡単になります。 たとえば、HTML5において、DOCTYPEは「標準モードへのスイッチ」という役割でしかありません。そのため、DOCTYPE宣言以下のように短くなっていきます。

これまでのDOCTYPEは上記のように長く、そのまま入力できる人は少ないと思います。
HTML5では上記のように長く、複雑だったものは以下のように簡略化されました。

なお、主要なブラウザはIE6も含め、このDOCTYPEで標準モードに切り替わります。

preタグ内のテキストを自動改行させるスタイルシート

preタグで囲ったテキストは自動改行されないため、文章量が多いとコンテンツ領域を越えてしまったり、越えないように overflow: auto などを指定するのですが、利用規約などをpreでマークアップしたときにはちょっと見難いものになってしまいます(縦横のスクロールバーでます!)。

そんなときに使えるのがpreタグで囲ったテキストも自動改行させるスタイルシートです。記述はとても簡単で以下のコードをpreタグに対して指定してあげるだけです。

スタイルの優先順位のまとめ ~あなたはスタイルの優先順位について理解できてますか?~

CSSには様々な指定方法があり、この指定方法によって優先順が決められています。例えば、同じP要素に対してセレクタを下記のように指定したとします。


このように後ろに指定されたものが優先されるというだけではなく、スタイルセレクタの種類によっても優先順位に影響を与えます。

続きを読む "スタイルの優先順位のまとめ ~あなたはスタイルの優先順位について理解できてますか?~"

Thickboxをprototype.jsと共存させる方法まとめ

Thickboxの使い方 - 画像やHTMLのポップアップをお手軽に!の記事でThickboxの使い方をご紹介しましたが、prototype.jsとの共存ができないというごとが判明したので、今回はprototype.jsとの共存方法をご紹介します。

こちらのサイトを参考にさせていただきました。
【メモ】 prototype.jsとjQuery.jsを共存させてThickboxを動かす

重要なポイントは上記のサイトでまとめられていますので、それを踏まえた実際のやり方がこちら。

続きを読む "Thickboxをprototype.jsと共存させる方法まとめ"

IE6で :hover を全要素へを適用させる方法

a:hover という記述はテキストのロールオーバーが良く使うことがあります。文字色を変えたり下線を消したりと、ユーザーの動きに合わせてデザインを変更することができるため、上手に使うことでユーザビリティの向上が計れます。

しかし、IE6では a要素にしか使えないため、どうしてもIE6のユーザーに対してはユーザビリティが悪くなってしまいます。そんなときに使えるのが csshover.htc というビヘイビアファイルです。これは、IE限定の拡張機能でJscriptを実行するものです。

続きを読む "IE6で :hover を全要素へを適用させる方法"

 1  |  2  |  3  |  4  |  5  | All pages