WordPressサイトのレイアウトの変更は、自分が使用しているテーマの外観や設定を変更することで行うことが一般的です。しかし、使用しているテーマに使いたいレイアウトがない場合は、直接cssファイルを編集する必要があります。
cssファイルを編集する必要があるといっても、実際は簡単で、cssにはもともとページレイアウトのための様々な機能が備わっています。
この記事で紹介しているFlexboxも、複雑なレイアウトも思い通りに実現できるcssレイアウトの機能で、WordPress初心者の方であっても、簡単な使い方さえマスターしてしまえば、テーマに頼らず、思い通りのレイアウトが作れるようになります。
また現在ではcssのレイアウト機能として主流となっているFlexboxですが、レイアウトを今までワードプレスのテンプレート機能に頼ってきた方や、cssは少し触ってたけどレイアウトをflexboxではなくfloatの機能を使って行ってきたという方の中には、
「Flexboxって何？」
「Flexboxを使うと何ができるの？」
「Flexboxってどうやって使えばいいの？」
というような疑問を持っている人もまだまだいると思います。
この記事では、そのような方を対象に、Flexboxとその他のcssのレイアウト機能との違いを踏まつつ、サンプルコードを交えながら、Flexboxの概要からコードの書き方まで網羅的に紹介していきます。WordPressのレイアウトで困っている方は、是非参考にしてください。
Wordpressをしっかり学びたいなら・・・
- パーソナルメンターによる学習サポート
- HTML/CSS/PHPが身につくカリキュラム
- Wordpressテーマの作成スキルが身につく
TechAcademy公式サイトcssレイアウトの新機能Flexboxとは？
Flexboxとは、正確にはFlexible Box Layout Moduleのことで、簡単に自由自在にレイアウト組みをできるcssの機能のことです。以下で説明するような決められた記述方法とプロパティをコーディングすることで、プログラミング初心者であっても簡単にウェブサイトのレイアウトを変更することができます。
まずは、Flexboxの基本構造からみていきましょう。
Flexboxの基本構造
Flexboxは、親要素であるFlexコンテナと呼ばれる箱の中に、子要素であるFlexアイテムを配置することでレイアウトを作成するという仕組みになっています。
以下で説明していくプロパティの設定を行うことによって、好みに合わせた配置のレイアウトを作ることができます。ひとつづつ見ていきましょう。また、この記事では、以下ような簡単なコードを例にFlexboxの仕組みを説明していきます。
/* HTMLに記述するコード */
<div class="flex-container">
<div class="item1"> item1 </div>
<div class="item2"> item2 </div>
<div class="item3"> item3 </div>
<div class="item4"> item4 </div>
</div>/*---cssに記述するコード---*/
/*---ブロック要素の場合---*/
.flex-container { display: flex; }
/*---インライン用の場合---*/
.flex-container { display: inline-flex; }
Flex boxの記述方法とプロパティ設定一覧
親要素flex-containerのプロパティ
まずは、親要素であるflex-containerのプロパティを見ていきます。実際、この親要素のプロパティを設定するだけである程度のレイアウトを実現することができます。
Flex-direction
記述例(css)
.flex-container { flex-direction: row; } ( 初期値 )
親要素であるflex-containerにこのflex-directionを指定することで、子要素が並ぶ向きを指定することができます。
Flex-wrap
記述例(css)
.flex-container { flex-wrap: nowrap; } ( 初期値 )
親要素であるflex-containerにこのflex-wrapを指定することで、子要素が折り返しするかどうかの指定をすることができます。なお、何も指定しない初期値では、折り返しをしない設定になっているので、子要素に折り返しをさせたい場合は、このプロパティをwrapに指定してあげる必要があります。
justify-content
記述例(css)
.flex-container { justify-content: flex-start; } ( 初期値 )
親要素であるflex-containerにこのjustify-contentを指定することで、子要素の水平方向の揃えをを指定することができます。space-betweenやspace-aroundといったプロパティは、見栄えの良いレイアウトを作成するにあたって使用機会の多い設定ですので是非覚えるようにしましょう。
align-items
記述例(css)
.flex-container { align-items: stretch; } ( 初期値 )
親要素であるflex-containerにこのalign-itemsを指定することで、垂直方向の揃えを指定することができます。
align-content
記述例(css)
.flex-container { align-content: stretch; } ( 初期値 )
親要素であるflex-containerにこのalign-contentを指定することで、子要素が複数行に及ぶ場合の垂直方向の揃えをを指定することができます。
以上、Flexboxにおける親要素のプロパティを見てきました。思い通りのウェブページのレイアウトを実現するためには、まずこの親要素のプロパティを正しく覚えることが最優先ですので、実際に手を動かしていつでも記述できるようにしましょう。
次は、子要素のプロパティを見ていきます。親要素のプロパティが全体のレイアウトに対して影響を与えるものであったのに対して、子要素のプロパティは配置されるアイテムひとつひとつに対しての詳細な設定をしていきます。
子要素flex-itemのプロパティ
上記のように、子要素のプロパティは特定のひとつのアイテムだけ大きくしたいとか、小さくしたいといった場合に必要不可欠な設定です。ぜひ必要に応じて使用していきましょう。
Webデザインスキルを体系的に身につけたいなら
この記事では、Flexboxの使い方について説明してきました。この記事のように、今の時代、インターネットや専門書を探せば様々なテクニックやノウハウを見つけることができます。しかし、体系的に確かなスキルを身につけるという点で考えるとインターネットや書籍の情報だけでは難しいのが現実です。
もっと体系的に最新のWebデザインのスキルを学ぶためには、通学制、通信制を問わずWebデザインについての講座を受講することがおすすめです。以下の記事では、おすすめの目的別Webデザイン講座の一覧を紹介しているので是非参考にしてください。
まとめ
この記事では、cssのレイアウト機能であるFlexboxの具体的な使い方について見てきましたがいかがだったでしょうか？
実際にこの記事で説明したFlexboxを使えるようになれば、cssを使って自分が思い描くウェブページのほとんどのレイアウトを実現することができます。以下に、Flexboxにおける親要素、子要素それぞれのプロパティの使い方を一枚にまとめたPDFを用意しているので良かったら使ってみてください。
また、実際にワードプレスのレイアウトなどを編集する際は、テキストエディタなどのプログラミング環境を使うと便利です。このサイトでも使用しているテキストエディタであるDream Weaverをワードプレスのテーマカスタマイズに使いたい場合は、別途こちらの記事で紹介しているので参考にしてみてください。
Wordpressをしっかり学びたいなら・・・
- パーソナルメンターによる学習サポート
- HTML/CSS/PHPが身につくカリキュラム
- Wordpressテーマの作成スキルが身につく
この記事の執筆者
