テンプレート3 - メインカラムを幅可変にする

 テンプレート3の初期設定はメインカラム、左右のプラグインの幅は固定されていますが、CSSを変更すればブラウザに合わせて幅を変化させることもできます。ただ、すべて幅可変にすると見にくいのでメインだけ幅可変にしてみます。
/* 全体の幅 -------------------------------------------------*/
#container{
width : 100%;
}

/* メインと左側のプラグインを合わせた幅 -----------------------------------*/
#box2 {
width : auto;
}

/* 左右プラグインの幅 -------------------------------------------------*/
#left {
width : 195px;
margin-right : -195px;
}

#right{
width : 220px;
margin: 0 -20px 0 -220px;
}

/* メインの幅 -----------------------------------------------*/
#main {
width : auto;
margin: 0 220px 0 195px;
}
 変更するところのみ表示しています。紫とオレンジは数字が同じであれば自由に変更可能です。仕組みについては下の図を見れば分かりやすいかと思います。
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加