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

人気ホームページが作れる簡単作成講座
何もない空間がデザイン性と可読性をアップさせる

5−4 何もない空間がデザイン性と可読性をアップさせる

デザインというと、画像を使ったり、センスの良い配色にしたり、カッコいいロゴマークを作ったりすることを思い浮かべるものですが、何もないというのも、デザインなんです。

余白を指定することでホームページはとても読みやすく、デザインの良いものになります。

padding 余白を入れる

余白には2種類ある

余白を作りだすCSS(スタイルシート)は「padding」と「margin」です。

<h1>〜<h6>,<p>,<ol>,<ul>,<div>などのXHTML(HTML)タグの
内側に余白を作るのがpadding。
外側に余白を作るのがmargin。

ホームページを作る上で、非常に多く使われるCSS(スタイルシート)ですので、
2つの違いを良く覚えておいてください。


XHTML/HTML タグには、余白が自動挿入されるものがある

余白を指定する前に、現在のプレビューを見てください。

余白を指定する前のプレビュー

余白を指定する前ですが、すでに多くの余白が含まれていることが分かると思います。

実は XHTML(HTML)タグには初めから余白が設定されているものがあり、「padding」や「margin」で余白を指定しなくてもXHTML/HTML タグを使用するだけで、自動的に余白が挿入されます。

それなら、わざわざ余白を指定する必要はないように思うかも知れませんが、自動的に挿入される余白は、タグによって余白の幅や余白箇所が違うだけでなく、ホームページを閲覧する環境(ブラウザ)によっても余白の幅や余白箇所が違うため、閲覧環境によってレイアウトが崩れる原因の一つになります。

そこで、*(アスタリスク)を使って「padding」と「margin」を0pxに指定し、自動挿入される余白を無くしてしまいましょう。

*(アスタリスク)で全ての余白をリセット

*  { padding : 0px ; margin : 0px ; }

*(アスタリスク)に指定されたCSS(スタイルシート)は、全てのXHTML(HTML)に反映されます。

アスタリスクでpaddingとmarginを0にする

せっかくの余白を無くすことは無駄のように思えるかも知れませんが、自動挿入される余白が0に統一され、余白のコントロールが簡単になります。

ホームページソース

すっかり、ペッタンコになりました(笑)

全ての余白が0になりました
XHTML
<html>

<head>

<title>タイトル</title>

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

</head>

<body>

<div id="site-box">

<div id="a-box">

<h1>h1 サイトタイトル</h1>
ホームページの説明文 <br />
テキスト テキスト テキスト テキスト テキスト テキスト

</div>

<div id="b-box">

<h2>h2 ページタイトル</h2>
<p>テキスト (省略)</p>

<h3>h3 見出し</h3>
<p>テキスト (省略)</p>

<h3>h3 見出し</h3>
<p>テキスト (省略)</p>

</div>

<div id="c-box">

<div class="category">カテゴリー1</div>
<ul>
<li>ページ1</li>
<li>ページ2</li>
<li>ページ3</li>
</ul>

<div class="category">カテゴリー2</div>
<ul>
<li>ページ4</li>
<li>ページ5</li>
<li>ページ6</li>
</ul>

</div>

<div id="d-box">

copyright (c) oooo.com All right reserved.

</div>

</div>
 
</body>

</html>
CSS(スタイルシート)
*  {
          padding : 0px ;
          margin : 0px ;
}


#site-box {
          width : 752px;
          border: 1px solid #FF9900;
}

#a-box {
          border-bottom: 1px solid #FF9900;
          background-image: url('img/header.gif');
}

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

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

#d-box {
          clear: both;
          width: 750px;
          background-color: #FFFF99;
          font-size: 12px;
}

h1 {
          font-size: 22px;
}

h2 {
          font-size: 17px;
          background-color: #FFFF99;
}

h3 {
          font-size: 15px;
          color: #FF9900;
}

p {
          font-size: 14px;
}

.category {
          font-size: 14px;
          color: #FFFFFF;
          background-color: #FF9900;
}
このページをブックマークする→ 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デザイン

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

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

→人気ホームページ