ファイル > 新規
カテゴリ：基本ページ 基本ページ：CSS
（ 作成 ）
トップページが学生生活、サブページが授業だとしても、授業科目も色々あります。Maya実習一つとっても「Shader実習」、「モデリング」、「レンダリング」、「アニメーション」などいくつもの項目に分かれます。ここではMaya実習の例をとって、サイドバーに実習項目を表示する2段組レイアウトの設定をするスタイルシートを作成します。
2段組の設定は以下のようにして行います。
HTML文書の全体は以下のとおりです。
[ ソースコードの参照 ]
スタイルシートでは次のような設定をします。
.contents {
width: 670px; /* コンテンツ表示幅を固定 */
}
.main {
width: 490px; /* mainの幅を固定サイズ指定 */
position: absolute; /* 絶対位置指定、しないとサイドバーの位置変わる */
left: 190px; /* ウィンドウの左端から固定位置 */
}
.navBar {
width: 160px; /* サイドバーの幅を固定サイズ指定 */
margin-left: 10px; /* コンテンツ内での左余白 */
}
スタイルシートの全体は以下のとおりです。
/* 2段組用CSS Document */
[ ソースコードの参照 ]
ファイル > 新規保存
別名で保存：maya_index.css
場所：MySite
（ 保存 ）
全体を中央揃えにするには、スタイルシートを次のように修正します。
.contents {
width: 670px; /* コンテンツ表示幅を固定 */
margin: auto; /* コンテンツ全体を中央揃えにする指定を追加する */
}
.main {
width: 490px; /* mainの幅を固定サイズ指定 */
position: absolute; /* 絶対位置指定、しないとサイドバーの位置変わる */
margin-left: 180px; /* コンテンツ内での左余白の設定に変更する */
}
.navBar {
width: 160px; /* サイドバーの幅を固定サイズ指定 */
margin-left: 10px; /* コンテンツ内での左余白 */
}