ホムつく式 Webデザイン講座

人気ホームページが作れる簡単作成講座
リスト・箇条書きの使い分け (<ul>,<ol>,<dl>)

リスト・箇条書きの使い分け (<ul>,<ol>,<dl>)

分かりにくい内容を、箇条書きにして整理すると分かりやすくなることがあります。<p>に書いて<br />で改行しても同じような箇条書きはできますが、箇条書き用のタグがあるので使うようにしましょう。並列的に書きだす場合は<ul>を、箇条書きにする順番が重要なときは<ol>を使います。

並列的な箇条書き

箇条書きにする内容が、並列的な場合、つまり順番に意味がない、意味を持たせない場合は<ul>を使います。箇条書きいにする各項目は<li>で囲むことで、リストマーク(黒点)が自動的に付けられ箇条書きになります。<ul>の前後に余白が入り、インデント表示される(左側に余白が入る)。

<p>ホームページ作成に必要なもの</p>
<ul>
<li>ホームページ作成ソフト</li>
<li>画像編集ソフト</li>
<li>FTPソフト</li>
<li>レンタルサーバー</li>
</ul>
<ul>での箇条書き

順番を示す箇条書き

手順やランキングなど箇条書きをした内容の順番に意味がある場合は<ol>を使います。<ol>を使って箇条書きにすることで、自動的にリストマークが数字になります。<ul>と同様<ol>の前後に余白が入り、インデント表示される。

<p>ホームページ作成の手順</p>
<ol>
<li>ホームページ作成の準備をする</li>
<li>ホームページを作成する</li>
<li>レンタルサーバーへアップロードする</li>
<li>アクセスを上げる</li>
</ol>
<ol>での箇条書き

箇条書きに説明文を付ける

箇条書きした項目に、説明文を付けたい場合は<dl>をつかい、用語には<dt>を、説明文には<dd>を使います。<dl>の前後に余白が入り、<dd>はインデント表示される。

<dl>
  <dt>XHTML/HTML</dt>
    <dd>ホームページの構造を指定</dd>
  <dt>CSS(スタイルシート)</dt>
    <dd>ホームページのデザインを指定</dd>
</dl>
<dl>での箇条書き
このページをブックマークする→ Yahoo!ブックマークに登録 Yahoo!ブックマークに登録

Webデザイン

Webデザイン力を磨いて、自分らしいホームページを作ろう
分かりやすいがアップさせるWebデザイン
  • 見るメディアではなく、使うメディア
  • ホームページ全体のデザインに統一性を持たせる
  • レイアウトにルールを持たせる
  • ナビゲーションに統一性を持たせる
  • 現在地を示す
  • リンクをはっきりと示す
色を味方に付けるWebデザイン
  • 色の基本を学ぶ
  • 色の持つイメージからテーマカラーを決める
  • 配色のポイント(減らす、無彩色)
  • 読みやすさを損なわない配色
XHTMLとCSS(スタイルシート)の理解を深める
  • XHTMLとCSSを理解することがデザイン性を高める
  • ホームページ作成ソフトがダメにした

▼すぐに役立つXHTML/HTML

▼すぐに役立つCSS(スタイルシート)

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

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

→メッセージ

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

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

→スタートガイド

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

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

→初心者講座

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

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

→Webデザイン

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

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

→人気ホームページ