【CSS】レイアウトが崩れないアーカイブリストの作り方

こんにちは、Autumn（オータム）です。

「アーカイブリストの作り方がわからない。。アーカイブリストのレイアウトが崩れる、、タイトルが長い時はみ出してしまう、、」

そんな方向けに、今回はお知らせやブログの一覧を掲載する時によくある「アーカイブリスト」の作り方を紹介します。

レイアウトが崩れない綺麗なアーカイブリストを作るには、いくつかのポイントを押さえる必要があります。

カンタンな実例をもとに解説＆ソースコードを公開しますので、参考にどうぞ。

Contents

アーカイブリストのレイアウトが崩れる理由

レイアウトが崩れる1番の原因は、タイトルの可変を考慮してないことにあります。

WEB製作時に、必ず改行してもレイアウトが崩れないか確認する癖をつけましょう。

例として下記のようなお知らせリストを作成しました。
ソースコードを先に確認しておくと理解がしやすいので下記から確認してください。

コードが見にくいという方は、自身のエディタにコピペすると見やすくなるので試してみてくださいね。

ぱっと見は全然問題なさそうですが、実は大きな欠点があります。
ポイントは2つです。

・タイトルの文字量を考慮していない
・要素の中央合わせができていない

順に解説していきます！

上記のように、タイトルの長さが短い場合だと問題ないのですが、もしタイトルの文字量が多くなった場合は下記のようにレイアウトが崩れます。

かなり、残園な感じになっちゃいました。。

これを解決するには、タイトル部分のaタグ（archive_item_txt）のCSSに「max-width」の指定をしてあげればOKです。

「max-width」は可変できる最大の要素幅を指定するCSSプロパティです。
今回は「最大幅300px」で設定するよう、下記のように1行コードを追加してあげましょう。

「よしこれでカンペキ！」と思って確認してみると、、

改行はできているけど、左右のタグと矢印の高さがズレてしまいました。。
これもWEB制作あるあるですね。

左のspanタグ（archive_item_tag）は、親要素であるliタグ（archive_item）のCSSに「align-items: center;」を追加していきます。

右の矢印は「position: absolute;」で設定しているので、topプロパティをpx換算から%換算で真ん中に来るように調整してあげましょう。

これらを追加して、実行してみると、、

このように、高さも中央合わせで揃えることができました！

今回のポイントをおさらいします。

・タイトルの文字量を考慮すること
・要素の中央合わせができているか確認すること
・作成時に必ず可変に対応できているか確認すること

このようなアーカイブリストはWEB制作を行う上でよく出てくるレイアウト例です。

今回はかなりシンプルなものを例に取り上げましたが、実際はもっと複雑な構成になっていることもあります。

いろんなパターンに対応していくには、地道に場数を踏んでいくしかありません。一つ一つ経験を積んでいきながら、少しずつスキルアップしていきましょう！

「プログラミングの勉強がなかなか継続できない、、」という人も多いかと思いますが、コツを掴めば誰でも勉強を続けることは可能です。

知識ゼロからプログラミング独学初めて半年でWEBエンジニアに転職した私が実践した「継続する力」を鍛える方法を公開してますので、よかったら参考にしてください。
プログラミングの勉強を半年間継続したら人生変わります
 プログラミングの勉強を継続できない理由【答え：「継続する基礎練習」が足りないだけ】

読んでいただき、ありがとうございました！