Aiken Homepage - IT研究部

CSS - スタイルシート

Sample Style - サンプル・スタイル

HTML Sample3

ゼロから作成したオリジナル版HTMLサンプル。HTMLは一部修正すればそのままサイトトップに使用できる。スタイルは、新しいデザインを作成しやすいようにboxスタイルを別ファイルにしてみた。

HTML Sample2

初期版スタイルシート切替サンプル。こちらもoutsider reflexから借りてきたCSS。ディフォルトに設定されている「airmail」だけはSeesaaブログから借りてきた。

HTML Sample1

outsider reflexから借りてきたCSSを合わせてみた。というか、スタイルに合わせてHTMLを作ってみた。切替スクリプトは使用していない。

Purple

Windows

Flat

orange

purpleLight

Q&A - 良くある質問

質問１：

「 display : none;」の反対ってなんですか？

回答：

表示・非表示という意味では、その定義を指定しないのが反対になります。なぜなら、タグによってディフォルト値が違っていて、その大半が「 display : block;」のようなブロック・タグと「 display : inline;」のようなインライン・タグのふたつに分けられていて、“表示する”というようなプロパティは存在しないからです。下手に指定してしまうと、表示が崩れてしまうので注意。これは「要素がどのようなボックスを生成するのか」を指定するプロパティなので、こういう事が起きてしまいます。

しかし、表示・非表示を指定するのであれば、「visibility」を「visible | hidden | collapse | inherit」から選べば、表示・非表示を指定できます。ただし、こちらのhidden、collapseは、表示が消えてもブロックは残ってしまうので注意。更に、collapseはブラウザによって動作が違うのでこちらも注意が必要。（IE非対応）

sample code

<ul>
    <li>
        style=&quot; display : block&quot;
        <ul style=" display : block">
            <li>子要素１</li>
            <li>子要素２</li>
        </ul>
    </li>
    <li>
        style=&quot; display : inline&quot;
        <ul style=" display : inline">
            <li>子要素１</li>
            <li>子要素２</li>
        </ul>
    </li>
    <li>
        style=&quot; display : none&quot;
        <ul style=" display : none">
            <li>子要素１</li>
            <li>子要素２</li>
        </ul>
    </li>
    <li>
        style=&quot; visibility : visible&quot;
        <ul style=" visibility : visible">
            <li>子要素１</li>
            <li>子要素２</li>
        </ul>
    </li>
    <li>
        style=&quot; visibility : hidden&quot;
        <ul style=" visibility : hidden">
            <li>子要素１</li>
            <li>子要素２</li>
        </ul>
    </li>
    <li>
        style=&quot; visibility : collapse&quot;
        <ul style=" visibility : collapse;">
            <li>子要素１</li>
            <li>子要素２</li>
        </ul>
    </li>
</ul>

example

• style=" display : block"
  • 子要素１
  • 子要素２
• style=" display : inline"
  • 子要素１
  • 子要素２
• style=" display : none"
  • 子要素１
  • 子要素２
• style=" visibility : visible"
  • 子要素１
  • 子要素２
• style=" visibility : hidden"
  • 子要素１
  • 子要素２
• style=" visibility : collapse "
  • 子要素１
  • 子要素２