CSSの小ネタを5つご紹介します。

2018.6.28
Web

テーマ作成時に参考にしたサイトの中で、一つの記事にするほどの内容ではないCSSの小ネタを5つご紹介します。どれもないと困るし、実装するととても便利な方法です。

フォントサイズ指定
スマホの横画面でも文字を拡大させない
画像の下にできる謎の余白を解消
斜めストライプの背景
Google MapやYouTubeの埋め込みをレスポンシブ対応にする
最後に

フォントサイズ指定

CSSでフォントサイズを指定する時、font-size: 16px;のようにpxで指定する絶対指定はあまりよくないというのを昔見たことがあったので自身のサイトでは相対指定を心がけていますが、この相対指定にも色々と種類があります。中でも%やemはよく知られていると思いますが、今回私が新たに知ったのがremという単位です。

CSS3のremとemの違いについて - Qiita

CSSのフォントサイズ指定方法は次の2つ絶対値: 10pxなら絶対に10px相対値: 親要素のサイズによって可変pxサイズを絶対値で指定html { font-size: 32px;}…

https://qiita.com/masarufuruya/items/bb40d7e39f56e6c25f0d

あなたはどれにする？CSSの文字サイズ指定「px、em、%」 - デザインメモ

CSS（スタイルシート）でfont-sizeを指定するとき、pxを使わない方がいいと聞いたことがあります。ですが、pxで指定しないとなると、今度はemと%が出てきて、どっちがいいんだ？といつもよくわからないまま使っていました。なので、どれがいいのか？そもそもこの単位たちは何なのか？復習も兼ねて調べてみました！

https://blog.karasuneko.com/3092/

remとはroot emという意味で、要するに文書全体のルート要素であるhtml要素のfont-sizeを基準にするというものです。これは非常に便利で、フォントサイズの指定が分かりやすくなります。私は以下のように指定してみました。

html {
    font-size: 62.5%; /* 10px */
}

body {
    font-size: 1.6rem; /* 16px */
}

h2 {
    font-size: 2.6rem; /* 26px */
}

親要素に左右されないので、フォントサイズの指定をピンポイントで行うことができます。

スマホの横画面でも文字を拡大させない

見出しの通りなんですが、スマホ版の横画面で文字を拡大させないようにするCSSです。

[CSS]スマホサイトで端末を横にしても文字サイズを拡大させない方法

iPhoneなど向けにスマホサイトを作っていると「端末を横にすると、文字が拡大表示されちゃう！」と困った経験があるかもしれませんが、 CSSの-webkit-text-size-adjust:100%

https://webantena.net/css/webkit-text-size-adjust/

上の記事の通り、bodyに-webkit-text-size-adjust:100%を指定するだけです。

body {
    -webkit-text-size-adjust: 100%;
}

超簡単です。

画像の下にできる謎の余白を解消

これも見出し通りですが、画像の下に謎の余白ができてレイアウトが微妙に崩れることがありました。でもこれには対処方法があるため、速攻で解決できます。

ideahacker.net - ideahacker リソースおよび情報

ideahacker.net は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、ideahacker.netが全てとなります。あなたがお探しの内容が見つかることを願っています！

https://ww1.ideahacker.net/2013/12/03/6983/

私はimgタグにdisplay: block;を指定しました。

img{
    display: block;
}

これも超簡単ですね。

斜めストライプの背景

当ブログでは本文中の画像にこの背景を利用しています。

【CSS3】斜めのストライプ状の背景をCSSだけで実装する方法

スタイルシートだけでウェブページの背景にストライプ状の模様を施すテクニック［CSS3 Background Stripes］を紹介します。まずは実際のサンプルをご覧ください。CSS3 Background Stripes...

https://on-ze.com/blog/5954

該当の箇所だけ抜き出します。

img {
    background-image: linear-gradient(45deg, #eeeeee 25%, #e6e6e6 25%, #e6e6e6 50%, #eeeeee 50%, #eeeeee 75%, #e6e6e6 75%, #e6e6e6);
    background-attachment: fixed;
    background-size: 8px 8px;
}

何となくオシャレな感じになったのと、これは画像だということが分かりやすくなって自己満足。