【プログラミング独学22日目】2カラムレイアウト・3カラムレイアウト

FREELANCE,WORDPRESS/WEB

こんにちは、歯科衛生士・ママライターのミホです。以前から独学でWordPressを使ったサイト制作は行なってきたのですが、改めてプログラミングをしっかり学ぼうと思い学習を始めました。その記録や学習してわからなかったことなどをアウトプットしていきます。毎日インプット・アウトプットを続けて22日目を迎えました。

私の今までの経歴は、以下で簡単に説明しています。元々医療従事者なのでわりと特殊な経歴かと思います。

今後の目標は以下の通りで、忘れないためにも毎日書き留めておきます。

  • プログラミング案件も受注できるようになりたい
  • 歯科衛生士エンジニアを目指したい
  • コーディングもライティングもできる歯科衛生士

【プログラミング独学22日目】学んだこと

今日もCSSの続きをやりました。引き続きflexboxの学習です。

①2カラムレイアウト

2カラムレイアウトを作るためにもflexboxを使います。例えば以下のような記述があったとします。

<body>
 <header>ヘッダー</header>
 <main>メイン</main>
 <aside>サイドバー>/aside>
 <footer>フッター</footer>
</body>

メインとサイドバーの部分を2カラムレイアウトにしたかったとしましょう。flexboxは横並びにしたい要素の親要素に必要事項を記述するので、まずは<main>と<aside>の親要素を準備します。以下のように<div>タグで親要素を作成しましょう。

<body>
 <header>ヘッダー</header>
 <div class="container">
   <main>メイン</main>
   <aside>サイドバー</aside>
 </div>
 <footer>フッター</footer>
</body>

flexboxの基本については以下でまとめています。

このとき作成した「container」がflex container、<main>と<aside>がflex itemとなります。なおflexboxでは、1つ下の階層にある要素（今で言う<main>と<aside>）のみflex itemとなります。そのため例えば<main>のさらに下にある要素（<p>など）はflex itemとはなりません。

親要素「container」が用意できたので、CSSに以下のように記述します。

.container {
 display:flex;
}

aside {
 width:100px;
}

main {
 flex:1;
}

上のようにasideの横腹widthを固定値にすると、余ったスペース（container幅-aside幅100px）は全てmainの幅として扱われます。flex:1については昨日学んだ内容ですね。

少し話がズレますが、mainとasideいずれも100%にすると横幅は50%ずつで半々に分けられます。

②3カラムレイアウト

2カラムレイアウトと同様、flexboxで3カラムレイアウトを作ることもできます。

<body>
 <header>ヘッダー</header>
 <div class="container">
   <main>メイン</main>
   <nav>ナビ</nav>
   <aside>サイドバー</aside>
 </div>
 <footer>フッター</footer>
</body>
.container {
 display:flex;
}

main {
 flex:1;
}

nav {
 width:100px;
}

aside {
 width:100px;
}

なおnavやasideの幅は、mainの「flex:1」と合わせて「flex-basis:100px」としてもOKです。「width:100px」と記述したときと同じ結果になります。ただflex-directionがcolumnであるときなどは注意が必要です。flex-basisは「主軸方向の大きさ」なので、主軸の方向が変わると表示も変わります。

また<main><nav><aside> の表示順を変えたいときは、orderを使うんでしたね。以下で学んだ内容です。

ちなみにHTMLの方で以下のように書く順番を直接変えてしまう方法でもOKです。要素が増えてくると大変なので、orderで操作する方法もマスターしておきましょう。

<body>
 <header>ヘッダー</header>
 <div class="container">
   <nav>ナビ</nav>
   <main>メイン</main>
   <aside>サイドバー</aside>
 </div>
 <footer>フッター</footer>
</body>

③フッターは画面下部に固定したいとき

フッターは内容が入っていなくても、画面下部で固定しておきたいですよね。そのときもflexboxを使うことができます。考え方としては、<header><container><footer>をそれぞれflex-itemとして縦に並べます。<container>の高さは可変になるようflex:1としておくと良いでしょう。

<header><container><footer>の親要素は<body>であるため、以下のように記述します。

body {
 display:flex;
}

.container {
 flex:1;
 flex-direction:column;
}

しかしこれだけでは上手くいきません。なぜなら<body>の高さheightが設定されていないことで、bodyの高さheight＝コンテンツの高さとなってしまっているためです。そこでbodyに高さを設定するためのCSSも追記します。

body {
 display:flex;
 height:100%;
}

ただ「％」はその親要素に対する割合でしたよね。つまり「bodyのheightを100％」と記述すると、「bodyの親要素のheightに対して100％の大きさで表示する」という意味になります。

bodyの親要素は<html>であり、<html>もheightが設定されていないので、「bodyのheightを100％」を活かすためには<html>にもheightを設定する必要があります。

html {
 height:100%
}

独学に限界を感じたらプログラミングスクールに通っても良いかなと思っています。「programmer college」は完全無料のプログラミングスクールで、レッスンだけでなく就活支援まで手厚くサポートしてくれるのが嬉しい点です。なぜ完全無料？怪しくない？と思いましたが、企業から協賛金を募ることで無料スクールが実現しているそうです。どの学習ソフトも有料なので、無料で学べてしかも就活直結ってありがたいですよね。

▼完全無料のプログラミングスクール

【フリーター・未経験歓迎】手に職をつけるプログラミング＆就活スクール

④flexboxではmaiginのそうさいが起きない

marginのそうさいについては以下で学びました。

ただflexboxでは、縦方向にmaiginの指定が重なってもそうさいが起きません。

⑤領域の中央に要素を配置したいとき

<body>
  <header>
    <div>中央に来てほしいテキスト</div>
  </header>
</body>

例えば上のような記述があったとして、<div>をheader領域の中央に配置したいとします。絶対配置を使って配置する方法は以下の通りです。

header {
 height:200px;
 position:relative;
}

div {
 width:100px;
 height:40px;
 position:absolute;
}

絶対配置（position:absolute）では、親要素（今で言うheader）のpositionがstatic以外（今で言うposition:relative）のとき、親要素の左上を起点として指定した位置に配置されます。親要素（今で言うheader）のpositionがstaticのときは、親要素の左上ではなくブラウザの左上を起点として指定した位置に配置されます。絶対要素は以下で学んだ内容です。

その上で、divを中央に持ってくるために、divにcalcを使った記述を書き加えます。

div {
 width:100px;
 height:40px;
 position:absolute;
 top:calc(50% - 20px);
 left:calc(50% - 50px);
}

calcの記述は方程式から考えるとすんなり理解できました。

このような方法でもdivをheaderの中央に位置付けることができますが、例えばdivのwidthやheightが変わったらまたcalcを計算し直さなければいけなくなり、面倒です。このときflexboxを使うと簡単です。

header {
 height:200px;
 display:flex;
 justify-content:center;
 align-items:center;
}

「justify-content:center」で主軸方向の中央揃えを指定し、「align-items:center」で交差軸方向の中央揃えを指定しました。flexboxを使えば、たった3つの記述だけで要素を領域の中央に配置させることができます。

【プログラミング独学22日目】わからなかったこと・調べてわかったこと

今日学んで疑問が残った部分は以下です。

  • flex itemとなる範囲
  • 絶対配置では必ず親要素と子要素両方にpositionを記述する？

flex itemとなる範囲

flex containerの1つ下の要素のみflex itemとなり、そのさらに下にある要素はflex itemではないという説明がありました。しかし実際に以下のように記述してみると、問題無く表示されました。

<body>
  <header>ヘッダー</header>
  <div class="container">
   <main>メイン</main>
    <p>テキスト</p>
   <aside>サイドバー</aside>
  </div>
  <footer>フッター</footer>
</body>
.container {
 display:flex;
}

追加してみたのは<p>テキスト</p>の部分です。flex containerである「container」の下の下の階層にありますが、<main>や<aside>とともに横並びで表示されました。「flex itemにはならない」とはどういうことなのか・・・。概念上flex itemではないという意味で、表示自体はされるということなのでしょうか。今月はもう先生に質問できず、調べてもよくわかりませんでした。

絶対配置では必ず親要素と子要素両方にpositionを記述する？

絶対配置を久しぶりに見るとよくわからず、理解するまでに時間がかかってしまいました。絶対配置＝position:absoluteで、親要素のpositionが何であるかで表示が変わってくるとのことでした。ということは、絶対配置を記述したい＝絶対配置を適用したい要素だけでなく、その親要素にも必ずpositonを記述するということなのでしょうか（いまさら）。

ややこしいですが、flexboxを指定するときも適用させたい要素だけでなくその親要素に「display:flex」と必ず記述するよなと思えば、特段おかしいことではないなと思いました。

独学に限界を感じたらプログラミングスクールに通っても良いかなと思っています。「programmer college」は完全無料のプログラミングスクールで、レッスンだけでなく就活支援まで手厚くサポートしてくれるのが嬉しい点です。なぜ完全無料？怪しくない？と思いましたが、企業から協賛金を募ることで無料スクールが実現しているそうです。どの学習ソフトも有料なので、無料で学べてしかも就活直結ってありがたいですよね。

▼完全無料のプログラミングスクール

【フリーター・未経験歓迎】手に職をつけるプログラミング＆就活スクール

FREELANCE,WORDPRESS/WEB

Posted by miho