「背景画像は動かない」を実現する background-attachment: fixed ですが、Apple製品では機能しないという重大な問題があります。今回は、この問題のファイナルアンサーを紹介します。
CSS
カスタムプロパティ (CSS変数) を使った爆速レイアウト術
カスタムプロパティ (CSS変数) を使ってますか？
今回は、HTMLのstyle属性とカスタムプロパティを組み合わせて、多種多様なレイアウトを自由自在に爆速で仕上げる、汎用レイアウト術をご紹介します。
CSSのbefore擬似要素とafter擬似要素が使えるHTMLの意外な要素
CSSでスタイリングする際、様々な箇所で便利に使えるbefore擬似要素とafter擬似要素ですが、開始タグ (<TAG>) と終了タグ (</TAG>) を持たない空要素 (<TAG />) には使えないと思っていませんか？
今回は、before擬似要素とafter擬似要素が使える意外な要素を紹介します。
font-sizeの単位の特徴とレスポンシブなCSSに最適な設定方法
Webデザインをするうえで、悩ましいのがフォントサイズ (font-size) の設定です。
WebデザイナーがWebデザインのモックアップをPhotoshopやIllustlatorなどで作成する場合、px単位で作成するのが一般的かと思います。しかし、px単位で細かくフォントサイズを設定するのは難しかったりします。
今回は、フォントサイズに使用される単位の特徴とともに、個人的に最適解だと思っているフォントサイズの設定方法を紹介します。
PHP (WPテーマカスタマイザー) でCSSコードを組み立ててみた話
WordPressのテーマカスタマイザーで設定した内容を、HTMLではなく、CSSコードの組み立てに使用してみました。
その際の、CSSコードをPHPで処理するための知見をシェアしたいと思います。
コピペで使えるJS未使用のシンプルなCSSカルーセルスライダー
限られたスペースに複数の情報を載せたい場合、非常に重宝するのがスライドショーとも呼ばれているカルーセルスライダーです。
JavaScriptで実装するのが一般的で「bxSlider」「slick」「Swiper」といったJSライブラリ (JSプラグイン) がよく利用されています。
しかし、これらのJSライブラリは多機能な反面、ファイルサイズが大きく、ウェブサイト内のごく限られた箇所にだけ使用したいといった場合には、利用しづらいのではないでしょうか？
そこで、今回はコピペできるCSSカルーセルスライダーを紹介します。
WordPressのCSSコードを削減してメンテナンスしやすくする奥の手
WordPressのCSSコードを削減して、メンテナンス性も向上させる、テーマのカスタマイズ方法を紹介しています。ウェブページの読み込み速度を改善したい方、WordPressのメンテナンス性を向上させたい方にオススメです。
カスタムプロパティ (CSS変数) を使用した調整しやすい余白設定
IEを非対応とすることで、今まで使用できなかった、CSSの便利な機能が思う存分使えるようになりました。
今回は、その便利な機能の1つ「カスタムプロパティ (CSS変数)」を使用した、余白設定をご紹介します。
iframe要素の高さを自動調整でレスポンシブ化する最も簡単な方法
YouTubeなどの動画をウェブページに埋め込む際、よく利用されるiframe要素ですが、img要素のように縦横の比率を維持したまま、様々な画面サイズに対応させる (レスポンシブ化する) ためには、padding-topプロパティとpadding-bottomプロパティの%値が親要素の横幅の相対値であることを利用した、CSSハックに近いコードが広く利用されています。
今回は、iframe要素の、最新で、最も簡単な、レスポンシブ化の方法をご紹介します。
background-attachment:fixedが効かないブラウザ用パララックス
iOS (iPhoneやiPad) のブラウザ「Safari」で、背景画像を固定してスクロールしないようにするCSSプロパティのbackground-attachment:fixedが効かない場合があります。
background-attachment:fixedを効果的に使用すると、複数の画像がスクロールによって入れ替わるパララックス (視差) などの面白い演出が可能になります。
今回は、background-attachment:fixedを使用せず、このパララックスを実現する方法を紹介します。