Web制作日記

[Web制作日記#10]CSS設計完全ガイドを6割ぐらい読んだ

ベアさん
記事内に商品プロモーションを含む場合があります

日記を書き始めて10日目が経過しました!(個人的な体感は、30日ぐらいなんやが…笑)

そんな今日は

ベアさん
ベアさん

CSS設計完全ガイドを6割ほど読んだので、中間報告

をする記事にしますね。

また、日常ネタとして「時間とツールの見直しをした」って話もするつもりですよー!

興味がある人は、ぜひ最後まで読んでいただけると嬉しいです。

ベアさん
ベアさん
プログラマー / 起業家
Profile
プログラマー.site管理人

<どんな人か>
・エンジニア2年生
・メイン言語:Ruby on Rails
・Web制作の勉強中...

実はまだ10代です!
最近はWeb制作で稼げるように奮闘してます。
プロフィールを読む

CSS設計完全ガイドを6割ほど読んだ

↑の本を6割ほど読み終えました。

中間発表的な感じで、

  • (忖度なしの)正直レビュー
  • ちょいアウトプット

の2つを書きます。

結論から言うと、「普通に難しいけど、網羅性や実例があって丁寧」な本ってのが途中までの感想で、割と評価高め?です。

それでは、レビューからいきましょう↓

(忖度なしの)正直レビュー

お堅い、普通に難しい笑

まず、本を開いて、パラパラめくって思ったのが

ベアさん
ベアさん

あ〜こいつは難しいやつやな〜笑

そして、実際に本を読んでみると案の定難しくて、横文字も結構並んでます。(一度置いてかれると、大変です…)

どの辺が難しいかというと

難しいポイント
  • 一番は横文字が多くて、取り残されること
  • 文章量が多い
  • 内容が詰まってる

などが挙げれます。

とはいえ、難しいのはデメリットだけじゃなくて、良い面もあると思います。以下では、どっちかと言えば良い点を書きますね↓

網羅性とかは星5

メリット

まず、何よりも

網羅性があって、これ一冊仕上げたら良いのが伝わってくる

です。さすが、「完全ガイド」とタイトルにつけるぐらいですね。

ベアさん
ベアさん

また、網羅性があるので辞書的な使い方をしても良いなと…

僕、一応エンジニアとして実務も積んでるのでわかるのですが、網羅系の本は「大事な部分を抜き取る力」が必要と思ってます。

なぜなら、網羅系と言いつつ

  • よく使うのは2割ぐらい
  • 同じことを繰り返してる

ような本が多く、この本もそんな印象を受けましたね。

この本につられて僕もお堅いことを言ってますが笑、大切なことかな〜と思って共有してみました!

実例付きでわかりやすい

この本、割と実例の部分が多くて

本の構成
  • 最初に理論を解説して
  • 実務でどうやって使うか?を丁寧に解説する

ような構成の本でした。

僕、最初の理論が全然わからないまま進んでいたのですが、さすがに実例ばっかり見ていたらなんとなくわかってきました

そして、ちゃんと理論の部分を読み返したら…

ベアさん
ベアさん

え?スイスイわかるんですけど?

って感じになりました。

また、BEMという技術がこの本のミソだと思ったので、忘れないうちにちょいアウトプットしておきます↓

ちょいアウトプットしてみる

学習

CSS設計の手法の一つにBEM(ベム)というのがありまして、個人的に好きなのとよく使われてるみたいなのでアウトプットします。

BEMを構成する要素の全体像は

BEMを構成する要素
  • Block
  • Element
  • Modifier(モディファイア)
  • (プラス)Mix

という3+1で構成されています。

悩む人
悩む人

なんか、よくわからん英語が並んでるぞ

と思った人、完全に本を読み始めた頃の僕と同じです笑

それぞれを簡単に解説すると

簡単に解説すると…
  • Block→他でも使いまわせる要素の塊
  • Element→Block内でしか使えない要素
  • Modifier→BlockやElementの状態を説明する
  • Mix→レイアウトを整える

って感じで、文字じゃ難しいのですが割とシンプルですよ。

また、BEMには命名規則があります↓

block-name__element-name_modifier-name

ベアさん
ベアさん

・BlockとElementの間に_が2つ
・ElementとModifierの間に_が1つ
・名前の間には-が1つ

って感じになるよ!

MindBEMbingという命名規則なら、「ElementとModifierの間に–が2つ(+キーを省略)」っていうのがあるみたいです。

プロジェクトに応じて使い分けしながら、BEMを使いこなしていきたいですね!

時間・ツールの見直しをしたよ

日常ネタなのですが「時間・ツールの見直し」を時間をとってやりました。

時間の見直し

僕いっつも

ベアさん
ベアさん

時間がない…時間がない

と言ってる割に、無駄な時間が結構多かったので。

具体的にやったことは

  • 現状の時間の使い方を洗い出して
  • 無駄な時間を削減する

っていう、シンプルなやり方をしました。

その結果として

無駄な時間を削減するために…
  • Youtube見るのやめた
  • Googleアプリを削除した
  • 通知見る時間を少なくした

などを行ったのですが、Youtube見るのをやめるのが8〜9割で効果抜群です。

自分の意思で使ってない時間はお金もそうですが、削除するのがおすすめです。(精神的にも穏やかな日常になりました)

ツールの見直し

パソコンの周辺機器

使用しているツールをうまく使えてない感じがあったので、時間のついでにツールも見直すことにしました。

主に見直したのが「タスク・スケジュール管理」で、最終的に

使用するツール
  • メモ帳→1日のやることを朝に書く
  • Chatwork→仕事関連のタスクを入れる
  • Googleカレンダー→個人のタスク・複合スケジュール

という感じにしました。

これでうまくタスクを管理できると良いのですが…比較的忙しくない今から頑張ってやっていきます。

ツールの見直しは以上です!皆さんも参考にしてくださいね・

次回:Youtube見るのやめた効果がえぐい!

次回は「Youtube見るのやめたら…良い効果があった」をテーマに記事を書きます。今日の記事で、時間を見直したので。

仕事の生産性が上がるし、脳がすっきりするし…良いことしかないです。

お楽しみに!

P.S

11話書いたよ↓

あわせて読みたい
[Web制作日記#11]Youtube見るのやめた効果がえぐい!
[Web制作日記#11]Youtube見るのやめた効果がえぐい!

Web制作日記のアーカイブはこちら↓

あわせて読みたい
Web制作日記のアーカイブ【随時更新】
Web制作日記のアーカイブ【随時更新】
ABOUT ME
ベアさん
ベアさん
プログラマー / 起業家
プログラマー.site管理人

<どんな人か>
・エンジニア2年生
・メイン言語:Ruby on Rails
・Web制作の勉強中...

実はまだ10代です!
最近はWeb制作で稼げるように奮闘してます。
記事URLをコピーしました