2021年

font-sizeの単位の特徴とレスポンシブなCSSに最適な設定方法

Webデザインをするうえで、悩ましいのがフォントサイズ (font-size) の設定です。

WebデザイナーがWebデザインのモックアップをPhotoshopやIllustlatorなどで作成する場合、px単位で作成するのが一般的かと思います。しかし、px単位で細かくフォントサイズを設定するのは難しかったりします。

今回は、フォントサイズに使用される単位の特徴とともに、個人的に最適解だと思っているフォントサイズの設定方法を紹介します。

コピペで使える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コードを紹介します。

background-attachment:fixedが効かないブラウザ用パララックス

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

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

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

HEADING DESIGN

コピペから始めるウェブページの見出しデザイン

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

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

WordPressにコピペで実装するパンくずリストのPHPコード

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

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