CSS スタイルシートの小技等のご紹介

Google Material icons + 文字列で縦を揃える

2018年3月16日

Google Material Iconsという、WEB制作の現場でアイコンを使いたいときに重宝するサービスが有ります。例えばお問合わせボタンの横にメールアイコンを表示したい場合等にとても便利です。

サンプル

使い方は至って簡単で、GoogleのCSSを読み込ませ、ここからアイコン表示用のHTMLを取得するだけです。

と、ここまではたくさんのサイトさんが解説しているのですが、実際の現場でリンク文字列の横にアイコンを配置してみると、文字とアイコンの下端が揃いません。

サンプル

 

vertical-alignを使えばいいかな?と思ったのですが、それだけでは揃わず、Googleから読み込んでいるCSSを少し変える事で対応出来ました。

サンプル

Googleから読み込まれるCSS

これのdisplay: inline-blockdisplay: inline-flexに変更し、vertical-align: middleを指定します。

Bootstrapにも使いやすいアイコンが有るのですが、数的にはこちらの方が勝っていますね。

Bootstrapと言えば、数年前に私的マニュアルを作って公開しているのですが、バージョン上がってちょっと使えなくなっていますね・・・現行バージョンで書きたいんですが、中々時間が取れず。というより、歳のせいか集中力の低下とモチベーションの維持が難しいですね(汗

 
  • このエントリーをはてなブックマークに追加
  • LINEで送る

PAGE TOP