新しいCSSの機能の中でもとくに大物なのがflexbox。普及すればいままでのCSSレイアウトの手法が大きく変わります。このflexboxの実践的な使い方をこれから4回シリーズで紹介していきます。今回は比較的簡単な、flexboxを使ったナビゲーションメニューの作成方法です。
CSSのfont-familyプロパティなどで使われる一般フォントファミリー(sans-serif、serif、cursive、fantasy、monospace)の解説をしています。
border-radiusは手軽で効果の大きいCSSプロパティです。簡単に使えるのも魅力のひとつですが、実はborder-radiusには複数の書式があります。ボックスの四隅の角丸を柔軟に調整する方法を紹介します。
HTML、CSSファイルを新規に作成するとき、文字コードの選択でつまづく方が多いようです。ここでもう一度、補足説明をします。
HTMLやCSSファイルは、現在では特殊な事情がない限り、文字コードをUTF-8形式で保存します。ところで、UTF-8形式で保存する際に「UTF-8」と「UTF-8N」という、似たような2つの選択肢が出てくるテキストエディタがあります。「この違いはなんだ?どちらを選んだらよいのか」という質問を読者の方からいただきました。たしかに混乱するところなので、ここでお答えします。
HTMLやCSSに慣れてきて、Webページの完成度をもっと上げたくなったら、フォントを変えてみましょう。CSSを使用した基礎的なフォントの操作を紹介します。
「カスケード順序(1)作成者/ユーザー/UA CSS」で記したとおり、CSSには3つの出所があります。そして、それら3つのCSSは、UA→ユーザー→作成者CSSの順に適用されます。出所の違うそれぞれのCSSには、当然のことながら複数のルールが記述されています。これらのルールは、セレクタによって適用する優先順位が決まります。
前回、前々回に引き続き、カスケード順序を取り上げます。CSSには!important
キーワードというものがあり、値にこれがあるプロパティは優先して適用されます。
前回はCSSには3つの出所があり、Webサイトを作成する作者が作成した作成者CSS以外に、ユーザーCSS、ユーザーエージェントCSSという別のCSSも適用されることを紹介しました。今回は、そのうちのユーザーエージェント(UA)CSSの話です。各要素のデフォルトの表示状態が標準仕様書の中で定義されていて、各ブラウザベンダーはそれをもとにUA CSSを作成しています。
CSSの仕様は全体に複雑ですが、中でもカスケード順序は難しいと言えます。おかげで重要な概念のわりには理解が曖昧なままにしている人も多いのが現状です。これから数回に分けてその複雑なカスケード順序の解説をします。