Tag CSS3

New!

CSS3: 擬似要素 :before, :after で配置した画像サイズを変更する

開発が完了した Web アプリやサイトで HTML ではなく、CSS 修正のみでアイコン画像等を挿入したい場面があります。 その際、擬似要素 :before, :after でコーディングを行いますが、画像を直接挿入した場合サイズ変更ができません。 今回は上記ケースで画像サイズを変更する方法を説明したいと思います。 目次 擬似要素 :before, :after で配置した画像サイズを変更する まとめ 擬似要素 :before, :after で配置した画像サイズを変更する 以下のような HTML ソースのリスト要素 li の先頭に、アイコン画像を挿入したい場合、content ではなく backgroud 指定による画像配置を行うことで画像サイズの調整が可能になります。 HTML CSS まとめ Web フォントやアイコンが使えない環境や、後方互換による表示不具合が起こる場合、今回の擬似要素による backgroud のイメージ指定を行うことで、解決できます。 レガシーブラウザ対策によるデザイン問題が起こった場合、有効な手段かと思いますので、参考になさってください。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

CSS3: flex でマージンが設定された行のカラム数を調整する

CSS の flex レイアウトでレイアウトを組むのが当たり前になりました。 今回は flex コンテナ内のマージンが設定されたボックスの1行カラム数を、好みのレイアウトに調整する説明をしたいと思います。 目次 flex でマージンが設定された行のカラム数を調整する まとめ flex でマージンが設定された行のカラム数を調整する 今回は li に margin: 10px が設定されたリストの1行のカラム数をコントロールしたいと思います。 HTML flex(flex-basis)を 33%(100%/3 = 33.333% を切り上げ)とすることで margin が存在するボックスも 2列でレイアウトすることができます。 CSS 1行を3列にしたい場合は flex: 26%(100%/4 = 25+1% )とすることで 4列ではなく 3列になります。 まとめ 2014年の CSS Flexible Box Layout Module Level 1 最終草案から、多くの年月が経過し、デバイス環境の変化により float レイアウトが不要となりつつあります。 これからも float が必要なコーディングはなくならないと思いますが、メインのレイアウトは、コスト面において flex で行うのがメリットが多い時代になってしまったと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

CSS3: Bootstrap 特定のリンクボタンの hover 効果を無効化する

Bootstrap をはじめとする CSS フレームワークや、自身で作成したボタンクラスを利用した際、後日、特定のボタンに対し見た目はそのままに、hover 効果はなくしたいケースがあります。 今回は CSS のボタンクラスに割り当てられた hover 効果を無効化する方法を説明したいと思います。 目次 Bootstrap 特定のリンクボタンの hover 効果を無効化する まとめ Bootstrap 特定のリンクボタンの hover 効果を無効化する CSS ボタンのイベント効果を無効化にするクラスを作成します。 CSS 以下のような button1, button2 といったボタンがある場合を例にとると、btn-ignore クラスが追加されてある button2 は、マウスオーバー時にボタンの色や、マウスカーソルが変化する効果が無効化されます。 ただし、見た目の効果が無効化されるだけですので、ボタンにハイパーリンクが設定されている場合は、クリックすれば遷移してしまうので扱いには注意が必要です。 HTML まとめ CSS の仕様をキャッチアップできていれば、今回のような問題もすぐ解決するのですが、Bootstrap 等に慣れてしまっていると、カスタマイズ時にどうしても躓いてしまいます。 今回のケースでは、ボタンクラスをボタン機能以外の用途で利用していますが、UX 上問題があるので、利用時にはページやアプリデザインを再度検討することも重要だと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

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で共有していただければ幸いです。

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で共有していただければ幸いです。