1月27日日報 (赤羽)

2025年01月27日作成者：赤羽

今日の気づきや共有事項

あおぞらみーるのページ改修でニュース記事を写真付きにする際、横並びのレイアウトを岩井さんがNotionで共有しているgridの使い方を参考に作成しました。
grid-template-columns、grid-column、grid-rowを組み合わせることで
最新の1記事目だけを大きく表示させる等の不規則なレイアウトも、CSSのみで柔軟に実現できるため、とても使い勝手が良いと感じました。
これまではWordPress側で1記事目とそれ以降の出力を分ける処理を行っていたため、コードが煩雑になっていましたが、この方法により大幅に簡略化できました。
今後も横並びのレイアウトを作成する際は、gridレイアウト を積極的に活用していきたいと思います。

-------- 使用コード メモ --------

.info_card {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.info_item:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

業務に関する相談事項

上長コメント

まだ入力されていません。

一覧へ

1月27日 日報 (赤羽)

今日の気づきや共有事項

業務に関する相談事項

上長コメント

1月27日日報 (赤羽)