質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.09%

破綻しないCSS設計を練習、体得するにはどうしたらいいでしょう?

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 788

Ebrick

score 10

HTML,CSSコーディングの初心者です。
非コーダーのデザイナーでしたが、勉強を始めています。

見られればいい、という程度のコーディングはできるのですが、
運用視点をもった「CSS設計」をした経験が全くないため、ステップアップしたいと思っています。

「CSS設計の教科書」という本を読み、BEMやFLOCSSなど様々な設計手法を知りましたが、
ぼんやり概念は理解できても、「で?どうすりゃいいんだ?」という感じ。

具体的な練習パートがないため、個人で試して見ても合ってるのかもわからなくて
実用イメージや練習方法が浮かびません(白目)

「あなたのPJに合わせて最適な方法を選ぼう」となってますが、
どんな状況において、何が最適なのかもさっぱりで、立ち往生しています・・・(絶望)

そこで、CSS設計の思想をつける上で皆さまが実践された
①練習方法
②参考文献や、URL

など、ありましたらぜひ教えていただきたいです。

当社古い会社で、先輩もあまり最新の知識に明るくなく、
事業会社なので頻繁に試せる機会がないので個人で勉強しようと思っています。
ひとまず、FLOCSSに則って何か作ってみようかと思っています。。。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • maisumakun

    2019/02/07 15:38

    CSSが「波状」になるという状況は、意図的にやらないと想像できないのですが…どのようなシチュエーションでしょうか。

    キャンセル

  • Ebrick

    2019/02/07 15:47

    すみません
    波状→破綻 の間違いです
    いわゆる、スタイルの上書き合戦、コード重複、使い回しできない、など 無駄に運用コストがかかる状態になってしまうことを言っています

    キャンセル

  • m.ts10806

    2019/02/07 15:47

    過去質問に似たようなものがあったような。CSSの設計の話だったはず。

    キャンセル

  • m.ts10806

    2019/02/07 15:48

    上書き合戦、コード重複はまた本件とは違う話になりそうに思いますが。

    キャンセル

回答 1

checkベストアンサー

+1

CSS設計は、BEMやFLOCSSなどのメジャーなCSS設計手法+自分がコードを書いていてこうしたほうが楽だな便利だな
と思ったものを付け足していく といった感じかなと思います。
現在自分はSMACSSをベースにbootstrapを取り入れつつ、随時カスタマイズしています。

基本的に、「使い回しができること」、「使い回しができる複数のスタイルを組み合わせて更になにかを作れること」の2点を考えながら作っています。
なので①の勉強方法については、上記2点を考えながら、自分が今選択しているCSS設計手法から外れていないか時々本や参考サイトで確認しつつ、たくさんコードを書くことでしょうか。
とくにページ数が多いと良いと思います。

ある程度コードを書いていくとCSS設計手法が、どうしてこういうやり方をしているのかわかってくると思います。
また、「こうしたら楽かな?」「これ似てるのにわざわざ書くのめんどくさいな」という思いが出てくると思いますので、それを解決していく感じです。

②参考文献や、URL
SMACSSを勉強する際に先輩に渡された本はEbrickさんと同じです。
参考にしたサイトは↓のサイトなどです(SMACSS)
https://app.codegrid.net/entry/smacss-1

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/12 13:06

    参考サイトありがとうございます。勉強になりそうです。
    何がわからないのかも良くわからず、向かい合うスタンスがつかめなかったのですが、
    すべていきなり理解しようとせず、地道に自分で試して見ながら必要性を理解していこうと思います。
    ありがとうございます。

    キャンセル

  • 2019/02/13 14:01 編集

    結局はどうしたら速いか・迷わないか?楽か?の追求かと思います!
    環境的に大変かと思いますが、ステップアップしたいという気持ちは本当に尊いので、頑張ってください!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.09%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる