calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

聞き慣れないけど確実に知っておきたいCSSやhtmlの新機能

効率よくレイアウトを作成できるように、あまり聞き慣れないけど、今後増えていくであろうプロパティや単位、仕様策定中の新しいプロパティなどについて非常に参考になる記事をチョイスさせていただきました。

PR
IT/WEB業界への転職なら
Sponsored Link

srcset属性

HTML5で策定されたsrcset属性をimageタグに使うと複数の画像をカンマ区切りで指定することができます。「ウィンドウサイズに応じて画像を切り替える」とのこと。必要な画像だけ読み込まれるのでパフォーマンスが向上しそうです。

<img src="foo.jpg" srcset="2.jpg 2x,
  3.jpg 3x" alt="">

srcは未対応ブラウザのフォールバック、「x」はデバイスピクセル比(画素密度記述子)、「w」は横幅(幅記述子。○○px以下なら○○w)となります。上の例だとピクセル比が2のとき"2.jpgが選ばれるということになります。

sizes属性は指定したメディアにマッチすると指定した幅になります。vhはviewport heightの略で、親要素ではなく、ビューポートの高さに対する割合を示します。モバイルの向きなど気にせずに背景画像をブラウザにフィットさせることが出来ます。

<img src="clock-demo-thumb-200.png" 
  alt="Clock" 
  srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w"
  sizes="(min-width: 600px) 200px, 50vw">

Can I use

font-feature-settingsプロパティ

タイポグラフィの機能を制御するfont-feature-settingsプロパティ。合字の表示など、OpenTypeフォントの機能(featureタグ)を指定し、デバイスフォントやWebフォントにも使えるそうです。下記の記事にはfeatureタグが紹介されています。

font-feature-settings: normal;

Can I use

Grid Layout Module

複雑なレイアウトを構築するために便利なプロパティ。行列のグリッドを使い任意の場所に要素を配置する方法。親要素にdisplay: gridを指定、プロパティには列幅と行の高さを指定して使います。

display: grid;

Can I use

font-smoothing

文字を滑らかに表示するfont-smoothingプロパティ。簡単にフォントのアンチエイリアスを調整できます。

-webkit-font-smoothing: antialiased;

[CSS] フォントのアンチエイリアス設定 | metrograph.jp

Can I use

vw / vh / vmin / vmax

vw/vhはブラウザのビューポート(表示領域。高さと幅)に対する割合(%)を示した単位。vwはビューポート幅・vhは高さに対する単位。デバイスの向きなどに左右されずブラウザに対する処理を行えます。高さをピッタリ合わせたい時なんかに便利。

height: 100vw;

ビューポートを単位にした CSS でスマホ向けのコーディングがハッピーになった話 | EXP - クリエイティブな事をはじめた(い)全ての人達へ

Can I use

スポンサード リンク

この記事を書いた人
投稿者:commte

株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL:西田 鉄平
この後によく読まれている記事

Comments

Leave a Comment

コメントする