正幸Tweet「Web制作者のためのCSS設計の教科書」を読んでみましたので、書籍の概要と、感想を紹介します。モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法Web制作の仕事についてデザイナーがデザインした画面を、マークアップエンジニアがコーディングをしてサイトを公開する。Web制作という観点から見るとこれで完了かもしれませんが、Webサイトは「いったん完成すればそれで終わり」ではありません。サイト公開後にターゲットユーザーをそのサイトに集客し、サイトオーナーのビジネスを儲けさせるために、運用をしなくてはいけません。運用フェーズに入ると、様々な改修や、新規キャンペーンサイトなどが追加になるかと思います。サイト公開前にも、「ちょっとココの色変えて」など言われることもあるでしょう。CSSの設計が悪いと、サイト改修を重ねるうちに思わぬところで見た目が崩れて、その修正に余計に工数がかかることになります。皆さん一度はこのような経験をされているのではないでしょうか。本書は、これらの問題を解決するための思考を学ぶための書籍と言えるでしょう。10年間CSSコーディングに取り組んできた著者が、「予測しやすい」「保守しやすい」「再利用しやすい」「拡張しやすい」CSSを分かりやすく説明しています。「CSS設計の考え方」についての書籍ですので、「CSSを使ってグラフィックが描けます」「こんな表現ができます」といったテクニックの紹介はありません。CSSにおける設計とはよりよいCSSの設計の指標である「予測しやすい」「再利用しやすい」「保守しやすい」「拡張しやすい」ことについて、Googleのエンジニアであるフィリップ・ウォルトン氏のブログ記事から引用し解説されています。CSSの基本を振り返るCSSの基本であるセレクタと詳細度の解説です。CSSが破綻する主な原因として、セレクタが複雑になってしまうことがあげられます。コンポーネント設計を考える上でも重要なポイントとなるため、正しく理解している必要があります。コンポーネント設計のアイデア著名な開発者達が考えたCSS設計のアイデアの説明です。下記の設計アイデアが紹介されています。[OOCSS]オブジェクト思考プログラミングの概念を取り入れたCSS。[SMACSS]OOCSSのコンセプトをベースに作られたフロントエンドに関するガイドライン。[BEM]フロントエンド開発手法で使われている命名規則。[MCSS]ロシアのSNS開発チームが作ったCSSの構成システム。[FLOCSS]上記に挙げた設計アイデアをヒントに、筆者が作成を続けているガイドライン。第3章で取り上げたCSS設計の考え方を元にした、実践的なコーディング手法についての解説です。CSSプリプロセッサを用いた設計と管理CSSにプログラミング言語のような機能を与える、スタイルを簡潔に書く、といったことを可能にするCSSプリプロセッサのSassを使った管理方法や、注意点が紹介されています。コンポーネントの運用に必要なツールコンポーネントを運用する中で、それを手助けするツールの紹介です。Lint(CSSチェックツール)など。コードのカプセル化やスコープなどが実現できる今後のWebアプリケーション開発に欠かせない技術です(現在W3Cで仕様策定が進行中)。Componentsについての簡単な使い方や、Googleが開発しているUIコンポーネントツールのPolymerの紹介。書籍を読んでみてHTML5の普及に伴い、HTML5でWebアプリケーションを構築することが、今後ますます増えると考えています。効率的にWebアプリケーションを構築するためにも、CSS設計をきちんとすることが求められる時代です。そのためには、コンポーネント設計が必須となります。本書ではCSSコンポーネントの設計についても、多く語られています。Componentsなどの紹介も折り込まれています。Componentsは、これまでのWeb制作手法を大きく変える制作手法です。現在W3Cで仕様策定が進んでおり、今後のWeb標準となる予定で、Web制作をする者として見逃せない技術だと私も注目しています。「予測しやすい」「保守しやすい」「再利用しやすい」「拡張しやすい」コンポーネントやCSSプリプロセッサを意識した設計・管理のために、皆さんにもぜひ一度読んでほしいと思う一冊でした。発売日:2014年07月24日発売ISBN:978-4-8443-3635-8発行:インプレスジャパンWeb制作者のためのCSS設計の教科書コンポーネントやCSSプリプロセッサを意識した設計・管理の実践など、「ちゃんとCSSを書く」ためのプロの考え方を徹底解説!「セレクタが複雑になってしまう......」「オブジェクト指向CSSってなに?」「考え方はわかったけど、どう組めばいいの?」そんな人のバイブルになるのが、この本です。破綻しやすいCSS、セレクタのリファクタリングなどの基本から、OOCSS、SMACSS、BEMなどのコンポーネント設計のアイデア、実際によくあるパターンのコードの組み方までを丁寧に解説。Components」についても説明します。エバンジェリストシステム開発会社で、大規模なシステム開発を経験後、Web制作会社でプログラマー兼、ディレクターとして従事。その後、KDDIウェブコミュニケーションズに入社、CPIブランドのプロダクトマネージャーに就任。ACE01、SmartReleaseをリリース後、現職の「エバンジェリスト」として、Web制作に関する様々なイベントに登壇しつつ、CPIスタッフブログを運営する。ブック・インサイド『Python機械学習プログラミング』―単純な例でADALINEのイメージをつかむ2016/9/16今回も前回に引き続き、書籍『Python機械学習プログラミング』の2章の内容についてより分かりやすく理解するためのヒントを解説していきます。今回は、ADALINEのイメージがつかめるように、ADALINEのシンプルな例を取り上げます。ブック・インサイド『Python機械学習プログラミング』―パーセプトロンを読み解く2016/8/8前回は、書籍『Python機械学習プログラミング』を読むために必要な知識、読み方等について説明しました。今回は、2章の内容についてより分かりやすく理解するためのヒントを解説していきます。ブック・インサイド―『Python機械学習プログラミング』学び方ガイド2016/6/30本記事では、書籍『Python機械学習プログラミング』を読むために必要な知識、読み方等について説明します。ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。VeloCloudが選ばれる理由SD-WANとはなにか。Linuxエンジニア育成への思いF5とNGINXの組み合わせで、サービス公開をよりセキュアに。ITがお届けするポッドキャストです。