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

ページ内リンクは一瞬で移動するため、気付きにくいこともページ内リンクをクリックすると、たいていのブラウザでは一瞬でリンク先の位置へ移動します。そのため、似たような構造が続くページの場合、移動したことに気づきにくいことがあります。また、細かな項目がたくさんあるページでは、一画面内に複数の項目が表示され...続きを読む

CSS3では、CSSの「セレクタ」の書き方（仕様）も拡張されているCSSを記述する基本は、セレクタ{プロパティ:値;}です(※)。「セレクタ」は、スタイルの適用対象を指定するために記述します。CSSの基本中の基本であるところの「セレクタ」ですが、この仕様もCSS3で拡張されており、新しく便利な書き方...続きを読む

細かく装飾対象を指定できる「疑似クラス」:hover疑似クラスの例様々なウェブサイトでよく使われている「疑似クラス」というと、リンク関連の装飾でしょうか。「:link疑似クラス」と「:visited疑似クラス」を使って、「未訪問リンク」と「訪問済みリンク」とで装飾を分けたり、「:hover疑似クラス...続きを読む

対象要素の一部分だけに装飾を指定できる「疑似要素」▲先頭の1文字だけを対象に装飾疑似要素は、要素の一部分に対してだけスタイルを適用できる、CSSの仕様の1つです。例えば先頭の1文字だけを装飾対象にする:first-letter疑似要素を使うと、右図のように各段落の先頭文字だけを大きくするようなデザイ...続きを読む

div.sourcecode{background-color:#eeeeee;padding:4px4px4px20px;margin:12px;line-height:1.4;font-family:monospace;}HTMLの先頭に「DOCTYPE宣言」を記述していますか？DOCTYPE宣...続きを読む

div.sourcecode{background-color:#eeeeee;padding:4px4px4px20px;margin:12px;line-height:1.4;font-family:monospace;}div.showarea{padding:4px4px4px20px;ma...続きを読む

「id」と「class」の違いと使い分けclass属性とid属性、どちらを使う？スタイルシート(CSS)を記述する際、「特定の要素すべて」を一括して装飾するのではなく、「特定の要素のうち一部だけ」を装飾したい場合、HTMLに付加できる属性は2種類ありますね。class属性と、id属性です。この「cl...続きを読む

活用サンプルをたくさん用意した入門書フルカラーで活用サンプルをたくさん掲載したスタイルシート入門書「HTML＆スタイルシートプロ顔負けのホームページ作成術」が10月12日に発売されました。手前味噌で恐縮ですが、私が執筆した書籍です。これからスタイルシートに挑戦しようと考えている方々や、まだまだ活用で...続きを読む

div.sourcecode{background-color:#eeeeee;padding:4px4px4px20px;margin:12px;line-height:1.4;font-family:monospace;}スタイルシートにどんなクラス名を付けていますか？特定の箇所にのみスタイルを...続きを読む

div.sourcecode{background-color:#eeeeee;padding:4px4px4px20px;margin:12px;line-height:1.4;font-family:monospace;}コメントを活用して見やすいソースにスタイルシートのソース中で、コメントを活...続きを読む