Web制作者のためのCSS設計の教科書

谷拓樹 / インプレス
(17件のレビュー)

総合評価:

平均 4.4
7
7
1
0
0
  • CSSコンポーネント時代

    CSSがコンポーネント化される時代が来るそうです。
    実質的に複数レイアウトページから選択可能なWEB環境が到来するのでしょう。
    自分はこの前WIXでのホームページ作成を少し見たのですが、新しい時代が来ているなあと感じました。
    ITも行くところまで行ってるなあということで…。
    星5つ。
    続きを読む

    投稿日:2018.06.27

ブクログレビュー

"powered by"

  • hatsu

    hatsu

    このレビューはネタバレを含みます

    CSS設計の基本となる考え方について勉強できたのでよかった。
    以下のような事柄について書かれている。
    ### 良いCSS設計の特性
    - 予測しやすい
    - 再利用しやすい
    - 保守しやすい
    - 拡張しやすい
    の特性を持つこと。

    ### 破綻しやすいCSS
    - HTMLの構造に依存している
    - article h1 { color: red; }とか。
    - スタイルを取り消している
    - 一度定義したルールを `0`や `none` などでリセットしているとか
    - 絶対値を多用している

    詳細度
    1. !important
    2. インライン記述(style属性)
    3. IDセレクタ
    4. クラスセレクタ・属性セレクタ・擬似クラス
    5. 要素セレクタ・擬似要素
    6. ユニバーサル・セレクタ

    コンポーネント設計のアイデア
    - OOCSS(Object Oriented CSS)
    - SMACSS(Scalable and Modular Architecture For CSS)
    - BEM(Block, Element, Modifier=変更)
    - FLOCSS(フロックス)

    レビューの続きを読む

    投稿日:2020.02.28

  • yondayo2020

    yondayo2020

    今までなんとなくで書いていたFLOCSSについての理解を深めることができた。

    3回同じパターンが来たらコンポーネントを考えるを基準にCSSの設計をしていこうと思う。

    CSSガイドラインを作る時にとても役に立つ知識
    繰り返し読む
    続きを読む

    投稿日:2020.02.12

  • Yuta_Leseratte

    Yuta_Leseratte

    セレクタや疑似要素、プロパティなどを覚えればそれほど難しくないCSS。
    しかし、自由にかけてしまうからこそ、後のコード管理も踏まえて書くことが大事です。
    最初は数百行程度でも、ページや要素の追加によってあっという間に数千行に達することもありますが、そうしたCSSはメンテナンス性が低く、また再利用しづらいといった欠点があります。

    本書はローカルルールで書いてしまうことの多いCSSの記法に警鐘を鳴らし、以下4つに焦点を当てた、より良いCSSの書き方を解説した本です。

    ・予測しやすい
    ・再利用しやすい
    ・保守しやすい
    ・拡張しやすい

    また、避けるべきCSSについてもまとめられており、内容もそれほど難しくありません。
    すぐに実務に役立てられるレベルですが、簡単な割に実用性に富んでいるノウハウなので、繰り返し目を通しておきたい項です。

    本書の最大の特徴とも言える項が、CSSコンポーネント設計です。
    代表的な5つの設計手法が紹介され、一定のルールに則したCSSコーディングがいかに重要か説かれています。

    ・OOCSS
    ・SMACSS
    ・BEM
    ・MCSS
    ・FLOCSS

    巻末にはSassを使ったコンポーネントの作成・管理やスタイルガイド、パターンライブラリが掲載されています。
    初版が2014年とWeb関連の書籍にしては少し前ですが、CSSの設計という概念にには古さを感じず、今後にも十分役立つ内容です。

    私もついその場で間に合わせるために適当にセレクタやプロパティを追加してしまうことがあります。
    こうした姿勢を矯正するため、業務の際もなるべく行き当たりばったりな書き方は避け、自分以外の人でも管理しやすいコードを書こうと心がけています。

    多少回り道になったとしても上記のようなCSS設計について深く考え、学んでおくことはWebデザイナーやコーダーが長く仕事を続けていく上で欠かせない知識だと思います。
    続きを読む

    投稿日:2019.06.30

  • smallgeek

    smallgeek

    CSS を書くにあたり事前に設計を知っておきたかったので読んだ。よくある教本では見られないような Web 業界での知恵を得ることができた。

    投稿日:2019.06.02

  • yfujii1127

    yfujii1127

    CSSを触ることがある人は必読。今後自分でサービスを作るにしても、組織にジョインするにしても、それぞれ何かしらこの本で紹介されているCSS設計がベースになっているはず。OOCSSはどの設計においてもベースになっているし、BEMに関しては命名規則としてその地位を築いている。多少の違いはあれど、基礎は押さえておくべき。この本はその紹介をわかりやすくしており、理解しやすい。CSS初学者よりも、毎日CSSを書くベテランの人こそ目を通しておくべきである。書かれた当時はそうではなかったが、Ch7のWebコンポーネントに関しては、すでに実現されているので軽く流すくらいで良いだろう。Ch3が肝である続きを読む

    投稿日:2019.04.29

  • koishi-2018-pc

    koishi-2018-pc

    インターネットを見るのが、PCだけでなくスマートフォンやタブレットなど多様になり、Web作成の方法も、大きく変化しています。
    モダンWeb開発、レスポンシブWebデザインを勉強しようと思いたち、この本を手に取りました。

    HTML5とCSSとJavascriptを組み合わせれば、新しいWebサイトが簡単に作れると思ったのに、CSSを扱うのがいかに大変か、本書を読んで驚きました。

    個人や小さな仕事用のWebサイトを作るだけなので、複雑なことをやる必要はないけれど、CSSを扱う時の注意事項が少しわかりました。
    他の本を読む時も、そこを押さえているかチェックできると、応用もやりやすいと思います。

    内容と目次・著者は

    Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

    内容 :
    コンポーネントやCSSプリプロセッサを意識した設計・管理の実践など、「ちゃんとCSSを書く」ためのプロの考え方を徹底解説。
    自身の経験から生まれた、OOCSSやSMACSS、BEMなどのプラクティスを紹介する。

    著者 : 谷 拓樹
    株式会社サイバーエージェントフロントエンドエンジニア。
    コミュニティサービスの開発、UIデザイン、テクニカルディレクションを担当。


    2016/03/09  予約 3/15 借りて読み始める。3/16 ざっと読み終わる。
     
    続きを読む

    投稿日:2019.01.12

Loading...

クーポンコード登録

登録

Reader Storeをご利用のお客様へ

ご利用ありがとうございます!

エラー(エラーコード: )

本棚に以下の作品が追加されました

本棚の開き方(スマートフォン表示の場合)

画面左上にある「三」ボタンをクリック

サイドメニューが開いたら「(本棚アイコンの絵)」ボタンをクリック

このレビューを不適切なレビューとして報告します。よろしいですか?

ご協力ありがとうございました
参考にさせていただきます。

レビューを削除してもよろしいですか?
削除すると元に戻すことはできません。