3−1 枠線でレイアウトを区切る
レイアウトが組めたら、レイアウトを囲む境界線にラインをひいてみましょう。ラインが無くてもデザイン的には問題ないですが、枠線を指定する「border」はよく使うCSS(スタイルシート)なので、ぜひ、ここでマスターしてくださいね。
どこに枠線を引くかが、わかりやすいように、赤い線を引いてみました。
レイアウトを線で区切り、どのタグに「border」を指定するか決める
枠線を引く箇所とレイアウトの構造を見比べて、どのタグに「border」で枠線を指定するかを決めます。
図のように、外枠は「site-box」に、横線は「a-box」に引くと良いことがわかります。
「border」で枠線を指定する
枠線は、CSS(スタイルシート)で線の太さ、色、種類を自由に指定することができ、上の部分だけなどの一部分に枠線を指定することも簡単にできます。
border : 幅 種類 色 (順不同 半角スペースで区切る)
border-bottom : 1px solid #FF9900
border- 枠線の位置 : 幅 種類 色 (順不同 半角スペースで区切る)

●全てに枠線を指定する
4方向すべてに枠線を付けるには、「border」に「線の幅」「線の種類」「線の色」を半角スペースで区切って指定すれば良いだけです。
●一部分に枠線を指定
枠線を一部に指定したい場合は、borderの後にハイフン(-)を入れ、指定したい枠線の位置を記入します。
■上を指定
border-top
■右側を指定
border-right
■下を指定
border-bottom
■左を指定
border-left
色の指定方法は複数あるのですが、#(シャープ)と6ケタの英数字で表す16進数で指定する方法とカラーネームで指定する方法が一般的です。たくさんの色がありますがホームページ作成ソフトがあれば、簡単に色を選べます。
(参考サイト→いろずかん-カラーコード順のカラーチャート)
ホームページソース
<head>
<title></title>
</head>
<body>
<div id="site-box">
</div>
</body>
</html>
width : 750px;
border: 1px solid #FF9900;
}
border-bottom: 1px solid #FF9900;
}
float: left;
width: 500px;
}
float: right;
width: 250px;
}
clear: both;
width: 750px;
}
(「まぐまぐ」にて殿堂入りしました)
ホームページ作成を一人で頑張るのもいいですが、仲間と一緒に頑張りませんか?
人気ホームページの作り方やホームページ運営者の生の声などの情報を発信していますので、ぜひあなたも購読してみてください。
こんなヤツ!
ホームページを作っていたら、この楽しさを、あなたに伝えてくなりました。ホムつく式のホームページの作り方を体験してみてください。
→プロフィール
→お問い合わせ
必要なものは?
ホムつく講座がおすすめするソフトやレンタルサーバーを紹介しています。初心者の方や、悩んでいる方は是非参考にしてみてください。
ホームページはXHTMLとCSSで作ります。ほむつく講座では初心者の方にわかりやすいと評判の初心者講座があります。
良くしたい
ホムつく講座では見た目だけが良いデザインではなく、ユーザー(利用者)の方が安心して、ホームページを閲覧できるデザインを学べます。
ホームページは作れば沢山のアクセスが集まるわけではありません。そして、アクセスが多いだけのホームページでも意味がありません。あなたのファンができる人気ホームページを作り方を学びましょう。