フレックスボックスレイアウト

まず、考え方や説明が簡単なフレックスボックスを説明します。

最初に基本的な書き方・特徴を説明し、段組みの作り方などの応用編を説明します。

基本形

<div style="display: flex;">～</div>で囲むと、その内部のレイアウト方式がフレックスボックスになります。

フレックスボックスには次のような効果があります。

• 内部のブロックが横方向に並ぶようになる。
• 内側のブロック横幅は、widthなどの指定が無い場合、内部のテキストにフィットした値になる。

編集が少し楽

副次的な効果として改行の影響を受けにくくなります。 次の例をそのまま入力してみてください。

        <div style="display: flex;"><div>左の段</div><div>右の段</div></div>
    

        <div style="display: flex;">
        <div>左の段</div>
        <div>右の段</div>
        </div>
    

２つの入力例は同じように表示されます。

この例では文字数が少ないですが、実際に自由記入欄に記載するときは、キャラプロフィールやエピソードなどの長文があると想定すると、下の方が編集しやすいはずです。

技術的な説明

１つ目の入力例は、フレックスボックス内に２つのブロックが存在しています。

２つ目の入力例も一見すると２つのブロックのように見えますが、改行の問題があるので、実際は５つのブロックが存在しています。

フレックボックスの中で改行している位置に（１）（２）（３）と番号を追加してみると、わかりやすくなるでしょう。

        <div style="display: flex;">（１）
        <div>左の段</div>（２）
        <div>右の段</div>（３）
        </div>
    

そのため２つ目の入力は、実は２段組ではなく５段組になっています。

ただし、５つのうち３つは「改行」なので、実質何も表示されません。（上の表示例から（１）（２）（３）を取り除いた状態になります。）

そのためテキストが入っている２つの段だけが目立ち、２段組みのように見えているのです。

フレックボックス以外のレイアウト（通常のレイアウトを含む）では、改行によって空白行ができたり、レイアウト崩れが発生します。

それを避けるため、改行が入らない書き方が必要になり、１行の文字数が長い書き方が多くなってしまいます。

フレックスボックスは（上の（１）（２）（３）のような位置なら）改行を入れても大丈夫なので、１行の文字数が減って読みやすくなり、編集が楽になります。

２段組み

まず、２段組みレイアウトを作ってみましょう。 ２段組みができれば、それを組み合せていけばいろいろなレイアウトができます。

そもそも、自由記入欄で４段組み以上になることはめったにありません。 （横幅が６４０ピクセルと限られているので、４段組を作る広さがありません。）

２段組みの基本形は、すでに上に例が出ていますが、次のようにします。

        <div style="display: flex;">
        <div>左の段</div>
        <div>右の段</div>
        </div>
    

そして、「左の段」と「右の段」のところに、長めのテキストを追加してみましょう。 （わかりやすくするために、右段だけ背景色も追加しています。）

        <div style="display: flex;">
        <div>左の段
        適当に長い文章を書いてみる。
        ◆英雄キャッシュ還元キャンペーン！！
        ■キャンペーン内容
        ・30人に1人購入額をその場で還元！！
        キャンペーン期間中30人に1人に英雄キャッシュを購入していただいたその場で、購入額と同額のボーナス英雄キャッシュをプレゼントいたします。</div>
        <div style="background-color: pink;">右の段
        
        ◆キャンペーン期間


        1月25日(木)17:00 ～ 2月1日(木)12:00</div>
        </div>
    

左右がアンバランスなので見た目の調整は必要ですが、一応これで２段組みができました。

３段以上の段組みを作る場合も、最初に簡単な１行だけの段を組み、そこから文章を増やしていくとよいです。

横幅を指定する

２段組を作ることができましたが、左右の段で横幅が異なりアンバランスです。 そこで横幅を設定しましょう。

次のように入力してください。１つ前と違うところを色をつけています。

        <div style="display: flex;">
        <div style="width: 300px;">左の段
        適当に長い文章を書いてみる。
        ◆英雄キャッシュ還元キャンペーン！！
        ■キャンペーン内容
        ・30人に1人購入額をその場で還元！！
        キャンペーン期間中30人に1人に英雄キャッシュを購入していただいたその場で、購入額と同額のボーナス英雄キャッシュをプレゼントいたします。</div>
        <div style="width: 300px; background-color: pink;">右の段
        
        ◆キャンペーン期間


        1月25日(木)17:00 ～ 2月1日(木)12:00</div>
        </div>
    

左右の横幅を３００ピクセルに指定しました そのため、左：右の比率が１：１になっています。

２つあわせて６００ピクセルなので、自由記入欄の横幅（６４０）より小さいです。 そのため右側に４０ピクセル分の空きがあり、そこは白い背景になっています。

内側の横幅に注意

左右の横幅を２倍にした場合どうなるでしょうか？

左右あわせて６００ピクセルだったものが２倍になれば１２００ピクセルになり、自由記入欄の横幅を超えることになります。 そうなれば、右の段の部分ははみ出してしまい、表示されなくなるように思いませんか？

しかし、そうはなりません。実際に入力して、表示を確認してみましょう。

次のように入力してください。１つ前と違うところを色をつけています。

        <div style="display: flex;">
        <div style="width: 600px;">左の段
        適当に長い文章を書いてみる。
        ◆英雄キャッシュ還元キャンペーン！！
        ■キャンペーン内容
        ・30人に1人購入額をその場で還元！！
        キャンペーン期間中30人に1人に英雄キャッシュを購入していただいたその場で、購入額と同額のボーナス英雄キャッシュをプレゼントいたします。</div>
        <div style="width: 600px; background-color: pink;">右の段
        
        ◆キャンペーン期間


        1月25日(木)17:00 ～ 2月1日(木)12:00</div>
        </div>
    

横幅は少し増え、右側にあった白い背景は消えていますが、右の段が消える程ではありません。 自由記入欄のちょうど真ん中で左右にわかれています。

フレックスボックスレイアウトでは、

のときに、内側が外側にはみ出さないように横幅を調整します。

逆にいえば、widthで指定した横幅と異なるピクセル数になっているので、意図したレイアウトになっていません。（widthの指定は６００ピクセル、実際の表示は３２０ピクセル。）

フレックスボックスレイアウトを使って段組みするときは、各段の横幅の合計が外側を超えないように、注意してください。

間隔

左右の段の横幅を３００ピクセルにした例では、左右の段が近すぎます。 背景色を塗っていなかったら、

と読めてしまいそうなぐらい近いです。 これは見やすいデザインではないので左右の段の間を拡げた方が良いです。

ついでに、自由記入欄の段組みの間も拡げた方が良いでしょう。

未使用の横幅が４０ピクセルあるので、「左右に１０ピクセル、中央に２０ピクセル」の間隔を設ければちょうど良さそうです。

次のように入力してください。 間が拡がっていることがわかりやすいように、今回は左の段の背景色も塗っています。

        <div style="display: flex;">
        <div style="width: 300px; background-color: pink; margin: 0 20px 0 10px;">左の段
        適当に長い文章を書いてみる。
        ◆英雄キャッシュ還元キャンペーン！！
        ■キャンペーン内容
        ・30人に1人購入額をその場で還元！！
        キャンペーン期間中30人に1人に英雄キャッシュを購入していただいたその場で、購入額と同額のボーナス英雄キャッシュをプレゼントいたします。</div>
        <div style="width: 300px; background-color: pink;">右の段
        
        ◆キャンペーン期間


        1月25日(木)17:00 ～ 2月1日(木)12:00</div>
        </div>
    

左の段のブロックに「左が10px、右が20px」となるmarginを追加することで左側と中央の白い部分ができています。 そして使っていない部分のピクセルが１０になるので、右側の白い部分ができています。

今回は背景色を塗る都合でmarginを使っていますが、背景色を塗らないならmarginのかわりにpaddingでもよいです。ともかく、どちらかの方法で適切な横幅の余白をつければ、きれいに間隔を拡げることができます。

余白サイズに注意

「余白や枠の横幅が、全体的な横幅の値に影響を与える」ことを忘れずに！ （詳細説明は「横幅と余白・枠との関係」を参照してください。）

もし、上の例で"margin 0 50px 0 10px;"を指定すると内側のピクセル数は６４０を超え、「内側の横幅合計＞外側の横幅」になってしまいます。 左右の段の横幅は300ピクセルではなくなってしまうでしょう。

二重構造にする

余白や枠の幅も含めて横幅を計算することが面倒な場合は、二重構造にしてしまうのも良いでしょう。

        <div style="display: flex;">
        <div style="width: 320px;"><div style="background-color: pink; margin: 0 10px;">左の段
        適当に長い文章を書いてみる。
        ◆英雄キャッシュ還元キャンペーン！！
        ■キャンペーン内容
        ・30人に1人購入額をその場で還元！！
        キャンペーン期間中30人に1人に英雄キャッシュを購入していただいたその場で、購入額と同額のボーナス英雄キャッシュをプレゼントいたします。</div></div>
        <div style="width: 320px;"><div style="background-color: pink; margin: 0 10px;">右の段
        
        ◆キャンペーン期間


        1月25日(木)17:00 ～ 2月1日(木)12:00</div>
        </div></div>
    

二重構造にして、外側のブロックでは<div style="width:320px;">のように、横幅のみを設定します。

そして、枠や背景色は内側のブロックで設定します。

背景色に違いが出てしまいますが、背景色を無視してテキストの位置だけ見れば同じように表示されます。 上の例のような場合は、右段の文章の最後に改行を２つ追加して高さをそろえれば、背景色も同じになります。

横幅を合わせる作業はこちらの方が楽なのですが、二重のdivになってしまうので、編集が少し面倒になるかもしれません。

また、改行にも注意が必要です。フレックスボックスと二重構造の外側（width指定しているとこと）の間は改行しても大丈夫ですが、二重構造の１つ目と２つ目の間に改行を入れて次のようにしてしまうと改行によるレイアウト崩れが発生し始めます。

        <div style="display: flex;">
        <div style="width: 320px;">
        <div style="background-color: pink; margin: 0 10px;">左の段
        （以降省略）
    

上の例の表示例

画像と段組み

公式ギャラリーの自由記入欄用画像（キャラの全身画像）は、縦長で横幅が３００ピクセルぐらいのものが多いです。 例えば、「画像の加工」で使用している画像のサイズは280x440です。

そういった画像を挿入しただけだと、自由記入欄の右半分は何もない白い背景のままになってしまいます。

これはちょっとモッタイナイというか見栄えが良くありません。 その真っ白な場所にキャラ紹介やエピソードなどを書きたくなる人も多いと思います。

そんなときこそ段組みの出番です。 段組みをすれば、右側に文章を書くことができます。

それどころか、「左側に文章、右側に画像」の様にすることもできます。

簡単な例を下に示します。

        <div style="display: flex; background-color: #FC3;">
        <div style="width: 360px;">
        名前：リレミト＝ロクトフェイト
        種族：人間
        年齢：１９歳
        性別：女性
        メインクラス：クレリック／旅人の神
        サブクラス：ダンジョン探検家</div>
        <div style="width: 280px;"><画像mpKUFT1jY6ehBaLdeApRxg==></div>
        </div>
    

名前：リレミト＝ロクトフェイト
種族：人間
年齢：１９歳
性別：女性
メインクラス：クレリック／旅人の神
サブクラス：ダンジョン探検家

©SUCCESS 2011 ALL RIGHTS RESERVED.

作り方を説明します。

挿入している画像のサイズが280x440なので、右の段の横幅に２８０ピクセルを指定します。 そして、左の段は６４０－２８０＝３６０ピクセルを指定します。

        <div style="display: flex;">
        <div style="width: 360px;">左の段</div>
        <div style="width: 280px;">右の段</div>
        </div>
    

これに次の変更を加えると、１つ前の入力例になります。

• 右の段には英雄クロニクルの画像タグ（<画像mpKUFT1jY6ehBaLdeApRxg==>）を記載する。
• 左の段にはキャラの説明文章などを記載する。
• 最も外側（display: flex;のところ）で背景色を設定する。