スタイルシートのflexboxで2カラムのレイアウトを組むテスト | 在宅ネットでコツコツお金を稼ぐ

ホームページを作成する中でも、私はスタイルシートの記述が一番苦手なのですが、 自分で自由にレイアウトできたら嬉しいものですね。

今回は、スタイルシートのflexboxでレイアウトをするテストをしてみました。

目標としては、左にサイトバーがあって、本文を表示する広いスペースがあるというものにしたいです。 ブログでおなじみのレイアウトですよね。

以前は、floatを使って、このように横並びのレイアウトをしていましたが、 flexboxを使ってみました。

もちろん、私はスタイルシートに詳しいわけではないので、 実戦投入する際はもう少し、手直しが必要だと思いますが、 もっともシンプルなレイアウトのテストということで、試してみました。

レフトバー

左にサイトバーを用意してみます。 レフトバーのwidthは200pxに指定してみました。

divでコンテナを用意します。名称はなんでも良いですが、 今回は、containerとしました。

containerのdivの中に、leftbarとmainの2つのdivを入れ子にします。

スタイルシートには、



.container{
  display: -webkit-flex;//safari
  display: flex;
  border: 3px solid #cccccc;
  margin: 30px auto;
}

.leftbar{
  border-right: 3px solid #cccccc;
  width: 200px;
}

.main{
}


としてみました。safariというのは、iPhoneで使っているブラウザのようで、 こちらも指定しておくということです。

htmlの方には、




<div class="container">



<div class="leftbar">
<p>
こちらはレフトバーです。
<br>
<br>
</div>

<div class="main">
<p>こちらにはブログ記事の本文など
<br>
<br>
</div>

</div>



としてあります。containerのdivタグの中に、 leftbarとmainのdivタグが入れ子になって入っています。

できあがったサンプルは以下のとおりです。

シンプルな2カラムのテスト レフトバー

flexboxを使用したらとても簡単に2カラムのレイアウトができました。

ライトバー

レフトバーのレイアウトの仕方はわかりましたが、 今度は、サイトバーを右につけてみたいと思います。

今度はちょっと難しかったです。

スタイルシートには、



.container{
  display: -webkit-flex;//safari
  display: flex;

  border: 3px solid #cccccc;
  margin: 30px auto;
}

.main2{
  margin-right: auto;
}

.rightbar{
  border-left: 3px solid #cccccc;
  width: 200px;
}


としてみました。containerの部分は先ほどのレフトバーの時と同じですが、 mainの部分(今回は、main2という名前にしました)とrightbarの部分が異なります。 mainの部分に、

margin-right: auto;

をつけたら、一応うまくいきました。

ちなみにhtmlの方は、


<div class="container">

<div class="main2">
<p>こちらにはブログ記事の本文など
<br>
<br>
</div>

<div class="rightbar">
<p>
こちらはライトバーです。
<br>
<br>
</div>

</div>

となっています。

できあがったサンプルは以下のとおりです。

シンプルな2カラムのテスト ライトバー

これで、シンプルな2カラムのレイアウトができました。 flexboxはとても簡単で使いやすいですね。

もしかしたら、専門家の方が見るとおかしなところがあるかもしれませんが、 とりあえずはこれで動きました。

実戦投入される際は、不具合など出ないか確認してから使うと良いのではないかと思います。

(2017/11/25)

トップページ

その他のコラム

コンテンツ

トップページ