ホムつく式 ホームページ作成講座

人気ホームページが作れる簡単作成講座
枠線でレイアウトを区切る

3−1 枠線でレイアウトを区切る

レイアウトが組めたら、レイアウトを囲む境界線にラインをひいてみましょう。ラインが無くてもデザイン的には問題ないですが、枠線を指定する「border」はよく使うCSS(スタイルシート)なので、ぜひ、ここでマスターしてくださいね。

どこに枠線を引くかが、わかりやすいように、赤い線を引いてみました。

border   レイアウトを線で区切る

レイアウトを線で区切り、どのタグに「border」を指定するか決める

枠線を引く箇所とレイアウトの構造を見比べて、どのタグに「border」で枠線を指定するかを決めます。

div別にborderを見てみよう

図のように、外枠は「site-box」に、横線は「a-box」に引くと良いことがわかります。

「border」で枠線を指定する

枠線は、CSS(スタイルシート)で線の太さ、色、種類を自由に指定することができ、上の部分だけなどの一部分に枠線を指定することも簡単にできます。

border : 1px solid #FF9900   
border : 幅  種類  色 (順不同 半角スペースで区切る)

border-bottom : 1px solid #FF9900
border- 枠線の位置 :  幅  種類  色 (順不同 半角スペースで区切る)
borderで枠線を指定する

全てに枠線を指定する
4方向すべてに枠線を付けるには、「border」に「線の幅」「線の種類」「線の色」を半角スペースで区切って指定すれば良いだけです。

一部分に枠線を指定
枠線を一部に指定したい場合は、borderの後にハイフン(-)を入れ、指定したい枠線の位置を記入します。
■上を指定
border-top
■右側を指定
border-right
■下を指定
border-bottom
■左を指定
border-left

色の指定方法は複数あるのですが、#(シャープ)と6ケタの英数字で表す16進数で指定する方法とカラーネームで指定する方法が一般的です。たくさんの色がありますがホームページ作成ソフトがあれば、簡単に色を選べます。
(参考サイト→いろずかん-カラーコード順のカラーチャート

ホームページソース

XHTML
<html>

<head>

<title></title>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

<div id="site-box">

<div id="a-box"></div>

<div id="b-box"></div>

<div id="c-box"></div>

<div id="d-box"></div>

</div>

</body>

</html>
CSS(スタイルシート)
#site-box {
          width : 750px;
          border: 1px solid #FF9900;
}

#a-box {
          border-bottom: 1px solid #FF9900;
}

#b-box {
          float: left;
          width: 500px;
}

#c-box {
          float: right;
          width: 250px;
}

#d-box {
          clear: both;
          width: 750px;
}
このページをブックマークする→ Yahoo!ブックマークに登録 Yahoo!ブックマークに登録

初心者さんのためのホームページ作成講座

はじめに

Step1 ホームページの土台を作る
  1. ホームページデータの保存先フォルダを作る
  2. HTMLファイルの作成
  3. HTMLとXHTMLのどちらで作成するか決める
  4. CSS(スタイルシート)の外部ファイルの作成
Step2 CSSレイアウトの構築
  1. CSSレイアウトは<div>で作る
  2. XHTML/HTMLタグへ個別にCSS(スタイルシート)を指定する
  3. 上下に並んだ<div>..</div>を左右に配置させる
  4. Webページの横幅を指定する
  5. 「float」によるCSSレイアウトの崩れを防ぐ
Step3 レイアウトをデザインする
  1. 枠線でレイアウトを区切る
  2. 「border」によるCSSレイアウトの崩れを防ぐ
  3. レイアウトの背景を指定する
Step4 XHTML(HTML)をもっと理解しよう
  1. 超重要!Webページの内容を示すタイトル
  2. 基本は「見出し」と「本文」でコンテンツを作成する
  3. 箇条書きで見やすく整理する
  4. 万能タグ<div>は「class属性」で使いこなそう
Step5 CSS(スタイルシート)でデザインする
  1. 文字のサイズ(フォントサイズ)を指定する
  2. 文字の色を指定する
  3. 文字に背景色を指定する
  4. 何もない空間がデザイン性と可読性をアップさせる
  5. 「padding」と「margin」をコントロールして、文章レイアウトを整える
  6. 上下左右の余白を個別に指定する
  7. 左寄せ、中央、右寄せを指定する
  8. 「auto」でWebページを中央表示させる
Step6 ページ作成からFTPアップロード
  1. Webページの新規作成
  2. ホームページレイアウトの基本構成
  3. 画像を掲載する
  4. 文字を装飾してみよう
  5. リンクでWebページをつなぐ
  6. ホームページの完成とアップロード
このページのトップへ戻る
ホムつく講座の講師は
こんなヤツ!

ホムつく講座の講師はこんなヤツ!ホームページを作っていたら、この楽しさを、あなたに伝えてくなりました。ホムつく式のホームページの作り方を体験してみてください。

→メッセージ

ホームページ作成に
必要なものは?

ホムつく講座がおすすめするソフトやレンタルサーバーを紹介しています。初心者の方や、悩んでいる方は是非参考にしてみてください。

→スタートガイド

ホームページを初めて作るのですが・・

ホームページはXHTMLとCSSで作ります。ほむつく講座では初心者の方にわかりやすいと評判の初心者講座があります。

→初心者講座

もっとデザインを
良くしたい

ホムつく講座では見た目だけが良いデザインではなく、ユーザー(利用者)の方が安心して、ホームページを閲覧できるデザインを学べます。

→Webデザイン

ホームページにアクセスが集まりません

ホームページは作れば沢山のアクセスが集まるわけではありません。そして、アクセスが多いだけのホームページでも意味がありません。あなたのファンができる人気ホームページを作り方を学びましょう。

→人気ホームページ