スタイルシート(30)
スタイルシート>>リスト////////////////////////////////////////////////////////////////////箇条書き表示に関するスタイルです。リストタグの指定方法よりより細かな指定が可能になってきます。--------------------------------------------------------------------■marker-offset(ほとんどのブラウザで未対応です><)■list-style-type: ***; マークの種類を指定する ■list-style-image: url(***); マークを画像で表示する ■list-style-position: ***; マークの位置を指定する ■list-style: ***; マークの設定をひとまとめに行う --------------------------------------------------------------------■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・・・小文字ギリシャ文字α,β,γ,δ,ε,ζ,η...□lower-alpha・・・小文字アルファベットa,b,c,d,...(=※lower-latin)□upper-alpha・・・大文字アルファベットA,B,C,D,...(=※upper-latin)□※hebrew・・・ヘブライ数字□※armenian・・・アルメニア数字□※georgian・・・グルジア数字□※cjk-ideographic・・・漢数字 (CJK=Chinese, Japanese, Korean)□※hiragana・・・あ,い,う,え,...□※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;算用数字テンプレートMENU楽天HTML一覧でめららTipsMENUアクセスアップ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;小文字のローマ数字テンプレートMENU楽天HTML一覧でめららTipsMENUアクセスアップMENU<ul style="list-style-type: upper-roman;">list-style-type: upper-roman;大文字のローマ数字テンプレートMENU楽天HTML一覧でめららTipsMENUアクセスアップ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;小文字のアルファベットテンプレートMENU楽天HTML一覧でめららTipsMENUアクセスアップ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;大文字のアルファベットテンプレートMENU楽天HTML一覧でめららTipsMENUアクセスアップ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に参加しました(^^;)面白かったらポチして下さいネ リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります)