CSSのat-rule、皆さん使ってますよね?
どんなものがあって、どういう構文で成り立っているのか整理してみます。
@[KEYWORD] (ROLE);
これがCSSのルールです。
@charset "UTF-8";
を見ると「あ〜、それのこと」と思うのではないでしょうか。
それでは色々なパターンを見ていきます。
@charset
@charset "UTF-8";
上記でもご紹介した文字セット定義です。
@import
@import "global.css";
外部CSSを読み込むときのルールです。
@document
@document url(http://unitopi.com/), domain(unitopi.com)
特定のページのみにスタイルを適用したいときに使います。
url
やdomain
のほかにも指定方法がありますが、Firefoxしか対応していないなど、サポート状況が芳しくありません。
@font-face
@font-face{
font-family: "myfont";
src: url('myfont.woff2');
}
これはよく使うルールの一つですね。ちなみに@RULE {...}
とすることで複数条件などを入れることが出来ます。
@keyframes
@keyframes pulse{
0%{
background-color: #333333;
}
100%{
background-color: #555555;
}
}
これも最近ではよく目にします。キーフレームアニメーションの開始と終了(途中も定義可能)を定義します。
@media
@media only screen and(min-device-width:320px) and (max-device-width:480px){
width: 100%;
}
@media print{
}
レスポンシブデザイン、スマートフォン対応などでよく見かける対応方法です。
特定の画面にスタイルを適用させるために条件文を含んでスタイルを適用します。
print
に関しては印刷用スタイルを定義することができます。
なお、mediaの種類はこんなものがあります。
all | すべての環境 |
screen | パソコン画面 |
tty | 文字幅固定の機器 |
tv | テレビベースのウェブブラウザ |
projection | プロジェクタ |
などなど
まとめ
いかがでしたか?
あまり心躍るワクワク系の内容ではなかったですが、CSS自体の定義という意味ではメタデータを扱ったり、条件情報をあつかったり、記述的情報を伝達するために必要不可欠な構文となっています。
普段使うものも多くはないので、サラッと覚えておきましょう!
Author Profile
Latest entries
- 2018.04.16プロフェッショナルインタビュー【企業編】広島から全国、そして世界を目指す!株式会社MIRAIのハイレイヤー分析
- 2016.10.21プロフェッショナルインタビュー【企業編】【後編】「夢があればブラックじゃない」福岡の技術集団オルターブースはベーシスト小島氏と愉快な仲間たち
- 2016.10.18プロフェッショナルインタビュー【企業編】【前編】福岡の技術集団オルターブース。楽曲を作れると思ってCOBOLを書いていたベーシスト小島氏と愉快な仲間たち
- 2016.09.02プロフェッショナルインタビュー【フリーランス編】【後編】代理店の仕事は気が楽だけど、それでも直接受ける案件が大事。JUSO Coworkingオーナー深沢さんの仕事