5/7 @ 霜月

PHPで入れ子になったul要素の最上位のli要素の数を取得する

CSSでレイアウトを設定するとき、フレックスレイアウト (flex)、グリッドレイアウト (grid)、マルチカラムレイアウト (columns)、これらを使うことが多くなりました。いずれも親要素への設定によって子要素のレイアウトが変化する仕組みになっています。

子要素の数が決まっている場合は非常に便利ですが、子要素の数が少ない場合と多い場合でレイアウトを変えたいといったケースでは不便に感じます。

そこで今回は、子要素の数を取得して、class属性値に反映させるPHPコードを紹介します。

iOS (iPhoneやiPad) のブラウザ「Safari」で、背景画像を固定してスクロールしないようにするCSSプロパティのbackground-attachment:fixedが効かない場合があります。

background-attachment:fixedを効果的に使用すると、複数の画像がスクロールによって入れ替わるパララックス (視差) などの面白い演出が可能になります。

今回は、background-attachment:fixedを使用せず、このパララックスを実現する方法を紹介します。

ウェブページを構成する要素の中で、最も重要と言えるのが見出しです。見出しは、その後に続く情報がどういった内容なのかを端的に示すものだからです。

見出しを目立つようデザインすることは、必要な情報を素早く見つける助けとなります。そこで、今回は見出しをデザインする上で重要だと思うことを、コピペできるコードとともに紹介します。

ウェブサイトのパーツとして欠かせない「パンくずリスト」ですが、WordPressで実装するのは割と面倒だったりします。

そこで今回は、Microdataで構造化されたパンくずリストを、WordPressテーマのfunctions.phpにコピペするだけで使用できるPHPコードを作ってみたので紹介します。

CSSのbox-sizingプロパティには、widthプロパティやheightプロパティなどで指定した幅を、要素のコンテンツ領域に適用するcontent-box (既定値) と、要素の境界 (border) まで適用するborder-boxがあります。

また、W3Cの草案に登場し、FireFoxにのみ先行実装された、要素の内側の余白まで適用するpadding-boxもあります (現在はFireFoxを含む全てのブラウザで使用できません)。

しかし、要素の外側の余白まで適用するmargin-boxというのはW3Cの草案にも登場しません。今回は、このmargin-boxを疑似的に再現する小技を紹介します。

ウェブサイトの表示速度の高速化の一環として、CSSファイルをlink要素で読み込むのではなく、CSSファイルの内容をstyle要素内に書き出すインライン化で、HTTPリクエストを減らす手法が有効な場合があります。

今回は、WordPressでCSSファイルをインライン化するための、最良だと思われる方法をご紹介します。

ウェブページを作る際、使用頻度が比較的高い要素にリスト (一覧) があります。このリストの中に、項目の並び順の有無で使い分ける必要のあるol要素とul要素があります。

今回は、ol要素とul要素の正しい使い分け方について解説します。

HTMLとCSSを勉強しはじめた頃の「あるある」の一つに、記述した覚えのないところに空白が生じるというのがあります。

例えば、リストアイテム (li要素) をインライン (display: inline;) で表示させた際に、リストアイテム間に空白ができる場合があります。

今回は、この空白の正体である半角スペースのHTMLにおける特徴と、その特徴を生かしたCSSテクニックを紹介します。

WordPressを使っていて「かゆい所に手が届かない」みたいなことが多々あります。その一つに「管理画面から条件分岐が使いたい」というのがあります。

管理画面で条件分岐が使えれば、「投稿」や「固定ページ」の本文、ウィジェット、カスタマイザーで設定した内容を、特定の条件下でのみ出力するといったことが可能になります。

今回は、実際に使用している、管理画面で条件分岐を設定するためのカスタマイズ方法をご紹介します。

PHPのpreg_replace関数を使用して、HTML・CSS・JS各コードの無駄な空白文字列 (半角スペース・タブスペース・改行) を取り除いて圧縮 (minify) する正規表現を紹介します。

WordPressなどのPHPを使用したCMSでも使用できます。