layout-headlines

echo-headlines

.echo-headline を繰り返すための領域を作成する。

.echo-container で幅を制限することが望ましいが必須ではない。

<div class="echo-headlines">

    <div class="echo-headlines-item">
        <article class="echo-headline">
            <a href="#" class="echo-headline-inner">
                <time class="echo-headline-header" datetime="2020-12-28T09:00:00+09:00">2020年12月28日</time>
                <p class="echo-headline-category">
                    <span class="echo-label echo-label-style-a">カテゴリー</span>
                </p>
                <h2 class="echo-headline-title">ゴーシュは町の活動写真館でセロを弾く係りでした</h2>
            </a><!-- /.echo-headline-inner -->
        </article><!-- /.echo-headline -->
    </div><!-- /.echo-headlines-item -->

    <div class="echo-headlines-item">
        <article class="echo-headline">
            <a href="#" class="echo-headline-inner">
                <time class="echo-headline-header" datetime="2020-12-28T09:00:00+09:00">2020年12月28日</time>
                <p class="echo-headline-category">
                    <span class="echo-label echo-label-style-a">カテゴリー</span>
                </p>
                <h2 class="echo-headline-title">けれどもあんまり上手でないという評判でした。上手でないどころではなく実は仲間の楽手のなかではいちばん下手でしたから</h2>
            </a><!-- /.echo-headline-inner -->
        </article><!-- /.echo-headline -->
    </div><!-- /.echo-headlines-item -->

    <div class="echo-headlines-item">
        <article class="echo-headline">
            <a href="#" class="echo-headline-inner">
                <time class="echo-headline-header" datetime="2020-12-28T09:00:00+09:00">2020年12月28日</time>
                <p class="echo-headline-category">
                    <span class="echo-label echo-label-style-a">カテゴリー</span>
                </p>
                <h2 class="echo-headline-title">いつでも楽長にいじめられるのでした</h2>
            </a><!-- /.echo-headline-inner -->
        </article><!-- /.echo-headline -->
    </div><!-- /.echo-headlines-item -->

    <div class="echo-headlines-item">
        <article class="echo-headline">
            <a href="#" class="echo-headline-inner">
                <time class="echo-headline-header" datetime="2020-12-28T09:00:00+09:00">2020年12月28日</time>
                <p class="echo-headline-category">
                    <span class="echo-label echo-label-style-a">カテゴリー</span>
                </p>
                <h2 class="echo-headline-title">ひるすぎみんなは楽屋に円くならんで今度の町の音楽会へ出す第六交響曲の練習をしていました</h2>
            </a><!-- /.echo-headline-inner -->
        </article><!-- /.echo-headline -->
    </div><!-- /.echo-headlines-item -->

    <div class="echo-headlines-item">
        <article class="echo-headline">
            <a href="#" class="echo-headline-inner">
                <time class="echo-headline-header" datetime="2020-12-28T09:00:00+09:00">2020年12月28日</time>
                <p class="echo-headline-category">
                    <span class="echo-label echo-label-style-a">カテゴリー</span>
                </p>
                <h2 class="echo-headline-title">トランペットは一生けん命歌っています</h2>
            </a><!-- /.echo-headline-inner -->
        </article><!-- /.echo-headline -->
    </div><!-- /.echo-headlines-item -->

    <div class="echo-headlines-item">
        <article class="echo-headline">
            <a href="#" class="echo-headline-inner">
                <time class="echo-headline-header" datetime="2020-12-28T09:00:00+09:00">2020年12月28日</time>
                <p class="echo-headline-category">
                    <span class="echo-label echo-label-style-a">カテゴリー</span>
                </p>
                <h2 class="echo-headline-title">ヴァイオリンも二いろ風のように鳴っています</h2>
            </a><!-- /.echo-headline-inner -->
        </article><!-- /.echo-headline -->
    </div><!-- /.echo-headlines-item -->

    <div class="echo-headlines-item">
        <article class="echo-headline">
            <a href="#" class="echo-headline-inner">
                <time class="echo-headline-header" datetime="2020-12-28T09:00:00+09:00">2020年12月28日</time>
                <p class="echo-headline-category">
                    <span class="echo-label echo-label-style-a">カテゴリー</span>
                </p>
                <h2 class="echo-headline-title">クラリネットもボーボーとそれに手伝っています</h2>
            </a><!-- /.echo-headline-inner -->
        </article><!-- /.echo-headline -->
    </div><!-- /.echo-headlines-item -->

    <div class="echo-headlines-item">
        <article class="echo-headline">
            <a href="#" class="echo-headline-inner">
                <time class="echo-headline-header" datetime="2020-12-28T09:00:00+09:00">2020年12月28日</time>
                <p class="echo-headline-category">
                    <span class="echo-label echo-label-style-a">カテゴリー</span>
                </p>
                <h2 class="echo-headline-title">ゴーシュも口をりんと結んで眼を皿のようにして楽譜を見つめながらもう一心に弾いています</h2>
            </a><!-- /.echo-headline-inner -->
        </article><!-- /.echo-headline -->
    </div><!-- /.echo-headlines-item -->

    <div class="echo-headlines-item">
        <article class="echo-headline">
            <a href="#" class="echo-headline-inner">
                <time class="echo-headline-header" datetime="2020-12-28T09:00:00+09:00">2020年12月28日</time>
                <p class="echo-headline-category">
                    <span class="echo-label echo-label-style-a">カテゴリー</span>
                </p>
                <h2 class="echo-headline-title">にわかにぱたっと楽長が両手を鳴らしました</h2>
            </a><!-- /.echo-headline-inner -->
        </article><!-- /.echo-headline -->
    </div><!-- /.echo-headlines-item -->

    <div class="echo-headlines-item">
        <article class="echo-headline">
            <a href="#" class="echo-headline-inner">
                <time class="echo-headline-header" datetime="2020-12-28T09:00:00+09:00">2020年12月28日</time>
                <p class="echo-headline-category">
                    <span class="echo-label echo-label-style-a">カテゴリー</span>
                </p>
                <h2 class="echo-headline-title">みんなぴたりと曲をやめてしんとしました。楽長がどなりました</h2>
            </a><!-- /.echo-headline-inner -->
        </article><!-- /.echo-headline -->
    </div><!-- /.echo-headlines-item -->

    <div class="echo-headlines-item">
        <article class="echo-headline">
            <a href="#" class="echo-headline-inner">
                <time class="echo-headline-header" datetime="2020-12-28T09:00:00+09:00">2020年12月28日</time>
                <p class="echo-headline-category">
                    <span class="echo-label echo-label-style-a">カテゴリー</span>
                </p>
                <h2 class="echo-headline-title">セロがおくれた。トォテテテテテイ、ここからやり直し。はいっ</h2>
            </a><!-- /.echo-headline-inner -->
        </article><!-- /.echo-headline -->
    </div><!-- /.echo-headlines-item -->

</div><!-- /.echo-headlines -->