hover 擬似クラスを使用して、ドロップダウンメニュー (プルダウンメニュー) の表示・非表示を制御する方法はよく知られていますが、hover 擬似クラスはスマホやタブレットなどのタッチデバイスとの相性は良くありません。
そこで、今回は hover 擬似クラスではなく、focus-within 擬似クラスでドロップダウンメニューを制御する方法をご紹介します。
HTML
HTMLとCSSで切り替えられるタブの作り方
ソフトウェアのUIによくある、複数のコンテンツをコンパクトに表示できるタブ切り替えを、JavaScriptは使わず、HTMLとCSSだけで作る方法を紹介します。
コピペで実装できるレスポンシブな可変フォントサイズ
ブラウザの表示領域 (ビューポート) に応じてフォントサイズを変化させる「流体タイポグラフィ (Fluid Typography)」とも呼ばれるレスポンシブな可変フォントサイズを簡単に実装するためのHTMLコードとCSSコードを紹介します。
display:flexで要素を横並びにする6種類の方法と注意点
HTMLの要素を横並びにしたくて、floatプロパティで四苦八苦していたのは昔の話し。今は display:flex で簡単にできるようになりました。
しかし、display:flex には特有のクセのようなものがあり、仕様をきちんと理解しないと、意図したとおりの横並びにできない場合があります。
今回は display:flex で横並びにする6種類の方法と、その注意点について解説していきます。
HTMLとCSSのみの簡単なハンバーガーボタンの作り方
多くの情報をコンパクトにまとめられるハンバーガーメニュー (ドロワー) ですが、そこで使用される三本線のハンバーガーボタンの作り方は多くあります。
今回は、HTMLとCSSのコード量が少ない、シンプルなハンバーガーボタンの作り方を紹介します。
カスタムプロパティ (CSS変数) を使った爆速レイアウト術
カスタムプロパティ (CSS変数) を使ってますか？
今回は、HTMLのstyle属性とカスタムプロパティを組み合わせて、多種多様なレイアウトを自由自在に爆速で仕上げる、汎用レイアウト術をご紹介します。
CSSのbefore擬似要素とafter擬似要素が使えるHTMLの意外な要素
CSSでスタイリングする際、様々な箇所で便利に使えるbefore擬似要素とafter擬似要素ですが、開始タグ (<TAG>) と終了タグ (</TAG>) を持たない空要素 (<TAG />) には使えないと思っていませんか？
今回は、before擬似要素とafter擬似要素が使える意外な要素を紹介します。
コピペで使えるJS未使用のシンプルなCSSカルーセルスライダー
限られたスペースに複数の情報を載せたい場合、非常に重宝するのがスライドショーとも呼ばれているカルーセルスライダーです。
JavaScriptで実装するのが一般的で「bxSlider」「slick」「Swiper」といったJSライブラリ (JSプラグイン) がよく利用されています。
しかし、これらのJSライブラリは多機能な反面、ファイルサイズが大きく、ウェブサイト内のごく限られた箇所にだけ使用したいといった場合には、利用しづらいのではないでしょうか？
そこで、今回はコピペできるCSSカルーセルスライダーを紹介します。
iframe要素の高さを自動調整でレスポンシブ化する最も簡単な方法
YouTubeなどの動画をウェブページに埋め込む際、よく利用されるiframe要素ですが、img要素のように縦横の比率を維持したまま、様々な画面サイズに対応させる (レスポンシブ化する) ためには、padding-topプロパティとpadding-bottomプロパティの%値が親要素の横幅の相対値であることを利用した、CSSハックに近いコードが広く利用されています。
今回は、iframe要素の、最新で、最も簡単な、レスポンシブ化の方法をご紹介します。
PHPで入れ子になったul要素の最上位のli要素の数を取得する
CSSでレイアウトを設定するとき、フレックスレイアウト (flex)、グリッドレイアウト (grid)、マルチカラムレイアウト (columns)、これらを使うことが多くなりました。いずれも親要素への設定によって子要素のレイアウトが変化する仕組みになっています。
子要素の数が決まっている場合は非常に便利ですが、子要素の数が少ない場合と多い場合でレイアウトを変えたいといったケースでは不便に感じます。
そこで今回は、子要素の数を取得して、class属性値に反映させるPHPコードを紹介します。