vwで幅指定をすると横スクロールバーが表示される件

要素の横幅を「100vw(viewport width)」に指定すると、横スクロールバーが表示されるので注意!

【原因】Windows では Viewport にスクロールバーの幅が含まれるため。
MacOS・iOSではスクロールバーはフロート表示されるのでこの現象は見られない。(Androidは未確認)

【対策】パーセンテージ「100%」で指定する。

色相ローテーション

標準CSSでの変数

通常のCSS構文で変数を使う方法。

SASS/SCSSやLESSなどでは、変数やif文・for文などが使えて便利そうだなとずっと思っていましたが、最近、ノーマルのCSSでも変数の記述ができるようになっていたのでメモしておきます。

ブラウザよってはまだ非対応なので、対応状況はこちらでご確認を。

Flex box

display:flex を使ったカラムレイアウト。

毎度のことですが旧ブラウザでは未対応です。各ブラウザの対応状況はこちらでご確認を。

Javascriptを使えばIE8・9にも適応させることもできますが、対応が必要なかたは以下の参考サイトでご確認ください。
【参考サイト】
IE8・9にもFlexboxを対応させる、flexibility.jsがとっても便利!

アイコンWEBフォント(Genericons)

WEBフォントの「Genericons(ジェネリコン?)」を使ったアイコン表示。

「Genericons(以下ジェネコン)」とは、
WordPressのテーマで使われている記号用のWEBフォントで、
 」こんな感じや、
 」こんな感じのアイコンを
画像ではなく文字として表示するためのフォントです。

※【2017.04.30追記】現在「Generinons」は「Genericons Neue」に仕様が変わり、GitHubからSVGやCSS等のデータをダウンロードして使うようになっています。また、新仕様ではSNS等のロゴマークも無くなっています。
詳しくは本家 http://genericons.com/ にてご確認ください。

今回はこのフォントを通常のHTMLに組み込んで使ってみます。

HTML5+CSS3の時代だからSVGを

SVG形式ならビットマップ画像じゃなく
パスの状態でWEBにアップできるから
拡大しても劣化しない?

かなり昔からイラレのファイル形式にあったSVG形式。
WEBにアップして拡大してもキレイに見えるってことで、一度、挑戦してみたことがあるのですが、ほとんどのブラウザが対応していなっかたのであきらめてました。

しかし、HTML5+CSS3の時代がやってきた今では実用しているサイトを見かけるようになったので、ちょっとサンプルを作ってみました。

作ってみるとかなり奥が深く、メリットもデメリットも多々あります。

まだまだ私も勉強が必要なのですが、参考までにぜひどうぞ。