応用例

応用例

印刷用レイアウト

このページに適用しているスタイルです。印刷枚数を節約するため、2段で印刷ます。スタイルを指定しないと、文字が詰まって読みにくくなりますから、文字間、行間を広げています。

主な設定は以下のようになっています。
ol（番号付リスト）の行間を130%、文字間を2pxに指定
pre（改行、空白そのまま表示）の背景色を指定、枠線の色とスタイルを指定
b（ボールド書式）は、文字間4pxとする
h2 は文字のサイズ、枠線と背景色を指定
table（表）の空の要素も表示

body { background-color: white;
      color: black;
      font-size: 12pt;
      margin: 6px 2px}

p { line-height:150%;
    margin: 6px 8px;
    padding: 3px;
    font-size: 100%}

pre { background-color: #ccffff;
      padding: 4px ;
      margin: 4px 2px;
      border: dashed;
      border-color: #9999ff;
      border-width: 3px}

B { letter-spacing: 4px}

Table{ empty-cells: show;
       margin: 12px}
caption {text-align:left}

h1 {text-align: center;
    font-weight: bold;
    font-size: 160%;
    letter-spacing: 3px;
    margin: 3px}
    
h2 {font-weight: bold;
    font-size: 120%;
    border: solid;
    border-color: #333333;
    border-width: 2px;
    padding: 3px 7px;
    letter-spacing: 4px;
    background-color: #ccffcc;
    color: black;
    margin : 12px 0px}

h3 {font-weight: bold;
    font-size: 105%;
    letter-spacing: 6px;
    border-style: none none double none;
    border-color: #333333;
    border-width: 3px;
    margin : 10px 0px;
    padding: 0px 5px}
 
img { margin: 6px 2px }

ol {
 line-height:130%;
letter-spacing 2px;
} 
ol.roma {list-style-type: upper-roman}
ol.alpha {list-style-type: upper-alpha}
ol.malpha {list-style-type: lower-alpha}

li {margin: 1px}
ul{list-style-type: square}

p.at {border: double;
      padding: 3px}

hr {width: 20%}

横配置リスト

　この例は、河内著：「スタイルシート上級レイオウト」からの引用です。<!DOCTYPE.. は文書のスタイルを XHTML 1.0 とすることを指定しています。
　li のレイアウトは　float:left の指定により改行せず、右寄せ表示しています。right は右寄せ、left は左寄せの指定になります。a:hover　で　a タグの上にマウスがきた場合に背景色を変える設定をしています。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>横並びリスト</title>
<style type="text/css">

body {
        font-size: 75%;
        font-family: "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", sans-serif;
        line-height: 1.5;
        color: #333333;
        background-color: #FFFFFF;
}

#navigation {
        width: 720px;
}

#navigation ul {
        list-style: none;
        margin: 0;
        padding: 0px;
        height: 32px; 
        overflow: hidden;
        border-bottom: 2px solid #CCCCCC;
}

#navigation li {
        float: left;
        width: 120px;
        margin: 0;
        padding: 0;
}

#navigation a {
        display: block;
        width: 100%; 
        padding: 6px 0 8px 0;
        color: #FFFFFF; 
        background-color: #4C924D;
        text-decoration: none;
        text-align: center; 
}

#navigation a:hover {
  background-color:#297E27;
}

</style>
</head>

<body>
横並びリスト<br>
<div id="navigation">
    <ul>
       <li><a href="#">計算機の仕組み</a>
       <li><a href="#">離散数学II</a>
       <li><a href="#">プログラミングⅢA</a>
       <li><a href="#">プログラミングⅢA</a>
       <li><a href="#">メディアシステム制作２</a>
        <li><a href="#">ゼミ</a>
     </ul>
</div>
</body>
</html>

注　以前このの記述は <meta>タグの文字コード（charset）が　utf-8 になっていました。しかし、目次のフレームの文字コードは Shift-JIS のため、utf-8 のコードを　ShiftJis で表示したため文字化けしていました。　以前の版でもブラウザで　「表示」＞エンコード＞utf-8 に設定すれば、正しく表示できました。ただし、目次が文字化けしてしまいます。「フレームの場合、文字コードを同じにしないと正しく表示されない」ことを体験しました。

これを表示すると、このようになります。
この例は、河内著：「スタイルシート上級レイアウト」からの引用です。