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

         

CSS

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

2020年01月09日 8:00 

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

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

 

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

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

 



@charset

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

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

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

例:

 

@media

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

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

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

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

例:

 

@important

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

例:

 

@font-face

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

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

例:

 

@supports

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

例:

 

 

@page

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

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

例:

 

@keyframes

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

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

例:

 

まとめ

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

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

関連記事

この記事を書いた人

アバター

hgm

農業高校出身フロントエンドエンジニアの社員hgmです。 猫センサー搭載済みの愛猫家。 広い視野を持って日々邁進していきます!