Sorairo

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

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

advertisement

フォントサイズ指定

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

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

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

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

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

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

超簡単です。

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

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

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

これも超簡単ですね。

斜めストライプの背景

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

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

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

Google MapやYouTubeの埋め込みをレスポンシブ対応にする

これもレスポンシブ対応のブログには欠かせないです。

これもCSSを追記するだけなので簡単です。
ただ、iframeを囲むdivタグをいちいち手打ちするのは非効率なので、プラグインのAddQuicktagを使います。

最後に

いかがでしたでしょうか。
その他にも色々な小ネタを集めてテーマ作りを行いました。
また機会があれば記事にします。

advertisement

related posts

当ブログをご紹介いただきました!

私の大好きなブログ、イロトリドリのこっこさんから当ブログをご紹介いただきました。相思相愛で良かったです(笑)

ブログに欠かせないShareHtml、AppHtmlの細部をカスタマイズしました。

凝り性の私は細かいところを自分の好きなようにカスタマイズするのが大好きです。今回はShareHtml、AppHtmlを細かくカスタマイズしたのでご紹介します。

マウスオーバー時に沈みこむ挙動のボタンをCSSで作成する方法

CSSで作るマウスオーバー時に沈むような挙動のボタンをご紹介します。

TOLOTで2014年の卓上カレンダーを作ってみました!

フォトブックを作ってくれるサービスは数多くありますが、今回は卓上カレンダーを作ってくれるTOLOTを利用してみました。このクオリティで送料込みの500円は安い!

Webサイト制作時に素人の私が重宝しているオンラインツールまとめ。

新規Webサイト構築の際にとても重宝しているオンラインツールをまとめてみました。素人にはありがたいものばかりです。

私が好きなデザインのWebサイトを5つだけご紹介します。

WebサイトのギャラリーサイトCSSManiaの中から個人的に好みのサイトをご紹介します。

最近Pocketに保存した気になる記事をご紹介します。

「あとで読む」サービスのPocketに最近保存した、私が気になった記事をご紹介します。

CSSで複数の要素を横並びにする方法

複数の要素を横並びにするCSSをまとめてみました。