もうBootstrap3使っても良いんじゃねぇ？
■ このスレッドは過去ログ倉庫に格納されています
0001nobodyさん
2013/08/21(水) NY:AN:NY.ANID:Qa7rnBrg0063nobodyさん
2013/09/04(水) 00:55:29.76ID:???Bootstrapはフレームワークを名乗っちゃいるが
ただのデザイン集だからね。
CSSでできることしか出来ないし用意された
デザイン以外を簡単に作る方法も用意してない。
> ウィンドウのサイズがXX〜XXならXXXというクラスを読み込める
ウインドウサイズが〜というのがCSS3 Media Queriesだよ。
HTMLに書いているのは同じクラスだけど、そのクラスに
適用されるデザインをウインドウサイズなどで変えることが出来る。
でもこの機能はBootstrapとは相性が悪くてね。
Bootstrapが希望通りのデザインを用意していないのなら
Bootstrapで定義されているクラスを上書きするしか無いよ。
そしたらBootstrapで用意されたクラスを使っているのだから
○○なデザインになるはずなのになってないみたいに意味不明なことになるけどね。
ま、ちゃんとしたCSSの使い方をしろってことさ。
0064nobodyさん
2013/09/04(水) 01:16:29.46ID:???0065nobodyさん
2013/09/04(水) 01:27:13.70ID:???0066nobodyさん
2013/09/04(水) 01:46:18.39ID:???使ったこと無いがSCSSのグリッドシステムあるだろ
http://www.profoundgrid.com/
Semantic
The grid keeps your markup semantic and
works without any "grid_x" classes.
Unless you want to use them, in which case they are included.
grid_xとかいうクラスなしで動くってさ。
ま、これが普通だよね。
0067nobodyさん
2013/09/04(水) 09:54:02.95ID:???今からBootstrap3にあわせて作っても無駄
6ヶ月は寝かせておいたほうがいい
0068nobodyさん
2013/09/04(水) 10:42:12.98ID:???どんなものかとダウンロードしてサンプル見たんだが、こんなのがHTMLにごちゃごちゃ入ってたよ。
<article id="row1">
<div class="col6">6</div>
<div class="col6 push6">6</div>
<div class="col12">12</div>
<div class="center">
0069nobodyさん
2013/09/04(水) 10:46:00.14ID:???<div class="subgrid1">
<div class="subcol subcol6">
<div class="subgrid2">
<div class="subsubcol subcol1">1</div>
…
俺はマルチカラムレイアウトでがっつり複雑なレイアウトは作らないけど、どんなフレームワークにせよ、
こんなのと似た感じになるのはしょうがないんじゃないの？
0070nobodyさん
2013/09/04(水) 10:50:41.33ID:???黙ってspan6とかでやってれば勝手にレスポンシブってくれるからBootstrapで充分。
0071nobodyさん
2013/09/04(水) 12:20:46.01ID:???いやームズいっすわー
Bootstrap3じゃHTMLとCSSが癒着してるからムズいっすわー
難問っすわーねぇー
http://jsfiddle.net/eGWeV/
0073nobodyさん
2013/09/04(水) 13:07:39.42ID:???生意気なブートストラッパー共をSCSSでビシっと黙らせてやっちゃって下さいよー
0076nobodyさん
2013/09/04(水) 22:54:20.23ID:???<section class="thread">
<header>
正しいHTMLでデザインするとこうなる。無駄なclassは消え(必要に応じてつけてもいいが)、theadクラス以下に全てが集約される。
<b>360px</b> <b>600px</b> <b>over..</b>
</header>
<ul>
<li>
<a href="#59">>>59</a>
<p>Bootstrapでやる方法は知らん。</p>
</li>
<li>
<a href="#60">>>60</a>
<p>もともとCSSはマークアップとデザインを分離するものだから、PC用ではリスト、
スマホではドロップダウンっていのはCSSの想定される使い方としてできるんだよ。</p>
<p>HTMLには、デザインであるリストやドロップダウンという内容を書かない。</p>
<p>だけどBootstrapはデザインをHTMLに固定化させてしまうから難しくなる。
BootstrapはCSSの間違った使い方をしてるからこうなるのも仕方ない。 </p>
<p>フレームワークがダメなのではなく、間違ったCSSの使い方をしているのが
Bootstrapのだめなところだよ。CSSを正しく使っているフレームワークならもちろんOKさ </p>
</li>
<li>
<a href="#63">>>63</a>
<p>でもこの機能はBootstrapとは相性が悪くてね。
Bootstrapが希望通りのデザインを用意していないのならBootstrapで定義されているクラスを
上書きするしか無いよ。そしたらBootstrapで用意されたクラスを使っているのだから
○○なデザインになるはずなのになってないみたいに意味不明なことになるけどね。</p>
<p>ま、ちゃんとしたCSSの使い方をしろってことさ。</p>
</li>
</ul>
</section>
0077nobodyさん
2013/09/04(水) 22:55:10.88ID:???0078nobodyさん
2013/09/04(水) 23:00:25.53ID:???それがbootstrapか。
0079nobodyさん
2013/09/04(水) 23:55:29.33ID:???0080nobodyさん
2013/09/05(木) 00:23:34.18ID:???当たり前だけどSCSSはメディアクエリーにも対応。
0081nobodyさん
2013/09/05(木) 01:56:46.42ID:???デザイン変えても360px掲げるんですか？
論理構造と視覚表現の分離は忘れましたか？
「pseudo-elementsで実装しろバーカ」が正しい指摘だ
0082nobodyさん
2013/09/05(木) 02:08:21.56ID:???つまりどういうこと？
360pxって視覚表現じゃないぞ？
お前が何をしろと言ってるのかさっぱりわからん。
pseudo-elementsで何を実装したいんだ？ちゃんといってみろ。
0083nobodyさん
2013/09/05(木) 02:35:40.18ID:???説明をしなくちゃならんくなりそうだな。
まあ、レス来てからにするか。
0084nobodyさん
2013/09/05(木) 03:11:10.48ID:???360pxに視覚表現以外の意味はない
>>71のCSSがあって初めて意味を成すんだから
だからHTMLではなくCSSの疑似要素でデザインすべきだと言う指摘に繋げた訳
あなたには360pxが何か意味のある内容だと思えたのかな？
いやそう思ったんだからマークアップしたんだよね
意味がないものをマークアップするなんてセマンティックを理解してない証拠になっちゃうんだから
で初めに戻るけど360pxをどうしてb要素でマークアップしたの？
.thread クラスに属する<b>360px</b>って何？
そこを説明して下さい
と言うか>>71を書いたの俺だから先に言うけど
メディアクエリのデバッグ目的で置いただけなんだけどね
0085nobodyさん
2013/09/05(木) 05:49:34.25ID:???0087nobodyさん
2013/09/05(木) 10:47:47.79ID:???0088nobodyさん
2013/09/05(木) 12:43:22.86ID:???0089nobodyさん
2013/09/05(木) 13:13:57.54ID:???セマンティック至上主義の話は板違い。
009084
2013/09/05(木) 13:58:33.54ID:???無意味な事にヒートアップしてすんませんした
もう相手にしません
0091nobodyさん
2013/09/05(木) 16:24:45.26ID:???0092nobodyさん
2013/09/05(木) 17:30:20.22ID:???ＨＴＴＰ：／／coliss.com/articles/freebies/freebies-bootstrap-3-psd.html
Bootstrap3のテーマをWYSIWYGでカスタマイズ可能な「Bootstrap Magic」
ＨＴＴＰ：／／phpspot.org/blog/archives/2013/09/bootstrap3wysiw.html
本日分の燃料
0093nobodyさん
2013/09/05(木) 21:40:29.50ID:???http://d.hatena.ne.jp/kiwanami/20130905/1378353853
も一つ燃料投下
0094nobodyさん
2013/09/09(月) 03:00:31.79ID:nNe0D1vQ設定ウインドウを作ったのですが、
画面中で最大の文字で「設定」って
そんなこと言わなくても分かるだろ！って思えます
どうやってますか？
0095nobodyさん
2013/09/09(月) 04:12:44.27ID:???http://getbootstrap.com/customize/#variables-modals
@modal-title-padding で15pxも取ってあるのか
高dpiを意識してるんかな
0096nobodyさん
2013/09/09(月) 04:25:16.44ID:nNe0D1vQこういうのを見ると、逆に面倒になってないか？って思うな。
CSSってそんなもんじゃないだろ？
テキストエディタでちょこちょこって買い換えれば
済むもんだろ？
0097nobodyさん
2013/09/09(月) 09:36:37.27ID:???そこそこの完成品にするための制限としての規約なんだから
守っておけばいいし、足りなくなったり、気に入らなくなったら、
ムリしてbootstrap使う必要ないだろ
このスレは本質と全然違うところでしか議論が進んでない
0098nobodyさん
2013/09/09(月) 14:18:50.54ID:???大事なものまで消してそうで怖い。
0099nobodyさん
2013/09/09(月) 23:51:24.43ID:nNe0D1vQサンプルプログラムを作ってるわけじゃあるまいし
規約を守るのが仕事じゃないんだろ。
0100nobodyさん
2013/09/09(月) 23:53:50.77ID:???無理して使うこと無い は、本当にそのとおり。
自分のセマンティック精神に合わなきゃ使わなくていい。
ちょいとしたWebアプリがPCでもiPadでもそれっぽく作れるから、
自分は用途に応じて使うよ。
0101nobodyさん
2013/09/10(火) 00:44:07.79ID:k9V3QcR6ちゃんとした教育を受けた人には
気持ち悪いフレームワークなんだよな。
0102nobodyさん
2013/09/10(火) 01:10:20.13ID:???0103nobodyさん
2013/09/10(火) 03:28:26.76ID:???ttp://w3q.jp/t/4438
0104nobodyさん
2013/09/10(火) 21:03:15.06ID:???現実と折り合いをつけて使うのが大人
0105nobodyさん
2013/09/10(火) 22:07:56.46ID:k9V3QcR6諦めないと使えないのがBootstrap
0107nobodyさん
2013/09/11(水) 02:12:07.23ID:S3z0iKLL0108nobodyさん
2013/09/11(水) 13:15:40.30ID:???メンテ性が下がる理由がよくわからん…。
ソース量が妙に増えるのは欠点だが、Bootstrapにあわせた
マークアップルールを考えればそれでいいだけな気もするし、
所詮一つの道具に過ぎないこれがそれぞれの自分流にあわなきゃ
使わなければいいだけなはずなんだがな。
0109nobodyさん
2013/09/11(水) 13:39:32.80ID:???なんて言ってたやつはどこいった、？
0110nobodyさん
2013/09/11(水) 15:43:38.48ID:Dg7F87oK特にformが変わりすぎだ。
0111nobodyさん
2013/09/11(水) 18:32:16.42ID:???まぁほら、まだ正式勧告されてないもんだしさ。
ところで、3でrow-fluidがremove対象だってのに
row-fluidってしないとリキッドレイアウトできんのだけど。
containerも同じく。
2と間違えていれたか？
0113nobodyさん
2013/09/11(水) 22:50:00.92ID:S3z0iKLL> 要所要所にclassを適用していくという方式で
> メンテ性が下がる理由がよくわからん…。
例えば、btnと書いたらどういうデザインになる？
まあ、”あの”デザインだよね。
もしsuccessボタンにしたかったどうする？
class="btn btn-success"だよね？
この時、角丸やめたいなって持ったらどうする？
class="btn btn-success btn-solid" かい？
右から左へのグラデーションに変えたいと思ったら？
class="btn btn-success btn-solid btn-gradation-left-to-right" かい？
グラデーションが黒から白へ、だけど、最後真っ白ではなくグレーだったら・・・
ほらね、あっという間に破綻するでしょ？
ここで、よくある反論は、Bootstrapのデザインそのまま使えだろうね。
でもそれって、メンテナンス性が低くてメンテナンスするコストが高いから
Bootstrapのデザインそのまま使えって意味だから。
メンテナンス性が低いってことの反論にはなってないのさ。
0114nobodyさん
2013/09/11(水) 23:43:22.74ID:???セマンティック君は学者だったらまだいいけど、
一介のユーザがそれだと痛いだけだよ。
0115nobodyさん
2013/09/11(水) 23:55:32.18ID:???属性を割り当てていく場所が違うんだよ。
classに属性を割り当てるのではなく、
CSSに属性を割り当てていく感じで作る。
>>113の例をCSSに属性を割り当てる感じにしたものを
具体的に書くと、
HTMLがこうで、
<button class="success-button">succsss</button>
SCSSがこう
.success-button {
@extend btn;
@extend btn-solid;
@extend btn-gradation-left-to-right;
//その他のCSSスタイル
padding: 5px;
}
これならどんなスタイルであってHTMLを編集する必要性は少なくなるし、
急に全ページのsuccessボタンを変更してくれなんて依頼がきてもわずかの修正で対応できる。
0116nobodyさん
2013/09/11(水) 23:58:58.62ID:???HTML/CSSの本来の関係を説明してくれなくても分かってるよ。
別にここに張り付いてないで、理想通りの俺俺フレームワークを作ればいいじゃない。
応援してるよ。
0118nobodyさん
2013/09/11(水) 23:59:58.87ID:???俺俺フレームワークって何を作ればいいの？
昔からウェブサイトのデザインは
自分で作るものだと思ってるけど？
デザインの話じゃないんだよね？
0119nobodyさん
2013/09/12(木) 00:05:13.93ID:???は？bootstrapの作りにケチつけておいて、
フレームワークって何とは何事だ。
申し訳ないけど何かの病気か？
0120nobodyさん
2013/09/12(木) 00:07:32.66ID:???だからなんでフレームワークを作らないとダメなのって話で、
なんでbootstrapなんか作る必要があるの？って話なんだけど。
それにフレームワークを作る必要があったとしても、
別に俺俺で作る必要もないよね？
既にあるものを探してくればいいじゃん？
Bootstrapは探して見つけたくせに
なんでそれ以外を探すことが出来ないのかな？
0121nobodyさん
2013/09/12(木) 00:09:30.25ID:???> メンテ性が下がる理由がよくわからん…。
って書いてあるから、
メンテナンス性は本当に下がるよって
説明したのに。
わからなかったんでしょ？
> HTML/CSSの本来の関係を説明してくれなくても分かってるよ。
なぜかわかってるって言い直してるし。変な人だね。
0122nobodyさん
2013/09/12(木) 00:13:27.01ID:???ゴメン、メンテ性の話は別の人間。
bootstrapのデザインが気に食わなかったら
CSSフレームワークとしてbootstrapを使うことはないよ。
tutorial、sampleに毛の生えた程度のレベルで
サクサク作る用途で使ってるから、君の上げた例のような破綻はしないよ。
0123nobodyさん
2013/09/12(木) 00:15:16.57ID:???ということは
サクサク作る用途以外ならば、破綻する
ということです。
仕事ってサクサク作る用途ですかね？
勉強している学生君ならまだいいけどさ。
0124nobodyさん
2013/09/12(木) 00:22:01.97ID:???Webデザイナー(笑)不在でそこそこの見た目でやる仕事もあるからね。
社内用のWebアプリとかこだわる必要ないでしょ？
それっぽいコンポーネントが揃ったフレームワークを、
それっぽい範囲で効率よく使ってるまでのこと。完璧なんて求めないよ。
細かい横槍の入りにくいほぼ独断の仕事で、優雅に技術者やれてますよ。
0125nobodyさん
2013/09/12(木) 00:26:20.96ID:???いい場合にしか使えないという意味か？
それってさ、技術的に低くても良い場合にしか
使えないと言ってるのと同義だぞ。
見た目要求されたら、出来ませんって言うしか無いんだろう？
0126nobodyさん
2013/09/12(木) 00:35:49.03ID:???bootstrapのデザインをカスタマイズすることが技術的に高いことなの？
フレームワークがピッタリはまる用途で最高の効率で使うことも"高い"と思うよ。
bootstrapの見た目で満足できない物足りないと言う人を納得させるだけの
条件が揃って無ければ、それは出来ませんというしか無いだろうね。
その状況に陥るなら「技術的に低い」と思うよ。
フレームワークってその程度のものじゃない。
0127nobodyさん
2013/09/12(木) 00:52:05.26ID:???の構図になっちゃってるね。たぶんだけど。
自分らは、bootstrap等のコンポーネント群はとても助かってるね。
「そんなのゼロから組んでたら倍かかりますよ！
この部品の組み合わせで行きます」なんて、
ハッタリかませるほうが楽に生きれるんじゃない？
「bootstrapなんてフレームワークを作る必要ない」なんてさすがに見識を疑うね。
君の理想通りのフレームワークを紹介して欲しいよ・・・。
0128nobodyさん
2013/09/12(木) 01:50:52.85ID:???それが何よりの収穫だ。
0129nobodyさん
2013/09/12(木) 01:53:02.37ID:???技術とメンテナンス性は話が別。
高い技術があればカスタマイズできるのではなく
高い技術があればメンテナンス性をあげられる。
カスタマイズなんてだれでもできること。
時間さえかければね。
0130nobodyさん
2013/09/12(木) 01:57:03.47ID:???デザインは要求ごとに違うもの。
だからどんな要求にも耐えられるフレームワークなんてものはないし
そんなものは必要ない
だからフレームワークに頼らず自分の力で
作れる技術をつけるべきである。
> 「そんなのゼロから組んでたら倍かかりますよ！
> この部品の組み合わせで行きます」なんて、
最終的に決めるのは客。勝手に決めるな。
倍かかるのは技術が低いから。
技術があれば客の望んだデザインで作れる。
客に迷惑をかけているということを自覚しろ
0131nobodyさん
2013/09/12(木) 09:06:56.14ID:???なんで、趣旨であるこの部分を削って
他人の意見を歪曲するかねぇ…
0133nobodyさん
2013/09/12(木) 09:12:20.07ID:Yh1boJKyそれって「フレームワーク」の意味というか意義がわかってないだけじゃね?
そんなプログラムでもなんでも当てはまる話じゃん。
普通の人は、生産性の向上を享受する代わりに制約を受け入れてるわけだよw
制約が気に入らないなら使っちゃダメだわw
0134nobodyさん
2013/09/12(木) 09:16:15.38ID:???https://wrapbootstrap.com/
他にテーマを集めてるサイトはないかな
0136nobodyさん
2013/09/12(木) 16:35:51.53ID:???それが一番いい。
0137nobodyさん
2013/09/12(木) 16:50:01.66ID:???0138nobodyさん
2013/09/12(木) 17:20:43.52ID:???あいかわらずIEはひどいが。
0139nobodyさん
2013/09/12(木) 19:28:22.61ID:???勿論、見せるためのサイトでは不便だろうけど、
機能を使ってもらうサイトなら、これは便利そう。
もうちょっと使ってみないと、落とし穴があるかもしれないけど。
0141nobodyさん
2013/09/12(木) 20:47:17.98ID:???compassがあるよね？
http://compass-style.org/
例えば、.simple { @include border-radius(4px, 4px); } って書くだけでこういう風に出力される。
.simple {
-webkit-border-radius: 4px 4px;
-moz-border-radius: 4px / 4px;
-khtml-border-radius: 4px / 4px;
border-radius: 4px / 4px;
}
http://compass-style.org/reference/compass/css3/border_radius/
これはフレームワーク？
それと言うことをしたい場合、Bootstrapならどうするの？
0142nobodyさん
2013/09/12(木) 21:03:45.91ID:???0143nobodyさん
2013/09/12(木) 23:40:07.62ID:LD1hnGrgフレームワークだし。
bootstrap使いたくないやつは使わなくていいんじゃないの？
自前で用意した方がいいんであれば自前でやればいいじゃん。
と蒸し返し。
0144nobodyさん
2013/09/13(金) 00:04:48.64ID:???bootstrap以外の物を使えばいいじゃん。
俺はbootstrap以外のことは何も知らないというのなら
はっきりそう言ってくれ。なんなら↓これコピペしてくれるだけでいいぞ。
「俺はbootstrapの事以外何も知らない何も知ろうとしない愚か者です。」
はい、どうぞ。
0145nobodyさん
2013/09/13(金) 01:26:43.50ID:???お前が「bootstrapと同じ効率で全てに対応できるよう自分で組む技術を持っている」と
豪語してる人じゃないの？
その話を半分信じてみんな相手してくれてることになぜ気づかないの？
やっぱり痛すぎるよ？？？？？？？（ｗ
0146nobodyさん
2013/09/13(金) 01:30:58.22ID:???そんなことは言ってないがまず、
俺の質問に答えろよ。
なんでbootstrapを使わない ＝ 自前で用意するになるの？
俺は言ってないが、
お前が言っていることは>>143みればわかること。
0147nobodyさん
2013/09/13(金) 01:31:29.33ID:???もうCSS設計で悩まない！「CSSコーディング ガイドライン」策定のための参考記事・スライド 7選
http://squeeze.jp/blog/web-development/css-guideline/
0149nobodyさん
2013/09/13(金) 06:42:44.06ID:???基本的に、デザイナー系の人は頓珍漢なことばっかり重要視するからよく読んでないけど、
>プロパティの記述順序
>アルファベットの順に記述する。
>ベンダープレフィックスは無視する。ただし、例えば-moz接頭辞は-webkitの前に来る、などの順序は保つこと。
アホかと思った。
0150nobodyさん
2013/09/13(金) 08:25:10.87ID:PR3jVL4Jそういうどうでも良いレベルでしか差別化出来ないんじゃない?w
0152nobodyさん
2013/09/13(金) 08:28:18.94ID:???> コーディング規約を作ろう
規約大事だよね。Bootstrapを使うならBootstrapが規約だね
> CSSガイドラインを翻訳してみた
オブジェクト指向流行ってるよね。Bootstrapもその一つだね
> 「Google HTML/CSS Style Guide」を適当に和訳してみた
.btn-small はイケてないよね…
.btn-147dick { max-height: 9.6cm; } とか真面目に自作すべき
> メンテナブルCSS
規約大事だよね。Bootstrapを使うなら略
> 大規模サイトにおける本当は怖いCSSの話
Bootstrapスタイルは技術がない人だと困るんだって
>>76スタイルは時間喰いすぎなんだって
バランスが大事なんだね
> 今必要なCSSアーキテクチャ
OOCSSもSMACSSも目的は同じでアプローチが違うんだね。Bootstrapは前者かな
> IDを使わないCSSの設計
シングルトンパターンと一緒で乱用すべきじゃないよね。Bootstrapも使ってないね
勉強になるな〜
0154nobodyさん
2013/09/13(金) 13:07:01.65ID:???2にあったinput-*は自前で追加した
0156nobodyさん
2013/09/13(金) 21:58:18.44ID:???0157nobodyさん
2013/09/13(金) 22:24:05.57ID:???sass（cssの拡張版）＋compass（クロスブラウザフレームワーク、グリッドなどあり）
用意されたものを使えるのは当然の事、
さらに自分で拡張できる。
0158nobodyさん
2013/09/13(金) 22:27:23.15ID:???> 大規模サイトにおける本当は怖いCSSの話
26ページのオブジェクトタイプ・・・未使用ってのが
重要なところだね。
25ページより
オブジェクトタイプ
・CSSファイルを触らずに開発できる
・コピペで開発できる
デメリット
・CSS設計にスキルを要する
・CSS修正による影響予測が困難。
これ、Bootstrapのことだよね・・・
0159nobodyさん
2013/09/13(金) 22:31:02.19ID:???メンテナンス性が低いということ。
目的のものを作るに時間がかかる。
0161nobodyさん
2013/09/13(金) 23:51:14.42ID:???あれ見落としてたかなー
Bootstrapを比較に持ち出してる記事なんてそのページのどこにあるんだろう？
0162nobodyさん
2013/09/14(土) 00:23:36.86ID:???2.x/3.x切り替えとキーボードショートカットに対応してたら最高です
https://jetstrap.com/
http://bootply.com/
http://www.layoutit.com/
この辺は見てみました
■ このスレッドは過去ログ倉庫に格納されています