フレックスボックスとグリッドどちらがベストチョイスなのでしょうか？

2019年3月25日現在　
BootstrapのページからHTMLのソースの<head>部分に必要なものを貼り付けて使用すると思うのですが、よくあるデザインで写真のイメージの３つ並びがあると思うのですが、その際flex-boxを使おうと思うのですが、Bootstrapと併用して使えるのでしょうか？

またGRID（グリッド)なるものも使えるのかと思うのですが、どれを選択するのが2019年のトレンド(スタンダード)なのでしょうか？　ご教授願えれば幸いです。

HTML CSS Javascriptを学んでいます。できればvue.jsを使おうと考えてます。
html やcssのidやclassをjsで動かすとゆうことになるのでしょうか？

m.ts10806

2019/03/25 02:17

このタイトルでは何が要件か分かりません。タグにある内容を含める必要はないので質問本文に寄せたタイトルにしてください。 https://teratail.com/help/question-tips#questionTips3-1 そしてこの質問内容だと「まずやってみてください」としか言えません。プログラミングしていく中で困ったことやつまずいたことを質問するサイトですから、何も始めていない段階では質問する状態にないと思います。

行動規範の内容に同意します

回答2件

ベストアンサー

その際flex-boxを使おうと思うのですが、Bootstrapと併用して使えるのでしょうか？

はい。可能です。

GRID（グリッド)なるものも使えるのか

Bootstrap3のグリッドはfloatで実装されています。
Bootstrap4のグリッドはflexです。
Chromeのデベロッパーツールやfirefoxのwebコンソールなどで確認しておきましょう。

どれを選択するのが2019年のトレンド(スタンダード)なのでしょうか？

Bootstrapを使おうとお考えでしたらグリッドを使うことをまず検討されるのが良いのではないかと思います。
しかしベストな選択などは無いと思います。
答えは現場によって違う場合も多いです。
あなたがどのようなコードを書きたいか、何を目指すかによっても変わってきます。

最近はコーディングにおいて何らかのフレームワークを使うことは多くなると思います。
例えばskeleton CSSはbootstrapより軽量なレスポンシブwebデザイン用のCSSフレームワークです。
Bootstrapのグリッドだけを使うのでしたら少々大げさなのでこういったものを検討する可能性もあります。
そして現場によってはフレームワークを使わずにコーディングすることだってあります。

フレームワークを使うメリットはコードに間違いが起きにくい、ルールがある程度共通化されているので複数人でメンテナンスがしやすいという点がありますが、これも使う方次第です。
使う方のスキル次第では煩雑なソースとなるでしょう。
学習を行ってベストなものを見つけて行ってください。
個人的にはフレームワークには頼らず、ご自身でレスポンシブwebデザインを作ってみることをおすすめします。
またはBootstrapを使うのであればどのようなCSSになっているか、JSを使うのであればその仕組みを理解して使用するようにしてください。

html やcssのidやclassをjsで動かすとゆうことになるのでしょうか？

何を行いたいかということによります。
JSはDOM操作をするということになりますが、vue.jsではデータバインディングと言ってデータを操作するという感覚になります。
どちらが優れているかという点は状況によりますので、まずは学習して概要を掴んでみると良いと思います。

投稿2019/03/25 03:21

ykp_yk

総合スコア654

L-sunsui

2019/03/25 03:25

ありがとうございます。すごくわかりやすく教えていただきありがとうございます。

行動規範の内容に同意します

その際flex-boxを使おうと思うのですが、Bootstrapと併用して使えるのでしょうか？

使えます。

どれを選択するのが2019年のトレンド(スタンダード)なのでしょうか？

flex vs gridで、『写真のイメージの３つ並び』などということにかぎるなら、個人的には flex ではないかと思います。

サンプル

HTML
1<div class="flex">
2<img src="http://placehold.jp/150x150.png?text=flex1">
3<img src="http://placehold.jp/150x150.png?text=flex2">
4<img src="http://placehold.jp/150x150.png?text=flex3">
5</div>
6<div class="grid">
7<img src="http://placehold.jp/150x150.png?text=grid1">
8<img src="http://placehold.jp/150x150.png?text=grid2">
9<img src="http://placehold.jp/150x150.png?text=grid3">
10</div>

css
1div{
2}
3.flex{
4  display:flex;
5  flex:row wrap;
6  justify-content: space-around;
7}
8.grid{
9  display: grid;
10  grid-template-columns: repeat(3,auto);  
11  justify-content: space-around;
12}

私の技術レベルの問題もあるかと思いますが、gridレイアウトで、アイテム幅成り行き・アイテム個数成り行き、のレイアウトを作るの、どうしても固定値をCSSに書かなきゃいけないので、けっこう悩んでしまいます。
ただ、写真の枚数が増えた時に折り返すつもりなら、gridの方が楽かもしれません。

あと、対応ブラウザの比率は、flexが若干優位です。
grid | Can I use ... Support tables for HTML5, CSS3, etc
flex | Can I use ... Support tables for HTML5, CSS3, etc

投稿2019/03/25 04:06

Lhankor_Mhy

総合スコア36115

Lhankor_Mhy

2019/03/25 04:07

あ、解決済みでしたか。失礼しました。

L-sunsui

2019/03/25 09:22

回答していただき誠にありがとうございます。すごく嬉しいです。非常にわかりやすいと思いました。試してみて非常に綺麗に表示できました。一点質問追加なのですが、 HTMLでflexを記述する際 <div class="flex"> <img src="http://placehold.jp/150x150.png?text=flex1"> <img src="http://placehold.jp/150x150.png?text=flex2"> <img src="http://placehold.jp/150x150.png?text=flex3"> </div> とありました。私は <div class="flex"> <img src="images/apple-black-coffee-business-461064.jpg" width="320" height="230" alt="pc"> <img src="images/apple-black-coffee-business-461064.jpg" width="320" height="230" alt="pc"> <img src="images/apple-black-coffee-business-461064.jpg" width="320" height="230" alt="pc"> </div> としたのですが写真を記述する際widthとかheightはつかわないものでしょうか？またpngじゃないBootstrapは駄目とかありますか？

Lhankor_Mhy

2019/03/25 09:57

width属性を使うと、レスポンシブデザインにする時に支障出ませんか？ UA見て、HTMLから変更をするならば、それでもいいと思いますが、それでもリキッドデザインには向いていない印象があります。 Bootstrap はどちらかというとリキッドデザイン+レスポンシブ対応って感じですから、個人的にはwidth属性を使うことはあまり好みではないです。

行動規範の内容に同意します

あなたの回答