人気ホームページが作れる簡単作成講座

人気ホームページが作れる簡単作成講座
箇条書きで見やすく整理する

４−３　箇条書きで見やすく整理する

ulタグとliタグで箇条書きする

<ul>

<li>ページ１</li>
<li>ページ２</li>
<li>ページ３</li>

</ul>

箇条書きをするときは<ul><li>を使うと、見やすくリスト化することができます。文章の頭に「・」を付けて箇条書きする方法もありますが、長文の場合非常に見にくくなるため、<ul>がとても便利です。

<ul>で箇条書きにするときは、まず全体を<ul>で全体を囲み、箇条書きする段落ごとに<li>で囲みます。箇条書きのリストマークは「・」ですが数字にしたり、画像にしたりすることもできます。

今回は、サイドメニューの各ページへのリンクに使用してみましょう。

ulとliで箇条書きにする

ホームページソース

現在のプレビュー画像です。
かなりホームページらしくなりましたが、まだまだ殺風景なデザインですね。

もうひと頑張りです。

途中のプレビュー
XHTML
<html>

<head>

<title>タイトル</title>

</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">

<ul>
<li>ページ１</li>
<li>ページ２</li>
<li>ページ３</li>
</ul>

<ul>
<li>ページ４</li>
<li>ページ５</li>
<li>ページ６</li>
</ul>

</div>

<div id="d-box">

copyright (c) oooo.com All right reserved.

</div>

</div>
 
</body>

</html>
CSS（スタイルシート）
#site-box {
          width : 750px;
          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;
}

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

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

はじめに

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

メルマガ配信スタンド「まぐまぐ」　まぐまぐ殿堂入りメルマガ  （「まぐまぐ」にて殿堂入りしました）
ホームページ作成を一人で頑張るのもいいですが、仲間と一緒に頑張りませんか？
人気ホームページの作り方やホームページ運営者の生の声などの情報を発信していますので、ぜひあなたも購読してみてください。

このページのトップへ戻る
ホムつく講座の講師は
こんなヤツ！

ホムつく講座の講師はこんなヤツ！ホームページを作っていたら、この楽しさを、あなたに伝えてくなりました。ホムつく式のホームページの作り方を体験してみてください。
→プロフィール
→お問い合わせ

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

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

→スタートガイド

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

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

→初心者講座

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

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

→Webデザイン

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

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

→人気ホームページ