Tag CSS3

Update!

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

CSS3: 印刷時の改ページ部分をコントロールする

Web ページを印刷した時、プリント用の CSS が定義されていて、出力結果が綺麗な場合、そのサイトで扱っているコンテンツに対する信用は向上します。 今回はそんなプリント・PDF 出力時に、改行する位置を指定する CSS プロパティについてメモしておきます。 目次 印刷時の改ページ部分をコントロールする まとめ 印刷時の改ページ部分をコントロールする 改ページの CSS プロパティ説明の前に、header 内で print 専用の CSS を読み込みたい場合のサンプルコードを記載しておきます。 print.css を読み込むためのサンプルコード 改ページに関する CSS before 要素プロパティ プロパティ 値 説明 page-break-before auto 制御しない (初期値) always 直前で改ページさせる avoid 直前の改ページを禁止する 改ページに関する CSS after 要素プロパティ プロパティ 値 説明 page-break-after auto 制御しない (初期値) always 直後で改ページさせる avoid 直後の改ページを禁止する まとめ print.css もしくは @media print を使用し、HTML 要素に対し page-break-before もしくは page-break-after で改行位置を指定します。 プリント時のプレビューを確認しながら、区切りのいい位置で div や hr タグに対しこれらのスタイルを定義すれば、PDF 出力時にも適用されます。 普段は見過ごされてしまいがちな印刷時のスタイルを定義しておけば、Web コンテンツ自体の品質・信用の向上につながると思いますので、積極的に導入してみてください。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

CSS3: background ショートハンド(複数指定) background-size の記述方法

久しぶりに CSS を書いていると、ついつい忘れてしまうのが background のショートハンドです。 今回は background ショートハンドへ background-size を記述する方法をメモしておきます。 目次 background ショートハンド(複数指定) background-size の記述方法 まとめ background ショートハンド(複数指定) background-size の記述方法 以下、background でよく行うであろうプロパティを個別に記述した場合、ショートハンドで記述した場合のサンプルをそれぞれ用意しました。 background 個別指定 background ショートハンド(複数指定) ショートハンドでは /cover とすることで background-size: cover を指定することができます。 まとめ CSS の background ショートハンドは CSS2 では多様していましたが、CSS3 からは設定項目が大幅に増えたため、コードの見通しが悪くなってしまいがちです。 慣れないうちは、多少面倒でも個別にプロパティを指定し記述する方法が、混乱も少なくいいのかもしれませんね。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

TIPS:jQuery や JavaScript のアニメーション実行時のチラつきの対処方法(Safari,Chrome対応)

JavaScript(jQuery等)でスライドショー等の動きのある表現を行なったとき、アニメーションに連動して要素の一部分、もしくは画面全体かけて文字等がちらつく(フリッカー)現象が発生することがあります。 挙動自体に問題はなく発生範囲が限定的であっても、一度目にすると看過するわけにはいかないものです。 今回はこの問題を解決する方法をメモしておきたいと思います。 問題発生の原因によっては、今回紹介するパターンでは解決できない場合もありますが、是非一度お試しください。 jQuery や JavaScript のスライドショー実行時のチラつきの対処方法 中見出し まず、原因ですが、チラつきの現象がおこる対象はスタイルに position: relative が適用されている可能性が非常に高いです。 この場合であれば、以下の方法にてチラつきが解決できるかと思います。 いくつか解決パターンがあるので、上から順番に試していってみてください。 スライドショー等のアニメーションが実行されている要素のレイヤーを最前面にする 要素の position に relative が適用されている場合は z-index:1; (もしくは1以上の数値)を追加します。 スタイルシートに1行加える メインのスタイルシートの先頭に以下の1行を追加して下さい。{}は不必要です。 問題が発生する要素に position: relative を適用しない チラつきの対象に position: relative が意味もなく適用されている場合は、このスタイルを削除することで解決します。以下の例ではコメントアウトで対処しています。 まとめ この他にも、ネガティブマージンを指定している場合にも似たような問題が発生するときがあるみたいです。CSS の継承や擬似要素、擬似クラス等に関してもまだまだ勉強が必要ですね。 CSS に関してはまた別の機会に掘り下げてみようと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Tools:HTML5&CSS3 16進数からRGBへの変換ツール

CSSのコーディング中に、16進数のカラーをRGBに変換したいときがあるので、自分用に変換ツールを作成しました。JavaScript のトップレベル関数 parseInt を使えば簡単に実装できました。 16進数からRGBへの変換ツール 16進数のカラーコードを入力して下さい。(入力例: #123, #1234ab, 567, 89abcd) 結果 RGB RGBa まとめ RGBから16進数への変換ツールもつくろうかと思ったのですが、今のところ不必要だったため見送ることにしました。必要になればまた別の機会に作成したいと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Tools:HTML5/CSS3 グラデーションCSSコードの書き出しツール

ネット上には優秀なグラデーション生成ツールはあるのですが、16進数の2値から単純なグラデーションのCSSコードを出力するだけのツールが欲しかったので、自分用に作成しました。 グラデーションCSSコードの書き出しツール カラー、グラデーションの描画方向、開始〜終了位置(%)を入力後「出力する」をクリックして下さい。 カラー1 : #  カラー2 : #  方向 :  縦方向   横方向 範囲 :  % 〜  % 結果 まとめ ベンダープレフィックスがなくなれば、こういったツールも必要ないのですが、もうしばらくの辛抱ですね。

HTML5:CSS1からCSS3までの擬似クラス一覧

CSS3までの擬似クラスの一覧リストを作成しました。 HTML5/CSS3であればjQueryを使わなくても、ちょっとしたデザインやレイアウトなら実現できることが分かります。 CSS1からCSS3までの擬似クラス一覧 CSS1 擬似クラス ターゲット :link 未訪問のリンク :visited 訪問済みのリンク :active 訪問済みのリンク CSS2 擬似クラス ターゲット :hover カーソルが上に乗り、アクティブでない要素 :focus テキスト入力にフォーカスされている要素 :first-child ある親要素の最初の子要素 CSS3 擬似クラス ターゲット :last-child ある親要素の最後の子要素 :target フラグメント識別子を持ってるurlリンクでターゲット対象にされた要素 :enabled ある要素が有効なとき :disabled ある要素が無効なとき :checked ラジオボタン/チェックボックスがチェックされた状態のとき :indeterminate ラジオボタン/チェックボックスがチェックされてるかどうかが不確定の状態のとき :root ドキュメントルートの要素 :nth-child(n) 親要素のn番目の子要素 :nth-last-child(n) 親要素の最後から数えてn番目の子要素 :nth-of-type(n) 親要素の中で兄弟関係にある同じ種類の要素の中のn番目の要素 :nth-last-of-type(n) 親要素の中で兄弟関係にある同じ種類の要素の中の最後からn番目の要素 :first-of-type 親要素の中で兄弟関係にある同じ種類の要素の中の最初の要素 :last-of-type 親要素の中で兄弟関係にある同じ種類の要素の中の最後の要素 :only-child 兄弟を一つも持たずその親の唯一の子である要素 :only-of-type 同じ要素の兄弟が一つもない要素 :empty 子要素を一つも持たない要素 :contains() テキストの内容が与えられた部分文字列を含む要素 :not() 否定の要素 まとめ 一覧にしてみて面白かったことは、first-child は CSS2 で登場しているのに、last-child は CSS3 から採用されているということです。W3Cの標準策定も大変であることが伺えますね。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。