Tag CSS3

New!

CSS3: テーブルセルの背景色を1行ごと交互に定義する

今回は、擬似クラス :nth-child(even) を使って、table のセルの背景色を交互に定義する方法をメモしておきます。 目次 テーブルセルの背景色を1行ごと交互に定義する まとめ テーブルセルの背景色を1行ごと交互に定義する 以下は bg-alternate クラスを table タグに定義すれば td 要素の背景色が交互に定義されるサンプルです。 まとめ Bootstrap 等の CSS フレームワークを使えば table もいい感じに仕上がりますが、ゼロベースで table の UI を設計する場合、セルを交互に色分けする事で視認性向上に役立ちます。 :nth-child(even), :nth-child(odd) の用途は、この使い方が一番多いのではないでしょうか。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
Update!

CSS3: Bootstrap4 グリッドシステムで横並びの col の順番を入れ替える

 Bootstrap のグリッドシステムでレスポンシブデザインを行う際、画面サイズに応じて col の順番を入れ替えたいケースがあります。 そういった場合、従来は col-push, col-pull といったクラスを使用していましたが、Bootstrap4 ではクラス名が order へと変更されています。 今回はこの order の使用方法を説明したいと思います。 目次 Bootstrap4 Grid で横並びの col の順番を入れ替える まとめ Bootstrap4 Grid で横並びの col の順番を入れ替える 以下のような 3つの div(col)があった場合、左から順番に 1-2-3 と表示されます。 order-first 3番目 の div(col)に order-first クラスを加えた場合、3-1-2 と表示されます。 order-last 1番目 の div(col)に order-last クラスを加えた場合、2-3-1 と表示されます。 order-num 2番目 の div(col)に order-12, 3番目 の div(col)に order-1 クラスを加えた場合、1-3-2 と表示されます。 bootstrap のスタイルを見ると、order-first には -1、order-last には 13 の order が定義されているため、order-1 や order-12 より優先されることが理解できます。 まとめ bootstrap のバージョンアップによる修正コストは無視できるものではありませんが、今回説明した order への変更は pull、push より明示的な表現のため、コーディングしやすく、メンテナンスがやりやすくなったと感じました。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

CSS3: 最後の要素、もしくは要素が一つの場合の要素にスタイルを適用する

アプリケーションの仕様上、約20年ぶりに テーブルで HTML コーディングを行う必要がありました(笑) テーブルの最終行にのみ適用したいスタイルがあり、疑似クラスを使って簡単に実現できたのですが、少し手間取った場面がありました。 今回は、疑似クラス :last-child の使い方をメモしておきます。 目次 最後の要素、もしくは要素が一つの場合の要素にスタイルを適用する まとめ 最後の要素、もしくは要素が一つの場合の要素にスタイルを適用する table の最終行の th, td 要素の下部ボーダーを表示させたくない場合、疑似クラス :last-child を以下のように適用します。 HTML CSS ところが table が 1行の場合、下部ボーダーは表示されてしまいます。 1行でも下部ボーダーをなくしたい場合、先ほどのスタイルへ、以下のように疑似クラス :only-child を追加することで、最終行のセル、もしくは1行だった場合のセルに対しスタイルが適用されます。 HTML CSS まとめ 今更、テーブルでレイアウトのコーディングするのはやり切れませんでしたが、テーブルにはレスポンシブデザインに必要な柔軟性を持ち合わせています。 画面レイアウトにテーブルを使用することは、コーディング規約やメンテナンス上問題があり、本来の用途以外での乱用は避けるべきですが、flex レイアウトで解決できないとき、助けられる場面もあるかと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

CSS3: A4サイズ(ISO 216規格)比率のスタイルを作成する

A4 サイズを Web 上で描画したい場合、パーセント比率で指定した div を作成すれば簡単に実現できます。 しかし、レスポンシブデザインで可変する横幅に合わせ A4(ISO 216 A列)の縦横比率を、維持した高さを定義しようとすると、少々面倒なことになります。 今回は、A4サイズ(ISO A列)を例に、可変する矩形を描画する方法をメモしておきます。 目次 A4サイズ(ISO 216規格)比率のスタイルを作成する まとめ A4サイズ(ISO 216規格)比率のスタイルを作成する CSS の矩形の比率は CSS: 用紙サイズの規格と dpi (ピクセル)の対照一覧 より用紙サイズの比率をパーセンテージに変換しています。 HTML CSS まとめ 実際の紙媒体の規格を、Web 上で再現する必要はあまりありませんが、印刷やPDF プレビューを行いたい場合、必須となるテクニックだと思います。 比率の部分をクラス化すれば、汎用的なスタイルを定義できますのでお役立てください。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

CSS3: div 等のブロック要素を width にあわせたアスペクト比にする

img タグは width、height を % 指定することで、アスペクト比によるサイズ指定が簡単に行えます。 一方 div 要素に対し、width 100% のアスペクト比による height を記述しようとすると、なかなか意図した結果にならないと思います。 今回は可変する width に対し、アスペクト比による高さを指定する方法を説明したいと思います。 目次 ブロック要素を width にあわせたアスペクト比にする まとめ ブロック要素を width にあわせたアスペクト比にする ここでは、width 100% に対し、正方形(height 100%)の div を作成します。 HTML ネストになる div を作成します。 CSS 外側の div (aspect-container) の before 要素の padding-top を 100% とすることで、width 100% に対して 100% の高さを確保します。 まとめ アスペクト比を維持したまま、ウインドウサイズや親要素の width に応じて、子ブロック要素の height を変えたい場合に有効な方法です。 今回は正方形を例にしましたが、before の padding-top の比率 を変更することで、任意のアスペクト比への対応も可能です。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

CSS3: クラス・id 名に特定文字列を含む要素を指定する方法

CSS クラス・id 名に規則性があれば正規表現を利用し、特定文字列を対象としたスタイル指定が有効です。 今回は、クラス・id 名に 特定の文字が含まれる要素を指定 する記述方法を説明したいと思います。 目次 クラス・id 名に特定文字列を含む要素を指定する方法 まとめ クラス・id 名に特定文字列を含む要素を指定する方法 部分一致 クラス名に 「xxx- が含まれる」 「div 要素」 の 「背景色に red」 を指定する記述は以下のようになります。 前方一致 + 部分一致 クラス名の 「先頭が xxx- で始まる」 「div 要素」 の 「背景色に red」 を指定する記述は以下のようになります。 基本的に class^= の 前方一致 により目的は「ほぼ」達成されますが、 div 要素に対し 複数クラスが定義されているケースに対応 するため class*=” xxx-“ の記述(※要先頭半角スペース+文字列)が必須となります。 まとめ クラスや関数の命名規則に関しては、開発者全員がそれなりにコストをかけてしまう部分です。 それなりに場数を踏めば、既存フレームワークが採用するパターンへと近づいていくものですので、CSS においても最適な名称でコーディングをし、できるだけ少ない行数で、意図したスタイル指定ができるよう心がけましょう。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

CSS3: 擬似クラス not で複数要素を指定する

今回は CSS でスタイルを効かせたくない要素が指定できる擬似クラス、not を複数指定する方法をメモしておきます。 目次 擬似クラス not で複数要素を指定する まとめ 擬似クラス not で複数要素を指定する 下記 HTML で、box1, box3 クラスに対してフォントカラー赤の指定を除外します。 HTML CSS まとめ 参考までに、擬似要素、擬似クラスの違いもメモしておきます。 ::before, ::after, ::first-letter, ::first-line, ::selection は要素の一部に影響を与えるため、擬似要素となります。 それ以外の :link, :visited, :hover, :active, :first-child… は要素全体に影響を与えるため、擬似クラスとなります。 擬似要素はコロン2つ、擬似クラスはコロン1つから始まるので、記述を間違えないようにしましょう。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

CSS3: 最新 Bootstrap 対応 iOS メディアクエリのテンプレート

Bootstrap のグリッドシステムを利用し、iOS 各デバイスに対応した SCSS メディアクエリを作成しました。 現時点での最新 iOS デバイスである iPad Pro 10.5 にも対応しています。 スタイルコーディング時のテンプレートとしてご活用ください。 目次 Bootstrap 対応 iOS メディアクエリ(SCSS) まとめ Bootstrap 対応 iOS メディアクエリ (SCSS) 冒頭のコメントに Bootstrap と既存 iOS デバイスのサイズを明記しておきました。 デバイスの向きは Portrait ベースで作成しており、ネストされた orientation のコメントを解除しなければ、単体で CSS としても利用可能です。 まとめ モバイルファーストから更に iOS に完全対応し、Android と PC は Bootstrap で吸収する方針で記述すると、以上のようになるかと思います。 スクリーン解像度の種類がこれ以上増えなければいいのですが、次の iPhone でまた一つ増えることになりそうです。。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

CSS3: Bootstrap4 グリッドレイアウトの概要メモ

Bootstrap はバージョンごとに時代に合わせ、グリッドレイアウト内部の仕様が変更されています。 今回は、Bootstrap のそのグリッドレイアウトについて、新しいバージョン 4 に対応したグリッドオプションのクラスをメモしておきます。 目次 グリッドオプション まとめ グリッドオプション Extra small (<576px) Small (≥576px) Medium (≥768px) Large(≥992px) Extra large(≥1200px) Grid behavior 常時水平レイアウト 折りたたまれた状態で開始、ブレークポイントで水平レイアウト .container の最大幅 None (auto) 540px 720px 960px 1140px プレフィックスクラス .col- .col-sm- .col-md- .col-lg- .col-xl- オフセットクラス .offset- .offset-sm- .offset-md- .offset-lg- .offset-xl- カラム(列)の分割数 12 レイアウトの間隔 30px (各セルの両端 15px 間隔) まとめ 今回、サンプルコードを掲載したかったのですが、サイト構造の問題で BS4 でのコーディングができませんでした。。 みなさんもこういったことのないように、定期的にコードを見直し、時代に合わせてアップデートしていきましょう。 近々 DB を含めたサイトの再構築を行いたいと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

CSS3: Bootstrap4 グリッドの offset が効かない場合の対処

Bootstrap でのグリッドレイアウト時、空白部分が発生する場合に col-xx-offset-x を利用すると思いますが、バージョン4では反映されなくなっています。 offset の概念がなくなったわけではなく、バージョン4 よりクラス名が変更されているだけですので、メモしておきます。 目次 Bootstrap グリッド offset について まとめ Bootstrap グリッド offset について 以下のようにクラス名が変更されています。 Bootstrap3 例)sm, offset 4 の場合のサンプル Bootstrap4 例)sm, offset 4 の場合のサンプル まとめ Bootrstrap4 では他にも色々なクラス名が変更されています。 Bootstrap は CSS フレームワークとしてはデファクトスタンダードですので、既存コードの対応が必要な方は早めに修正してくことをお勧めします。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。