CSS3でマルチカラムの間隔を指定する

マルチカラムの間隔を調節する方法をみつけました。 Ardor(@ArdorOnline)です。 マルチカラムが簡単にできるようになったのはいいですが、間隔などマージンのやり方がわからずにいました。 間隔を指定するプロパティが見つかったので、ご紹介します。

CSS3のcolumn-widthでマルチカラムレイアウトを実現する

column-widthでもマルチカラムレイアウトが作れます。 Ardor(@ArdorOnline)です。 マルチカラムレイアウトをCSS3で作るならcolumn-widthでも作れます。 前回、column-countでマルチカラムを作成しました。 column-countでは、段組み数を指定する方法なので、他の幅などを考慮して作成する必要があります。 何段で作成するかを明確に指定が可能な方法です。 では、幅に合わせて段組みを作りたい場合は、どうしたらいいでしょうか？ 幅で指定したい場合は、column-widthを利用します。

CSS3のcolumn-countを利用した段組みレイアウト

様々なサイトで段組みレイアウトが使われています。 Ardor(@ArdorOnline)です。 段組みレイアウトは、ブラウザによってレイアウトが崩れたり、なかなか思い通りのレイアウトにならなかったりと苦労が耐えないものです。 そんな段組みレイアウトの機能が、CSS3からサポートされました！簡単にご紹介します。

CSS3で要素に繰り返しスタイルを適用する方法

リストやテーブルの行に繰り返してスタイルを指定する方法があります。 Ardor(@ArdorOnline)です。 以前は、奇数に"odd"、偶数に"even"とクラスを指定して対応することが多かったです。 CSS3からは、構造擬似クラスを使って、もっと簡単に指定が行えます。簡単にご紹介します。

CSS3で使えるメディアクエリのタイプと特性の一覧

メディアクエリについて調べていました。 Ardor(@ArdorOnline)です。 CSS3から特性の指定ができるようになり細かく制御できるようになりました。 ここで一度整理しておきます。

構造擬似クラス(empty)を使って空要素にスタイルを適用する

テーブルで空の場所にスタイルを適用したいことがあります。 Ardor(@ArdorOnline)です。 テーブルのデータが空だったらスタイルクラスを指定することで解決していました。 CSS3からは、もっと簡単に一括して設定する方法がありました！emptyについてご紹介します。

CSS3の構造擬似クラスを比較する

構造擬似クラスは要素のカウント方法が違うものがあります。 Ardor(@ArdorOnline)です。 以前「CSS3で要素に繰り返しスタイルを適用する方法」で 繰り返しスタイルを適用する方法をご紹介しました。 ご紹介したのは「:nth-child」の使い方でした。 実は他にも繰り返しスタイルを適用する方法が、CSS3から追加されています。