2

私は、ユーザーによって配置されたコメントの垂直に積み重ねられたリストを表示するWebサイトを構築しています。テキストは、基本的にユーザーの名前を表示するふきだしに表示され、テキストの下に表示され、最後にふきだしのフッターに表示され、2つのリンクが表示され、右側にタイムスタンプが表示されます。

デザイン/レイアウトは私のものではないので、純粋なCSS（要件）でこれを達成するのに少し苦労し、リストを非常にきれいに表示することができました。そのために、私はグーグルとツイッターが彼らのビデオとツイートを表示するために使用するCSSを研究し、そこからいくつかの有用なものを抽出しようとしました。しかし、私は彼らのCSSとHTMLが巨大であることに気づき、彼らがそれを「正しい」方法で行ったのか、それともすべてのタイプのデバイスでうまく表示するための唯一の可能性であると彼らが知ったのか疑問に思っています。（誰かがそれを明らかにすることができますか？）結論は、それは私にとってあまり役に立たなかったということです。

ただし、結果は気分が悪く、非常に「感動的」です（まったく柔軟性がありません）。たとえば、ウィンドウのサイズを変更したり、タブレットでページを開いたりすると、見た目が悪くなります。テキストブロックがラップされ、アバター画像の下に表示されます。

質問1：私が言ったように、私は大きなサイト（YouTube、Twitter、FaceBookなど）がどのように同様のことをしているのかを見て/勉強してきました。HTML/CSSは私の意見では少し厄介に見えます。その考え/意見を共有している人はいますか？

質問2：誰かが私に良い出発点を提供できますか？つまり、次のHTML / CSSの例（できればJSFiddleなど）を教えてください。

ここに画像の説明を入力してください

いくつかの意見：

  • 画像は使用しないでください（アバター画像のオフコースから期待してください）
  • テーブルは使用しないでください。Divおよび/またはHTML-5のセメンティックス（ヘッダー、フッター、記事など）のみ
  • CSS / HTMLレイアウトは、適切に調整できる柔軟性を備えている必要があります。画像では、さまざまなシナリオでどのように表示したいかを確認できます。
  • IE、FireFox、Safari、Chromeの最新バージョンでうまく表示されるはずです。
4

1 に答える 1

4

次のマークアップが与えられます：

<div class="wrap">
    <img src="http://davidrhysthomas.co.uk/img/dexter.png" />
    <div class="comment" data-owner="Dexter">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lacus lacus, blandit sit amet iaculis sodales, eleifend ut massa. Mauris arcu felis, facilisis sed bibendum et, tristique tincidunt dolor. Cras a hendrerit nisl. Maecenas accumsan, urna at aliquam blandit, ipsum erat pellentesque urna, et interdum mauris lacus et tellus.</p>
        <ol class="postscript"> <!-- links and timestamp -->
            <li><a href="#">link 1</a></li>
            <li><a href="#">link 2</a></li>
            <li class="date">3 days ago</li>
        </ol>
    </div>
</div>​

そして次のCSS：

div.wrap {
    width: 90%;
    margin: 0 auto 1em auto;
    position: relative; /* the image will be absolutely-positioned relative to this */
}

div.wrap:first-child {
    margin-top: 1em; /* just for aesthetic reasons, adjust or remove, to taste */
}

div.comment {
    font-size: 1em;
    position: relative; /* the arrow on the left side of the div positioned relative to this element */
    margin-left: 60px; /* allows a 10px gutter for the arrow to fit into */
    border-radius: 0.75em 0.75em 0.75em 0.75em;
    background-color: #ccc;
    line-height: 1.4em;
    font-family: Helvetica; /* or whatever... */
}

div.comment::before { /* requires a fairly modern browser */
    content: attr(data-owner); /* displays the name of the comment-owner */
    border-radius: 0.75em 0.75em 0 0;
    background-color: #ccc;
    display: block;
    text-indent: 10%; /* adjust to taste */
    border-bottom: 3px solid #999;
}

div.comment::after { /* again, requires a fairly modern browser */
    content: ''; /* this property is necessary, even if only an empty string */
    position: absolute;
    top: 50%;
    left: 0;
    border: 10px solid transparent;
    border-right: 10px solid #ccc; /* forms the 'arrow' */
    margin: -10px 0 0 -20px;
}

div.comment p { /* or whatever, adjust to taste */
    width: 80%;
    margin: 0 auto 1em auto;
    padding-bottom: 1em;
}

img {
    position: absolute;
    top: 50%;
    width: 50px;
    float: left;
    border-radius: 10px;
    margin-top: -25px;
}​

p + ol.postscript {
    width: 80%;
    font-size: 0.8em;
    margin: -0.5em auto 0 auto;
}
ol.postscript::after {
    content: '';
    height: 0.5em;
    display: block;
    clear: both;
}
ol.postscript li {
    float: left;
    margin-right: 0.5em;
}
ol.postscript li.date {
    float: right;
    margin-right: 0;
}

.wrap a:link,
.wrap a:visited {
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #333;
}

.wrap a:hover,
.wrap a:active,
.wrap a:focus {
    color: #f00;
    border-bottom: 1px solid #f00;
}​

JSフィドルデモ。

左下の有効なコメントに応じて編集：

  • スクリーンリーダーが属性を読み取ることはないと思います。つまり、データ所有者のコンテンツを属性ではなく、独自の要素内に配置する方がよいでしょう。

  • 1つのクイブル（上記のとおり）[スクリーンリーダーはCSSで生成されたコンテンツを読みません]（1つのクイブル（上記のとおり）スクリーンリーダーはCSSで生成されたコンテンツを読みません。コメントの作成者は、必要不可欠なコンテンツの一部であるように思われます。スクリーンリーダーのユーザーがアクセスできます。）そしてコメントの作成者は、スクリーンリーダーのユーザーがアクセスできる必要のある重要なコンテンツのようです。

健全なアドバイスを与えられて、私は.comment::before要素を置き換え、離散を追加しましたh2：

<div class="wrap">
    <img src="http://davidrhysthomas.co.uk/img/dexter.png" />
    <div class="comment" data-owner="Dexter">
        <h2 class="owner">Dexter</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lacus lacus, blandit sit amet iaculis sodales, eleifend ut massa. Mauris arcu felis, facilisis sed bibendum et, tristique tincidunt dolor. Cras a hendrerit nisl. Maecenas accumsan, urna at aliquam blandit, ipsum erat pellentesque urna, et interdum mauris lacus et tellus.</p>
        <ol class="postscript">
            <li><a href="#">link 1</a></li>
            <li><a href="#">link 2</a></li>
            <li class="date">3 days ago</li>
        </ol>
    </div>
</div>

.comment::before（元のCSSの代わりに）次のCSSを追加しました。

div.comment p {
    width: 80%;
    margin: 0 auto 1em auto;
}

JSフィドルを改訂。

于 2012-04-28T22:03:37.357 に答える