2−4 Webページの横幅を指定する
widthで横幅を指定する
横幅を指定して整えることでしっかりとしたレイアウトに仕上げてみましょう。
横幅を指定するのはwidthです。指定する数値の単位は色々あるんですが、今回はpx(ピクセル)で揃えてください。ちなみに縦幅の指定はheightを使います。
レイアウト全体の横幅を指定する
横幅は、自由に決めても良いですが、800pxを超えると、パソコンによっては横スクロールがでることがあり、とても見にくくなるので今回は750pxにしました。縦幅は、コンテンツの量によって自動で変化させるので、指定しません。
divタグがたくさんありますが、一番外側のsite-boxに750pxの指定をすることで、全体が横幅750pxで揃えられます。
左右に並んだレイアウトの横幅
#c-box { width : 250px ; }
左右に並んだdivはそれぞれ個別に横幅を指定します。ポイントはWebページ全体の横幅(site-div)を750pxに指定したので、左右に並んだdivタグの横幅は、合計が750px以下になるように設定してください。
ホームページソース
<head>
<title></title>
</head>
<body>
<div id="site-box">
</div>
</body>
</html>
width : 750px;
}
float: left;
width: 500px;
}
float: right;
width: 250px;
}
(「まぐまぐ」にて殿堂入りしました)
ホームページ作成を一人で頑張るのもいいですが、仲間と一緒に頑張りませんか?
人気ホームページの作り方やホームページ運営者の生の声などの情報を発信していますので、ぜひあなたも購読してみてください。
こんなヤツ!
ホームページを作っていたら、この楽しさを、あなたに伝えてくなりました。ホムつく式のホームページの作り方を体験してみてください。
→プロフィール
→お問い合わせ
必要なものは?
ホムつく講座がおすすめするソフトやレンタルサーバーを紹介しています。初心者の方や、悩んでいる方は是非参考にしてみてください。
ホームページはXHTMLとCSSで作ります。ほむつく講座では初心者の方にわかりやすいと評判の初心者講座があります。
良くしたい
ホムつく講座では見た目だけが良いデザインではなく、ユーザー(利用者)の方が安心して、ホームページを閲覧できるデザインを学べます。
ホームページは作れば沢山のアクセスが集まるわけではありません。そして、アクセスが多いだけのホームページでも意味がありません。あなたのファンができる人気ホームページを作り方を学びましょう。