PR
Keyword Search
▼キーワード検索
ぐっちぃ117
皆さんもご存知のCSS。 リファレンスサイトはよくあるけど・・・・ こちらでは、実際どのように、デザインに利用していくかを 解説するページです。 楽天広場で利用できるテンプレートも作れたらいいなと、 考えてます。
Freepage List
Comments
2005.02.19
テーマ： スタイルシート（CSS)(12)
カテゴリ： CSS
昨日あげたキーワード、
float: left;
について、説明していきます。
これは、次の要素より自分を 左に回りこませる
って、属性です。
float: right;もあります。これは、右に回り込ませる。
横幅いっぱいまで回り込ませちゃうと、改行しちゃいます。
この、float属性のおかげで、<p>や<div>を横に並べて配置することができるようになります。
これで、横並びになってる目次のトリックがわかっちゃいましたね。次回は実際に横並びにしていきましょう。
CSS!シリーズ第一弾「サブタイトルデザイン編」が
フリーページで、さらに詳しく説明されて見やすくなりました。
これを読めばきっと、あなたも素敵な見出しを作れます。
あらかじめ<li>タグにfloat: left;を指定しておくと、横並びのリストが作れます。
例
li{
float: left;
width: 80px;
padding: 3px;
margin: 0 5px 0 5px;
list-style: none;
float: left;
について、説明していきます。
これは、次の要素より自分を 左に回りこませる
って、属性です。
float: right;もあります。これは、右に回り込ませる。
横幅いっぱいまで回り込ませちゃうと、改行しちゃいます。
この、float属性のおかげで、<p>や<div>を横に並べて配置することができるようになります。
これで、横並びになってる目次のトリックがわかっちゃいましたね。次回は実際に横並びにしていきましょう。
CSS!シリーズ第一弾「サブタイトルデザイン編」が
フリーページで、さらに詳しく説明されて見やすくなりました。
これを読めばきっと、あなたも素敵な見出しを作れます。
楽天広場以外での良い利用法
あらかじめ<li>タグにfloat: left;を指定しておくと、横並びのリストが作れます。
例
li{
float: left;
width: 80px;
padding: 3px;
margin: 0 5px 0 5px;
list-style: none;
お気に入りの記事を「いいね！」で応援しよう
[CSS] カテゴリの最新記事
-
CSS!目次デザイン その6 2005.02.23
-
CSS!目次デザイン その５ 2005.02.22
-
CSS!目次デザイン その４ 2005.02.21
【毎日開催】
15記事にいいね！で1ポイント
© Rakuten Group, Inc.
