テンプレートとアクセスアップのでめらら楽天日記

スタイルシート>>リスト
////////////////////////////////////////////////////////////////////

箇条書き表示に関するスタイルです。
リストタグの指定方法よりより細かな指定が可能になってきます。

---

■marker-offset(ほとんどのブラウザで未対応です＞＜)
■list-style-type: ***; マークの種類を指定する
■list-style-image: url(***); マークを画像で表示する
■list-style-position: ***; マークの位置を指定する

---

■list-style-type: ***; マークの種類を指定する

【list-style-type: ***;に使用できる値】
□disc･･･黒丸（デフォルト）
□circle･･･白丸
□square･･･四角
□decimal･･･数字
□※decimal-leading-zero･･･01,02,03,04,...
□lower-roman･･･小文字ローマ数字i,ii,iii,iv,v,...
□upper-roman･･･大文字ローマ数字I,II,III,IV,V,...
□※lower-greek･･･小文字ギリシャ文字α,β,γ,δ,ε,ζ,η...

□upper-alpha･･･大文字アルファベットA,B,C,D,...(=※upper-latin）
□※hebrew･･･ヘブライ数字
□※armenian･･･アルメニア数字
□※georgian･･･グルジア数字
□※cjk-ideographic･･･漢数字 (CJK=Chinese, Japanese, Korean)

□※katakana･･･ア,イ,ウ,エ,...
□※hiragana-iroha･･･い,ろ,は,に,...
□※katakana-iroha･･･イ,ロ,ハ,ニ,...
□none･･･マークなし
□inherit･･･
※ブラウザの設定や閲覧環境によって表示できない場合も多いです

---

▲直接指定の記述方法
<ul style=" list-style-type: disc; ">
<li>テンプレートMENU</li>
<li>楽天HTML一覧</li>
<li>でめららTipsMENU</li>
<li>アクセスアップMENU</li>
</ul>
それぞれ↓こんな感じですね（＾＾）
list-style-type: disc; 黒丸

• テンプレートMENU
• 楽天HTML一覧
• でめららTipsMENU
• アクセスアップMENU

<ul style=" list-style-type: circle; ">
list-style-type: circle; 白丸

• テンプレートMENU
• 楽天HTML一覧
• でめららTipsMENU
• アクセスアップMENU

<ul style=" list-style-type: square; ">
list-style-type: square; 黒四角

• テンプレートMENU
• 楽天HTML一覧
• でめららTipsMENU
• アクセスアップMENU

<ul style=" list-style-type: decimal; ">
list-style-type: decimal; 算用数字

1. テンプレートMENU
2. 楽天HTML一覧
3. でめららTipsMENU
4. アクセスアップMENU

<ul style=" list-style-type: decimal-leading-zero; ">
list-style-type: decimal-leading-zero; 先頭に0をつけた算用数字
<ul style=" list-style-type: lower-roman; ">
list-style-type: lower-roman; 小文字のローマ数字

1. テンプレートMENU
2. 楽天HTML一覧
3. でめららTipsMENU
4. アクセスアップMENU

<ul style=" list-style-type: upper-roman; ">
list-style-type: upper-roman; 大文字のローマ数字

1. テンプレートMENU
2. 楽天HTML一覧
3. でめららTipsMENU
4. アクセスアップMENU

<ul style=" list-style-type: lower-greek; ">
list-style-type: lower-greek; 小文字のギリシャ文字
<ul style=" list-style-type: lower-alpha; ">
list-style-type: lower-alpha; 小文字のアルファベット

1. テンプレートMENU
2. 楽天HTML一覧
3. でめららTipsMENU
4. アクセスアップMENU

<ul style=" list-style-type: lower-latin; ">
list-style-type: lower-latin; 小文字のアルファベット
<ul style=" list-style-type: upper-alpha; ">
list-style-type: upper-alpha; 大文字のアルファベット

1. テンプレートMENU
2. 楽天HTML一覧
3. でめららTipsMENU
4. アクセスアップMENU

<ul style=" list-style-type: upper-latin; ">
list-style-type: upper-latin; 大文字のアルファベット
<ul style=" list-style-type: hebrew; ">
list-style-type: hebrew; ヘブライ数字
<ul style=" list-style-type: armenian; ">
list-style-type: armenian; アルメニア数字
<ul style=" list-style-type: georgian; ">
list-style-type: georgian; グルジア数字
<ul style=" list-style-type: cjk-ideographic; ">
list-style-type: cjk-ideographic; 漢数字
<ul style=" list-style-type: hiragana; ">
list-style-type: hiragana; ひらがなのあいうえお順
<ul style=" list-style-type: katakana; ">
list-style-type: katakana; カタカナのアイウエオ順
<ul style=" list-style-type: hiragana-iroha; ">
list-style-type: hiragana-iroha; ひらがなのいろはにほへと順
<ul style=" list-style-type: katakana-iroha; ">
list-style-type: katakana-iroha; カタカナのイロハニホヘト順
<ul style=" list-style-type: none; ">
list-style-type: none; マーカーなし

• テンプレートMENU
• 楽天HTML一覧
• でめららTipsMENU
• アクセスアップMENU

---

■list-style-image: url(***); マークを画像で表示する

<ul style=" list-style-image: url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/37.gif); ">以下略
↓こんな感じですね（＾＾）

• テンプレートMENU
• 楽天HTML一覧
• でめららTipsMENU
• アクセスアップMENU

<ul style=" list-style-image: url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/41.gif); ">以下略
↓こんな感じですね（＾＾）

• 生まれたところを遠く離れて
• LOVE TRAIN
• Illumination
• MIND SCREEN

---

■list-style-position: ***; マークの位置を指定する

□outside … （領域の外側に表示）デフォルト
□inside … （領域の内側に表示）
<ul style=" list-style-position: outside; ">
<li>テンプレートMENU</li>
<li>楽天HTML一覧</li>
<li>でめららTipsMENU</li>
<li>アクセスアップMENU</li>
</ul>
↓こんな感じですね（＾＾）

• テンプレートMENU
  左のマークの位置に注目
• 楽天HTML一覧
  左のマークの位置に注目
• でめららTipsMENU
  左のマークの位置に注目
• アクセスアップMENU
  左のマークの位置に注目

<ul style=" list-style-position: inside; ">以下略
↓こんな感じですね（＾＾）

• テンプレートMENU
  上のマークの位置に注目
• 楽天HTML一覧
  上のマークの位置に注目
• でめららTipsMENU
  上のマークの位置に注目
• アクセスアップMENU
  上のマークの位置に注目

---

■list-style: ***; マークの設定をひとまとめに行う

<ul style="list-style: square url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/40.gif) inside ;">
<li>ShogoHamada 1stALBUM<br>「生まれたところを遠く離れて」</li>
<li>ShogoHamada 2ndALBUM<br>「LOVE TRAIN」</li>
<li>ShogoHamada 3rdALBUM<br>「Illumination」</li>
</ul>
↓こんな感じですね（＾＾）

• ShogoHamada 1stALBUM
  「生まれたところを遠く離れて」
• ShogoHamada 2ndALBUM
  「LOVE TRAIN」
• ShogoHamada 3rdALBUM
  「Illumination」

*****************************************************

【庶事所感】
昨夜東京湾を震源地とする地震が以下の通りありました。
5月28日の日記に書いたのですが、やっぱり雲と地震には因果関係があるように思います（＞＜）
先日見たのはまさに東京湾方面から伸びる大きな三本の雲だったのです。

2005年6月2日　1時20分 2005年6月2日　1時10分ごろ 東京湾 1
2005年6月1日　22時12分 2005年6月1日　22時2分ごろ 東京湾 1
2005年6月1日　20時49分 2005年6月1日　20時44分ごろ 東京湾 3
2005年6月1日　19時50分 2005年6月1日　19時40分ごろ 東京湾 2
2005年6月1日　19時16分 2005年6月1日　19時6分ごろ 東京湾 2



*****************************************************

なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ