CSSで泥沼にはまらない3つのアプローチ｜『プロとして恥ずかしくない 新・WEBデザインの大原則』発売記念イベント

注釈 60分のセミナー用のスライドです 60分間ひたすらしゃべるための資料なので、目次はありません セミナーのフォローアップのために公開しています 文字が大きいのは、会場の後ろの席でも見えるようにするためです Cascading Style Sheets .header { margin: 8px; color: #f00; } マジックナンバーの良くない例 .main { float: left; width: 640px; } .main h1 { width: 640px; } .main p { width: 640px; } .main ul li { width: 620px; margin-left: 20px; } 数値が乱立 .aaa { width: 640px; } .bbb { width: 324px; } .ccc { width: 216px; } .ddd

[north_korea]

display:inline-flexとかいう超有能プロパティ｜ブコメみたら全然関係ないところを叩かれててワロタ。別にお前らに見て欲しくて公開したわけじゃねえぞ あとスマホから見たらめっちゃ綺麗やぞ

[alphabet_h]

目次ページはないと書かれているし、発表用のスライドに見やすさ以外のユーザビリティは必要ないし、文句をつけるならreveal-jsに言うべきだし、スライドの内容は非常にためになるし

[gowithyou]

→押さないと進まないとは、プロとして恥ずかしいWebサイトじゃないか

[kanflu]

自分で使う用の発表資料を無償公開した人がブコメで「プロとして恥ずかしい」「ユーザビリティがー」「やり直せ」「普通に書け」とか言われてて怖っっっわ。嫌なら見るなよ……

[kamayan1980]

Web公開するなら、せめて目次ページがほしい（途中で疲れた）

[siomaruko]

技術的なすごさとユーザビリティは相関がないといういい事例って印象。 途中で見るのめんどくさくなって離脱した。

[burnworks]

泥沼こわい

[libkazz]

css 基本 と要点が わかりやすい。

[glat_design]

詳細度とかz-indexとかマジックナンバー防止とか /

[nakaken88888888]

もともと複雑にならないようにシンプルに作るように心がけてるけど、マジックナンバー減らすところとかは参考になる。マネしたい。

[Nean]

ソースも後で読もっと。

[shinpiece]

CSS 勉強

[unitro]

勉強になります

[nanto_vi]

「width・heightプロパティは、なるべくブラウザに計算させよう」、マジックナンバーととらえる。/ 内容と関係ないけど、CSS 無効化 (Firefox なら「表示」→「スタイルシート」→「スタイルシートを使用しない」) が便利。

[mayu_boooon]

美しい！

[kvx]

ブコメ…

[Journey]

あとでじっくり読む

[soramimi-cake]

メモ

[sumithsonian]

まさに、今日、研修生の子に説明した事がそのまま書かれてた。 これを読めばより理解してもらえそう。

[love0hate]

スワイプでページめくれるよ

[torico16]

すごいけどどこで終わるのか分からなくて途中で離脱…。後で続き読む。

[aceraceae]

先にブコメみたからなるほどと思ったけど、こういうのは普通に書けって思う。

[yosshi-k]

iPhoneだとフリックするとページが進む

[yutakaan02]

これは変態

[imo24da]

iPhoneだと→が見つけられない。。どこ？

[ente04]

内容は良いのにデザインのせいで閲覧の仕方が分かりにくかった。

[wwwkrt]

→ 押していけば見える

[wdr_s]

「IDを使わない」とか、同意するところ多し。HTML/CSSに携わる人は必見。

[sigwyg]

これは良いまとめ