意外と知らないCSSのルールセット

おはようございます、hgmです^^

ホームページ制作をするのに欠かせないCSSですが、今回はルールをセットできる「@〇〇〇」をまとめました。

普段使うものから、意外と知らないルールがあるかもしれません。

@charset

スタイルシートの文字エンコーディングを指定します。

こちらはスタイルシート内で一番最初に記述する必要があり、これより前に文字を記述してはいけない決まりとなっています。

また、スタイルシート内のみでしか指定できず、HTML等の<style>タグ内では使用できません。

例：

@charset "utf-8";

@media

スタイルシートを適用する条件を指定することができます。

レスポンシブに対応する際は欠かせないルールです。

@media のあとに続いて、下記のメディアタイプを指定します。（数が多いため一部抜粋しています）

• all – 下記のすべて
• screen – ディスプレイ
• print – 印刷
• aural – 音声読み上げ
• braile – 点字
• handheld – ハンドヘルド(携帯)
• projection – プロジェクタ
• tv – テレビ
• embossed – 点字 (CSS2)
• speech – 音声 (CSS2)

例：

/* 幅が767px以下の場合 */
@media (max-width:767px){ ... }

 /* 幅が 768px 以上であれば */
@media (min-width:768px){ ... }

 /* 幅が768px以上、1200px以下の場合 */
@media (min-width:768px) and (max-width:1200px){ ... }

@important

他のスタイルシートから @charset を除いたスタイル規則をインポートするために使用します。

例：

@import url("/css/style.css");

@import "style.css";

@font-face

テキストを表示するための独自フォントを指定します。

ローカルでフォントが無いパソコンの場合に、サーバーにアップされている指定されたフォントを読み込みます。

例：

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans.ttf") format("ttf"),
       url("/fonts/OpenSans.woff") format("woff");
}

@supports

宣言をブラウザが1つまたは複数の特定の CSS 機能に対応しているかによって、宣言を指定することができます。

例：

@supports (display: grid) {  /* display: gridが使用できるブラウザの場合 */ 
  div { 
    display: grid; 
   } 
}

@supports not (display: grid) { /* display: gridが使用できないブラウザの場合 */
  div {
    float: right;
  }
}

@page

文書を印刷するときに一部の CSS プロパティを変更するために使用します。

変更できるCSSが限られていてmargin, orphans, widows と、文書のページ区切りだけです。

例：

@page {
margin: 1cm;
}

@keyframes

アニメーションの流れに沿ったキーフレーム (または中間地点) のスタイルを定義することによって、一連の CSS アニメーションの中間ステップを制御できます。

animation-name プロパティで指定したものと同じ名前がついた @keyframes 規則を作成します。

例：

@keyframes slidein {
 from {
  transform: translateX(0%);
 }

 to {
  transform: translateX(100%);
 }
}

まとめ

ご紹介したルールセットで、初めて知るものはありましたでしょうか？

恥ずかしながら私自身初めて知るものがあり、今後のホームページ制作に活かせる便利なものを知ることができ勉強になりました。