CSS

CSSで段組みと内容の流し込みをするcolumnsプロパティの使い方

PCでAppleのサイトを表示した時のフッターメニュー (フッターサイトマップ) のように段組みして、なおかつ、画面サイズに応じて段の数を調整しつつ、内容の流し込みをする、columnsプロパティという非常に便利なCSSプロパティがあります。

しかし、実際に使ってみると、各ブラウザで意図したとおりに表示されない場合があって四苦八苦したので、意図したとおり表示される場合とされない場合を合わせてご紹介します。

ウェブページの表示速度を少しでも速くしたいと思っている方は多いと思います。その一つの施策として、画像ファイルなどの外部ファイルをなるべく使用しないという方法があります。

単純な模様であれば、画像ファイルを用意しなくても、CSSのbackgroundプロパティのグラデーション (gradient) だけで作ることができます。今回は、その一例をご紹介します。

チェックボックスとラジオボタンは、1つ前の記事のファイル入力 (input[type=”file”]要素) と同様に、ブラウザ毎にデザインが決まっていて、CSSでデザインすることができない要素です。

今回は、このチェックボックスとラジオボタンのデザインをCSSで変更する方法をご紹介します。コピペで使用できるHTMLコードとCSSコードを併記しています。

HTMLのフォームコントロール要素 (input要素, button要素, select要素, textarea要素, etc…) には、ブラウザ毎に異なったデザインが適用されていて、全てのブラウザで共通のデザインを適用するのは、割とハードルが高めです。

特に、ファイル入力 (input[type=”file”]) は柔軟にデザインするのが困難です。今回はJSを使用してファイル入力を柔軟にデザインする方法をご紹介します。

CSSは簡単なようで難しいです。設定した覚えのないスタイルが適用されているっていうのはウェブサイト制作者なら誰でも経験があるはず。CSS設計をきちんとしていれば起こりづらくはなるのですが、それでも、ごくまれに「あれっ、おかしい」ってなります。

そんなときに役立つ、CSSセレクタの優先順位を自由自在に上げる方法をご紹介します。

Microdataの構造を参考にしたCSS設計・命名規則、名付けて「S2CSS」を紹介します。