Download to read offline
人の言うことを簡単に信じるな！
- 1.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21. CSSを書いていて困る事 • このスタイルはどこで使われているの？ • このスタイルの影響範囲はどこまで？ •似たようなスタイルが修正で全部対応しなちゃいけない… • HTMLの要素の変更があったから、CSSも修正しなきゃ…めんどくさい… • すでに効いている他のスタイルの詳細度が強すぎて上書きの修正が必要… • 関連するスタイルがCSSファイルに散らばっていて修正しづらい… • すでにあるスタイルでどういうものがあるの？使えるものがあるんだった ら既存のスタイルを使いたい ・ ・ ・
- 22.
- 23.
- 24. このスタイルの影響範囲はどこまで？② 命名ルールにMindBEMdingを取り入れる。 MindBEMdingとはBEMというCSS設計に基づく命名ルールです。BEMはBlock・Element ・Modifierという3つの役割をクラス名に使用することで影響範囲を明確にしたものです。 例えば.block__element--Modifierというように書くことができます。BlockとElementの間は 「 __ 」、ElementとModifierの間は「— 」、Modifierも細分化できてKeyとValueの間は「 - 」を使うというルールがあり、役割と記号がユニークなので一目で意味がわかります。 ✳︎「-」はプレフィックスとMindBEMdingのKeyとValueの間で使用しますが、プレフィックスは必ず大文字から始まるの で混同することはありません。
- 25.
- 26.
- 27. すでに効いている他のスタイルの詳細度が強すぎて上書きの修正が必要… セレクタの詳細度は最小限に。 例えば、html body headerh1.header__siteTitle aというセレクタを書くのではなくて、 .header__siteTitleLinkと書く。詳細度を最小限にすることによって、他のスタイルの影響 を与えないようにする。 ✳︎テキストリンクの色を全て共通にする場合は、baseについてのみ記述するスタイルで調整する。この時は要素セ レクタを使用するのが効率的です。FLOCSSの_base.scss。
- 28.
- 29.
- 30.
Editor's Notes
- #3 騙されやすい人みたいな感じになってるかもしれません。 運が良くなる壺とかは買っていませんので。。。
- #5 ビギナー部では、HTML5ビギナーズという勉強会を開催しています。 やる内容によりますが、200人以上来る勉強会のときもあったりとなかなか盛況だったりします。 https://www.facebook.com/beginhtml5/ スタッフブログっていうのもあるのですが、こちらはちょっと更新されていないのでまぁ適当に無視してください。 これまでの開催内容は。。。 キャリアデザインを考える 置いてきぼりにされない現在のスキルとは JSおじさんとのコラボ CSS設計 第8回（14/11/27）：AngularJS 第7回（14/09/04）：Chrome開発者ツール、インブラウザデザイン 第6回（14/06/14）：トークセッション。ビギナーの勉強方法を考えよう 第5回（14/05/23）：jQuery 第4回（13/12/13）：ブラウザデバッグツールの使い方 第3回（13/10/23）：CSSレイアウト、コード最適化 第2回（13/07/26）：初めてのHTML5、スマホコーディング、jQueryMobile 第1回（13/06/21）：HTML5、UI/UX、Webデザイン、Windows8アプリ、ブラウザ状況
- #6 HTML5 JAPAN CUP 2014というアワードに参加したのがきっかけでした。 https://5jcup.org/ その5J CUP のキャッチコピーが「日本のWebをだぎらせろ！」というもので、自分は業界的にすごい人ではないけどたぎらせるベースずくりくらいならできそうと思い、ビギナー部に入部させていただきました。 この体験が今の河島を作っているといっても過言ではないですね。
- #7 で、仕事は株式会社フリーセルというところで主にフロントエンドをやっており、他にも媒体管理や写真撮影、社内トレーナー、ストリートアカデミーの講師、アクセス解析をやったりマーケティングオートメーション周りなどいろいろやっています。 https://www.freesale.co.jp/ 事業の紹介、事例に力を入れていて自分がこの事例のインタビューとかの責任者です。 このサイトのアクセス解析とかをやっています。 昔GAIQという認定資格を持っていたのですが、期限がきれて更新していないです。 まぁ一回会社にパーソナルブランディングできたからいいかなと思って。。。簡単ですがアクセス解析もできますよということです。
- #8 コラム10回でもう入稿終わりました。締め切りに追われるのは辛いですね。。。
- #9 受けた人no.1の人気講座です！
- #10 ここだけ見ると自己啓発のセミナーみたいですが違いますよ
- #12 この図、見たことある人いるかもしれません。 現状の知識としてこれが頭に入っている人どれくらいいるのかな？ 入っていなくても全然良いですよ。 というのも。。。
- #13 CSSはxmlとかsvgでも使えるし、htmlに内包されているものではないですよね
- #14 他人の責任にしないで自分の責任と考えましょう。 というのも初心者の人は誰かに助けを求めることがあると思いますが、それがクセになると困る。 質問することは悪くないんですが、聞かれる方も大変だし、第一聞質問する方が成長しない。
- #18 どっちが安心できますか？ どっちが自信持って答えれますか？