Tag CSS3

CSS3: サイドメニューをボトムメニューに切り替えるサンプル

PC サイトのサイドメニューをモバイルで表示すると、画面が横長から縦長になるため、サイドメニューの領域によりメインコンテンツのエリアが狭くなってしまいます。 画面上部のグローバルメニューは、ハンバーガーメニューへ変更するパターンが多いですが、サイドメニューの場合はどうするか悩みどころだと思います。 今回は、サイドメニューをモバイルではボトムメニューへメディアクエリで切り替えるサンプルをメモしておきたいと思います。 目次 サイドメニューをボトムメニューに切り替えるサンプル まとめ サイドメニューをボトムメニューに切り替えるサンプル display: flex を使用し、メディアクエリで 768px 以下の場合はボトムメニューへ変更するサンプルとなります。 HTML CSS まとめ ボトムナビゲーションにする場合、メニュー項目はユーザビリティを確保するため、最大6項目が限界かと思います。 アップデート時にメニュー項目が増える場合は、プライオリティの低い項目をまとめるための項目を新設し、ネストすることで解決しましょう。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

CSS3: 使用頻度の高い擬似クラス一覧

個人的によく使う CSS3 擬似クラスの一覧を作成しました。 スタイルコーディング時にご参考にしてください。 目次 使用頻度の高い擬似クラス一覧 まとめ 使用頻度の高い擬似クラス一覧 記述例 説明 div[class] “class” 属性を持つ div 要素 div[class=”xxx”] “class” 属性の値が “xxx” である div 要素 div[class~=”xxx”] “class” 属性が空白区切りの値をとり、その値の1つが “xxx” である div 要素 div[class^=”xxx”] “class” 属性の値が “xxx” から始まる div 要素 div[class$=”xxx”] “class” 属性の値が “xxx” で終わる div 要素 div[class*=”xxx”] “class” 属性の値に “xxx” という文字列を含む div 要素 div[class|=”en”] “class” 属性の値がハイフン区切りの値をとり、その値が “en” から始まる div 要素 div:nth-child(n) n 番目の子である div 要素 div:nth-last-child(n) 後ろから数えて n 番目の子である div 要素 div:nth-of-type(n) 同じ型をもつ要素のうち n 番目にある div 要素 div:nth-last-of-type(n) 同じ型をもつ要素のうち後ろから数えて n 番目にある div 要素 div:first-child 最初の子である div 要素 div:last-child 最後の子である div 要素 div:first-of-type 同じ型をもつ要素のうち最初の div 要素 div:last-of-type 同じ型をもつ要素のうち最後の div 要素 div:only-child 唯一の子である div 要素 div:only-of-type 同じ型をもつ要素が他にない唯一の div 要素 div:empty テキストノードを含め子を持たない div 要素 a:linka:visited ハイパーリンクのアンカーである a 要素のうち、未訪問 (:link) であるもの、訪問済 (:visited) であるもの a:activea:hovera:focus 特定のユーザーアクション状態にある a 要素 div:target URI が参照したターゲットになる div 要素 div:lang(ja) 言語情報 “ja” を持つ div 要素 elm:enabledelm:disabled elm(UI 要素)のうち、有効 (:enabled) であるもの、無効 (:disabled) であるもの elm:checked elm(チェックボックスやラジオボタンなど)のうち、チェックされた (:checked) もの div::first-line div 要素の最初の整形済行 div::first-letter div 要素の先頭文字 div::before div 要素の内容の前にある generated content div::after div 要素の内容の後にある generated content div:not(sel) 単体セレクタ sel にマッチしない div 要素 div elm div 要素の子孫である elm 要素 div > elm div 要素の子である elm 要素 div + elm div 要素の直後に現れる elm 要素 div ~ elm div 要素のあとに現れる elm 要素 まとめ 長く CSS を触っていないと、解決方法は思いついても、肝心の記述方法を忘れていることが多々あります。 特に、擬似クラスは :before,:after や nth-child は思い出せても、正規表現を使った指定はなかなか思い出せません。… 続きを読む

CSS3: デフォルトのフォントスタイルを指定する

モダンブラウザであればフォントのことは特に気にしなくても、いい感じに出力されますが、レガシーブラウザの対応までを考慮すると、フォントの指定も重要となってきます。 今回は CSS でスタイルを定義する際、ベースとなるフォント指定をメモしておきます。 目次 デフォルトのフォントスタイルを指定する まとめ デフォルトのフォントスタイルを指定する body 自体にゴシック系のフォントをとりあえず指定し、.mincho と .gochic クラスを任意のテキストに指定すれば、明朝体とゴシック体を使い分けられると思います。 /*transform: rotate(.03deg);*/ のコメントを解除すると、古い PC の IE(9,10)で 文字の ディザを軽減する効果 があります。 ただし、position:fixed 等をしている場合は transform とコンフリクトを起こし、正しく表示されない(fixed が効かない)可能性があるので、注意が必要です。 まとめ 今回の指定の仕方が正解というわけではありませんが、日本語環境の場合、フォントの見え方でサイトの良し悪しが大きく左右されてしまうので、意識的にデフォルトフォントの指定をしておいて損はないと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

CSS3: hover 要素のマウスイベントを無効にする

UI デザイン上、ボタン自体は表示させるが、押せないようにしたい、hover エフェクトやポインターは無反応にしたい、といったケースがあると思いますが、そういった場合は、JavaScript を書くまでもなく、CSS のみで解決します。 今回は CSS でマウスイベントを無効にする方法をメモしておきます。 目次 hover 要素のマウスイベントを無効にする まとめ hover 要素のマウスイベントを無効にする pointer-events というプロパティがありますので、これを none にします。(デフォルトは auto) まとめ 今回説明したケース以外でも、親要素に hover やクリックイベントが効いていて、内包される子要素のボタンがクリックできない問題も、親要素に pointer-events: none; を適用することで解決します。 pointer-events は、Opera Mini を除くすべてのブラウザでサポートされているので、実際に利用してもほぼ問題ないと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

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