IEを非対応とすることで、今まで使用できなかった、CSSの便利な機能が思う存分使えるようになりました。
今回は、その便利な機能の1つ「カスタムプロパティ (CSS変数)」を使用した、余白設定をご紹介します。
Web制作
iframe要素の高さを自動調整でレスポンシブ化する最も簡単な方法
YouTubeなどの動画をウェブページに埋め込む際、よく利用されるiframe要素ですが、img要素のように縦横の比率を維持したまま、様々な画面サイズに対応させる (レスポンシブ化する) ためには、padding-topプロパティとpadding-bottomプロパティの%値が親要素の横幅の相対値であることを利用した、CSSハックに近いコードが広く利用されています。
今回は、iframe要素の、最新で、最も簡単な、レスポンシブ化の方法をご紹介します。
PHPで入れ子になったul要素の最上位のli要素の数を取得する
CSSでレイアウトを設定するとき、フレックスレイアウト (flex)、グリッドレイアウト (grid)、マルチカラムレイアウト (columns)、これらを使うことが多くなりました。いずれも親要素への設定によって子要素のレイアウトが変化する仕組みになっています。
子要素の数が決まっている場合は非常に便利ですが、子要素の数が少ない場合と多い場合でレイアウトを変えたいといったケースでは不便に感じます。
そこで今回は、子要素の数を取得して、class属性値に反映させるPHPコードを紹介します。
background-attachment:fixedが効かないブラウザ用パララックス
iOS (iPhoneやiPad) のブラウザ「Safari」で、背景画像を固定してスクロールしないようにするCSSプロパティのbackground-attachment:fixedが効かない場合があります。
background-attachment:fixedを効果的に使用すると、複数の画像がスクロールによって入れ替わるパララックス (視差) などの面白い演出が可能になります。
今回は、background-attachment:fixedを使用せず、このパララックスを実現する方法を紹介します。
コピペから始めるウェブページの見出しデザイン
ウェブページを構成する要素の中で、最も重要と言えるのが見出しです。見出しは、その後に続く情報がどういった内容なのかを端的に示すものだからです。
見出しを目立つようデザインすることは、必要な情報を素早く見つける助けとなります。そこで、今回は見出しをデザインする上で重要だと思うことを、コピペできるコードとともに紹介します。
WordPressにコピペで実装するパンくずリストのPHPコード
ウェブサイトのパーツとして欠かせない「パンくずリスト」ですが、WordPressで実装するのは割と面倒だったりします。
そこで今回は、Microdataで構造化されたパンくずリストを、WordPressテーマのfunctions.phpにコピペするだけで使用できるPHPコードを作ってみたので紹介します。
CSSのbox-sizingにはないmargin-boxを疑似的に再現する小技
CSSのbox-sizingプロパティには、widthプロパティやheightプロパティなどで指定した幅を、要素のコンテンツ領域に適用するcontent-box (既定値) と、要素の境界 (border) まで適用するborder-boxがあります。
また、W3Cの草案に登場し、FireFoxにのみ先行実装された、要素の内側の余白まで適用するpadding-boxもあります (現在はFireFoxを含む全てのブラウザで使用できません)。
しかし、要素の外側の余白まで適用するmargin-boxというのはW3Cの草案にも登場しません。今回は、このmargin-boxを疑似的に再現する小技を紹介します。
WordPressでCSSファイルをインライン化する最良の方法
ウェブサイトの表示速度の高速化の一環として、CSSファイルをlink要素で読み込むのではなく、CSSファイルの内容をstyle要素内に書き出すインライン化で、HTTPリクエストを減らす手法が有効な場合があります。
今回は、WordPressでCSSファイルをインライン化するための、最良だと思われる方法をご紹介します。
ol要素とul要素の正しい使い分け方
ウェブページを作る際、使用頻度が比較的高い要素にリスト (一覧) があります。このリストの中に、項目の並び順の有無で使い分ける必要のあるol要素とul要素があります。
今回は、ol要素とul要素の正しい使い分け方について解説します。
半角スペースのHTMLにおける特徴とそれを応用したCSSテクニック
HTMLとCSSを勉強しはじめた頃の「あるある」の一つに、記述した覚えのないところに空白が生じるというのがあります。
例えば、リストアイテム (li要素) をインライン (display: inline;) で表示させた際に、リストアイテム間に空白ができる場合があります。
今回は、この空白の正体である半角スペースのHTMLにおける特徴と、その特徴を生かしたCSSテクニックを紹介します。