css コーダー

flexcssを使って横並びにする方法(ページ制作に超便利です)

投稿日:

Pocket

うも、チャーさんです。

 

あなたはflexというcssのプロパティを使い、

要素を横並びにする方法を知りたい。

そう思っていませんか?

 

この記事ではcssのflexを使い、

要素を横並びにする方法を紹介しています。

 

 

なので、あなたがこの記事を読めば、

flexを使い簡単に要素を横並びにできるようになります。

ページ制作も非常にはかどります。

 

flexの横並びは、floatなどと違い、

非常に簡単です。

 

そのため、あなたがflexで横並びをしたい、

そう思っているならこのまま下にスクロールして、

読んでみてください。

 

スポンサードサーチ

flexcssを使って横並びにする方法はこれ

 

で早速結論です。

 

flexを使って、複数の要素を横並びにするには、

その複数の要素を包む親要素を作って、

親要素にdisplay:flexというcssをつけるだけです。

 

 

なぜこうするかというと、

親要素を作り、親要素にdisplay:flex;

とつけるだけで全部いい感じに横並びにしてくれるからです。

 

ということで、早速具体例をみてみましょう。

 

まず要素として、ボックスを3つ、

pタグでの文章を1つ用意しました。

 

 

これらを全部とりあえず横に並べたいとします。

 

で、早速紹介しました通り、

これらのボックスとpタグの親要素である、

parentクラスをつけた、親divにdisplay:flex;をつけると、

 

 

 

はい、こんな風に、全部綺麗に横並びに、

なってくれました。

 

非常に楽ですね。

たった1行付け加えるだけで、

横並びになってくれます。

 

このflexではfloatで横並びにするように、

あとでfloatを切る必要もありません。

 

 

さらに、pタグで書いた文章も、

縦方向にも中央寄せが自動でされており、

デザイン調整も少なく非常に便利です。

 

というわけで、pタグの縦方向の中央寄せは、

少し余談でしたが、複数の要素を、

横並びにするならdisplay:flex;を使うといいです。

 

 

親要素を作り、それに1行flexとつけてやるだけで、

綺麗に横並びになってくれますので、

ストレスも少なく非常に便利ですよ。

 

スポンサードサーチ

flexcssで横並びにする手順を以下では説明

 

で、やり方がわからない時のために手順を補足します。

 

子要素を用意しましょう

 

まずは横並びにしたい子要素を、

用意しましょう。

 

なぜならこれがないとそもそも、

横並びできませんので。

 

例としては、画像と文章ですね。

 

 

コーディングやwebページの制作では、

画像の横に文章を配置みたいなのがよくあるので、

そんな感じです。

 

親要素で囲いましょう

 

で要素を用意できたら、

次にそれらの要素を包む親要素を作りましょう。

 

理由は親要素を作らないと、

flexを使っても横並びにならないからです。

 

なので親要素を作りましょう。

 

 

具体例としては、

 

<div class=”parent”>

  <div class=”child”>

  </div>

  <div class=”child”>

  </div>

  <div class=”child”>

  </div>

</div>

 

みたいな感じですね。

 

親要素にdisplay:flex;と書きましょう。

 

で、親要素を用意したら、

その親要素に、display:flex;

と1行付け足しましょう。

 

すると、ブラウザを再読み込みすれば、

要素が綺麗に横並びになってくれるでしょう。

 

スポンサードサーチ

余談:flexの横並び以外の機能を少し紹介

 

またflexですが、

横並び以外にも様々な機能があります。

 

ということで、具体例付きで、

少し紹介していこうと思います。

 

逆の横並び

 

先ほどは要素の横並びを紹介しましたが、

同じ横並びでも逆の横並びができます。

 

これをやるには、

flex-direction:row-reverse;

と親要素にcssを付け足すといいです。

 

すると、

 

 

逆に並びましたね。

ちなみに、横並びの逆にする際に、

flex-direction:row-reverse;をつけました。

 

が、display:flex;をつけた場合は、

初期値でflex-direction:row;(通常の横並び)

が適応されてるので、それも知っておきましょう。

 

flexの横並びで要素の間に隙間をつける

 

また、同じ普通の横並びでも、

横並びで要素の間にスペースをつけることもできます。

 

この場合は、

justify-content:space-around;

と付け加えれば要素の間に隙間ができます。

 

こんな風に。

 

 

flexは縦並びも可能です

 

また、横並び以外にも、

縦並びもできます。

 

その場合は、

flex-direction:column;とつけましょう。

 

すると、

 

 

縦に並びました。

 

flexでは逆の縦並びもできます

 

またこれを逆に縦並びもできます。

その際は、

flex-direction:column-reverse;

とつけましょう。

 

すると、

 

 

要素が縦に逆に並べ替えられましたね。

 

またflexには他にも色々な機能がありますが、

この記事の趣旨はあくまでflexでの横並びなので、

きになる場合は調べてみてください。

 

スポンサードサーチ

まとめ

 

それではまとめに入ります。

 

cssのflexで横並びにするには、

横並びにしたい要素を包む親要素を作り、

親要素にdisplay:flex;をつけましょう。

 

 

さて、それでは早速あなた自身でも、

flexを使っての横並びを試してみましょう。

 

やり方は簡単です。

親要素を作り、親要素にdisplay:flex;

と書くだけです。

 

これをやってあなたのコーディングスキルを、

レベルアップさせましょう。

 

 

それでは、読んでもらってありがとうございました。

 

チャーさん

-css, コーダー


スポンサードサーチ

関連記事

no image

cssで平行四辺形を作る方法「1行足せばできますよ」

どうも、チャーさんです。   あなたは、cssで平行四辺形に できないものかと思っていませんか?   この記事では、要素をcssで平行四辺形に する方法を書いています。 &nbsp …

no image

cssで画像をトリミングする方法。「記述1行で完了」

どうも、チャーさんです。   あなたはcssで画像をトリミングしたい。 そう思っていませんか?   photoshopでトリミングするのめんどい、 cssでできんかな?と思ってませ …

no image

レスポンシブで要素を消す方法「簡単にできます」

どうも、チャーさんです。 あなたは、レスポンシブで要素を消すには、 どうしたらいいのだろう、と思っていませんか?   この記事では、レスポンシブで要素を消す方法を、 コード例付きで書いてます …

no image

メニューに下線をだすcss(マウスでホバーした時に)

どうもチャーさんです。 あなたはメニューに下線をだすcssを 探していますか?   この記事では、メニューの上に マウスを持っていくと、メニューに下線が 表示される方法を書いています。 &n …

no image

cssで要素の位置調整をする方法を丁寧に解説コピペもok

どうも、チャーさん(@chaa___san)です。   あなたはcssで画像やdivで作った要素の位置調整を、 したいと思っていませんか?   この記事ではcssでそれらの要素の位 …

no image

プログラミングのdivをわかりやすく説明します。divにcssを適用する方法も

  どうも、チャーさん(@chaa___san) です。   あなたはdivとはなんだ? と思っていませんか。   この記事ではdivとは何か、 そしてどういう風に使えば …

no image

cssでボタンにhoverした時に色を変える方法

どうもチャーさんです。   あなたは、cssでボタンにhoverして、 色を変える方法を探していますか?   この記事では、ボタンホバーで、 ボタンの色を変える方法について、 お話 …

no image

ブートストラップの使い方を初心者向けに紹介

どうも、チャーさんです。   あなたはブートストラップを使ってみたい、 または使わないといけないけど、 使い方がわからない。   導入の仕方も、何したらいいかもわからない。 そんな …

no image

cssの書き方コメントが知りたいならこの記事をどうぞ。

どうも、チャーさんです。   この記事ではcssの書き方の1つ、 コメントについて書いてます。   具体的には、 ・そもそもコメントとは? ・コメントを書く方法 ・実用的なコメント …

no image

インライン要素にmarginの上下が効かない時の解決方法「簡単です」

  どうもチャーさんです。   あなたはインライン要素にmarginの上下を、 効かせたいのに効かなくて困ってませんか?   この記事では、そんな状態の解決方法を、 書い …

no image

レスポンシブでフォントサイズを可変にする方法「手間いらず」

どうもチャーさんです。   あなたはレスポンシブで、 フォントサイズを可変にする方法を 探していますか?   この記事では、フォントサイズをレスポンシブで 自動調整できる方法を書い …

no image

レスポンシブデザインを3秒で確認できる方法「各サイズ」

どうも、チャーさんです。   あなたは、レスポンシブデザインの確認方法を、 探していませんか?   この記事では、レスポンシブデザインを、 スマホサイズ、タブレットサイズ、pcサイ …

no image

cssの背景画像が繰り返しになるのを解決する方法

どうも、チャーさんです。   あなたはcssで背景画像を設置すると、 繰り返しになっていて困っていませんか?   この記事では、cssで表示した背景画像が、 繰り返しにならない方法 …

no image

コーダーになるにはこの5つのステップを踏みましょう

どうも、チャーさんです。   あなたはコーダーになるには、 どうすれば、どんな手順を踏めばなれるのかな、 と思ってませんか?   この記事では完全に0から、 コーダーになるそのため …

no image

cssでボタンをレスポンシブ対応にする方法(微調整必要なしで楽ですよ)

どうも、チャーさんです。   あなたはcssでボタンをレスポンシブにしたい、 かつブレークポイントごとに微調整する手間ひまの、 必要のないボタンを作る方法はないかと思ってませんか? &nbs …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。