IEの独自仕様に呪いをかけつつ、複数カラムのためにfloatを駆使していた頃がなつかしい今日この頃ですが、天下の救世主flexboxに、gapというプロパティがあるのだそうです。gridレイアウトに使われていて、flexboxに導入されたのも結構前の話らしいですが…
ちなみにflexbox使いまくりなのに、中身はすぐ忘れちゃうので、いつもこのページを見ます。いつもいつも見ます。あんまり見るので、fとか入れただけで候補に上がります。
グリッドでタイル状にアイテムを並べる時、marginだと、上下左右の設定を組み合わせないといけなかったのが、
gap: 15px 30px;みたいな感じで設定できます。一つ目の数字が行方向（row-gap）で、二つ目は列方向（column-gap）。親要素（display: flexが当たっている要素）に設定するのが肝。
全体のフォントサイズを調整するために使う定番
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ユーザーの方からご指摘を頂いた。なんでかなと調べていたところ、こんなことが。
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ファイルは要素のレベルごとにかためて書く、というのも意外と大事なことかもしれません。
ちかごろのWebサイトといえば、スマホ対応が必須ですね。
@media only screen and ( max-width: 40em ) /* 640 */
{
img{
width: 100%;
height: auto;
}
}
画像ファイルは、こんな風にしておけば、縦横比を維持したまま、スペースいっぱいに広がって表示されます。
ちょっと面倒くさいのが、divなんかのサイズを、背景画像の大きさにあわせたいとき。divは、放っておくとdivの中身にあわせたサイズになってしまいますので、
div{
width: 960px;
height: 200px;
background-image: url("bgimage.jpg");
background-size: 100%;
}
こんなふうに、具体的なサイズを与えてやればいいんですが、スマホなど表示サイズが一定でない場合は少々面倒です。
@media only screen and ( max-width: 40em ) /* 640 */
{
div{
width: 100%;
height: 0;
padding-top: calc(200/960 * 100%);
}
}
heightを直接指定できないっていうのが何だか嫌な感じですが、paddingは縦方向の設定値も、その包含ブロックの幅を基準にしているので、heightは0にしちゃってpaddingで設定する、というのがうまいやり方のようです。
数値も一定ではないので、縦横の比率を入れておいて、都度calcで計算させます。
CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法
CSS heightは個人的によくつまずくポイントです。
Webコーディングをしていていつもつまずくのに、何度でも調べてしまうスキマの話です。
<p> <img src="ushi.jpg"> </p>
こんなコードで画像をはりつけると、
↑こんな風なスキマが
これは、デフォルトでは画像の下端がベースラインに揃うように設定されているため、なんだそうです。
ベースラインに揃うというのは、日本語ではぴんときませんが、英字ですとjとかqとかyとかが、ベースラインから飛び出す分、ベースラインより下にもスペースが要求されるので、その分の余白が生じてしまいます。そのため、<p>要素に設定されている文字の大きさがものすごーく小さかったりした場合は、気になるほどの余白が生まれない可能性もあるみたいです。
この余白をなくすには、
<p> <img src="ushi.jpg" style="vertical-align: bottom;"> </p>
こんな風にimg要素のvertical-alignにbottomを指定すると、画像の下端は、行の下端に揃います。
あるいは、画像をブロック要素として配置してしまう、という手が使える場合もありそうですね。