WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

CSSの新しい便利な機能を使う

Windows OSのサポートには期限があり、各OSの期限は、Windows 7は2020年1月14日で終了済みで、Windows 8.1は2023年1月10日に終了となります。
Windows 7のサポート期限が過ぎた事で、今後IE11のサポートを切るという選択が一層増えてきます。
HTML5やCSS3にはIE11がサポートしていない為、使えない便利な機能が多くあります。そういった便利な機能が今後は使えるようになって来るので、知っておきましょう。



  • background-clip
  • text-fill-color
  • font-face
  • position:sticky
  • inputを使ったドロワーメニュー

background-clip

background-clipプロパティは、背景の適用範囲を指定する際に使用します。テキスト部分に背景画像を適応させたい場合、

-webkit-background-clip: text;

と指定します。
※注意 2017月12月現在、-webkit-のベンダープレフィックスが記述が必要です。



-webkit-text-fill-color: transparent;

さらに「text-fill-color」を transparentに指定する事で文字色を透過にする事が出来ます。transparentの代わりに「color: rgba(0,0,0,0);」でもOKです。



webフォントには大きく分けて2種類の使い方があります。
1つはGoogleFontのようにネット上にあるCDNを使うパターンです。
今回は、もう1つの、「自身でフォントデータをサーバーにアップする」方法をやってみましょう。こちらの方法を使えば、GoogleFontには無いような珍しい個性的なフォントを表示させる事も可能になります。


1、使いたいフォントデータを自身のサーバーにアップロードする。

2、CSSに「@font-face」でフォントの指定をする。

@font-face {
   font-family: MyFont; /*任意の名前を付ける*/
   src: url('fonts/againts.otf') format("opentype");
}

3、適用させたい要素に上で付けたfont-familyを指定する

h1 {
  font-family: MyFont;
  font-size: 40px;
}

fontfree.me



photoshopvip.net