ブラウザの開発ツールを使って知識ゼロから始めるCSS編集(4)「フレキシブルボックスレイアウトを理解してコンテンツの並びや配置を調整する」

ウェブリブログのシステムの大幅リニューアルに伴い、CSSの内容が以前とは全く違うものになってしまったので、新しいCSSに対応するための自分自身の勉強もかねて始めたこのコーナーも今回で4回目です。


ブラウザの開発ツールを使って知識ゼロから始めるCSS編集(1)「HTML編:開発ツールの使い方とウェブリブログの新システムのレイアウトの仕組み」

ブラウザの開発ツールを使って知識ゼロから始めるCSS編集(2)「CSS編:開発ツールを使ったCSS編集のやり方」

ブラウザの開発ツールを使って知識ゼロから始めるCSS編集(3)「ボックスモデルを理解してブログのサイズを調整する」


本題に入る前に、今回はCSSのバージョン(レベル)についての話から始めます。


ゲーム機やスマホのアプリにバージョンがあるように、CSSにもバージョン(レベル)が存在します。


CSSのバージョン-CSSの基本

CSS3・CSS4とは?CSSの歴史と現状、Level(レベル)の遷移について調べてみた。

知っておこう!CSSの各バージョンでできることの違い

CSS3とは? 機能が増えて便利になったスタイルシート [ホームページ作成]


CSS2の時点で特に不自由は感じてなかったし、過去のブラウザにも対応したものを作るならCSS3はまだ使わない方がいいのかなと思ったので、CSS3に関してはまだほとんど勉強してなくて、今回ブログがリニューアルされて、新しいCSSに自分の知らないCSS3がいろいろと使われていて困惑しました(;´∀`)


↓こちらは、ブログのタイトル部分のCSSなんですが、CSS2までの知識しかなかったので、最初見た時は「んんんっ!???(゚Д゚)」ってなりました(flex、flex-direction、justify-content、align-itemsは全てCSS3から実装されたもの)。


.Header {
max-width: 100%;
width: 100%;
padding: 0 25px;
}

.Header .Header__inner {
padding: 0 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}


というわけで、ここからは自分も勉強しながら書いてます(笑)


flex-direction、justify-content、align-itemsが一体どういった働きをするのかを調べる前に、まずフレキシブルボックスレイアウト(フレックスコンテナ、フレックスアイテム)という機能についてきちんと理解しておく必要があります。


CSS - flex(フレキシブルボックスの説明)


Webページをデザインする時に重要になってくるのが各コンテンツの配置方法(コンテンツの並び順、縦並び、横並び、上寄せ、左寄せなど)で、特にブログのようにメニューがあるページの場合、コンテンツを横並びにする方法は必ず必要になります。


コンテンツを横並びにする方法にはいろいろあって、初期の時代に流行ったTABLEタグを使ってコンテンツを横に並べる方法(リニューアル前のウェブリブログ)やfloat:leftとclearfixを用いた方法など、自分も一通り試したことがありますが、CSS3から使えるようになったフレキシブルボックスレイアウトの機能を使えば、従来のやり方よりも簡単にコンテンツの配置をいろいろと変えることができるみたいです。


フレキシブルボックスレイアウト機能を使うためには、まずはフレックスコンテナと呼ばれるフレキシブルボックスレイアウト機能を使うための専用の枠(ボックス)を作ります。


css30.jpg


作り方はこれまでのやり方と一緒で、まず<div>で透明な枠を作り、classで名前を付け、CSSでその枠に対して「display: flex;」と設定することで、その枠がフレックスコンテナになります。


フレックスコンテナの中に<div>などで新たな枠を作ると、その枠はフレックスアイテムと呼ばれ、flex-direction、justify-content、align-itemsなどを使って自由に配置を変えることができます。


今回は、テスト用の枠としてフレックスコンテナ(外側の黒い線の枠)を1つとフレックスアイテムを3つ用意したので、開発ツールのHTML上で、「<div class="l-wrapper">…</div>」の上にある「<div class='flex_container'>…</div>」をクリックして下さい(枠が表示されるのはPCのブラウザで見た時のみです)。


あまりいろいろなことをいっぺんにやると混乱するので、今回はウェブリブログのCSSでも使用されている「flex-direction、justify-content、align-items」の3つに絞り、設定する値に関しても「flex-start、flex-end、center」の3つに絞りました。


■flex-directionとjustify-content、align-itemsの関係

css31.jpg

flex-directionはフレックスアイテムを横向きに並べるか縦向きに並べるかを指定するもので、rowにするとアイテムが横並びになり、columnにするとアイテムが縦並びになる(reverseを付けると方向が逆になる)。

 ●row アイテムの列が横並びになる
 ●row-reverse アイテムの列が横並び(逆)になる
 ●column アイテムの列が縦並びになる
 ●column-reverse アイテムの列が縦並び(逆)になる

justify-contentは、row(横並び)だと横軸、column(縦並び)だと縦軸のアイテムの配置が変わる。

 ●flex-start アイテムを開始位置に寄せて配置する
  (row:左寄せ、row-r:右寄せ、column:上寄せ、column-r:下寄せ)
 ●flex-end アイテムを終了位置に寄せて配置する
  (row:右寄せ、row-r:左寄せ、column:下寄せ、column-r:上寄せ)
 ●center アイテムを中央に配置する

align-itemsは、row(横並び)だと縦軸、column(縦並び)だと横軸のアイテムの配置が変わる。

 ●flex-start アイテムを開始位置に寄せて配置する
  (row:上寄せ、row-r:上寄せ、column:左寄せ、column-r:左寄せ)
 ●flex-end アイテムを終了位置に寄せて配置する
  (row:下寄せ、row-r:下寄せ、column:右寄せ、column-r:右寄せ)
 ●center アイテムを中央に配置する


かなりややこしいですが、開発ツールで3つの値を変えて、item1、item2、item3の並びとコンテナの中の位置の変化を確認してみて下さい(reverseは使う機会がないと思うので、rowとcolumnの場合のみを押さえておけばOK)。


■アイテムの位置の変化図

css32.jpg

jc → justify-content、ai → align-items
st → flex-start、ce → center、en → flex-end
※例:「jc:st → justify-content: flex-start;」「ai:en → align-items: flex-end;」

「flex-direction: row; - 横並び」の時
justify-content: flex-start; align-items: flex-start; → 左上
justify-content: flex-start; align-items: flex-end; → 左下
justify-content: flex-end; align-items: flex-start; → 右上
justify-content: flex-end; align-items: flex-end; → 右下

「flex-direction: row-reverse; - 横並び(逆)」の時
justify-content: flex-start; align-items: flex-start; → 右上
justify-content: flex-start; align-items: flex-end; → 右下
justify-content: flex-end; align-items: flex-start; → 左上
justify-content: flex-end; align-items: flex-end; → 左下

「flex-direction: column; - 縦並び」の時
justify-content: flex-start; align-items: flex-start; → 左上
justify-content: flex-start; align-items: flex-end; → 右上
justify-content: flex-end; align-items: flex-start; → 左下
justify-content: flex-end; align-items: flex-end; → 右下

「flex-direction: column-reverse; - 縦並び(逆)」の時
justify-content: flex-start; align-items: flex-start; → 左下
justify-content: flex-start; align-items: flex-end; → 右下
justify-content: flex-end; align-items: flex-start; → 左上
justify-content: flex-end; align-items: flex-end; → 右上


新しいウェブリブログのシステムでは、CSSの様々な箇所に「display: flex;」の記述があり、コンテンツを並び替える方法としてCSS3のフレキシブルボックスレイアウトが使われています。


<例1:ブログ全体を囲う枠 l-wrapper__inner>

css33.jpg

ブログ全体を囲う枠のl-wrapper__innerのCSSに「display: flex;」があり、l-wrapper__innerはフレックスコンテナ、その中にある「l-header」「l-content」「l-footer」の枠がそれぞれフレックスアイテムになっていて、3つの枠が縦並びになっている(flex-direction:column)

<例2:ブログのメニューとメインの枠 Inner02>

css34.jpg

Inner02のCSSに「display: flex;」があり、Inner02はフレックスコンテナ、その中にある「main」「Side」「Side -left」の枠がそれぞれフレックスアイテムになっていて、3つの枠が横並びになっている(flex-direction:row)。

フレックスアイテムの各CSSに設定されている「order」は、フレックスアイテムの順序を指定するもので、この場合は左から「order: 1;」「order: 2;」「order: 3;」の順になる。

例えば、Side -leftのorderを3にして、Sideのorderを1にすると、メニューの位置が逆になる


今回初めてフレキシブルボックスレイアウトを使ってみましたが、CSSの設定をちょっと変えるだけで簡単にコンテンツの並べ替えができるので、慣れると今までのやり方よりもかなり楽ができそう。


フレキシブルボックスレイアウトが理解できれば、CSSの値をちょこっと変えるだけで、左右のサイドバーの位置を入れ替えるといったようなコンテンツの配置を自由に変更できるようになります。





■おまけ「ブログのタイトルのいろいろな編集方法」


ブログのタイトル部分を編集するテクニックをいろいろと紹介したいと思います


<タイトルの文字の位置を変える:フレキシブルボックスレイアウトをそのまま使う>

.Header {
max-width: 100%;
width: 100%;
padding: 0 25px;
}

.Header .Header__inner {
padding: 0 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

flex-directionがcolumnなので、justify-contentとalign-itemsの値による配置の変化は以下のようになります。

css37.jpg

「flex-direction: column; - 縦並び」の時
justify-content: flex-start; align-items: flex-start; → タイトルの文字が左上に配置される
justify-content: flex-start; align-items: flex-end; → タイトルの文字が右上に配置される
justify-content: flex-end; align-items: flex-start; → タイトルの文字が左下に配置される
justify-content: flex-end; align-items: flex-end; → タイトルの文字が右下に配置される

.Headerと.Header .Header__innerに設定されているpadding(最初の数字は上下、後ろの数字は左右の余白)を変えると、さらに位置の微調整が可能です。

↓この部分は、ベンダープレフィックスと呼ばれるもので、まだCSS3に未対応だった過去のブラウザの一部にも対応させるための記述です。

display: -webkit-box;
display: -ms-flexbox;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-box-align: center;
-ms-flex-align: center;

ベンダープレフィックス-CSSの基本
CSS - flex
flexboxの旧仕様、改定仕様、現行仕様の一覧
display:flex系をまとめる(古いブラウザ対応用)

display: -webkit-box;
display: -ms-flexbox;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
↑の5つは変更する必要なし

-webkit-box-pack: center;
-ms-flex-pack: center;
↑の2つはjustify-contentの値をflex-startにした場合はstart、flex-endにした場合はendに変える(※注:flex-は付けない)

-webkit-box-align: center;
-ms-flex-align: center;
↑の2つはalign-itemsの値をflex-startにした場合はstart、flex-endにした場合はendに変える(※注:flex-は付けない)

よくわからなければ、無視してもOKです。

css35.jpg

これは余談ですが、IE11の開発ツールにはエミュレーションモードという機能があり、そこでIEのバージョンを9や8にしてウェブリブログをブログを見てみると・・・・・・ブラウザがフレキシブルボックスレイアウトに未対応なのでデザインがメチャクチャになります(;´∀`)


<タイトルの文字の位置を変える:もっとシンプルに配置を変える>

タイトルの場合、フレックスアイテムがタイトルの文字の1つしか存在しないので、フレキシブルボックスレイアウトを使わなくても簡単に位置を調整できます。

まず、CSS3の記述を全部削除し、paddingの値も全て0にします。

.Header {
max-width: 100%;
width: 100%;
padding: 0 0 0 0;
}
.Header .Header__inner {
padding: 0 0 0 0;
}

これで、タイトルの文字が左上に配置されるので、あとはpaddingの値を変えて余白を大きくして、文字の位置を動かしていきます。

例:「padding: 30px 0 0 50px;」 これで、タイトルが下に30px、右に50px動きます(厳密には上側の余白を30px、左側の余白を50pxにしている)。


<ブログのタイトルを文字から画像に変更する>

まずはタイトル画像を用意します。

タイトル画像を用意したら、画像の横幅と高さの数値をメモしておきます。

管理画面のファイルマネージャを使って画像をアップロードします。

css36.jpg

アップロードしたら、HTMLの部分をクリックしてコピーし、画像のアドレス(https://userdisk.webry.biglobe.ne.jp/〇〇〇〇〇〇〇〇〇.jpg)を確認します。

CSS編集の一番下に以下の記述を丸々コピーします(画像のアドレスと画像の横幅と画像の高さは自分で用意したものに合わせて変更して下さい)。

.Header .Header__inner h1 {
background:url(https://userdisk.webry.biglobe.ne.jp/〇〇〇〇〇〇〇〇〇.jpg) no-repeat; /* タイトル画像 */
}
.Header .Header__inner h1 a {
display: block;
width:155px ; /* 画像の横幅 */
height:60px ; /* 画像の高さ */
}
.Header .Header__inner h1 a span {
display:none;
}

a要素をdisplay:noneで消してしまうと、タイトルをクリック出来なくなってしまうので、タイトルの文字部分だけをdisplay:none;で消して、Header__inner枠の中にあるh1に背景画像を設定することで、ブログのタイトルが表示される場所に画像を表示してます。

さらに、aはインライン要素なので中身の文字がなくなってしまうとクリックできなくなってしまうため、「display: block;」でブロック要素にして、画像と同じ大きさの枠を作ってクリックできるようにしています。

インライン要素・ブロックレベル要素とCSS「display」の使い方


<タイトル領域を全部消して、自分でゼロからタイトルを作る>

css38.jpg

管理画面から「デザイン」→「コンテンツ(サイドバー)」を選択し、ブログパーツの中から自由形式を選び、ヘッダーのところに持っていきます。

css39.jpg

自由形式の×マークの左隣にある歯車のマークをクリックすると↑のような画面になるので、この部分に自由にHTMLを記述し保存します。

css40.jpg

最後に、「コンテンツ(サイドバー)」の画面の下にある保存をクリックします。

css41.jpg

ヘッダー部分に自由形式を追加すると、HTML上では<div class="Header">の下に<div class="Header__contentsParts">が追加され、この部分に自由形式で書いた内容が追加されます。

css42.jpg

ただし、初期設定のままだと「.Header__contentsParts .Module」に「width: 220px;(横幅)」が設定されていて、フリースペースの横幅がかなり小さいので、ここをブログ全体の横幅「width: 800px;(初期設定)」と同じ値にします。

位置的には元のタイトル部分と全く一緒なので、<div class="Header">を「display: none;」で丸ごと全て消せば、自由形式の部分をタイトルとして見せることができます。

.Header {
display: none;
}

1つだけ注意が必要なのが、「Header__contentsParts」にもCSSで「width: 800px;(ブログの横幅)」が設定されているので、ブログの横幅を広げている場合は、この部分も変えないと大きさが合わなくなります。













スポンサーリンク


記載されている会社名・製品名・システム名などは、各社の商標、または登録商標です。