余白 on qwerty.work

【CSS】flexboxで横並びにしたメニューの間隔はcolumn-gapで調整する

Thu, 22 Sep 2022 10:42:17 +0900

margin-rightでもいいけど

グローバルメニューなど、横並びのメニューをdisplay: flex;で作ることがあります。その時、メニュー同士の間に余白を設けるために以下のように、margin-left;やmargin-right;を使っていました。

#global_navi ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

#global_navi li:not(:first-child) {
    margin-left: 10px;
}

または

#global_navi li:not(:last-child) {
    margin-right: 10px;
}

これでもできるので問題ないのですが、もっとスマートなやり方がありました。

column-gapを使う

今まで知らなかったののですが、以下のように、column-gapを使うと簡単にメニュー間の隙間を簡単に設定できます。margin-leftやmargin-rightと違って、要素の間だけに余白が付くので、最初や最後のliに余白が付いてしまうことを気にしなくて済みます。display: flex;とdisplay: grid;で使えうるみたいです。

#global_navi ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    column-gap: 10px;
}

ブラウザの対応状況

https://caniuse.com/?search=column-gap https://caniuse.com/?search=column-gap

縦横や縦並びの場合

縦横に並ぶ要素の隙間にはgap

グリッドレイアウトで縦と横に要素が並ぶ場合は、gapプロパティで縦と横に均等な隙間を設けることができます。

縦並びの要素の隙間にはrow-gap

column-gapは横並びですが、縦並びはrow-gapで指定できます。

参考ページ

gap、column-gap、row-gapについては以下のページが参考になりました。

https://ics.media/entry/210628/ https://ics.media/entry/210628/

その他、column関連プロパティのリファレンス

https://www-creators.com/css-prop/column-gap https://www-creators.com/css-prop/column-gap

column-countについて

その他、グリッドレイアウトで横並び1列だけではなく、横2列ずつ縦に多段で並べたいときはcolumn-countで2を指定すれば、6個ある要素が2x3で並んでくれます。

#global_navi ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
    column-count: 2;
}

column-gapの使い方をきっかけに勉強になりました。

【CSS】IMGタグで画像の下に余白ができたときに消す方法

Thu, 22 Sep 2022 08:59:45 +0900

vertical-align: bottom;で消す

画像の下にマージンができてしまうことがあります。img要素に対して、vertical-alignの値をbottomにすると、下の余白がなくなります。vertical-alignは要素の縦方向の配置位置に関するプロパティで、値にbottom（下部）を寄せることで下の余白をなくしています。

img {
    vertical-align: bottom;
}

AMP対応ページでAmazonアソシエイトのバナーの下に謎の空白・余白ができるとき

Sun, 23 Jul 2017 15:53:12 +0900

AMP対応のページにAmazonアソシエイトのバナーを貼ると、バナーの下に謎の空白というか余白が表示されるということがありました。

原因は layout=“responsive”

AMP対応ページを出力する際、通常のHTMLのページ（非AMP）のソースをスクリプトでAMPページ用にをに置き換えています。このときに加えている**layout=“responsive”**が謎の空白・余白ができる原因でした。

画像やYou-Tubeの動画で使われているを以下のように

<amp-iframe layout="responsive" src="http://exampl.com～" width=300 height=300></amp-iframe>

とすることで画面幅100％に合わせて表示してくれるのでいいのですが、アマゾンのバナーソースのにlayout=“responsiveに使うと、ブラウザはアマゾンのバナーサイズであるwidth=“120” height=“240"が画面幅100％になるようにフレームを拡大して広い表示スペースを取ります。

しかし、レスポンシブで拡大された広いフレームの中に表示されるのは拡大されていない120×240のバナーなので、空白というか余白ができてしまいます。

アマゾンの場合はlayout=“responsive"を付けない

ということで、Amazonアソシエイトバナーの場合はタグ内でlayout=“responsive"を使わないようにしましょう。

アマゾンに限らずiTunesのバナーなど、URL内にw=300&h=250やwidth=120&height=240といったパラメーターでサイズを指定して画像を呼び出しているものは同じようにlayout=“responsive"を削除しておかないと余白や空白ができてしまいますので同じ対応が必要です。

バナーが表示されないとき

もし、****でバナーが表示されないときは以下のように**sandbox=“allow-scripts allow-same-origin allow-popups”**を加えてみると表示されると思います。

<amp-iframe sandbox="allow-scripts allow-same-origin allow-popups" src="http://exampl.com～" width=300 height=300></amp-iframe>