ホームページ内に箇条書きのリストを作るやり方

ホームページを作成する問いに他のページや項目にリンクするために箇条書き形式の目次を 作ることがあります。他にもたんに文章を長々と続けると訪問者にも飽きられてしまうので、 内容を整理してどういう内容を話すのか順序立ててわかりやすくするためにもホームページ を作成するときにこの箇条書きリストは役に立ちます。

今も昔も頻繁に使われるこの箇条書きリストですがタグはULとLIの二つです。リスト全体を ULタグ、そのなかにある項目をLIタグでくくります。特に何もスタイルシートなどで指定を していない場合は、本文より3文字分下げされ、行頭にリストを示す記号のようなものが 表示されます。

Our partners
税理士 東京 →税理士の事ならことサイトです。
電話占い →電話占いならこのサイトが一番です。
会計事務所 →会計事務所は信頼と実績のこの会社です。

この箇条書きリストのタグの使い方はULとLIを同時に使います。まずリストにする部分全体 にULタグで囲み、その中にliタグで詳細の項目を指定します。どちらも/liと終了タグも 必要になりますので注意しましょう。最後は/ulで箇条書きリストを閉めます。通常は丸い 黒がリストにつきますが、番号などにも変更できるので色々試してみましょう。

ulは元々上記の説明のように箇条書きリストとしての使用法が昔は一般的でした。 ただ時の流れとともにサイドメニューを作るために使うのが現在は主流です。本来の 目的とは少しずれていそうですが、これがまた便利ですので、ぜひ覚えておきたい使い方です。

タグというのは一度使い方を覚えると基礎から応用へとどんどんカスタマイズできます。 またタグ同士を組み合わせてまた別の使い方ができる、などの利点もありますので、 基礎的な意味を理解しつつ応用形も探っていきましょう。

昔は本当に箇条書きのリストとして利用することが多かったのが、このタグですが、 最近は変わってきています。様々な応用形の使い方があり、昔とはだいぶ様変わり してきました。下記で見てみましょう。

スタイルシートでホームページ内に箇条書きリストを使用しメニューバーにする傾向が 最近は多いようです。li部分にメニューの画像を指定し、li内部に文字とリンクを入れ、 ホームページ内のメニューにする、というやり方です。簡単にできるのでぜひやってみて 下さいね。

Our partners
パワーストーン →パワーストーンのことについてもっと知ろう。
電話占い →電話占いに特化した面白いサイトです。
名刺印刷 →名刺印刷はここに依頼しましょう。

箇条書きリストを上記のようにhtmlで作ってもよいですが、デザインにこだわるので あれば、画像を重ねてスタイルシートで指定したりするとよいです。そのままのhtml ではやはりデザイン的にイマイチだったりします。

箇条書きリストを使って内部リンクを作り、ページを変える方法もありますが、文字数が 少なくなりすな場合は、同ページに飛ばすこともできます。こうすればそのページのコンテンツ が自動的に増えるので、よいです。ただページ数が全体的に減るのでできれば別ページ にしましょう。

箇条書きリストを別ページにする場合は、1ページごとのコンテンツの量に注意しましょう。 あまりに文字数が少ないと検索エンジンにマイナス評価をされ、逆効果になってしまう 場合があります。目安としては最低1000文字を目標にします。

スタイルシートで箇条書きリストをメニュー代わりにする方法はコンテンツ部分と メニュー部分のサイズ合計がホームページ全体の横サイズとピッタリ一緒で なければいけません。大きすぎたりするとレイアウトが大きくずれてしまいますので 注意しましょう。

SEO的に箇条書きリストが効果がある、というわけではありませんので必須では ありませんのでそこまでこだわる必要はありません。hタグや文字数、キーワード率 などの方に重点を置いてホームページを作成していきましょう。

Our partners
プレス加工 →プレス加工なら安心のこの会社まで。
チラシ印刷 →チラシ印刷なら安心のこの会社がベストです。
パワーストーン →パワーストーンの秘密がわかります。

メニュー

お気に入りサイト達

内容の正確性に関しては責任を負いかねます。個人の責任にて当サイトをご利用ください。