カテゴリー: CSS3
position: sticky
See the Pen position:sticky by Hiro Iruya (@leo-loki) on CodePen.
CSS：object-fit
【参考】画像を指定した範囲内に自動でフィットさせるCSSプロパティ。
IE/Edgeへの対応方法もあり。
参考記事：Webクリエイターボックス
1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
画像を指定した範囲内に自動でフィットさせるCSSプロパティ。
IE/Edgeへの対応方法もあり。
標準CSSでの変数
通常のCSS構文で変数を使う方法。
SASS／SCSSやLESSなどでは、変数やif文・for文などが使えて便利そうだなとずっと思っていましたが、最近、ノーマルのCSSでも変数の記述ができるようになっていたのでメモしておきます。
ブラウザよってはまだ非対応なので、対応状況はこちらでご確認を。
Flex box
display:flex を使ったカラムレイアウト。
毎度のことですが旧ブラウザでは未対応です。各ブラウザの対応状況はこちらでご確認を。
※Javascriptを使えばＩＥ8・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にアップして拡大してもキレイに見えるってことで、一度、挑戦してみたことがあるのですが、ほとんどのブラウザが対応していなっかたのであきらめてました。
しかし、HTML５＋CSS３の時代がやってきた今では実用しているサイトを見かけるようになったので、ちょっとサンプルを作ってみました。
作ってみるとかなり奥が深く、メリットもデメリットも多々あります。
まだまだ私も勉強が必要なのですが、参考までにぜひどうぞ。