Tag CSS

eyecatch_image
Update!

CSS3: Bootstrap 4 Beta でグリッドレイアウトの offset クラスがなくなる

Bootstrap 4 Alpha から Beta の仕様変更で、グリッドレイアウトの offset クラスがなくなりました。 今回は、Bootstrap 4 Beta での offset の代わりとなる、auto の使い方をメモしておきます。 目次 Bootstrap 4 Beta グリッドレイアウト auto の使い方 まとめ Bootstrap 4 Beta グリッドレイアウト auto の使い方 Bootstrap 4 Alpha 以前に採用されていた offset-x(x は数値) クラスを、ml-auto、もしくは mr-auto に変更することで対応します。 HTML カラムの左側が空白の場合 ml-auto を、カラムの右側が空白の場合 mr-auto を設定すれば、自動的にオフセット値が計算され、スペースが確保されます。 まとめ Bootstrap4 Beta は正式リリースに限りなく近いものとなっているはずです。 現在 Bootstrap3 を利用している方は、そろそろ Bootstrap4 へリプレースを行なってもよいかもしれません。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
eyecatch_image
Update!

CSS: Mac 環境で CSS プリントのデバッグを行う方法

Web サイトやアプリ開発において、プリンタ出力時のスタイルを定義する必要がある要件もあるかと思います。 Mac の場合、デフォルトブラウザが Safari ですが、残念ながら Safari の Web インスペクタにプリントデバッグの機能はありません。 したがって、今回は Mac 版 Chrome を使用し、プリントのスタイルを確認する方法を説明したいと思います。 目次 CSS プリントのデバッグを行う方法 まとめ CSS プリントのデバッグを行う方法 Chrome が未インストールの方は Chrome 公式サイトから ダウンロード します。 Chrome のメインメニューより 表示 -> 開発/管理 -> デベロッパーツール を起動します。 デベロッパーツールの下部ペインの Rendering タブ の下の方にある Emulate CSS media より print を選択すれば 印刷用CSS での出力が確認できます。 まとめ Safari は Mac や iOS デバイスのデバッグに適した Web インスペクタ が用意されていますが、Web 開発のデバッグ時には Chrome のように軽快に動作しない場面も少なからずあります。 iOS アプリ開発時の Safari の Web インスペクタによるデバッグはとても使いやすいので、次期 macOS で改善されればいいのですが。。 この記事がみなさんのお役に立ちましたら、下記「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で共有していただければ幸いです。

CSS: 擬似クラス before, after の解除方法

link, visited, active, hover 等、CSS 擬似クラスは多数存在します。 チームで制作を行っていると、フレームワークやベースのコードに、clearfix や装飾等の before, after 要素がコーディングされていて、不都合なときがあります。 今回は、before, after 擬似クラスを、拡張し解除する方法をメモしておきます。 目次 before, after の解除方法 まとめ before, after の解除方法 someclass の before 要素をカスケードで拡張し、解除(打ち消し)したい場合は以下のように記述します。 まとめ

CSS: Absolute で上下左右の中央配置

久しぶりに、CSS の Absolute で縦横中央配置するときに少々手こずってしまったのでメモしておきます。 目次 Absolute 中央配置 まとめ Absolute 中央配置 外側の div (wrapper) と、中央配置したい div (inner) を用意します。 HTML 外側の div (wrapper) に position: relative と縦横サイズ、中央配置したい div (inner) に position: absolute にし、top, left, right, bottom プロパティに同一の値(ここでは 0)を指定し、margin: auto にします。 CSS 結果 wrapper クラスの div(薄いグレー)の中の inner クラスの div(濃いグレー) が上下左右中央に配置されました。 まとめ absolute のような決め打ちのスタイルはあまり使いたくはないのですが、どうしても使用を避けられない場面もあるかと思います。 flex でも同様のことが実現できますが、モダンブラウザでの互換性を考慮する場合、ある程度使える方法なのではないでしょうか。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

CSS: リンク擬似クラス :link, :visited, :hover, :active の記述順

CSS の記述順が間違っているため、リンクタグ擬似クラスが効いていない時があります。 リンクテキストのカラーならサイトの動作に問題がないため、ついついそのまま放置してしまうケースもあるかと思いますが、あまりよろしくはありません。ちゃんと直しましょう。 今回はこの CSS 記述順をいつも忘れるのでメモしておきます。 目次 リンクタグの擬似クラス :link, :visited, :hover, :active 記述順 まとめ リンク擬似クラス :link, :visited, :hover, :active の記述順 記事のタイトルそのままですが、:link -> :visited -> :hover -> :active の順に記述します。 サンプル CSS 覚え方 擬似クラスの頭文字をとって lvha -> l(o)v(e) & h(over)a(ctive)te -> love & hateと覚えます。多少無理矢理な感じがしますが、それでもないよりはマシかと思います。 まとめ 覚え方は love & hate でしたが、この love & hate を忘れてしまっていました。 CSS の継承とリンクタグの性質をしっかり理解していれば、こう言った試験前の一夜漬けのような覚え方をしなくても自然と書けるはずなのですが、一度記事にしましたので、もう忘れることはないと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。