50代からのHTML / CSS / JavaScriptチャレンジ No.35 Flexible Box

2024年11月23日 09:37

今日は、Flexible Boxというものについて学習するそうです。（多分、昔はなかったような気がするなぁ・・・スマホとかタブレットまだなかったから＾＾；）

まずは、完成版を見ると、「イヤホンジャックの向こう側」の隣にあるラベルを作成するらしいです。

アルバム名の隣にあるので、これもレイアウトが必要になるんだって。

HTMLファイルで、<h1>イヤホンジャックの向こう側</h1>の下に次のように書いていく。<span>タグを使って記述する。<p>タグと同じようなものらしい。ちなみに<p>タグは段落を表すものだったよね。
<span>Album</span>
で、完成版を見ると、赤い枠があるので、クラス属性を付ける。
<span class="type">
のように記述。保存＆リロード。

そしたら、次はcssファイルの方でスタイルの編集をする。cssファイルの一番下に、次のように記述。
span.type{ } あっspanは省略できるから、
.type { }でOK
.type{
background-color: #e35a4d;
padding: 3px 5px; （paddingは内側の余白）
color: #fff;
font-size: .8em; ※em=1文字分の大きさ
　}

そしたら保存＆リロード

見れば分かるけど、ラベルが<h1>の下に配置されてるので、これを<h1>の右側に配置したい。昨日学習したfloatを使ってもいいらしいんだけど、それを使うと使いにくいらしい・・・そこででてくるのがflexible boxなんだって。

それじゃ、それを使ってやってみる。まずは、HTMLファイルの方で、横に並べたい要素、ここでは、"Album"のラベル。これを１つのタグで囲む必要があるらしい。なので、<h1>と<span>の２つを<div>で囲む。
<div class="information">
<h1>~
<span>~
</div>

これで準備ができたので、次はcssファイルの最後に次のように記述する。
.information{
　display: flex;
}

これで、保存＆リロード

ちょっとレイアウトが崩れてはいるけど、隣に配置された。
このdisplay: flfex;にすると、要素を右に並べることができますよってことらしい。ただし、display: flex;だけだと必ずしも横に並ぶわけじゃないので、次の1文を追加するらしい。
flex-direction: row; ただ、これはデフォルトで、rowになってるから書かなくてもいいらしい。（じゃぁ書かなくていいわけね＾＾；）

そしたら、次は見た目の修整に行くらしい。
display: flex;の下に次のように記述。
align-items: center;