2ちゃんねる ★スマホ版★ ■掲示板に戻る■ 全部 1- 最新50  

■ このスレッドは過去ログ倉庫に格納されています

【CSSおじさん】となりの松沢くん【2ch版火花】 [転載禁止]©2ch.net

1 :仕様書無しさん:2015/08/13(木) 08:44:49.19
毛の壁ファンクラブの皆様、こんにちは。
毛の壁先生の傍らで一生懸命に支えてきた「(通称)松沢くん」がピンでやれると判断できましたので、舞台を用意する運びとなりました。
当初ヲチ板での御披露目を考えていましたが、踊り子とのコミニュケーションが大事だと思い、此方での興行となりました。

興行の内容は、「(通称)松沢くん」をスレ講師に迎えてCSSに関して”熱く”語って頂こうと思っています。
また、臨時講師に毛の壁先生が参加するかもしれませんので、その際は”生暖かく”見守ってあげて下さい。

興行進行に辺り、当面は次の2点を守って下さい。

  1) 毛の壁先生のスレッドの前に出る事は、暴走を招きます。
     「sage」進行でお願いします。
  2) 「粘着(軍・君)」や「放射脳」の多用は他のスレッドに迷惑をかける可能性が有ります。
     AA同様に極力控えて下さい。

となりの松沢くんを囲んで、正しいCSS・HTMLの技術を学びましょう!

2 :1:2015/08/13(木) 08:47:50.00
用意致しましたので、講師「(通称)松沢くん」の登場を皆さんで待ちましょう!!

3 :松沢:2015/08/13(木) 10:44:27.62
はい、呼ばれましたw
講師「(通称)松沢くん」です。

みなさん、適切なCSS書いていますか?
CSSはただ書くだけじゃダメですよ。
CSSにも設計というものが必要です。

CSSは記述方法がプログラム言語よりも簡単ですが、
簡単であるが故に手抜きをするとあっという間に
管理不能状態に陥ります。

さて何か質問はありますか?
どうぞ。

4 :松沢:2015/08/13(木) 10:46:36.55
ちなみに関連の話としてsassやlessなどの話もOKです。
CSSおじさんとなっていますが、もちろんHTMLの話もOKです。

5 :仕様書無しさん:2015/08/13(木) 11:54:05.36
せんせ〜! 質問で〜す。(´▽`)ノ

VS2015のJavaScriptでアプリケーション作ろうと思っています。
CSSの単体試験って簡単なのですか?

6 :松沢:2015/08/13(木) 12:13:00.48
>>5
一般的に単体テストというのは
コードに対してやるもので
定義に対してやるものではないです。

例えば、変数Aに100を代入しているコードがあったとして
変数Aは100であるか? などというテストを書いても意味は殆ど無いですよね?
変数に入れるものが変わればテストも同じように書き換える。
単に同じことを2箇所で定義してるにすぎません。

CSSの話に戻りますが、CSSはコードではなくて定義です。
この要素に対して、このスタイルを適用する。
こういうものに関してテストを書く意味は殆どありません。

特定のブラウザでこのCSSは有効か?崩れないか?というテストは
意味が無いわけではありませんが、そういうのはアプリケーションの
テストというより、CSSサポートのテストとして
アプリケーションとは別に行うべきでしょう。

世の中にはレンダリングされた画像を保存しておいて、
それと誤差n%以内ならOKみたいなテストをやると言ってる所もありますが、
デザインや文章が変わったらテストも作り直しで、各ブラウザの互換性が
高くなった今では工数の方が多く掛かり過ぎでメリットはないでしょう。

7 :仕様書無しさん:2015/08/13(木) 12:13:54.43
訂正

> コードに対してやるもので
> 定義に対してやるものではないです。

定義もコードじゃんて言われそうなので、
「振る舞い」に置き換えてください。

8 :5:2015/08/13(木) 13:33:19.86
>>6
早速のお返事、ありがとうございます。(^∇^)

”表示内容の定義”を行う様な考え方なのですね。
実装表示する内容を定義して、正しい表示するのを確認する作業でしょうか。

マイクロソフトの設計にMVVMと云うモノが有ります。
MはJavaScriptを使って対応し、VはCSSを使って表す事は判るのですが
VMを実装するには、表示内容の訂正を行う為にCSSの更新(定義を切り替えて表示する)を行うのかと思いました。
作業の分担として表示内容が替わるものは画面遷移と考えて、表示単体のテストになると思いお聞きしました。

仕事で使う事のない私には、起動時のレイアウトから変わらないので
CSSも下画面の色や文字定義くらいしか使わないかと思います。

ありがとうございました。m(_ _)m

9 :松沢:2015/08/13(木) 14:18:59.45
>>8
ウェブの世界ではMVVMと似たようなもので
Googleが作ってるAngularJSというのがあります。

AngularJSはライブラリなので、それを直接使うには少し大変で
コーディング、実行環境、テスト、といった一連の作業を
スムーズに行えるように整備された環境を提供してくれる
generator-angular-fullstackなどというものが有るのですが、
そのやり方に従うと、CSSはビルドの段階で生成したものを使い、
実行中にCSSの更新はしません。

(ちなみにHTMLとJavaScriptもビルドしたものを書き換えたりしません。
Web APIで取得したデータを元にクライアント側でDOMを
書き換えるのがAngularJSのやり方です)

CSSというのはVというより、単なるデザインですね。
PC向けにどうみせるか、スマホ向けにどう見せるか、などと。
CSSはなくても、デザインが崩れるだけで実用上問題ない。というレベルがいいですよ。
アクセサビリティとして目が見えない人のためを考えてみるとわかると思います。

Vは表示というより、出力ととらえたほうがいいでしょう。
出力結果を人間向けに整えて見せるのがCSSです。

「CSSの更新(定義を切り替えて表示する)」の話に戻すと上で書いたようにCSSの更新はしません。
その代わりに、JavaScriptで"状態"を変更します。
何かを「押した状態」「話した状態」「開いた状態」「閉じた状態」
その状態をJavaScriptからHTML要素のclass属性(一般的な話。他の属性も使える)に設定します。
HTMLのチェックボックスなどは、JavaScriptを使わなくてもそれ自身で「チェックされた状態」となります。

JavaScriptの仕事としては状態をclass属性に設定する所までで、
その状態をどう表現するかを定義するのがCSSです。

6 KB
■ このスレッドは過去ログ倉庫に格納されています

★スマホ版★ 掲示板に戻る 全部 前100 次100 最新50

read.cgi ver 05.02.02 2014/06/23 Mango Mangüé ★
FOX ★ DSO(Dynamic Shared Object)