【第8回】プログラミング初心者向けCSS3講座【flexbox】

こんにちは、はるおです。これからHTMLとセットで使用される言語、CSS講座を始めます。CSSはHTMLで構成された文章を装飾する(文字色、文字サイズ、位置など)ための言語です。今回の記事から数回にわたって、現バージョンのCSS3について初心者向けに解説していこうと思います。

【HMTL5講座】

【第0回】プログラミング初心者向けHTML5講座

  

 

【前回記事】

【第7回】プログラミング初心者向けCSS3講座【border関連】

  

【次回記事】

【第9回】プログラミング初心者向けCSS3講座【アニメーション】

本記事では、下記の内容を解説します。

 

 

 

○この記事でわかること

・flexboxについてわかる

  

この記事を書いている僕は、プログラミング学習歴8ヶ月。

基礎学習が終わり、最近はLP作成などの実績も少しずつ出してきております。

 

 

また、Twiiterも最近始めたのでこちらの方もフォローしていただけると嬉しいです。

 

Twitterアカウント @clearyou66

 

 flexboxについて

 

flexboxとは、要素を配置する場所を従来より簡単に指定できるようになったプロパティとなります。種類が多いため、1つずつ見ていきましょう。flexbox使用方法は簡単で、親要素に「display: flex;」を指定しておくことで使えるようになります。

 

 

flex-direction

配置の方向を決めることができるプロパティとなります。縦に並べるか、横に並べるかを指定することが可能です。

flex-direction:

row; 初期値となります。横並びに左から右へ配置します。

row-reverse; 横並びに右から左に配置します。

column; 縦方向に上から下へと配置します。

column-reverse; 縦方向に下か上へと配置します。

 

 

flex-wrap

要素の折り返し地点を指定するためのプロパティとなります。レスポンシブのサイトを作成する際に、どの要素から折り返すかを決めることができるようになります。

flex-wrap:

nowrap; 初期値となります。折り返しを指定せずに配置します。

wrap; 折り返し地点に達すると、はみ出した要素を下へ配置します。

wrap-reverse; 折り返しを行った際に、下ではなく上に配置します。

 

 

flex-flow

上記のflex-directionと、flex-wrapを一括指定できるプロパティとなります。2つのプロパティをまとめて使用する際に使います。

flex-flow: row wrap;

 

 

justify-content

要素の横方向の配置場所を指定します。このプロパティを使うと左に配置、右に配置、中央揃えといった風に水平方向に移動させます。

justify-content:

flex-start; 初期値となります。要素を左に配置します。

flex-end; 要素を右に配置します。

center; 要素を中央揃えにします。

space-between; 要素を両端に配置します。3つ以上ある場合は均等に配置されます。

space-around;

要素を両端に配置しますが、適度にスペースを空けて配置する。3つ以上ある場合は均等に配置されます。

 

 

align-items

justify-contentは横方向でしたが、align-itemsは縦方向に要素の配置場所を移動させるプロパティとなります。

align-items:

flex-start; 要素を上に揃えて配置します。

flex-end; 要素を下に揃えて配置します。

center; 要素を中央揃えで配置します。

baseline; 要素をベースラインに揃えて配置します。

stretch; 要素を上下に配置します。

 

 

align-content

align-contentは要素が複数行ある場合に位置を指定するプロパティとなります。

align-content:

flex-start; 要素を上に揃えて配置します。

flex-end; 要素を下に揃えて配置します。

center; 要素を中央揃えにして配置します。

space-between; 要素を上下に余白を空けずに配置します。

space-around; 要素を上下に余白を入れて均等に配置します。

stretch; 初期値となります。

 

 

order

要素の並び順を指定するためのプロパティとなります。デフォルト値は0で、負の値は指定することができません。

 

 

flex-grow

要素の伸び率を指定するためのプロパティとなります。最大を10として、要素の割合で指定します。例えば「3」とすると、画面幅の3割分と言うことになります。

 

 

flex-shrink

要素の縮み率を指定するためのプロパティとなります。伸び率の逆となります。

 

 

flex-basis

要素のベース幅を指定するためのプロパティとなります。要素の基本的な幅を指定することができます。こちらは100を最大値として、%で指定します。

 

 

flex

要素の伸び率、縮み率、ベースの幅を一括指定するためのプロパティとなります。flex-grow、flex-shrink、flex-basisの順でまとめて指定します。

flex: 1 0 20%;

flex: 2 0 30%;

flex: 1 0 50%;

 

 

align-self

要素の縦方向を1つずつ個別に指定します。※vertical-alignは指定することができません。

align-self;

auto; 初期値となります。親要素のalign-itemsを指定します。

flex-start; 上側に配置します。

flex-end; 下側に配置します。

center; 中央揃えで配置します。

baseline; ベースラインに合わせて配置します。

stretch; 上下に配置します。

 

 

 

 

今回の宿題

 

今日の内容に関連のある簡単な宿題を出しますので、次回の講座までにやっておきましょう。

 

宿題:Flexbox Froggyと調べてやってみよう。flexboxを学べるゲームです。

 

ということで第8回のCSS3講座を終わります。

 

 

 

エディタについてはこちらの記事で説明しているので参考までにどうぞ。

【初心者必見】最強におすすめのエディタ「Atom」について徹底解説

 

 

僕の失敗=駆け出しエンジニア(プログラミング初心者)の失敗 だと思うので、僕の失敗談はすべてこれからの駆け出しエンジニアたちに還元していきたいというスタンスです。

 

また、本記事は超初心者向けに解説しているため、難しい単語や不要な説明は省略させていただいております。わからないことがあればコメント欄にて気軽にご質問ください。

 

僕のプロフィールついては以下の記事にまとめてありますので、時間がある方は見ていっていただけると嬉しいです。

 

 

WordPressで記事投稿をする方法を自己紹介で学習する【初投稿】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です