006835

HOME | DIARY | PROFILE

【フォローする】【ログイン】

Keyword Search

▼キーワード検索

Profile

ぐっちぃ117

皆さんもご存知のCSS。リファレンスサイトはよくあるけど・・・・こちらでは、実際どのように、デザインに利用していくかを解説するページです。楽天広場で利用できるテンプレートも作れたらいいなと、考えてます。

フォローする

Freepage List

CSS

(10)

Comments

ゆう@ とうとう出ちゃったねうわさは本当だったよ。 http://himitsu.…

納豆昆布 @ こちらこそこちらこそ、当たり前の事をツマラナク書…

ぐっちぃ117 @ Re[1]:久しぶりの日記です（今の心境(02/12) そうなんですけど、たとえば、専門学校…

納豆昆布 @ Re:久しぶりの日記です（今の心境(02/12) >大学に行って、やりたいことって特に…

納豆昆布 @ Re[1]:こんにちわ。(02/03) いえいえ～わざわざ確認ありがとうござ…

< 新しい記事

新着記事一覧(全26件)

過去の記事 >

2005.02.21

前回作成したのがこちらの、HTMLソースです。

<div>
<h1>カテゴリー別目次です</h1>
<ul>
<li>◇家電</li>
<li>├炊飯器</li>
<li>├オーブントースター</li>
<li>├ポット</li>
<li>├冷蔵庫</li>

</ul>

<ul>
<li>◇ファッション</li>
<li>├アクセサリー</li>
<li>├バック</li>
<li>├洋服</li>
<li>├帽子</li>
<li>└靴</li>
</ul>
</div>

実際に、表示すると下のようになります。

カテゴリー別目次です

◇家電

├炊飯器

├オーブントースター

├ポット

├冷蔵庫

└電子レンジ

◇ファッション

├アクセサリー

├バック

├洋服

├帽子

└靴

実際やることは、
リストの・をなくす。
横並びにする。
リスト同士の間隔を調節する。
です。

list-style: none;

横並びは、
float: left;

間隔の調節は、サブタイトルデザインの時に使った属性、
marginとpadding

実際にstyle属性に入れてみましょう。

<div>
<h1>カテゴリー別目次です</h1>
<ul style="list-style: none; float: left; padding: 0; margin: 5px;">
<li style="margin: 1px; padding: 0;">◇家電</li>
<li style="margin: 1px; padding: 0;">├炊飯器</li>
<li style="margin: 1px; padding: 0;">├オーブントースター</li>
<li style="margin: 1px; padding: 0;">├ポット</li>
<li style="margin: 1px; padding: 0;">├冷蔵庫</li>
<li style="margin: 1px; padding: 0;">└電子レンジ</li>
</ul>

<ul style="list-style: none; padding: 0; margin: 5px;">
<li style="margin: 1px; padding: 0;">◇ファッション</li>
<li style="margin: 1px; padding: 0;">├アクセサリー</li>
<li style="margin: 1px; padding: 0;">├バック</li>
<li style="margin: 1px; padding: 0;">├洋服</li>
<li style="margin: 1px; padding: 0;">├帽子</li>
<li style="margin: 1px; padding: 0;">└靴</li>
</ul>
</div>

実際に、表示すると下のようになります。(日記でなるかなぁ・・・）