--年--月--日

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2006年07月06日

リストを表示しましょう♪

yozoはブログの記事で箇条書きを多用しています。行頭に「数字」、「abc」、「・」などを手入力しても、問題はないのですが、箇条書きの内容が長くなって、2行になったときに、インデントをつけるのに苦労してました。
手打ちの場合(上)とリストを使った場合(下)

・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>
と記述すれば下のようになります。
  • 「このソフト 警告したら 理想かも」
      うさも - 2006/06/26 07:00:25

  • 「背景に 発表すれば モンビッケ」
      うさも - 2006/06/25 16:22:23


<ul type="circle">
<li>
「この絵かき 導入される エンジニア」
  うさも - 2006/06/25 12:17:47</li>
<li>
「会員に 思っています もみじだね」
  うさも - 2006/06/25 12:16:05</li></ul>
と記述すれば下のようになります。
  • 「この絵かき 導入される エンジニア」
      うさも - 2006/06/25 12:17:47

  • 「会員に 思っています もみじだね」
      うさも - 2006/06/25 12:16:05


<ul type="square">
<li>
「情報を 切り替わります クロアチア」
  うさも - 2006/06/24 13:43:29</li>
<li>
「全力を リンクされたし 美しい」
  うさも - 2006/06/24 13:41:14</li></ul>
と記述すれば下のようになります。
  • 「情報を 切り替わります クロアチア」
      うさも - 2006/06/24 13:43:29

  • 「全力を リンクされたし 美しい」
      うさも - 2006/06/24 13:41:14


<ol type="行頭文字"><li>?</li></ul>
で行頭文字つきのリストを表示できます。

  1. 行頭文字が『数字』はtype="1"
    type="1"は省略できます

  2. 行頭文字が『abc』はtype="a"

  3. 行頭文字が『ABC』はtype="A"

  4. 行頭文字が『小文字のローマ数字』はtype="i"
    iは小文字のiで入力します。

  5. 行頭文字が『大文字のローマ数字』はtype="I"
    Iは大文字のIで入力します。


<ol type="1">
<li>
「その選手 試合したれば テレビなり」
  うさも - 2006/06/24 13:34:56</li>
<li>
「友達に ブログされたし 同士だね」
  うさも - 2006/06/24 13:34:28</li></ol>
と記述すれば下のようになります。
  1. 「その選手 試合したれば テレビなり」
      うさも - 2006/06/24 13:34:56

  2. 「友達に ブログされたし 同士だね」
      うさも - 2006/06/24 13:34:28


<ol type="a">
<li>
「大会に 見ていたのです 西ドイツ」
  うさも - 2006/06/24 13:32:41</li>
<li>
「エアコンに 使用したれば 画像なり」
  うさも - 2006/06/22 14:17:08</li></ol>
と記述すれば下のようになります。
  1. 「大会に 見ていたのです 西ドイツ」
      うさも - 2006/06/24 13:32:41

  2. 「エアコンに 使用したれば 画像なり」
      うさも - 2006/06/22 14:17:08


<ol type="A">
<li>
「衝撃を 管理されたる 種類かも」
  うさも - 2006/06/21 11:00:34</li>
<li>
「条件や 代表すると ベッドかも」
  うさも - 2006/06/20 20:25:20</li></ol>
と記述すれば下のようになります。
  1. 「衝撃を 管理されたる 種類かも」
      うさも - 2006/06/21 11:00:34

  2. 「条件や 代表すると ベッドかも」
      うさも - 2006/06/20 20:25:20


<ol type="i">
<li>
「飼い主を 見ていたのです 日記かも」
  うさも - 2006/06/20 13:15:17</li>
<li>
「このコチで 進出したら 相手かな」
  うさも - 2006/06/19 21:24:55</li></ol>
と記述すれば下のようになります。
  1. 「飼い主を 見ていたのです 日記かも」
      うさも - 2006/06/20 13:15:17

  2. 「このコチで 進出したら 相手かな」
      うさも - 2006/06/19 21:24:55


<ol type="I">
<li>
「このママが 訪問したら クロアチア」
  うさも - 2006/06/19 21:24:38</li>
<li>
「会員や 発表したる 選手なり」
  うさも - 2006/06/19 21:04:05</li></ol>
と記述すれば下のようになります。
  1. 「このママが 訪問したら クロアチア」
      うさも - 2006/06/19 21:24:38

  2. 「会員や 発表したる 選手なり」
      うさも - 2006/06/19 21:04:05



ぽちっと応援お願いします♪ m(_ _)m  人気blogランキング

スポンサーサイト

スレッドテーマ:カスタマイズ:ブログ

メイン

≪New 七夕伝説♪ | Top | 夢の日本を目指して=JAPAN EXPO= Old≫

トラックバックURL


コメント

yozoさん、こんばんは♪ヽ(=´▽`=)ノ
こんなにいろんな種類があったとは!!
英語バージョン、ローマ数字バージョンなどもあるのですね!!
また箇条書きにすることがあったらこちらを参考にさせて
いただきますね♪(*^-^)ニコ

コメント

こんばんわ!いつもながらホントに勉強になります~!まだマウス買ってないんですけど^^;箇条書きにする時は使わせてもらいます。

コメント

yozoさん、こんばんは^^
わぁ~~、なんかすごいです!
感動してます(*^^*) ァハ
綺麗にそろった箇条書きができるんですね(^^)
見やすさ(読みやすさ)が、全然ちがいます。
タグが使えるなんて ありがとうございます^^

コメント

こんばんはー。yozoちゃん。
enuはまず、、、インデントって何ーーー???から。。。アハハ。
ちゃんと調べてきたよん。
最近分からない事そのままにしないようにしてるんだー。
ほんとわかんなかったらyozoちゃんにhelpだねー♪うふふ。お世話になりまっす。
ほーー。箇条書きの時はこれいいかも♪
なるほど。
本当勉強になるよ・・・。
あれしよう。これしようと思ったらまずやってみることだねー♪
スクロールバーも出来たしね♪
いつもありがとうねー。

コメント

こんばんはー。
確かに箇条書きって使いますよねー。
「・」だけじゃなく、□とか数字とか、色んなのが使えたら
用途も広がりますもんね。
箇条書きもコレでらくちんなんですねっ。
ほんと勉強になりますー。

コメント

>まゆびさん、こんばんはー♪
>こんなにいろんな種類があったとは!!
>英語バージョン、ローマ数字バージョンなどもあるのですね!!
ふふふ・・・面白いでしょ。とりあえず今回はタグだけで、いろんな行頭を楽しんでもらおうってことで(笑)
お役に立てそうですね。(o^∇^o)ノ
次はこれにCSSで画像を自由に入れるって・・・楽しそうでしょ。

コメント

>sorahinamamaさん、こんばんはー♪
>こんばんわ!いつもながらホントに勉強になります~!
ありがとーございまっす♪箇条書きの時には本当に便利ですよ。
順番が変わったら自動採番ですからね。(゚゚)(。。)(゚゚)(。。)ウンウン
>まだマウス買ってないんですけど^^;
あらら・・・マウスないと大変ですよね(苦笑)
使いやすいマウスを選んでくださいね(^○^)

コメント

>ゆうゆさん、こんばんはー♪
>わぁ~~、なんかすごいです!感動してます(*^^*) ァハ
>綺麗にそろった箇条書きができるんですね(^^)
そうなんですよ。文字だけだとなかなかきれいにレイアウトできないですもんね。CSSほどではありませんが、タグでも結構使い道ありますよ。
>見やすさ(読みやすさ)が、全然ちがいます。
>タグが使えるなんて ありがとうございます^^
いやぁ~♪お役に立ててうれしいですよ(笑)(▼-▼*) エヘ♪

コメント

yozoさん(*・ω・)ノ~☆コンバンワ♪
ほぉ~φ(・ω・*)フムフムφ(。_。*)メモメモ
こういう技もあるんですねぇ。沢山行がまたがる場合や
項目が多い場合はとても便利に使えそうですね♪
「☆」とか「♪」も使えてしまうんだろうか・・・って
あとでやってみようw ムフッ
勉強になりました。ありがとうございまーす(。・ω・。)ゞピッ♪

コメント

>enuちゃん、こんばんはー♪
>enuはまず、、、インデントって何ーーー???から。。。アハハ。
あら?えーと文の先頭揃えのことですよ。
って自分で調べたんですね。y(^ー^)yピース!
>最近分からない事そのままにしないようにしてるんだー。
それは感心ですね。というか大分慣れてきて、言葉なんて知らないだけなんだって思えるようになったのでしょうね。yozoも当然知らないことは調べまくってますよ(苦笑)( ̄皿 ̄)うしししし♪
>ほんとわかんなかったらyozoちゃんにhelpだねー♪うふふ。
あはは・・・OK!OK!頼りないけど・・・(笑)(。・w・。 ) ププッ
>あれしよう。これしようと思ったらまずやってみることだねー♪
レシピのときの採番に役に立ちますよ。順番を変えたら、自動的に番号も変わるからやめられませんね。(*^0゚)v ィエーイ☆彡

コメント

>ばばるさん、こんばんはー♪
>確かに箇条書きって使いますよねー。
そうなんですよ。yozoは特に頼ってますからね。(゚д゚)(。_。)ウン!
順番をやり変えたりするときに、この自動採番はとっても重宝です。
>「・」だけじゃなく、□とか数字とか、色んなのが使えたら
>用途も広がりますもんね。
ふふふ・・・自分で画像を入れたい!というのは、CSSで設置します。
それはまた後日ということで。(笑)ニャハハ(*^▽^*)
>箇条書きもコレでらくちんなんですねっ。ほんと勉強になりますー。
お役に立ててうれしいでっす♪
使ってみてくださいね(笑)(*^-゚)vィェィ♪

コメント

>モンビッケさん、こんばんはー♪
>こういう技もあるんですねぇ。沢山行がまたがる場合や
>項目が多い場合はとても便利に使えそうですね♪
そうなんですよ。順番を変えても、自動採番ですから、勝手に
変えてくれますよ。味をしめたら、やめれません!(`ー´)イヒヒ
>「☆」とか「♪」も使えてしまうんだろうか・・・
あはは・・・タグだけじゃここまでですよ。あとはCSSで自分の使いたい画像を設定すると何でも使えますよ。( =①ω①=)フフフ
>勉強になりました。ありがとうございまーす(。・ω・。)ゞピッ♪
とんでもないですよ。お役に立ててなによりです。(*´∇`*)

コメント

先日の「記事中にスクロールバー」に続きタグシリーズですね!
あの時、cssでやらなくちゃ・・って思って縁遠かったのに上手く反映されなくて、タグで表示できた時はうれしかったわ。
タグって覚えればどこにでも使えていいなぁって思いました。
こんかいのも場所を選ばないのですよね?!
画像はどうかな?って思ったら、コメントにてどうやらcssは逃れられないようですね(^^;

コメント

yozoさん、こんばんわ\(^0^)/
ホー、そういうことが出来るなんて知りませんでした(*'0'*)
たくさん、箇条書きする時には、楽でしょうね。
この間のスクロールは、役立ちましたし、他の人達にも、褒められたし嬉しい限りです。これからも、色々教えてくださいm(_ _)m

コメント

yozoさん、こんばんわ☆
(ノ゜о゜)ノ おおぉぉぉっっ!!
インデントのタグだ!!
いやぁ~~、いざ使おうと思うといつも忘れちゃってて使えないのがコレなんですよ(笑)
で、いつも調べようと思いつつも放置してたのもコレってコトで( ̄∀ ̄;)
最近ではリアルに箇条書きで、「一行で完結!!」を目指して苦労が耐えなかったので、大変助かりました(・∀・;)←だからいつまでたっても覚えられずにいる失敗例(爆)

コメント

>ととろさん、おはよーございまっす♪
>先日の「記事中にスクロールバー」に続きタグシリーズですね!
CSSはやっぱり面倒ですからね。タグでは行頭マークが3種類しかないので、どうしても自分の好きな画像を使いたいとなりますよね。自然とCSSをしたくなるのでは・・・という誘導なんですけど(爆)
CSSに慣れてもらうのと、CSSよりも手っ取り早く使えるテクという
2本立ての紹介にするつもりですよ。(*^-^)ニコ
>画像はどうかな?って思ったら、コメントにてどうやら
>cssは逃れられないようですね(^^;
また、スクロールバーのときのように、
CSSを含んだタグも紹介しますよ(笑)o(*^▽^*)oエヘヘ!
むしろ画像を探してアップロードの説明との連動を考えていますよ♪

コメント

>ネーちゃんさん、おはよーございまっす♪
>ホー、そういうことが出来るなんて知りませんでした(*'0'*)
ちょっとしたことなんですが、文字だけの記事よりも、グッとしまった感じになると思いますよ。yozoはセンスがないんで、紹介してもイマイチですが、ネーちゃんさんなら、上手に使えそうですね♪(*'-'*)エヘヘ
>この間のスクロールは、役立ちましたし、
>他の人達にも、褒められたし嬉しい限りです。
いやぁ~♪お役に立ててうれしいですよ♪
これからも、ネタがあれば記事にしていくようにしますね。(^▽^)/

コメント

>Pavさん、おはよーございまっす♪
>いやぁ~~、いざ使おうと思うといつも忘れちゃってて
>使えないのがコレなんですよ(笑)
あはは・・・実際yozoも使ってみると、意外に便利なので、どんどん
ハマっちゃったというのが実情ですよ(笑)(゚ー゚)(。_。)ウンウン
>最近ではリアルに箇条書きで、「一行で完結!!」を目指して
>苦労が耐えなかったので、大変助かりました(・∀・;)
あはは・・・確かに無理に一行にしなきゃ、2行目が変になっちゃいますもんね。良くわかりますよ。リストタグ必須ですよね!(*^-^)ニコ
お役に立ててうれしいでっす m(_ _)m

コメント

yozoさん、おはようございます♪
へえ~!こんなすごいことが出来るんですねー!
今まで箇条書きでの頭あわせ(たいしてしてないんですけどね)にとても苦労していたので自分のブログの投稿欄で何度も練習しちゃいました。
「おおー!」とか「わおー!」とか思わず声が出てしまいましたよ(笑)。
私も今回はちゃ~んと「インデント」調べてから来ましたよー。
自分でもそんなことするようになって「おりこうさん」になったと思います(^^)。
難しくてついていけないことが多いんですがそれなりに頑張りまっす♪

コメント

>aiwhasさん、おはよーございまっす♪
>へえ~!こんなすごいことが出来るんですねー!
そうなんですよ。便利でしょ。一度使っちゃうと
病みつきになっちゃいますよ~(笑)(゚ー゚)(。_。)(゚-゚)(。_。)ウンウン
本当に箇条書きを手書きでするのは、大変ですからね。
特に一項目が、2行以上になると、
ぐちゃぐちゃになっちゃいますもんね。┐( -"-)┌ヤレヤレ...
>私も今回はちゃ~んと「インデント」調べてから来ましたよー。
自分で調べて解決するというのが出来れば、ストレスが激減しますよね。時間がかかりますけど、それは決してムダではない!って思ってやれるかどうかでしょうね。みんなで助け合って、わからないことは解決しよう!というのがネットの良いところでしょうから。(*^-^)ニコ
>難しくてついていけないことが多いんですが
>それなりに頑張りまっす♪
ふふふ・・・aiwhasさんの「それなりに」というのは、本当に気合の入った頑張りのことですからね。難しかったら遠慮なく尋ねてくださいね。yozoにとっても、勉強になるのですからね。(o^-^o) ウフッ

コメント

yozoさん、こんにちは♪
リスト表示もタグでちょちょいと出来ちゃうんですねぇ!
これは便利かも♪レシピ表示とかにぴったりですね(*'▽')
CSSで設定すると、ブログ内すべてに適用されてしまうのがちょっとイヤで
リストの設定はしていなかったのですが、これは記事内だけに反映するのが
とっても使い心地良さそうです。
でも画像でリスト、はCSSじゃないとダメなのねぇ;ちょっと残念w

コメント

>mioさん、こんにちはー♪
>リスト表示もタグでちょちょいと出来ちゃうんですねぇ!
>これは便利かも♪レシピ表示とかにぴったりですね(*'▽')
そうですよ♪とっても便利です。一度使うとハマちゃいますよ(笑)
>でも画像でリスト、はCSSじゃないとダメなのねぇ;ちょっと残念w
タグの中にスタイルを埋め込んでその都度スタイルを定義するのを
試してみて、簡易版といことで記事にできたらいいなぁって
たくらんでいるんですよ。そのときだけ使うリストということで。(笑)

コメント

yozoさん、こんにちは♪再びおじゃましまーす。
こちらのリスト表示、早速使わせていただきましたよ♪
例のバトン記事内に・・・やっぱり画像を使ってみたかったので
結局CSSいじっちゃいましたけどね(笑)
とっても参考になりました!どうもありがとうございました<(_ _*)>

コメント

>mioさん、こんにちはー♪
何度でも遊びに来てくださっていいですよ。大歓迎でっす m(_ _)m
>こちらのリスト表示、早速使わせていただきましたよ♪
>例のバトン記事内に・・・やっぱり画像を使ってみたかったので
>結局CSSいじっちゃいましたけどね(笑)
かわいらしい、双葉(?)でしたね。とってもいい感じでした。(*^o^)
classを設定したのですね。yozoも見本の画像をさがしてます。
ここの記事タイトルの画像探しのついでにですけどね。(笑)
とりあえずお役に立てたようでうれしいですよv(o ̄∇ ̄o) ヤリィ♪

コメント

また忘れてしまうといけないので、TBさせていただきました(゚▽゚;)
こんなコトばっかやってるから身につかないんですよね~・・・
わかってはいるんですが( ̄∀ ̄;)(笑)

コメント

>Pavさん、おはよーございまっす♪
トラバありがとーございまっす m(_ _)m
たった今、お邪魔させていただきました。リストタグのメモを記事にしておけば、いつでも忘れてしまったときに思い出せますよね。便利だと思いますよー♪o(*^▽^*)oエヘヘ!
>こんなコトばっかやってるから身につかないんですよね~・・・
>わかってはいるんですが( ̄∀ ̄;)(笑)
いえいえ♪要するに使えるようになればいいわけですからね。
yozoも忘れたタグは本を見てますよ。(笑)
こういうことをするためのタグがある!っていうことだけは
忘れないように注意してます♪(゚д゚)(。_。)ウン!

コメント

yozoさん、こんにちわ♪(゚▽゚*)
こちらこそTBありがとうございました。
私も昔は使っていたバイブル(タグ本)がありますが、今では飾り以下の扱いを受けており、すっかりホコリかぶってます(爆)
知ってるつもりで忘れているコトもカナリあるので、たまには開いてみるコトも必要ですね(・∀・;)
あとドンドン使うに限る・・ってコトでしょうか?!(笑)

コメント

>Pavさん、こんにちはー♪
>私も昔は使っていたバイブル(タグ本)がありますが、今では
>飾り以下の扱いを受けており、すっかりホコリかぶってます(爆)
あらら・・・yozoは愛用しているHTML・CSS・JSの辞典があります。
つまったらすぐ見るようにしていますよ。便利ですね。それを見て、
さらにググってます(笑)(^ー^* )フフ♪
>知ってるつもりで忘れているコトもカナリあるので、
>たまには開いてみるコトも必要ですね(・∀・;)
そうかもしれませんね。o(*^▽^*)oエヘヘ!
改めて「そんな使い方があるのだなぁ~」って思うことがありますよね。
お友達から質問されて、調べていたら「ほぅ」っていうのも多いですよ。

コメント

yozoさん、こんにちわ♪(゚▽゚*)
こんなトコでいいのかどうかと迷ったのですが、質問させてもらってもいいですか?
(って、質問する気なんですが・・・)
箇条書きのマーカー指定が上手くいかないのです。
<ul type="none">や<li type="none">ではマーカーなしに指定できないのでしょうか?
CSSで『ul {list-style-type:none}』と指定しても反映されなかったのですが、私は何か根本的に考え方が間違ってるんでしょうか?
何かアドバイスいただけたらと思いますが、一方的な質問なので問題あれば削除もしくはスルーして下さい!!(><;)

コメント

>Pavさん、こんばんはー♪
>質問させてもらってもいいですか?
関連事項でしたらここで構いませんよ♪遠慮なくどうぞ♪
ただし、わかんないかもしれませんが(苦笑)(^○^)
>マーカーなしに指定できないのでしょうか?
CSSコードで、
ul {list-style-type:none;}
としてください。行の最後の「;」を入れてみてくださいね。
1行なら「;」は省けるはずなんですが、エラーになることもあります。
それでもダメなら、ちょっと乱暴かもしれませんが、
marginを0にして非表示にしてはどうかと思います。
CSSでul{margin-left:0px;}とやってみてくださいね。
これで、うまくいけばいいんですけどね。(⌒・⌒)ゞお試しあれ。

コメント

ひ・・ひじょーにお恥ずかしいハナシでして・・・
「;」、すっかり忘れてました( ̄∀ ̄;)
「あれ~~っっ?!?!」
「なんでだぁ~~っっ?!?!」
って1人で煮詰まってて全く気がついてませんでした。
yozoさんのコメントで我に返って「あぁ、やっぱり・・・( ̄▽ ̄;)」といった具合でした。
あ、おかげで無事にマーカーなしで指定できましたよ。
ホントにありがとうございました(/▽\)
でもおかげでmargin:0pxだなんて荒業(?)を知るコトができました。
私には全くなかった発想なので、思わず試してみたくなってテンプレートで遊んでました(笑)

コメント

>Pavさん、こんばんはー♪
>ひ・・ひじょーにお恥ずかしいハナシでして・・・「;」、
>すっかり忘れてました( ̄∀ ̄;)
あらら・・・もしかしたら、「;」(セミコロン)でOKでしたか?
よかったですね。HTMLやCSS、JSはまだまだ不完全タグも動くという
未完成なものと聞いたことがあります。ほんのちょっとしたことで、うまくいかないことって多いのですよね。(苦笑)(゚-゚*)(。。*)ウンウン
>でもおかげでmargin:0px
>だなんて荒業(?)を知るコトができました。
ふふふ・・・実は、これはFC2ブログで行頭マークがでなくて困ったことがあったんですよ。それがmargin-left:0px;でしたね。yozoは逆でしたけどね。ここを20pxくらいで設定したと思います。本当に何が役に立つのかわかんないものですね♪(o^-^o) ウフッ

コメント

yozoさん、こんにちは♪
この記事を参考に、先日リストを作成し直しましたよ(^^♪
遅くなりましたが、使用報告させて頂きました☆彡

コメント

>ろんちゃんさん、こんにちはー♪
>この記事を参考に、先日リストを作成し直しましたよ(^^♪
>遅くなりましたが、使用報告させて頂きました☆彡
できましたか!さっすがですね。簡単便利だったでしょ。
お役に立ててうれしいですよ (*^-^)
使用報告してくださってありがとーございまっす。
とても励みになりますよー♪m(_ _)m

コメントする

お楽しみ:
サイト管理者にのみ通知する

チェックするとコメントプレビューがオンになります。

ご利用のブラウザ、設定ではご利用になれません。


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。