IEの独自仕様に呪いをかけつつ、複数カラムのためにfloatを駆使していた頃がなつかしい今日この頃ですが、天下の救世主flexboxに、gapというプロパティがあるのだそうです。gridレイアウトに使われていて、flexboxに導入されたのも結構前の話らしいですが…

ちなみにflexbox使いまくりなのに、中身はすぐ忘れちゃうので、いつもこのページを見ます。いつもいつも見ます。あんまり見るので、fとか入れただけで候補に上がります。

CSS Flexbox 各プロパティの使い方を詳しく解説

グリッドでタイル状にアイテムを並べる時、marginだと、上下左右の設定を組み合わせないといけなかったのが、

gap: 15px 30px;

みたいな感じで設定できます。一つ目の数字が行方向（row-gap）で、二つ目は列方向（column-gap）。親要素（display: flexが当たっている要素）に設定するのが肝。

gapプロパティ対応状況

全体のフォントサイズを調整するために使う定番

html{
	font-size: 62.5%;
}

ブラウザの標準フォントサイズを16pxから10pxに変更し、以降のフォントサイズをremで指定しやすいようにしている。これなら1remは10pxになるので、わかりやすい。

レスポンシブ環境で、テキストサイズをあんまり細かく指定するのが億劫なので、最近はvwを加味して表示する方法をよく使う。

html{
	font-size: calc(62.5% + 0.6vw;);
}

これだと、10px + ビューポートの幅の0.6%分が大きめになるので、すごく幅が取れるときには大きめに、小さいときにもそれなりに、みたいなサイズになる。

私としては（年齢的に）大きい文字はウェルカムだけど、画面をパッとみた時の情報量が少なすぎるのもちょっと…というのがあって、個人的にこの辺りが落とし所かと思う。フォントサイズは本当はユーザーが自由自在にできるのが一番だけれども、綺麗に並んでいるテキストの方が読む気が起きるので、特に大量のテキストを読ませたい時のバランスとしては、こんなかなあと。印刷屋目線か。

*, *::before, *::after {
	box-sizing: border-box;
}

あとこれ。paddingとborderをwidthやheightに含めるおまじない。うっかり囲みを増やし、ボックスが全体のレイアウトからもりもりはみ出してしまったりするので、ウカウカしている私にはぴったりである。

左寄せテキストをセンタリングしたい時のシンプルな方法について。

テキストに直接センタリングをあててしまうと、改行時に2行目が真ん中寄せになっちゃうので、「全体はセンタリングしているが、テキストのブロックは左寄せとか両端揃えとかにしたいなあとよく思うんですが、いつも何となくうまいことやって、すぐに方法を忘れてしまうので、一番シンプルなやり方をメモ。

<div style="text-align: center; padding: 0 1rem 1rem;">
<p style="display: inline-block; text-align: left;">茨城県つくば市を拠点に、2012年よりウェブサイトおよび印刷物の制作をしております。<br>
小部数印刷や、小・中規模サイトの運用など、お気軽にご相談ください。</p>
</div>

StudioSynchサイトの冒頭文。テキスト量がもっと多い時は、text-align: justify;を使うと美しい。

サイトのブロック表示にvwを使いたい。vwはwidthだけでなく、heightにも使えるので、黄金比とか正方形とか、レスポンシブでもタテヨコ比の揃ったブロックを作るのにものすごく便利だからだ。これとflexを使うことで、格段にCSSを書くのが楽になった。というか、これがないと、とてもレスポンシブサイトの仕事を受ける気がしない。スマホでもタブレットでも、大きなディスプレイでも美しく、と思ったら作業量は3倍である。

vwは便利なので、仕事でwebサイトのリニューアルにもガンガン使って作業をしていたところ、なんだか表示がずれるんですよ、とwindowsユーザーの方からご指摘を頂いた。なんでかなと調べていたところ、こんなことが。

【CSS】100vwはスクロールバーを含むという罠

Macの一般設定では、スクロールバーのデフォルト表示は「スクロール時に表示」なので、あんまり気にならなかったのだが、常にスクロールバーを表示している場合に、不具合が生じていた模様。bodyを100%にしていたので、内包している要素の100vw幅が入りきらなくなっていた。内包要素もみんな100%にしてしまえばいいのだけれど、それはやっぱりもったいないので、内包コンテンツの横方向には、スクロールバー分も加味した余白を儲けることで切り抜けた。そうすると横スクロールバーが表示されてしまうのが鬱陶しいので、これもbodyに「overflow-x: hidden;」を当てることで強制的に非表示にする。

Mac環境で見ると、コンテンツとスクロールバーが一体化してる感じがしていいかなと思う仕上がりなんだけど、Winではどうなんだろう。とにかくズレはなくなったはず。

レスポンシブサイトをつくるとき、今どきは普通のブラウザにもスマホ表示のプレビューができる機能がついていたりして、大変便利ですが、実際のスマホで表示してみると、hoverやスワイプの挙動なんかでつまづいてしまうことがあります。

「スマホ表示がおぼつかなくなる」というのは、縦にスクロールするときに、画面が左右にブレて、画面外の余白が表示されてしまうという、機能的に不都合はないんだけど、なんとも気持ち悪い状況。

原因はわかってるんです。要素が画面幅からはみでてるから。私などは、htmlもcssもエディタで端から書いていくので、この手のミスをよくします。そういうときは、

overflow-x: hidden;

をbody要素に加えればとりあえず解決です。横スクロールをしなくなるので、要素がはみ出ても問題なし。

のはずだったのですが、これをやったら、実装してあった「上にもどるボタン」のjavascriptが動かなくなりました。なんでだろう。y方向は問題ないと思うんだけどなあ。

これは真面目に考えれば原因がちゃんとわかるんだろうけど、まずははみ出てる要素をちゃんと探した方がよかろうと思い、ブラウザのインスペクタ機能を使って、CSSをチェックしました。ところが自分で書いたCSSなのに、テキストの羅列を眺めているだけでは、なかなか見つけられないものです。トシなのかな。

こんな時、目と頭がぼんやりしてても原因が見つけられるように、私は各要素に、

display; none;

を加えながらチェックします。だいたいサイトはヘッダとメインコンテンツ、フッタくらいの大要素に分けてありますので、大きな要素を順番に非表示にしていきます。非表示にしたとき、横にブレなくなったら、その要素内に原因があるということ。そうやって、原因を絞り込んでいきます。

box-sizing: border-box;

これが使えるようになってから、この手のミスは大分減ったのですが、今回は、width: 100%の要素に左右のmarginが設定されていたのが原因でした。こういうチェックをやりやすくするために、CSSファイルは要素のレベルごとにかためて書く、というのも意外と大事なことかもしれません。