CSSで使用できる単位の vw (Viewport Width) をうまく使えてますか？
親要素の横幅を基準にする % と異なり、vw はブラウザの表示領域を基準にするため、祖先要素の横幅に依存しない相対的な幅を設定することができます。
この vw にはブラウザの表示領域に表示されるスクロールバーの幅も含まれます。
スクロールバーの幅は、ブラウザによって異なるだけでなく、コンテンツの量や閲覧環境 (PC・タブレット・スマートフォン) によって、表示されたり表示されなかったりするので、vw は使いづらい印象があります。
今回は、スクロールバーの幅や表示・非表示の影響を受けずに 100vw を活用するためのテクニックを紹介します。
WordPressで、FacebookやTwitterのようなSNSを作ることができる、BuddyPressというプラグインがあります。
WordPressの公式テーマディレクトリでは、テーマがBuddyPressに対応しているか絞り込めるようになっており、WordPressをSNS化する定番プラグインとなっています。
このBuddyPressをカスタマイズする際、カスタマイズ方法に関する情報が少なかったり、情報が古かったりして、非常に手間取ったので、その方法をご紹介します。
SEOに力を入れているウェブサイトの制作者や運営者なら、PageSpeed Insights や GTmetrix などを利用して、ウェブページの読み込み時間 (表示速度) をチェックしていると思います。
今回は PageSpeed Insights の診断で「レンダリングを妨げるリソースの除外」という項目に引っ掛かってしまった際に、当ウェブサイトで行った施策をご紹介します。
PCでAppleのサイトを表示した時のフッターメニュー (フッターサイトマップ) のように段組みして、なおかつ、画面サイズに応じて段の数を調整しつつ、内容の流し込みをする、columnsプロパティという非常に便利なCSSプロパティがあります。
しかし、実際に使ってみると、各ブラウザで意図したとおりに表示されない場合があって四苦八苦したので、意図したとおり表示される場合とされない場合を合わせてご紹介します。
ウェブページの表示速度を少しでも速くしたいと思っている方は多いと思います。その一つの施策として、画像ファイルなどの外部ファイルをなるべく使用しないという方法があります。
単純な模様であれば、画像ファイルを用意しなくても、CSSのbackgroundプロパティのグラデーション (gradient) だけで作ることができます。今回は、その一例をご紹介します。
チェックボックスとラジオボタンは、1つ前の記事のファイル入力 (input[type=”file”]要素) と同様に、ブラウザ毎にデザインが決まっていて、CSSでデザインすることができない要素です。
今回は、このチェックボックスとラジオボタンのデザインをCSSで変更する方法をご紹介します。コピペで使用できるHTMLコードとCSSコードを併記しています。
HTMLのフォームコントロール要素 (input要素, button要素, select要素, textarea要素, etc…) には、ブラウザ毎に異なったデザインが適用されていて、全てのブラウザで共通のデザインを適用するのは、割とハードルが高めです。
特に、ファイル入力 (input[type=”file”]) は柔軟にデザインするのが困難です。今回はJSを使用してファイル入力を柔軟にデザインする方法をご紹介します。
CSSは簡単なようで難しいです。設定した覚えのないスタイルが適用されているっていうのはウェブサイト制作者なら誰でも経験があるはず。CSS設計をきちんとしていれば起こりづらくはなるのですが、それでも、ごくまれに「あれっ、おかしい」ってなります。
そんなときに役立つ、CSSセレクタの優先順位を自由自在に上げる方法をご紹介します。
Microdataの構造を参考にしたCSS設計・命名規則、名付けて「S2CSS」を紹介します。