【プログラミング独学18日目】詳細度・flexbox
こんにちは、歯科衛生士・ママライターのミホです。以前から独学でWordPressを使ったサイト制作は行なってきたのですが、改めてプログラミングをしっかり学ぼうと思い学習を始めました。その記録や学習してわからなかったことなどをアウトプットしていきます。
私の今までの経歴は、以下で簡単に説明しています。元々医療従事者なのでわりと特殊な経歴かと思います。
https://chanmk.tokyo/programming_1/今後の目標は以下の通りで、忘れないためにも毎日書き留めておきます。
- プログラミング案件も受注できるようになりたい
- 歯科衛生士エンジニアを目指したい
- コーディングもライティングもできる歯科衛生士
【プログラミング独学18日目】学んだこと
今日もCSSの続きをやりました。CSSのセレクター編が終わり、flexbox編へ移行しました。CSSのレッスンはいくつかのカテゴリーに分けられており、基礎文法編、セレクター編、flexbox編と続いています。
①詳細度
<section id="about">
<h1 id="main" class="title box">Main Title</h1>
</section>上のような記述があったとき、h1にスタイルを付けたい場合の記述方法はいくつかあります。
h1 {
color : red ;
}h1#main .box {
color : yellow ;
}section > #main.title {
color : blue ;
}section#about > h1 {
color : pink ;
}もし上の4通りの書き方で全て記述すると、どれが優先して適用されるのでしょうか？これを決めるのが「詳細度」という概念です。
詳細度（順位付け）は以下の3項目にスコアを付けることで決められます。
- idの数
- classの数／属性の数／擬似クラスの数
- 要素の数／擬似要素の数
h1 {
color : red ;
}上の記述方法では、以下のようなスコアになります。
- idの数：0
- classの数／属性の数／擬似クラスの数：0
- 要素の数／擬似要素の数：1（h1）
h1#main .box {
color : yellow ;
}上の記述方法では、以下のようなスコアになります。
- idの数：1（#main）
- classの数／属性の数／擬似クラスの数：1（.box）
- 要素の数／擬似要素の数：1（h1）
section > #main.title {
color : blue ;
}上の記述方法では、以下のようなスコアになります。
- idの数：1（#main）
- classの数／属性の数／擬似クラスの数：1（.title）
- 要素の数／擬似要素の数：1（section）
section#about > h1 {
color : pink ;
}上の記述方法では、以下のようなスコアになります。
- idの数：1（#about）
- classの数／属性の数／擬似クラスの数：0
- 要素の数／擬似要素の数：2（section、h1）
これらをまとめると、スコアは以下のようになります。
0・0・1
1・1・1
1・1・1
1・0・2
ここからどのように順位付けをするかというと、スコアの合計点を使うのではありません。左側から値を見ていき、その列の最大値であれば次の列の値、その列でまた最大値であれば次の列の値・・・というような流れで、3つ目の列でも最大値だった場合にもっとも優先してスタイルが適用されます。つまり全ての列において最大値であるCSSが詳細度がもっとも高いと判断され、スタイルとして採用されます。
例えば上のスコアだと、まず一番左の列（縦）を見ます。最大値は1であり、上から2〜4番目が勝ち残ります。次に真ん中の列でかつ先ほど最大値で勝ち残った上から2〜4番目の列を見ます。最大値は1であり、上から2・3番目の列が勝ち残ります。最後に一番右の列でかつ先ほど勝ち残った上から2・3番目の列を見ると、いずれも1であり最大値であるためこの2つがもっとも詳細度が高いと判断されます。なお詳細度が同じCSSが複数ある場合は、後から書いた方が優先されます。
上のスコアでは、最初に見た一番左の列であるidを増やせばすぐに勝ち抜けます。
#about >#main {
color : gray ;
}例えば上のように記述すればidが2つあるためスコアが2・0・0となり、もっとも詳細度が高い記述となります。
②詳細度よりも優先される記述方法
基本的には上のようにスコアを使って詳細度を決めますが、その中でもっとも詳細度が高いと判断された記述よりも優先されるような記述方法もあります。
<body>
<section id="about">
<h1 id="main" class="title box" style="color : skyblue ; ">Main Title</h1>
</section>
</body>上のようにHTMLのstyle属性に直接スタイルを書き込むと、詳細度がもっとも高いとされたスタイルよりも優先して表示させることができます。
③さらに優先して表示させる方法
HTMLのstyle属性にスタイルを直接書き込む方法よりもさらに優先して表示させる方法があります。
h1 {
color : red !important ;
}優先させたいスタイルに「!important」を書き加えると、最優先して表示させることができます。「!important」を複数書くと、それが書かれたCSSの中で詳細度の高いものが優先して表示されます。
ただこの方法は乱用するとどれが優先度高いのかわかりづらくなるなど弊害もあるため、なるべく使わないようにしましょう。MDNでは「!important」を使うのは悪い習慣であるとし、詳細度を使って優先順位を決めるべきとされています。詳細度は難しいため!importantに頼ってしまいそうですが、慣れて上手く使いこなせるようになりたいと思います。
独学に限界を感じたらプログラミングスクールに通っても良いかなと思っています。「programmer college」は完全無料のプログラミングスクールで、レッスンだけでなく就活支援まで手厚くサポートしてくれるのが嬉しい点です。なぜ完全無料？怪しくない？と思いましたが、企業から協賛金を募ることで無料スクールが実現しているそうです。どの学習ソフトも有料なので、無料で学べてしかも就活直結ってありがたいですよね。
▼完全無料のプログラミングスクール
④flexbox
CSSセレクター編のレッスンが終了したので、flexbox編へ移行しました。以前のレッスンにもありましたが、フレックスボックスはサイトのレイアウトやデザインには必須の技術です。プログラミング独学を初めて3日目のアウトプットでもまとめています。
フレックスボックスは要素を横並びにするためのもので、横並びにしたい要素の親要素に記述します。
<body>
<div class="container">
<div class="box box1">ボックス1</div>
<div class="box box2">ボックス2</div>
<div class="box box3">ボックス3</div>
</div>
</body>今回はボックス1〜3に対してflexboxを適用させたいので、その親要素を「container」という名前で作成しました。
.container {
display : flex ;
}CSSには上のように書き加えればOKです。なお以下のように書き加えると、ボックス1が大きく横に伸びて表示され、それに付随してボックス2と3は画面右寄りになります。これはブラウザの幅を変えても同様で、ボックス1の横幅はブラウザ幅に合わせて伸び縮みします。
.box1 {
background : red ;
flex :1 ;
}⑤flexbox・inline-block・floatの使い分け
他の方が要素を横並びにする方法であるflexbox・inline-block・floatの使い分けについて質問していました。たしかに・・・。このようにレッスンで学んだ内容が頭の中でそれぞれ孤立していて、なかなか紐付かないんですよね。学んだことを全て紐付けないと1からサイト制作って難しいのでは・・・と毎日不安に思っています。
要素を横並びにしたいとき、最近の主流はflexboxの使用だそうです。flexboxが出てくるまでは、inline-blockとfloatを駆使してレイアウトしていたそうです。inline-blockとfloatを使う場面は以下くらいかな、と先生がおっしゃっていました。
- inline-block：文中にボタンや画像を違和感無く配置したいとき
- float：文章内で画像を右や左に挿絵的に挿入したいとき
flexboxでデザインが満足いかないときや、文中に挿入したいときにinline-blockやfloatを使うというくらいの認識で良いのかなと思っています。
⑥flexboxの関連用語
ボックス1、ボックス2、ボックス3はそれぞれ「flex item」と呼ばれ、3つ合わせた全体の領域は「flex container」と呼ばれます。CSSで「display : flex ;」と記述すると、横方向の「主軸」、縦方向の「交差軸」が設定されます。主軸に沿って要素が並べられていくため、ボックス1〜3は横に並んだのですね。この軸の方向は強く意識しておきましょう。
flexboxはflex itemやflex containerにプロパティを設定することでレイアウトを組んでいきます。次のレッスン以降で詳しく解説されますが、それぞれに付けられるプロパティは決まっています。
flex itemに付けられるプロパティ
- align-self
- order
- flex-basis
- flex-grew
- flex-shrink
flex containerに付けられるプロパティ
- flex-direction
- justify-content
- align-items
- flex-wrap
- align-content
独学に限界を感じたらプログラミングスクールに通っても良いかなと思っています。「programmer college」は完全無料のプログラミングスクールで、レッスンだけでなく就活支援まで手厚くサポートしてくれるのが嬉しい点です。なぜ完全無料？怪しくない？と思いましたが、企業から協賛金を募ることで無料スクールが実現しているそうです。どの学習ソフトも有料なので、無料で学べてしかも就活直結ってありがたいですよね。
▼完全無料のプログラミングスクール
【プログラミング独学18日目】わからなかったこと・調べてわかったこと
今日学んで疑問が残った部分は以下です。
- 一番下に書いたCSSが優先されるのでは？
- idセレクターの記述で空白は入れない
- flexboxの親要素は<body>ではだめなのか
- flex :1 ;とは
一番下に書いたCSSが優先されるのでは？
詳細度のところで、同じ意味のCSSを全て記述したとき、どれが優先して適用されるか・・・は一番下に書いたやつじゃないの？と思いました。今まで「下に書いたものが優先される」と言われてきたので、それを信じて疑っていませんでした。ただ今日習ったように詳細度という概念があるのですね。
・・・と書いてるうちに気付きましたが、詳細度は1つの実現したいスタイルを何通りかで書いた場合の話ですね。以下のように枝分かれしているイメージ。
- 1つの実現したいスタイル
- 1つ目の方法
- 2つ目の方法
- 3つ目の方法
私が思っていた「下に書いたものが優先される」という概念は、よく考えると枝分かれではなく以下のようなイメージですね。
AならBと表示してね
AならCと表示してね
AならDと表示してね
このような場合は下に書いたものが優先して適用されますが、今日習った詳細度のときの話は、枝分かれのようなイメージのときの話だと思います（おそらくですが）。アウトプットしなかったら、疑問に感じつつも無理やり知識を上書きしていたと思います。またアウトプットの重要性に気付いてしまいました・・・。
idセレクターの記述で空白は入れない
以前こちらでアウトプットしていたためキーワード検索で見つけることができました。id属性やidセレクターを記述するときは、空白を入れてはいけません。以下で詳しくまとめています。
flexboxの親要素は<body>ではだめなのか
<body>
<div class="box box1">ボックス1</div>
<div class="box box2">ボックス2</div>
<div class="box box3">ボックス3</div>
</body>横並びにさせたい要素の親要素に記述するのがフレックスボックスの基本。上のボックス1〜3にflexboxを適用させたかったら、新たに<div>で親要素を作らなくてもその上の<body>に書き加えるんじゃだめなの？と思いました。<body>はページの大枠を決めるものだからclass属性を書き加えたりすることはない？それか<body>にflexboxを適用させてしまうと、ページ内すべてが横並びになってしまうから書かないのかな？MDNで調べてもおそらく初歩的なことすぎて答えが出ないので、<div>で親要素を作るという風に覚えておきます。
flex :1 ;とは
1のところを2や5にしても見た目に変化はありませんでした。他の方も同じことを思ったようで先生に質問しており、もう少しレッスンを進めるとその数字の意味がわかってくるとのことでした。