Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

何ですか: 流体レイアウト

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

WordPressのテーマ開発において、フルードレイアウトとは、コンテンツ、画像、その他の項目のブロックの測定単位として比例値を使用するサイトデザインアプローチです。これにより、サイトはさまざまな画面サイズや端末に対応することができます。

フルイドレイアウトでは、要素の幅を定義するためにパーセンテージやemsのような柔軟な単位を使用します。これにより、コンテンツは表示される画面に合わせてサイズを変更したり、配置を変えたりすることができます。

これは、テーマのすべての側面がピクセル単位で固定された幅を持つ固定レイアウトとは異なります。

Glossary: Fluid Layout

フルードレイアウトの利点とは?

サイトやWordPressテーマを作成する際、デザイナーや開発者は固定幅と流動幅のどちらのデザインにするかを決める必要がある。

固定幅のデザインは作成が簡単ですが、いくつかの欠点があります。特に、画面が非常に大きいユーザーや非常に小さいユーザーにとっては、最高のエクスペリエンスを提供できません。

今日、多くのユーザーは1024×768ピクセル以上の高解像度の大きな画面を持っています。固定レイアウトのサイトでは、テーマのコンテンツの両脇に余白が多く残ることがあります。

画面が小さいユーザーやモバイル端末の場合、固定デザインでは横スクロールバーも必須となる場合があります。

これらの問題は、フルード・レイアウトを使うことで解決できる。

フルードレイアウトの課題とは?

フルードデザインは、複数の画面サイズに関する多くの問題を解決してくれるが、それ自体がいくつかの問題を引き起こす。

デザイナーはユーザーが見るものをコントロールしにくく、画像などのコンテンツは異なる解像度で表示するために複数の幅が必須となる場合があります。

ユーザーの画面が極端に大きい場合、コンテンツが少なく流動的なレイアウトのウェブページは最適に見えないかもしれない。

フルイドレイアウトとレスポンシブデザイン

スマートフォンやタブレットの普及に伴い、レスポンシブ開発が重要になっている。

これはフルードレイアウトと似て非なるもので、すべての端末と画面サイズを考慮してサイトやテーマを作成するプロセスである。

フルードデザインのテクニックは、CSSメディアクエリーとともに、「レスポンシブ」なサイトやテーマを作成するためによく使われます。

WordPressのフルードレイアウトについて、この投稿がお役に立てれば幸いです。また、WordPressの便利なTipsやトリック、アイデアに関する関連投稿は、以下の「Additional Reading」リストをご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

追加リーディング

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!