colgroupとcolの違いって?

こんばんは。有村です。
またご無沙汰してしまいました。ちゃんと仕事してます。

日々新たな発見というのはあるものですが、最近特に「あ〜そういえば知らないな〜」となっているのがtable
さらに言えば、colgroupとcolの違い。
テーブルレイアウト(笑)とか笑ったりしていましたが、よく考えたら私この子のことよく分かっていなかった。

colはcolgroupの子要素であるというのは大前提として…。
colは列の幅指定でよく使いますが、とあるソースを読んでいたら

という記述がありました。
そこで私は疑問に思ったのです。

と何が違うのか?と…。

というわけで調べました。

Q. colgroupって何してるの?
A. 列を「意味的なまとまり」としてグループ化している

意味的?どういうこと?というと…
たとえば前者、colgroupが2つに分かれている場合の例。

商品名 1月販売数 2月販売数
商品A 5 10
商品B 7 12

これを見ると、一番左の列は「商品名」、あとの2列は「月」を表していることが分かります。
つまり、列の意味として「商品名」「月」という2つのグループができているということです。
対して後者の例だと、

12月販売数 1月販売数 2月販売数
3 5 10
6 7 12

3列全てが「月」という同じものを表しているので、1つのグループにまとめられるという感じです。

ただ見た目を整えるだけであれば全てのcolを同じcolgroupに入れても実装できますが、
せまんてぃっくを意識するなら、tableもちゃんと構造が分かるように組まないといけないということですね!

それでは、今日はこのへんで。

固定・可変・固定レイアウト?

こんばんは、有村です。
花粉症の人、大変そうですね。私はなったことないので分かりませんが…

で、今日のテーマは「固定・可変・固定レイアウト?」です。

固定幅
←可変幅→
固定幅

みたいなことをやりたかったのです。
こいつらの親はwindowサイズで幅が変わり、かつflexボックス。そして要素が「固定・可変・固定」で並んでるレイアウトです。

で、私は最初、CSSをこう書きました。

やりたいことは宣言した!って感じですね。後はflexちゃんがいい感じに横並びにしてくれるやろ〜って思っていたのですが。。

起こった問題:kotei2の幅が維持されていない。

なぜか、きっちりwidth指定しているはずのkotei2が、デベロッパーツールで見ると70pxだったり80pxだったり可変になってしまっていたんです。
お前が可変になるのかよ!!!!
これは困った…

でまぁ早速解決策。

これつけないといけなかった。

でも一体何がいけなかったんだろう?と有村調べました。

まずflexについて。こいつは「余白を埋めるときどうする?」を指定するプロパティ。
flex-growとflex-shrinkとflex-basisのショートハンド。
上の例のように単位なしでひとつだけ値を記述した場合は、flex-growを指定したことになる。

じゃあ次、flex-growって何?という話。
こいつは、要素がflexボックス内での余白をどれくらい占有するかを示すもの。
たとえば、

と指定すると、aとbとで1:2の割合で領域が振られる。

じゃあどういうことだってばよというと、最初の実装例の場合だと、kahenちゃんは「余白をどう扱うか」という指定を何も持っていなかった。
flexボックスちゃんから見れば、幅をどうすべきか分からない要素が中にいるわけで、「あ…じゃあなんかお前には適当に領域取らせるわ…」みたいな処理になったのでしょうか。
それに幅固定の要素も巻き込まれてしまってうまく領域の配分ができなかった。
…という感じかなと思います。

可変だから何も指定しなくていい、という認識は甘かったのですね!
原因分からなくてかなり詰まってしまいました!

それでは、きょうはこのへんで。

MindBEMdingを学んでみた

微妙にご無沙汰しております。有村です。
春を感じるようになりましたね〜、冬が一番好きな私はちょっと寂しいです。

さて今日のテーマはMindBEMdingを学んでみたです。
最近CSS設計を考えるようになったのですが、ひとつひとつの思想をちゃんと理解していないが故、「ARIMURACCS」なる新しいルール(という名の無法地帯)を生み出すようになってしまって…
そこで、やっぱり基本はちゃんと押さえないとねということで、まずはMindBEMdingから学んでいくことにしました。

Q: MindBEMdingって何?
A: CSSの命名規則のこと。
具体的に説明。まず要素を
・ブロック … ひとつのかたまり。箱。
・エレメント … 箱(ブロック)の中に入っている要素。パーツ。ブロック無しでは存在できない。
・モディファイア … ブロックやエレメントを装飾するもの。
の3つで考える。

記法がちゃんと決まっている。
blockとelementを繋ぐときは、アンダースコアを2つ。
modifierを使うときは、ハイフンを2つ。
単語と単語を繋ぐときはハイフンで。

こんなかんじ。
案件やチームによって、アンスコを1つにしたり、単語の繋ぎをキャメルケースにしたり、アレンジを加えるケースもあるらしい。

Q: モディファイアって具体的にいつ使うの?
A: パターンをつけたいときに使う。
例、こんな感じ。

基本形とそのパターンの組み合わせ。
横並びリスト(基本形 + 何個並びなのかのパターン)やボタン(基本形 + 色やサイズのパターン)などでよく使いそう。

Q: ブロックから見て孫要素ができたときは、block__element__elementになったりするの?
A: BEMはHTMLの構造をエレメントによって表す必要はない。
つまりはこういうこと。

photoはブロックから見たら孫要素、さらに言えばphoto-boxの子要素だけれども、ネストの関係性を __element__element などで示す必要はない。

もっとあるけど、基本はこんな感じです。
どうでしょう?MindBEMding。特に複雑なルールでもないので、チーム内で「なんか命名ルール決めないとな〜」となったとき、導入しやすい印象を受けました。

それでは、今日はこのへんで!