リストで添付画像のような表現がしたいのですが、liとliの要素の間にボ

質問

リストで添付画像のような表現がしたいのですが、liとliの要素の間にボーダーを挟むのと、
日付と、テキストの間をそろえて隙間を空けるのにスタイルをどのように適用したらよいのかよくわかりません。ほかのページのソースを見ると<span>をつかってclassでなにか設定していることはわかるのですが、cssソースはみれないので、こまっています。
ほぼ独学に近い形でスタイルの勉強をしているためわかりません。
どなたかわかるかたがいたらおしえてください。お願いします。

回答No.2

abril · ベストアンサー

更新履歴等で頻繁に使われるスタイルですね。
ケースバイケースですが、dl, ul, tableあたりでマークアップしているものがほとんどだと思います。

直感的にレイアウトがイメージしやすいのはtable（thに日付、tdに内容）だと思いますが、やはり、内容を「リスト」と捉えて、dlもしくはulを使うパターンが多いでしょう。リストタグでマークアップする場合に注意しなければならないのは、”内容”は、複数行になる場合の事を考慮して、”日付”の下に回り込まない様にスタイルを設定するという点です。

下記にリストタグでマークアップする場合の色々なサンプルが載っていますので、ご覧になってみては。
※ちなみにこのサイトは、CSSを理解しスキルを身に付けて行く上で、とてもお役立ちな、勉強になるサイトだと思います。
【参考】http://css-happylife.com/log/css-template/000172.shtml

そういえば、

> ほかのページのソースを見ると<span>をつかってclassでなにか設定していることはわかるのですが、cssソースはみれないので、こまっています。

…もう見れる様になりましたよね？↓
http://okwave.jp/qa/q5909968.html

参考サイトは確かにとても役に立ちますが、「何をやっているのか」「どうしてこうなるのか」という理屈を一つ一つ理解しながら進んで行かないと、ただ単に便利なTipsの類をその都度丸コピーして見よう見まねで当てはめて行っても、応用力や環境（OS、ブラウザ、DOCTYPE等）の差異に対応できるスキルも身につきません。CSSの仕様を随時確かめながら、一つ一つ積み重ねて頑張って下さい。

お礼

abrilさんどうもありがとうございます。
私の質問に何回も答えていただいてありがたいです。
はい、サイトのcssは見られるようになりました。
自分なりにいろいろとコーディングしているうちに、壁にぶつかっては、よく調べたり考えたりしてみると、ものすごく基本的なことがきちんと理解できていないことがよくわかります。
そうですね、cssのソースをそのままコピーするのではなくどうしてそうなるのかよく考えて学習したいと思います。

回答No.1

SAYKA

ボーダーを挟むのは色々やり方が有るけれど、簡単にはliのboxの底辺だけborderを指定じゃないかな。

揃えるのはli中にblockを2つfloat:leftで配置して左側は固定幅(8～10emくらい？)ってやり方が妥当だと思う。

お礼

回答ありがとうございます。
早速ためしてみます。ひとりでやっているとわからないことだらけで本当に助かります。

補足

たいへんあつかましいとは思うのですが、できればcssのソースのお手本のような感じのものがあればありがたいのですが、、、。
自分で探せばといわれればそれまでなんですが、なかなかうまくできないんです。