WebアプリにしろWebサイトにしろパフォーマンスはとても重要です。どんなに高機能であっても、どんなにデザインが良くても、パフォーマンスが悪ければユーザーは離れてしまいます。 とは言え現場はキツキツのスケジュールで、パフォーマンスにまでこだわる余裕がないよ！パフォーマンスはひとまずできる限りのところまで頑張るよ！となってしまうこともあるかと…。 この問題の解決の糸口はパフォーマンスを良くする手段をどれだけ知っているかです。仕様を決めるとき、デザインを決めるとき、実装するとき、それぞれのフェーズでパフォーマンスを常に意識していると自ずとハイパフォーマンスに近づきます。 というわけで今回はフロントエンドの観点から、イマドキのパフォーマンス改善手法をまとめてみました。イマドキと謳っておきながら2年前くらいの技術が出てきたりして最新の話題でもないのですが。 ちなみに、本題に入る前にWebパフォーマ

エンジニアをやってると意外とプレゼンや講義をする場がありますが、何度やっても100％満足するプレゼンにはたどり着かないんですよね。想像以上に難しい。何か必勝法はないものか…と模索しているうちに個人的な「最低限守るべきプレゼンのルール」ができてきたのでまとめてみます。参考になる部分があれば使ってください。 スライドの見栄えに関するルール 文字色に #000 (黒) は使わない 目が疲れる。少しトーンを落としてグレー系の色にする。 背景色に #fff (白) はできれば避けたい 純白もだめではないけれど、スクリーンの輝度によっては目が疲れるのでほんの少し暖色に寄せるといい。 文字色と背景色のコントラスト 目に優しくしようと思って文字色・背景色ともに色味を弱めすぎると、かえって見づらくなる。両者のコントラストがあることが大事。W3Cがアクセシビリティを考慮した適切なコントラスト基準というの定義し

まいどです。 WEBエンジニアのあろえりーな(@aloerina_)です。 今回はCSSに関するお話。 保守しやすい設計ってどの言語にもだいたいありますよね。でもCSSの設計についてはあんまりドキュメントを見かけないなーと前々から思っていました。 そのせいとは言わないけれど、苦労しているWEBデザイナーさんは多いのではないでしょうか。あとでデザイン修正しようと思ったらHTMLも変えないとダメだった！みたいな事故に遭遇する人を救いたい。そんな被害に遭うのはあろえだけで十分だ！ そんなわけで、あろえ流のCSSのセレクタ設計についてまとめてみます。 セレクタはclass属性が鉄則 HTMLタグは正確に割り当てる マルチクラス 考え方のきほん 共通パーツには基盤となるclassを 特別な要素は基盤class + オプションclass 親子関係のエレメントの命名 デザインの単位を意識する おわり セ