今回、イベントの告知にブログも使おうとブログを更新しました。
ついでにブログのデザインも見直すことにして、久しぶりにAmebloのスキンCSSを触ってみました。最後に編集したのは2019年より前……。
その当時は、余白調整といえば margin と padding が基本でした。
でも、数年ぶりに編集して気づいたのが 「gap」 の存在。
今や主要ブラウザで普通に使えるようになっていて、サイドメニューや記事リストの見た目がぐっと楽に整います。
従来の書き方（marginで余白を調整）
.skinSubList li { margin-bottom: 3px; border-bottom: 1px dotted #b3b3b3; }
.skinSubList li:last-child { margin-bottom: 0; }
gapを使った書き方
.skinSubList { display: flex; flex-direction: column; gap: 8px; /* ←要素間の余白はこれだけで完結 */ }
.skinSubList li { padding: 5px 0; border-bottom: 1px dotted #b3b3b3; }
.skinSubList li:last-child { border-bottom: none; }
メリット
-
コードが短い → 最後の要素を特別扱いする必要なし
-
見た目が揃う → 余白のブレが消える
-
スマホ調整も簡単 →
gapの値を変えるだけ
2019年までに覚えた「Ameblo CSS編集テク」は、2025年の今ではちょっと古いかも。
ぜひ、最新の gap を試してみてください。
Amebloスキンをもっと見やすく、もっときれいに！
CSSの進化に追いつくと、また編集が楽しくなりますよ😊
ちなみにイベントはコチラです。
