FileMaker以外にWordPress、node.jsなど興味あることを発信するページ!

FileMakerマニアが語るプログラミング雑学

WordPress

シンプルな例でFLOCSSについて考えた

投稿日:2021年7月28日 更新日:

皆さんこんばんは。RasieTechのWordPressコースmiku-nosukeです。今回の記事はCSS設計です。
いままで見て見ぬふりをしてきました。しかし、CSS設計は避けては通れない道。ココをおろそかにすると後で痛い目を見ます。しっかり学ぶことにします。あくまでも私が考えたことを備忘録として残します。

miku-nosuke

シンプルな例を用いてFLOCSSの考え方を学ぶことが出来ます。

mikkun

Honto ni Manaberuno ?

miku-nosuke

誰や?おまえは!

Mikkun

そうです、わたしがMikkunです。

miku-nosuke

だ、大丈夫なんか!?ちょ著作権とか

Mikkun

え?私は抱き枕ですよ。なにか。

miku-nosuke

ギリやな。いや、アウトかもしれへん。
もしクレームが来たらすぐ消えてくれよ!

Mikkun

それより、あなたが教えられるんですか!怒

miku-nosuke

いや、教えると言うより「こう考えてみました」てことをまとめたと言うことで。
むしろ、間違ってるとかこうやった方がいいって教えて欲しい。

CSS設計

 CSS設計はざっくり言うと、①自分以外の人が見てもわかるように、②効率の悪い書き方はやめましょう、③そのためのルールに従いましょう、と言うことです。詳細についてはネットで多くの良サイトがありますのでそちらをご参照ください。

FLOCSS

 RasieTechの授業ではFLOCSSを使って設計します。ここでは実際のCSSを見てもらうことを主としていますのでFLOCSSについても他のサイトを御覧ください。ちなみに、私が参考にしたサイトは以下になります。
FLOCSSを用いたコーディングルールについて解説【サンプルサイトも紹介】
FLOCSSを使ったCSS設計での悩みどころと解決案

作ってみる

目標

丸の中にダンベルとタイトル『現場主義』、テキスト『プログラムだけでは稼げない!現場主義で求められる技術のみ教えます。』

カード型

こちらのカードスタイルのデザインをコーディングしていきます。バーツという単位で着目すると、
・中央にある丸
・丸の中にあるアイコン
・タイトル
・テキスト
とあることがわかります。

丸の中にダンベルとタイトル『現場主義』、テキスト『プログラムだけでは稼げない!現場主義で求められる技術のみ教えます。』

こちらのカードスタイルのデザインをコーディングしていきます。バーツという単位で着目すると、
・中央にある丸
・丸の中にあるアイコン
・タイトル
・テキスト
とあることがわかります。

悩みどころ

目標物を確認したところで、さっそくコーディングしていきましょう。・・・手が動きません。はたと悩みます。FLOCSSはFoundation, Layout, Object, とあるわけです。さらにObjectの中にはcomponentとproject に分かれます。下図を見てください。まず、手が動かなかったのはこのcomponentなのかprojectなのかどちらなのかについて迷う。というのは、今回の目標物を下図(fig.2)のカード型オブジェクトに見立て設計した場合、『compnentと考えた場合』なのか『projectと考えた場合』なのかで迷ったからです。多くのサイトを見て回りましたが、正解はないのかもしれなくて個人やチームのルールに沿っているように見えました。

fig2. 出典 FLOCSSを使ったCSS設計での悩みどころと解決案 https://qiita.com/uggds/items/d904b2f9a103c37a25fa

そこで、参考にしたのがAtomicデザインの考え方です。この考えを元に今回の目標物をみると最小単位の構成部品が下図(fig.3)になります。c- の考え方は最小単位の部品ですから・・・とすると、下の各部品はc-とすることで腑に落ちました。そしてこの部品を1つのブロックとしてまとめるのがprojectになります。つまり、fig.2 でのcardの例での『projectと考えた場合』を採用しました。その結果、fig.5 としてコーディングを進めていきます。

fig.3 バーツ

fig.4 componet か project か

ファイル構成

ファイル構成

さて、ここからは実際のコーディングになります。その前にファイル構成を見てみましょう。各ディレクトリとファイルは図のようになっています。今回はcardというブロックを作っていきます。そこで、最小部品を_c-card.scss に、それをまとめる _p-card.scss に書き込んでいきます。

さて、ここからは実際のコーディングになります。その前にファイル構成を見てみましょう。各ディレクトリとファイルは図のようになっています。今回はcardというブロックを作っていきます。そこで、最小部品を_c-card.scss に、それをまとめる _p-card.scss に書き込んでいきます。

c- を書く

c-card__circle

命名

さあ、いよいよ書きますよー、
まずは、円からです。クラス名を決めましょう。丸だから「c-card__circle」でいいか。では、class=”c-card__”さあ、書きますよー、書きます、書きま・・・書けません。
なぜ書けなかったかというと、余計な情報をインプットしていたからです(もしかしたら、余計ではないかもしれませんが)。それは、命名規則の中に形や場所でなく意味に名前を付けるというもの。とするならば、circle これって形だよね。ダメじゃね。shapeにする?うー、どうしようって、かなりの時間悩みました。最終的にはここの部分はレスポンシブでも形が変わるわけでもなく、大きさが変わるわけでもない。なら circle でいいやってことで「c-card__circle」に決定。正直これでいいのかどうか分かりません。

scss

では、スタイルを当てていきます。さあ、書きます、書きますよー、書けま・・・書けません。ここでも、頭でっかちになっていたのか、はたまた知識不足なのか。その理由とは最小単位には修飾要素を含めるな、ということです。修飾要素とは色、形、高さ、幅など。とするといったココには何を書けばいいのやら。

その時の心のつぶやきは、

つぶやき1

例えば 、html でc-card__circle を包む”c-card__wrapper”を用意して、scss では c-card__wrapper に幅、高さ、色を指定して子要素のc-card__circle に形を決めるcircle を当てるのがよいのか。そうすると、この例ではc-card__wrapperが最小単位とならず、じゃここはp-card__wrappeにして・・・ん、そうなると見通しが悪くなるし、そもそも c-card__circle 単独では形を作れないから必ずc-card__wrapper ペアでもってこないとならないし・・・といろいろと悩みます。

html

<div class="c-card__wrapper">
          <div class="c-card__circle"></div>
</div>
scss

.c-card__wrapper{
    width: 220px;
    height: 220px; 
    background-color: #fff;
    & > .c-card__circle {
        border: 3px solid #000;
        border-radius: 50%;
        background-color: #fff;
    }
}

つぶやき2

では、p-card__shapeをつくってここに幅、高さを書くかな。それで、c-card__circle には円であるborder-radius: 50%;と色だけをいれて・・・これはいけそうだな。でもhtml側のクラスが増えるし、うーん。悩む。

html

<div class="p-card__shape  c-card__circle"></div>
scss

.c-card__circle {
    border: 3px solid #000;
    border-radius: 50%;
    background-color: #fff;
}

.p-caed__shape {
    width: 220px;
    height: 220px;    
}

結局、最終的に以下の様にスタイルしました。幅も高さも色も全部入れです。理由は、見通しが良いのと、今回は基本的に円の大きさが変わることがなかったためです。背景色を変えたい場合は下記の様にします。

.c-card__circle {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 3px solid #000;
  background-color: #fff;
}
// 円の色を変えたい場合はこうすることにした

.c-card__circle {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background-color: #fff;
  &--gray {
    @extend .c-card__circle;
    background-color: #ccc;
  }
}

c-

Follow me!

-WordPress

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

オリジナルテーマの作成から深掘りするWordPress その5 〜カスタムヘッダー 〜

今回はヘッダー画像を変更する場合について、クライアント目線で考えてみました。いろいろ調べてみたことを整理するため記事にします。 miku-nosuke この記事を読むことでカスタムヘッダーについて理解 …

オリジナルテーマ作成から深掘りするWordPress その3

今回は、テンプレートファイルについてです。htmlでwebサイトを構築する際に「面倒だな〜」と思うことがあります。それを解決すべくWordPressには便利な機能が備えられています。その一つがテンプレ …

WordPress カスタマイズ その1

2020年現在、ホームページの25%はWordPressで作られていると言われているほど勢いのあるWordPress(以下WP)。そんなWPについて、いま、まさに学習しています。学習してみるといろいろ …

オリジナルテーマ作成から深掘りするWordPress その1

今回はオリジナルテーマの作成を取り上げます。cocoonなどのテーマをカスタマイズする方法について調べる一方、オリジナルテーマを作るってどうやるんだろうと思いを巡らせていたところ意外にも簡単だったので …

オリジナルテーマから深掘りするWordPress その4

今回はテンプレートファイルのお作法について学習したことを書きます。お作法を施すことでよりWordPressっぽくなります。 miku-nosuke この記事を読むことでwp_head()、blogin …

プロフィール

miku-nosuke

職業:web制作者
生息地:東京都
趣味:ジョギング、コーディング、ガーデニング

もの作り大好き!FileMakerは25年の経験で多くの業務システムを作成。html、cssなどフロントも大好き!
まったくの別業界から好きなことに没頭したい、好きなことを仕事にしたいと思いプログラミングを学習する。それまではノンコードデータベースソフトFileMakerに没頭する。はまりすぎてFileMaker選手権で受賞しFileMakerを中心に活動する。
どの言語を学ぶにもhtml、css を知らないと話にならないと気づく。html、css、WordPress、サーバー構築などを語ります。

50歳を過ぎてふと思ったんだ、自分のやりたい事って今の仕事だったのか?
そんな時にたまたま見た日本人3Dグラフィックデザイナーの成田さんを題材にした番組。彼は45歳でグラフィックデザイナーを志、ついにはStarWarsの制作を手がける。そんな彼の言葉「人生に失敗していたんだ。この年になってはじめて自分のやりたいことに気付き、やり直したい」に感銘を受ける。

PAGE TOP