コピペでできる投稿記事一覧リストのデザインサンプル一覧[HTML/CSS]

<div class="t8-postlist-1">
<h4 class="t8-postname">記事のタイトル</h4>
<time class="t8-time-1" datetime="2023-02-03" aria-hidden="true">
<span class="year">2023</span></br>
<span class="date">2/3</span>
</time>
</div>

.t8-postlist-1{
    align-items: center;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.t8-time-1 {
    border-right: 1px solid #808080;
    font-weight: 400;
    line-height: 1;
    margin-right: .75em;
    padding: .5em .75em .5em 0;
    text-align: center;
}

<div class="t8-postlist-2">
<div class="t8-postmeta-2">
<div class="t8-time-2">
<time class="t8-date-2" datetime="2023-02-03" aria-label="公開日">2023年2月3日</time>
</div>
<span class="t8-category-2" data-cat-id="">タグ</span>
</div>
<h4 class="t8-postname-2">記事のタイトル</h4>	
</div>

.t8-postmeta-2 {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: 5px;
    line-height: 1.25;
    margin-top: .75em;
    margin-bottom: 1em;
    position: relative;
}

.t8-date-2::before {
    font-family: "Font Awesome 5 Free";
    content: '\f017';
    font-weight: 600;
    margin-right: 1em;
}


.t8-category-2::before {
    font-family: "Font Awesome 5 Free";
    content: '\f02b';
    font-weight: 600;
    margin-right: 1em;
}

.t8-category-2{
    margin-left: 2em;
}

<div class="t8-postlist-2">
<h4 class="t8-postname-2">記事のタイトル</h4>	
<div class="t8-postmeta-2">
<div class="t8-time-2">
<time class="t8-date-2" datetime="2023-02-03" aria-label="公開日">2023年2月3日</time>
</div>
<span class="t8-category-2" data-cat-id="">タグ</span>
</div>
</div>

.t8-postmeta-2 {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: 5px;
    line-height: 1.25;
    margin-top: .75em;
    margin-bottom: 1em;
    position: relative;
}

.t8-date-2::before {
    font-family: "Font Awesome 5 Free";
    content: '\f017';
    font-weight: 600;
    margin-right: 1em;
}


.t8-category-2::before {
    font-family: "Font Awesome 5 Free";
    content: '\f02b';
    font-weight: 600;
    margin-right: 1em;
}

.t8-category-2{
    margin-left: 2em;
}

<div class="t8-postlist-3">
<div class="t8-thumb-3">
<figure class="t8-imgfigure-3">
<img src="http://temp8.plat4.net/wp-content/uploads/2023/09/mt-sample-background.jpg"></figure>
<span class="t8-category-3">タグ</span>
</div>
<div class="t8-postbody-3">
<h4 class="t8-postname-3">記事のタイトル</h4>								<div class="t8-postmeta-3">
<div class="t8-time-3">
<time class="t8-date-3" datetime="2023-02-03" aria-label="公開日">2023年2月3日</time></div>
</div>
</div>			
</div>

t8-imgfigure-3 {
    z-index: 0;
}

.t8-postbody-3 {
    background: rgba(0,0,0,.5);
    bottom: 12px;
    color: #fff;
    left: 0;
    padding: .75em;
    position: absolute;
    width: 100%;
}

.t8-category-3 {
    background-color: ＃808080;
    display: inline-block;
    font-size: 15px;
    line-height: 2;
    overflow: hidden;
    padding: 0 .75em;
    position: absolute;
    right: 5px;
    top: 5px;
    white-space: nowrap;
    z-index: 1;
}

.t8-category-3::before {
    font-family: "Font Awesome 5 Free";
    content: '\f02b';
    font-weight: 600;
    margin-right: 0.5em;
}

.t8-date-3::before {
    font-family: "Font Awesome 5 Free";
    content: '\f017';
    font-weight: 600;
    margin-right: 0.5em;
}

<div class="t8-postlist-4">
<div class="t8-thumb-4">
<figure class="t8-imgfigure-4">
<img src="http://temp8.plat4.net/wp-content/uploads/2023/09/mt-sample-background.jpg" ></figure>
<span class="t8-category-4" data-cat-id="">タグ</span>
</div>
<div class="t8-postbody-4">
<h4 class="t8-postname-4">記事タイトル</h4>								<div class="t8-postmeta-4">
<div class="t8-time-4">
<time class="t8-date-4" datetime="2023-02-03" aria-label="公開日">2023年2月3日</time></div>
</div>
</div>			
</div>

.t8-category-4 {
    background-color: var(--color_main);
    display: inline-block;
    font-size: 15px;
    border-radius: 20px;
    line-height: 2;
    overflow: hidden;
    padding: 0 .75em;
    position: absolute;
    right: 5px;
    top: 5px;
    white-space: nowrap;
    z-index: 1;
}

.t8-category-4::before {
    font-family: "Font Awesome 5 Free";
    content: '\f02b';
    font-weight: 600;
    margin-right: 0.5em;
}

.t8-date-4::before {
    font-family: "Font Awesome 5 Free";
    content: '\f017';
    font-weight: 600;
    margin-right: 0.5em;
}

<div class="t8-postlist-5">
<div class="t8-thumb-5">
<figure class="t8-imgfigure-5">
<img src="http://temp8.plat4.net/wp-content/uploads/2023/09/mt-sample-background.jpg" data-cat-id="">
<span class="t8-category-5" data-cat-id="">タグ</span>
</div>
<div class="t8-postbody-5">
<h4 class="t8-postname-5">記事タイトル</h4>								<div class="t8-postmeta-5">
<div class="t8-time-5">
<time class="t8-date-5" datetime="2023-02-03" aria-label="公開日">2023年2月3日</time></div>
</div>
</div>
</div>

.t8-postlist-5 {
    display: flex;
}

.t8-thumb-5 {
    width: 50%;
    border-radius: 20%;
}

.t8-postbody-5 {
    margin-left: 30px;
}

.t8-category-5 {
    position: absolute;
    font-size: 10px;
    padding: 5px;
    top: 10px;
    left: 10px;
    right: auto;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0; 
    background: #808080;
    border-radius: 10px;
}

.t8-category-5::before {
    font-family: "Font Awesome 5 Free";
    content: '\f02b';
    font-weight: 600;
    margin-right: 0.5em;
}

.t8-date-5::before {
    font-family: "Font Awesome 5 Free";
    content: '\f017';
    font-weight: 600;
    margin-right: 0.5em;
}

<div class="t8-postlist-5a">
<div class="t8-thumb-5a">
<figure class="t8-imgfigure-5a">
<img src="http://temp8.plat4.net/wp-content/uploads/2023/09/mt-sample-background.jpg"></figure>
<span class="t8-category-5a" data-cat-id="">タグ</span>
</div>
<div class="t8-postbody-5a">
<h4 class="t8-postname-5a">記事タイトル</h4>								<div class="t8-postmeta-5a">
<div class="t8-time-5a">
<time class="t8-date-5a" datetime="2023-02-03" aria-label="公開日">2023年2月3日</time></div>
</div>
</div>			
</div>

.t8-postlist-5a {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: row-reverse; 
}

.t8-thumb-5a {
    width: 50%;
}

.t8-category-5a{
    position: absolute;
    padding: 5px;
    top: 10px;
    right: 10px;
    font-size: 0.5em;
    background: #808080;
    border-radius: 10px; 
    -webkit-transform-origin: 0 0; 
    transform-origin: 0 0;
}

.t8-category-5a::before {
    font-family: "Font Awesome 5 Free";
    content: '\f02b';
    font-weight: 600;
    margin-right: 0.5em;
}

.t8-date-5a::before {
    font-family: "Font Awesome 5 Free";
    content: '\f017';
    font-weight: 600;
    margin-right: 0.5em;
}