object-fit・currentColor・will-change・image-renderingなどマイナーだけど便利過ぎるCSSプロパティの使い方 作成：2016/11/14 更新：2016/11/15 Web制作 > object-fit・currentColor・will-change・image-renderingなど、結構マイナーだけど、実用的なCSSプロパティをピックアップしました。 エンジニア速報は Twitter の@commteで配信しています。 object-fitプロパティはボックスに合わせて、アスペクト比を維持したまま画像サイズを調整できます。 例えば600×300の画像をCSSで400×400で指定したとすると正方形に引き伸ばされます。この時アスペクト比は崩れてしまいます。 しかし、imgにobject-fit: contain;を追加すると、imgに指定し

CSS Nite LP47 Coder's High 2016 http://cssnite.jp/lp/lp47 「イマドキのコーダー環境構築」で発表したスライドです。 ※スライド上のURLリンクは効かないので、下部文字起こしから飛んでください。

Google FontsやAdobe TypekitのWebフォントを利用すると、IEなどのブラウザはWebフォントのダウンロードが完了するまでは代替フォントでテキストを描画します。 その後Webフォントのダウンロードが完了した際にWebフォントを用いたテキストの再描画を行い表示を切り替えます。 このテキストが切り替わる瞬間に文字幅の変化によるコンテンツの移動やちらつきのような現象が発生します。 特にこのちらつき現象はWebフォント以外の原因で発生する描画のちらつきも含めてFlash Of Unstyled Text (FOUT)と呼ばれているようです。 今回はこのテキストの再描画を防ぐ方法を紹介します。CSSだけで設定できますのでとても簡単です。 テキストの再描画についてデモコード設置方法参考サイト １．テキストの再描画について Google DevelopersのWebフォントの解説に

いつもサイト運営者を悩ませる Font-Family の指定。 今回は最先端な Font-Family 指定を考えてみました。 2017年になりましたが特にフォント環境の動きがなかったので、少なくとも当年中はこの記事を更新の更新を続けていきます。 当サイトで指定しているFont Family 当サイトでは現在、こんな感じで指定しています。 font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', meiryo, sans-serif; クリップボードにコピー スポンサーリンク Mac では安定のヒラギノ Mac では普段目にするフォント、ヒラギノ角ゴを指定します。 なんだかんだでずっと Mac のシステムフォントとして使われてます

どうもこんばんは。 初老のデザイナーたあです。 簡潔に書きます。 タイトルを挟む1pxとかの横線を簡単に書くCSSを一生懸命考えてみたので忘備録。 こういうやつですね .title-border { display: flex; align-items: center; } .title-border:before, .title-border:after { border-top: 1px solid; content: ""; flex-grow: 1; } .title-border:before { margin-right: 1rem; } .title-border:after { margin-left: 1rem; } これを線を入れたいとこに入れるだけっす。 こんな感じで <div class="title-border">これ</div> 以上でした。 なお余白の取り方