Lopan.jp

News

Home News アーカイブ一覧

アーカイブ一覧

アーカイブとは「履歴」。過去の記事や文書をまとめたもの。

ニュース一覧やイベント一覧、ブログの記事一覧や商品一覧など、過去の文書を一覧にしたもの。アイキャッチ、日付、タイトル、概要文、カテゴリー、タグ、値段、著者、記事へのリンク、いいね数などの要素をレイアウトする。

ブログの記事一覧

アイキャッチと、記事タイトル、概要文、日付、著者名、カテゴリやタグを含む、記事の一覧。

一覧全体を括る要素（ここではdiv要素）にクラスc-arcivelistを付与し、項目ひとつひとつを括る要素（ここではarticle要素）にクラスarchive_itemを付与する。項目全体がリンク範囲となるよう、項目の中身をさらにa要素で括りクラスcontainerを付与する。項目の中身には、文字情報を括る.text要素（div要素）と、アイキャッチ画像を括る.image要素（figure要素）を置く。

<div class="c-archivelist"> <article class="archive_item"><a href="https://lopan.jp/css-layout2/float/" class="container"> <div class="text"> <h2 class="title">フロートで2段組みレイアウト</h2> <p class="summary">floatプロパティは、画像の周りに文章を回り込ませたり、要素を左右に寄せるときに使われるプロパティ。そんなfloatプロパティを使って段組みレイアウトしてゆきます。</p> <p class="author"><span class="ico"><img src="../../assets/img/_watercolor.webp" alt="" width="512" height="512" loading="lazy"></span><span class="name">_watercolor</span></p> <p class="date">2018.10.10</p> <div class="tags"><span class="c-tag">CSS</span><span class="c-tag">レイアウト</span><span class="c-tag">フロート</span></div> </div> <figure class="image"><img src="../../assets/img/css-layout2/float_eyecatch.webp" alt="" width="600" height="400" loading="lazy"></figure> </a></article> ︙ </div>

専用CSSファイルにて、適宜スタイルを与えるも良し。ここでは、リンクにカーソルを合わせた時のエフェクトを指定している。

@media (hover: hover) { .p-bloglist .c-archivelist .container::before { content: ""; z-index: -1; position: absolute; inset: -16px; border-radius: 8px; background: #86c0de29; transition: opacity .1s, transform .1s var(--easeOut); } .p-bloglist .c-archivelist .container:not(:hover)::before { opacity: 0; transform: scale(.96); transition-duration: .4s; } }

ニュース一覧

アイキャッチと、日付、カテゴリやタグ、ニュースの見出しを含む、ニュースの一覧。

一覧全体を括る要素（ここではul要素）にクラスc-archivelistと-barを併記し、項目ひとつひとつを括る要素（ここではli要素）にクラスarchive_itemを付与する。項目にリンクがない場合はクラスarchive_itemとcontainerを併記する。項目にリンクがある場合は項目の中身をさらにa要素で括りクラスcontainerを付与し、.title要素内に矢印アイコンを置くとよい。

<ul class="c-archivelist -bar"> <li class="archive_item container"> <dl class="text"> <dt class="date">2022.12.22</dt> <dd class="tags"><span class="c-tag">HTML</span><span class="c-tag">CSS</span><span class="c-tag">SVG</span></dd> <dd class="title">ニュースの見出しなので、キャッチーな「〇〇」が公開しましたとか長めのタイトル。</dd> </dl> <figure class="image"><img src="../../assets/img/memorandum/eyecatch.webp" alt="" width="600" height="400" loading="lazy"></figure> </li> <li class="archive_item"><a href="" class="container"> <dl class="text"> <dt class="date">2022.12.22</dt> <dd class="tags"><span class="c-tag">スキャンダル</span></dd> <dd class="title">「週刊文春にスクープされました」とか、割と長めのテキストが入っても良い想定のタイトル。<svg width="24" height="24" viewBox="0 0 24 24" class="arr"><use href="../../assets/img/ico.svg#arrow"/></svg></dd> </dl> <figure class="image"><img src="../../assets/img/transparent-texture/eyecatch.webp" alt="" width="600" height="400" loading="lazy"></figure> </a></li> ︙ </ul>

専用CSSファイルにて、適宜スタイルを与えるも良し。ここでは、リンクにカーソルを合わせた時のエフェクトを指定している。

@media (hover: hover) { .p-newslist .c-archivelist .container[href] { transition: background-size .4s var(--easeOut); background: linear-gradient(#86c0de1a, #86c0de1a) right bottom / 0 100% no-repeat; } .p-newslist .c-archivelist .container[href]:hover { background: linear-gradient(#86c0de1a, #86c0de1a) left bottom / 100% 100% no-repeat; transition-duration: .1s; } }