2008年11月19日
2006年07月06日
リストを表示しましょう♪
yozoはブログの記事で箇条書きを多用しています。行頭に「数字」、「abc」、「・」などを手入力しても、問題はないのですが、箇条書きの内容が長くなって、２行になったときに、インデントをつけるのに苦労してました。
HTMLのリスト表示のタグを使えば行頭文字の後ろでインデントが入るので見やすく表示できますね。タグを使うのですから、これはどこのブログでも可能です。
手打ちの場合(上)とリストを使った場合(下)
・yozoはブログの記事で
箇条書きを多用しています。
- yozoはブログの記事で
箇条書きを多用しています。
HTMLのリスト表示のタグを使えば行頭文字の後ろでインデントが入るので見やすく表示できますね。タグを使うのですから、これはどこのブログでも可能です。
<ul type="行頭マーク"><li>〜</li></ul>
で行頭マークつきのリストを表示できます。
- 行頭マークが『黒丸』はtype="disc"
type="disc"は省略できます- 行頭マークが『白丸』はtype="circle"
- 行頭マークが『四角』はtype="square"
<ul type="disc">
<li>「このソフト 警告したら 理想かも」
うさも - 2006/06/26 07:00:25</li>
<li>「背景に 発表すれば モンビッケ」
うさも - 2006/06/25 16:22:23</li></ul>
と記述すれば下のようになります。
<ul type="circle">
<li>「この絵かき 導入される エンジニア」
うさも - 2006/06/25 12:17:47</li>
<li>「会員に 思っています もみじだね」
うさも - 2006/06/25 12:16:05</li></ul>
と記述すれば下のようになります。
<ul type="square">
<li>「情報を 切り替わります クロアチア」
うさも - 2006/06/24 13:43:29</li>
<li>「全力を リンクされたし 美しい」
うさも - 2006/06/24 13:41:14</li></ul>
と記述すれば下のようになります。
<ol type="行頭文字"><li>〜</li></ul>
で行頭文字つきのリストを表示できます。
- 行頭文字が『数字』はtype="1"
type="1"は省略できます- 行頭文字が『abc』はtype="a"
- 行頭文字が『ABC』はtype="A"
- 行頭文字が『小文字のローマ数字』はtype="i"
iは小文字のiで入力します。- 行頭文字が『大文字のローマ数字』はtype="I"
Iは大文字のIで入力します。
<ol type="1">
<li>「その選手 試合したれば テレビなり」
うさも - 2006/06/24 13:34:56</li>
<li>「友達に ブログされたし 同士だね」
うさも - 2006/06/24 13:34:28</li></ol>
と記述すれば下のようになります。
<ol type="a">
<li>「大会に 見ていたのです 西ドイツ」
うさも - 2006/06/24 13:32:41</li>
<li>「エアコンに 使用したれば 画像なり」
うさも - 2006/06/22 14:17:08</li></ol>
と記述すれば下のようになります。
<ol type="A">
<li>「衝撃を 管理されたる 種類かも」
うさも - 2006/06/21 11:00:34</li>
<li>「条件や 代表すると ベッドかも」
うさも - 2006/06/20 20:25:20</li></ol>
と記述すれば下のようになります。
<ol type="i">
<li>「飼い主を 見ていたのです 日記かも」
うさも - 2006/06/20 13:15:17</li>
<li>「このコチで 進出したら 相手かな」
うさも - 2006/06/19 21:24:55</li></ol>
と記述すれば下のようになります。
<ol type="I">
<li>「このママが 訪問したら クロアチア」
うさも - 2006/06/19 21:24:38</li>
<li>「会員や 発表したる 選手なり」
うさも - 2006/06/19 21:04:05</li></ol>
と記述すれば下のようになります。
ぽちっと応援お願いします♪ m(_ _)m 
≪New 七夕伝説♪ | Top | 夢の日本を目指して＝JAPAN EXPO＝ Old≫
トラックバックURL
トラックバック
≫ インデントのつけ方 from 果報は寝て待て(-_☆)
別にテンプレートのカスタムってワケではナイのですが、覚え書きってコトでココに分類しておこうと思うのが、『Ｐａｖがいっつも忘れてしまうインデントのつけ方☆』です(ﾟ▽ﾟ；)(笑)毎度、お世話になっているyozoさんトコでそのタグが掲載されていたので、ＴＢさせていた� [Read More]
コメント
こんなにいろんな種類があったとは!!
英語バージョン、ローマ数字バージョンなどもあるのですね!!
また箇条書きにすることがあったらこちらを参考にさせて
いただきますね♪(*^-^)ﾆｺ
Posted by まゆび at 2006.07.06 20:06 | edit
コメント
Posted by sorahinamama at 2006.07.06 20:32 | edit
コメント
わぁ〜〜、なんかすごいです！
感動してます(*^^*) ァハ
綺麗にそろった箇条書きができるんですね(^^)
見やすさ（読みやすさ）が、全然ちがいます。
タグが使えるなんて ありがとうございます＾＾
Posted by ゆうゆ at 2006.07.06 20:34 | edit
コメント
enuはまず、、、インデントって何ーーー？？？から。。。アハハ。
ちゃんと調べてきたよん。
最近分からない事そのままにしないようにしてるんだー。
ほんとわかんなかったらyozoちゃんにhelpだねー♪うふふ。お世話になりまっす。
ほーー。箇条書きの時はこれいいかも♪
なるほど。
本当勉強になるよ・・・。
あれしよう。これしようと思ったらまずやってみることだねー♪
スクロールバーも出来たしね♪
いつもありがとうねー。
Posted by enu50430 at 2006.07.06 20:50 | edit
コメント
確かに箇条書きって使いますよねー。
「・」だけじゃなく、□とか数字とか、色んなのが使えたら
用途も広がりますもんね。
箇条書きもコレでらくちんなんですねっ。
ほんと勉強になりますー。
Posted by mixbabar at 2006.07.06 21:54 | edit
コメント
＞こんなにいろんな種類があったとは!!
＞英語バージョン、ローマ数字バージョンなどもあるのですね!!
ふふふ・・・面白いでしょ。とりあえず今回はタグだけで、いろんな行頭を楽しんでもらおうってことで（笑）
お役に立てそうですね。(o^∇^o)ﾉ
次はこれにCSSで画像を自由に入れるって・・・楽しそうでしょ。
Posted by yoblog at 2006.07.06 22:16 | edit
コメント
＞こんばんわ！いつもながらホントに勉強になります〜！
ありがとーございまっす♪箇条書きの時には本当に便利ですよ。
順番が変わったら自動採番ですからね。(ﾟﾟ)(｡｡)(ﾟﾟ)(｡｡)ｳﾝｳﾝ
＞まだマウス買ってないんですけど＾＾；
あらら・・・マウスないと大変ですよね（苦笑）
使いやすいマウスを選んでくださいね(^○^)
Posted by yoblog at 2006.07.06 22:19 | edit
コメント
＞わぁ〜〜、なんかすごいです！感動してます(*^^*) ァハ
＞綺麗にそろった箇条書きができるんですね(^^)
そうなんですよ。文字だけだとなかなかきれいにレイアウトできないですもんね。CSSほどではありませんが、タグでも結構使い道ありますよ。
＞見やすさ（読みやすさ）が、全然ちがいます。
＞タグが使えるなんて ありがとうございます＾＾
いやぁ〜♪お役に立ててうれしいですよ（笑）(▼-▼*) ｴﾍ♪
Posted by yoblog at 2006.07.06 22:22 | edit
コメント
ほぉ〜φ(･ω･*)ﾌﾑﾌﾑφ(｡_｡*)ﾒﾓﾒﾓ
こういう技もあるんですねぇ。沢山行がまたがる場合や
項目が多い場合はとても便利に使えそうですね♪
「☆」とか「♪」も使えてしまうんだろうか・・・って
あとでやってみようw ﾑﾌｯ
勉強になりました。ありがとうございまーす(｡･ω･｡)ゞピッ♪
Posted by モンビッケ at 2006.07.06 22:25 | edit
コメント
＞enuはまず、、、インデントって何ーーー？？？から。。。アハハ。
あら？えーと文の先頭揃えのことですよ。
って自分で調べたんですね。y(^ｰ^)yﾋﾟｰｽ!
＞最近分からない事そのままにしないようにしてるんだー。
それは感心ですね。というか大分慣れてきて、言葉なんて知らないだけなんだって思えるようになったのでしょうね。yozoも当然知らないことは調べまくってますよ（苦笑）(￣皿￣)うしししし♪
＞ほんとわかんなかったらyozoちゃんにhelpだねー♪うふふ。
あはは・・・ＯＫ！ＯＫ！頼りないけど・・・（笑）(｡･ｗ･｡ ) ﾌﾟﾌﾟｯ
＞あれしよう。これしようと思ったらまずやってみることだねー♪
レシピのときの採番に役に立ちますよ。順番を変えたら、自動的に番号も変わるからやめられませんね。(*^0ﾟ)v ィエーイ☆彡
Posted by yoblog at 2006.07.06 22:28 | edit
コメント
＞確かに箇条書きって使いますよねー。
そうなんですよ。yozoは特に頼ってますからね。(ﾟдﾟ)(｡_｡)ｳﾝ!
順番をやり変えたりするときに、この自動採番はとっても重宝です。
＞「・」だけじゃなく、□とか数字とか、色んなのが使えたら
＞用途も広がりますもんね。
ふふふ・・・自分で画像を入れたい！というのは、CSSで設置します。
それはまた後日ということで。（笑）ﾆｬﾊﾊ(*^▽^*)
＞箇条書きもコレでらくちんなんですねっ。ほんと勉強になりますー。
お役に立ててうれしいでっす♪
使ってみてくださいね（笑）(*^-ﾟ)vｨｪｨ♪
Posted by yoblog at 2006.07.06 22:32 | edit
コメント
＞こういう技もあるんですねぇ。沢山行がまたがる場合や
＞項目が多い場合はとても便利に使えそうですね♪
そうなんですよ。順番を変えても、自動採番ですから、勝手に
変えてくれますよ。味をしめたら、やめれません！（｀ー´）ｲﾋﾋ
＞「☆」とか「♪」も使えてしまうんだろうか・・・
あはは・・・タグだけじゃここまでですよ。あとはCSSで自分の使いたい画像を設定すると何でも使えますよ。( =�・忰�=)ﾌﾌﾌ
＞勉強になりました。ありがとうございまーす(｡･ω･｡)ゞピッ♪
とんでもないですよ。お役に立ててなによりです。(*´∇｀*)
Posted by yoblog at 2006.07.06 22:37 | edit
コメント
あの時、cssでやらなくちゃ・・って思って縁遠かったのに上手く反映されなくて、タグで表示できた時はうれしかったわ。
タグって覚えればどこにでも使えていいなぁって思いました。
こんかいのも場所を選ばないのですよね?!
画像はどうかな？って思ったら、コメントにてどうやらcssは逃れられないようですね（＾＾；
Posted by ととろ at 2006.07.06 22:56 | edit
コメント
ホー、そういうことが出来るなんて知りませんでした(*'0'*)
たくさん、箇条書きする時には、楽でしょうね。
この間のスクロールは、役立ちましたし、他の人達にも、褒められたし嬉しい限りです。これからも、色々教えてくださいm(_ _)m
Posted by ネーちゃん at 2006.07.06 23:08 | edit
コメント
(ﾉ゜о゜)ﾉ おおぉぉぉっっ！！
インデントのタグだ！！
いやぁ〜〜、いざ使おうと思うといつも忘れちゃってて使えないのがコレなんですよ(笑)
で、いつも調べようと思いつつも放置してたのもコレってコトで(￣∀￣；)
最近ではリアルに箇条書きで、「一行で完結！！」を目指して苦労が耐えなかったので、大変助かりました(・∀・；)←だからいつまでたっても覚えられずにいる失敗例(爆)
Posted by Ｐａｖ at 2006.07.07 00:24 | edit
コメント
＞先日の「記事中にスクロールバー」に続きタグシリーズですね！
CSSはやっぱり面倒ですからね。タグでは行頭マークが３種類しかないので、どうしても自分の好きな画像を使いたいとなりますよね。自然とCSSをしたくなるのでは・・・という誘導なんですけど（爆）
CSSに慣れてもらうのと、CSSよりも手っ取り早く使えるテクという
2本立ての紹介にするつもりですよ。(*^-^)ﾆｺ
＞画像はどうかな？って思ったら、コメントにてどうやら
＞cssは逃れられないようですね（＾＾；
また、スクロールバーのときのように、
CSSを含んだタグも紹介しますよ（笑）o(*^▽^*)oｴﾍﾍ!
むしろ画像を探してアップロードの説明との連動を考えていますよ♪
Posted by yoblog at 2006.07.07 08:12 | edit
コメント
＞ホー、そういうことが出来るなんて知りませんでした(*'0'*)
ちょっとしたことなんですが、文字だけの記事よりも、グッとしまった感じになると思いますよ。yozoはセンスがないんで、紹介してもイマイチですが、ネーちゃんさんなら、上手に使えそうですね♪(*'-'*)ｴﾍﾍ
＞この間のスクロールは、役立ちましたし、
＞他の人達にも、褒められたし嬉しい限りです。
いやぁ〜♪お役に立ててうれしいですよ♪
これからも、ネタがあれば記事にしていくようにしますね。(＾▽＾)/
Posted by yoblog at 2006.07.07 08:17 | edit
コメント
＞いやぁ〜〜、いざ使おうと思うといつも忘れちゃってて
＞使えないのがコレなんですよ(笑)
あはは・・・実際yozoも使ってみると、意外に便利なので、どんどん
ハマっちゃったというのが実情ですよ（笑）(ﾟｰﾟ)(｡_｡)ｳﾝｳﾝ
＞最近ではリアルに箇条書きで、「一行で完結！！」を目指して
＞苦労が耐えなかったので、大変助かりました(・∀・；)
あはは・・・確かに無理に一行にしなきゃ、2行目が変になっちゃいますもんね。良くわかりますよ。リストタグ必須ですよね！(*^-^)ﾆｺ
お役に立ててうれしいでっす m(_ _)m
Posted by yoblog at 2006.07.07 08:33 | edit
コメント
へえ〜！こんなすごいことが出来るんですねー！
今まで箇条書きでの頭あわせ（たいしてしてないんですけどね）にとても苦労していたので自分のブログの投稿欄で何度も練習しちゃいました。
「おおー！」とか「わおー！」とか思わず声が出てしまいましたよ（笑）。
私も今回はちゃ〜んと「インデント」調べてから来ましたよー。
自分でもそんなことするようになって「おりこうさん」になったと思います（＾＾）。
難しくてついていけないことが多いんですがそれなりに頑張りまっす♪
Posted by aiwhas at 2006.07.08 09:04 | edit
コメント
＞へえ〜！こんなすごいことが出来るんですねー！
そうなんですよ。便利でしょ。一度使っちゃうと
病みつきになっちゃいますよ〜（笑）(ﾟｰﾟ)(｡_｡)(ﾟ-ﾟ)(｡_｡)ｳﾝｳﾝ
本当に箇条書きを手書きでするのは、大変ですからね。
特に一項目が、２行以上になると、
ぐちゃぐちゃになっちゃいますもんね。┐( -"-)┌ﾔﾚﾔﾚ...
＞私も今回はちゃ〜んと「インデント」調べてから来ましたよー。
自分で調べて解決するというのが出来れば、ストレスが激減しますよね。時間がかかりますけど、それは決してムダではない！って思ってやれるかどうかでしょうね。みんなで助け合って、わからないことは解決しよう！というのがネットの良いところでしょうから。(*^-^)ﾆｺ
＞難しくてついていけないことが多いんですが
＞それなりに頑張りまっす♪
ふふふ・・・aiwhasさんの「それなりに」というのは、本当に気合の入った頑張りのことですからね。難しかったら遠慮なく尋ねてくださいね。yozoにとっても、勉強になるのですからね。(o^-^o) ｳﾌｯ
Posted by yoblog at 2006.07.08 10:04 | edit
コメント
リスト表示もタグでちょちょいと出来ちゃうんですねぇ！
これは便利かも♪レシピ表示とかにぴったりですね(*'▽')
CSSで設定すると、ブログ内すべてに適用されてしまうのがちょっとイヤで
リストの設定はしていなかったのですが、これは記事内だけに反映するのが
とっても使い心地良さそうです。
でも画像でリスト、はCSSじゃないとダメなのねぇ；ちょっと残念ｗ
Posted by mio at 2006.07.08 13:55 | edit
コメント
＞リスト表示もタグでちょちょいと出来ちゃうんですねぇ！
＞これは便利かも♪レシピ表示とかにぴったりですね(*'▽')
そうですよ♪とっても便利です。一度使うとハマちゃいますよ（笑）
＞でも画像でリスト、はCSSじゃないとダメなのねぇ；ちょっと残念ｗ
タグの中にスタイルを埋め込んでその都度スタイルを定義するのを
試してみて、簡易版といことで記事にできたらいいなぁって
たくらんでいるんですよ。そのときだけ使うリストということで。（笑）
Posted by yoblog at 2006.07.08 14:03 | edit
コメント
こちらのリスト表示、早速使わせていただきましたよ♪
例のバトン記事内に・・・やっぱり画像を使ってみたかったので
結局CSSいじっちゃいましたけどね(笑)
とっても参考になりました！どうもありがとうございました<(_ _*)>
Posted by mio at 2006.07.09 10:56 | edit
コメント
何度でも遊びに来てくださっていいですよ。大歓迎でっす m(_ _)m
＞こちらのリスト表示、早速使わせていただきましたよ♪
＞例のバトン記事内に・・・やっぱり画像を使ってみたかったので
＞結局CSSいじっちゃいましたけどね(笑)
かわいらしい、双葉（？）でしたね。とってもいい感じでした。(*^o^)
classを設定したのですね。yozoも見本の画像をさがしてます。
ここの記事タイトルの画像探しのついでにですけどね。（笑）
とりあえずお役に立てたようでうれしいですよｖ(o￣∇￣o) ﾔﾘｨ♪
Posted by yoblog at 2006.07.09 12:59 | edit
コメント
こんなコトばっかやってるから身につかないんですよね〜・・・
わかってはいるんですが(￣∀￣；)(笑)
Posted by Ｐａｖ at 2006.07.09 22:49 | edit
コメント
トラバありがとーございまっす m(_ _)m
たった今、お邪魔させていただきました。リストタグのメモを記事にしておけば、いつでも忘れてしまったときに思い出せますよね。便利だと思いますよー♪o(*^▽^*)oｴﾍﾍ!
＞こんなコトばっかやってるから身につかないんですよね〜・・・
＞わかってはいるんですが(￣∀￣；)(笑)
いえいえ♪要するに使えるようになればいいわけですからね。
yozoも忘れたタグは本を見てますよ。（笑）
こういうことをするためのタグがある！っていうことだけは
忘れないように注意してます♪(ﾟдﾟ)(｡_｡)ｳﾝ!
Posted by yoblog at 2006.07.10 08:33 | edit
コメント
こちらこそＴＢありがとうございました。
私も昔は使っていたバイブル(タグ本)がありますが、今では飾り以下の扱いを受けており、すっかりホコリかぶってます(爆)
知ってるつもりで忘れているコトもカナリあるので、たまには開いてみるコトも必要ですね(・∀・；)
あとドンドン使うに限る・・ってコトでしょうか？！(笑)
Posted by Ｐａｖ at 2006.07.10 11:03 | edit
コメント
＞私も昔は使っていたバイブル(タグ本)がありますが、今では
＞飾り以下の扱いを受けており、すっかりホコリかぶってます(爆)
あらら・・・yozoは愛用しているHTML・CSS・JSの辞典があります。
つまったらすぐ見るようにしていますよ。便利ですね。それを見て、
さらにググってます（笑）(^ー^* )ﾌﾌ♪
＞知ってるつもりで忘れているコトもカナリあるので、
＞たまには開いてみるコトも必要ですね(・∀・；)
そうかもしれませんね。o(*^▽^*)oｴﾍﾍ!
改めて「そんな使い方があるのだなぁ〜」って思うことがありますよね。
お友達から質問されて、調べていたら「ほぅ」っていうのも多いですよ。
Posted by yoblog at 2006.07.10 13:38 | edit
コメント
こんなトコでいいのかどうかと迷ったのですが、質問させてもらってもいいですか？
(って、質問する気なんですが・・・)
箇条書きのマーカー指定が上手くいかないのです。
＜ul type="none"＞や＜li type="none"＞ではマーカーなしに指定できないのでしょうか？
ＣＳＳで『ul {list-style-type:none}』と指定しても反映されなかったのですが、私は何か根本的に考え方が間違ってるんでしょうか？
何かアドバイスいただけたらと思いますが、一方的な質問なので問題あれば削除もしくはスルーして下さい！！(＞＜；)
Posted by Ｐａｖ at 2006.07.18 14:15 | edit
コメント
＞質問させてもらってもいいですか？
関連事項でしたらここで構いませんよ♪遠慮なくどうぞ♪
ただし、わかんないかもしれませんが（苦笑）(^○^)
＞マーカーなしに指定できないのでしょうか？
CSSコードで、
ul {list-style-type:none;}
としてください。行の最後の「;」を入れてみてくださいね。
１行なら「;」は省けるはずなんですが、エラーになることもあります。
それでもダメなら、ちょっと乱暴かもしれませんが、
marginを0にして非表示にしてはどうかと思います。
CSSでul{margin-left:0px;}とやってみてくださいね。
これで、うまくいけばいいんですけどね。(⌒・⌒)ゞお試しあれ。
Posted by yoblog at 2006.07.18 19:15 | edit
コメント
「；」、すっかり忘れてました(￣∀￣；)
「あれ〜〜っっ？！？！」
「なんでだぁ〜〜っっ？！？！」
って１人で煮詰まってて全く気がついてませんでした。
yozoさんのコメントで我に返って「あぁ、やっぱり・・・（￣▽￣；）」といった具合でした。
あ、おかげで無事にマーカーなしで指定できましたよ。
ホントにありがとうございました(/▽＼)
でもおかげでmargin：0pxだなんて荒業(？)を知るコトができました。
私には全くなかった発想なので、思わず試してみたくなってテンプレートで遊んでました(笑)
Posted by Ｐａｖ at 2006.07.19 00:06 | edit
コメント
＞ひ・・ひじょーにお恥ずかしいハナシでして・・・「；」、
＞すっかり忘れてました(￣∀￣；)
あらら・・・もしかしたら、「；」(セミコロン)でＯＫでしたか？
よかったですね。HTMLやCSS、JSはまだまだ不完全タグも動くという
未完成なものと聞いたことがあります。ほんのちょっとしたことで、うまくいかないことって多いのですよね。（苦笑）(ﾟ-ﾟ*)(｡｡*)ｳﾝｳﾝ
＞でもおかげでmargin：0px
＞だなんて荒業(？)を知るコトができました。
ふふふ・・・実は、これはFC2ブログで行頭マークがでなくて困ったことがあったんですよ。それがmargin-left:0px;でしたね。yozoは逆でしたけどね。ここを20pxくらいで設定したと思います。本当に何が役に立つのかわかんないものですね♪(o^-^o) ｳﾌｯ
Posted by yoblog at 2006.07.19 00:28 | edit
コメント
この記事を参考に、先日リストを作成し直しましたよ(^^♪
遅くなりましたが、使用報告させて頂きました☆彡
Posted by ろんちゃん at 2006.07.25 11:10 | edit
コメント
＞この記事を参考に、先日リストを作成し直しましたよ(^^♪
＞遅くなりましたが、使用報告させて頂きました☆彡
できましたか！さっすがですね。簡単便利だったでしょ。
お役に立ててうれしいですよ (*^-^)
使用報告してくださってありがとーございまっす。
とても励みになりますよー♪m(_ _)m
Posted by yoblog at 2006.07.25 13:40 | edit