テーマ作成時に参考にしたサイトの中で、一つの記事にするほどの内容ではないCSSの小ネタを5つご紹介します。どれもないと困るし、実装するととても便利な方法です。
フォントサイズ指定
CSSでフォントサイズを指定する時、font-size: 16px;のようにpxで指定する絶対指定はあまりよくないというのを昔見たことがあったので自身のサイトでは相対指定を心がけていますが、この相対指定にも色々と種類があります。中でも%やemはよく知られていると思いますが、今回私が新たに知ったのがremという単位です。
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です。
[el url=”https://www.webantena.net/css/webkit-text-size-adjust/”][CSS]スマホサイトで、端末を横にしても文字サイズを拡大させない方法[/el]上の記事の通り、bodyに-webkit-text-size-adjust:100%を指定するだけです。
body {
-webkit-text-size-adjust: 100%;
}超簡単です。
画像の下にできる謎の余白を解消
これも見出し通りですが、画像の下に謎の余白ができてレイアウトが微妙に崩れることがありました。でもこれには対処方法があるため、速攻で解決できます。
[el url=”http://ideahacker.net/2013/12/03/6983/”]【CSS】画像の下に謎の余白ができちゃう問題を解決する方法 – アイデアハッカー[/el]私はimgタグにdisplay: block;を指定しました。
img{
display: block;
}これも超簡単ですね。
斜めストライプの背景
当ブログでは本文中の画像にこの背景を利用しています。
[el url=”https://on-ze.com/archives/5954″]【CSS3】斜めのストライプ状の背景をCSSだけで実装する方法 – ONZE[/el]該当の箇所だけ抜き出します。
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;
}何となくオシャレな感じになったのと、これは画像だということが分かりやすくなって自己満足。
Google MapやYouTubeの埋め込みをレスポンシブ対応にする
これもレスポンシブ対応のブログには欠かせないです。
[el url=”https://inthecom.net/718″]【コピペOK】GoogleMapの地図をレスポンシブサイトに埋め込む方法[/el] [el url=”https://www.webdlab.com/labs/layout-r-movie/”]【CSS】YouTube動画をレスポンシブデザインに対応させる方法 | Webデザインラボ[/el] [el url=”https://qiita.com/noir010/items/2b4fe3d10aa0a8861a4a”]Google MapやYoutubeをレスポンシブ対応させる方法[/el]これもCSSを追記するだけなので簡単です。
ただ、iframeを囲むdivタグをいちいち手打ちするのは非効率なので、プラグインのAddQuicktagを使います。
最後に
いかがでしたでしょうか。その他にも色々な小ネタを集めてテーマ作りを行いました。また機会があれば記事にします。
