HTML・スタイルシート（CSS）の基礎

「ページ内リンク」がクリックされた際の移動を、視覚的に分かりやすくしてみましょう。アニメーションするように滑らかにスクロールさせるスクリプト「smoothscroll.js」と、移動先要素を装飾する「:target疑似クラス」（CSS3）の使い方をご紹介。

スタイルの適用先を指定する「セレクタ」には、様々な条件で対象を絞り込める書き方が用意されています。うまく活用すれば、いちいちHTML側にclass属性やid属性で名前を割り振らなくても、CSS側だけで柔軟に適用先を限定できます。

スタイルの適用先を指定する「セレクタ」には、「疑似クラス」という特殊な書き方も用意されています。要素名やclass名を指定するだけでは実現できない特殊な状態に限定してスタイルを変化させるなど、様々な装飾ができます。

スタイルの適用先を指定する「セレクタ」には、「疑似要素」という特殊な書き方も用意されています。要素名やclass名を指定するだけでは実現できない「特殊な箇所」に限定して、スタイルを適用できます。

HTMLの先頭にDOCTYPE宣言がありますか？ ないと、Internet Explorerでスタイルシートを活用できません。最新のIE7でもこの宣言がなければ以前と同じ表示になってしまいます。

Internet Explorer 7から使えるようになったスタイルシートの機能に、「属性セレクタ」があります。FirefoxやOperaでは以前から使えていました。これを活用すると、より柔軟な装飾対象の指定が可能になります！

idとclassの違いと、使い分け方法をご紹介いたします。HTMLにスタイルシート(CSS)を適用する方法には、class属性を使う方法と、id属性を使う方法があります。この「class」と「id」は明確に役割が異なります。全部にclass属性を使っている場合は問題ありませんが、全部にid属性を使っている場合は問題がある可能性があります。

オールカラーで読みやすいスタイルシート入門書をご紹介。これからスタイルシートに挑戦しようと考えている方々や、まだまだ活用できるレベルには達してないなと思う方々にちょうど良い、スタイルシート入門書です。

せっかくのスタイルシートのメリットを失わせてしまう書き方をしていませんか？ クラス名の付け方次第で、スタイルシートをうまく活用できるか、無駄にしてしまうかが決まります。どんな名称がマズいのでしょうか？

スタイルシートのソース中でコメントを活用していますか？ 長いソースを後日に読むと、どこに何を書いたのか分からなくなることがあります。ソース中のコメントで補足して、後々のメンテナンスを楽にしましょう。