BOOK Studio947
狩野祐東・狩野さやか著書

コラム

パターンで覚えるflexbox(1)─ナビゲーションメニューの作成─

新しいCSSの機能の中でもとくに大物なのがflexbox。普及すればいままでのCSSレイアウトの手法が大きく変わります。このflexboxの実践的な使い方をこれから4回シリーズで紹介していきます。今回は比較的簡単な、flexboxを使ったナビゲーションメニューの作成方法です。

  • 2016-04-07 8:00

sans-serif、serif 以外にもあるCSSフォントファミリーのキーワード

CSSのfont-familyプロパティなどで使われる一般フォントファミリー(sans-serif、serif、cursive、fantasy、monospace)の解説をしています。

多彩な機能のborder-radius

border-radiusは手軽で効果の大きいCSSプロパティです。簡単に使えるのも魅力のひとつですが、実はborder-radiusには複数の書式があります。ボックスの四隅の角丸を柔軟に調整する方法を紹介します。

HTMLやCSSファイル作成時の文字コードはUTF-8BOMなしで

HTML、CSSファイルを新規に作成するとき、文字コードの選択でつまづく方が多いようです。ここでもう一度、補足説明をします。

文字コードはUTF-8? UTF-8N?

HTMLやCSSファイルは、現在では特殊な事情がない限り、文字コードをUTF-8形式で保存します。ところで、UTF-8形式で保存する際に「UTF-8」と「UTF-8N」という、似たような2つの選択肢が出てくるテキストエディタがあります。「この違いはなんだ?どちらを選んだらよいのか」という質問を読者の方からいただきました。たしかに混乱するところなので、ここでお答えします。

テキストを太字にする/フォントを変える〜フォント関係のCSSプロパティ〜

HTMLやCSSに慣れてきて、Webページの完成度をもっと上げたくなったら、フォントを変えてみましょう。CSSを使用した基礎的なフォントの操作を紹介します。

意外と知らないCSSカスケード(4)セレクタによる優先順位の計算

カスケード順序(1)作成者/ユーザー/UA CSS」で記したとおり、CSSには3つの出所があります。そして、それら3つのCSSは、UA→ユーザー→作成者CSSの順に適用されます。出所の違うそれぞれのCSSには、当然のことながら複数のルールが記述されています。これらのルールは、セレクタによって適用する優先順位が決まります。

意外と知らないCSSカスケード(3)!importantキーワード

前回前々回に引き続き、カスケード順序を取り上げます。CSSには!importantキーワードというものがあり、値にこれがあるプロパティは優先して適用されます。

意外と知らないCSSカスケード(2)ユーザーエージェント(UA)CSS

前回はCSSには3つの出所があり、Webサイトを作成する作者が作成した作成者CSS以外に、ユーザーCSS、ユーザーエージェントCSSという別のCSSも適用されることを紹介しました。今回は、そのうちのユーザーエージェント(UA)CSSの話です。各要素のデフォルトの表示状態が標準仕様書の中で定義されていて、各ブラウザベンダーはそれをもとにUA CSSを作成しています。

意外と知らないCSSカスケード(1)作成者/ユーザー/UA CSS

CSSの仕様は全体に複雑ですが、中でもカスケード順序は難しいと言えます。おかげで重要な概念のわりには理解が曖昧なままにしている人も多いのが現状です。これから数回に分けてその複雑なカスケード順序の解説をします。