HTML/CSS初心者から中級者への一歩を踏み出す練習課題 その１ - Qiita
本記事は、筆者がチームに新人きた際に作ったHTML/CSSの練習課題の改訂版です。 狙い 課題は以下の3つを目標に作成しました。 BEM記法に慣れてもらう。 パーツ同士が疎結合なクラス設計を意識できるようになる。 保守性を大事にするマインドを身につけてもらう。 対象 HTMLとCSSがとりあえず書ける初心者から中級者への一歩目を踏み出したい人 やくそく HTMLタグは正しく使う（brタグ連打で間隔を調整したり、なんでもdivタグで済まさない）。 レスポンシブに作る（PC用とSP用にそれぞれHTMLを書いて画面幅によってdisplay: none;するのは禁止）。 クラス名はBEMに従う。 装飾にidは使わない。 タグに直接にスタイルを指定しない（ただし例外もある）。 !importantは絶対に使わない。 Javascriptで高さや幅を制御するのは禁止。 今回はモダンブラウザ(chrom
HTML/CSS初心者から中級者への一歩を踏み出す練習課題 その２ - Qiita
@media all and (max-width: 767px) { .panel__header { display: flex; align-items: center; } .panel__header__icon { flex: 0 0 auto; margin-bottom: 0; } .panel__header__icon > img { width: 60px; } .panel__header__text { flex: 1 1 auto; margin-left: 15px; text-align: left; } .belt { min-width: 100%; } .belt__content { width: 100%; padding: 30px 15px; } } .panel__header__iconのflex-basisや.panel__header_
HTML/CSS初心者から中級者への一歩を踏み出す練習課題 その４ - Qiita
その３では、与えられた課題をついにクリアし、しかも急な追加要求までこなすことができました。 これであなたも立派なフロントエンドエンジニア、とはすぐにはいきません。 IE11での評価はしましたか？ さあIE対応だ IE11のサポートが切れた未来にこれを読んでいる人にこの記事は必要ありません。 きっと素敵な世の中になっていることでしょう。 さて2018年現在、IE11をサポートしなければいけない現場がほとんどでしょう。 もしサポートはChromeだけでいいよと言われている幸運な人がいたらその人もこの記事を読む必要はありません。 これまではChromeなどのモダンブラウザで表示確認をしてきたと思いますが、今度はWindowsのIE11で確認してみてください。 きっとどこか崩れたでしょう？ 筆者のコード例も見事にIE11で崩れています。PCサイズで確認していますが、まるでSP時のような縦積みになっ
CSS設計 BEMを使うとき - Qiita
参照元画像 はじめに 良いCSSを書く方法として、CSS設計がいくつかあります。 その前に、そもそも良いCSSとは？ ・予測しやすい ・再利用しやすい ・保守しやすい ・拡張しやすい とのことです。 で、良いCSSを書くためのCSS設計の1つとして妖怪人間BEMがあります。 もちろん良いCSSが達成できるなら、必要なし 今回はCSS設計ルールの1つであるBEMについてまとめてみました。 BEMとは BEMとは、Block、Element、Modifierの略語 Block ⇒ 塊 Element ⇒ 要素 Modifier(kyeとvalueで表す) ⇒ 状態（変化） なぜBEMを使うの？ ・長期間メンテナンスできる設計で、ファーストバージョンの開発をすばやくするため ・チームのスケーラビリティ ・コードの再利用性 私が使う理由は、ブロックの再利用があるかも！？と思った時にBEMを使用しま
FLOCSSをベースとしたオレオレCSSルール - Qiita
My CSS Rules 仮にDOCSSと名付けました。こちらから オレオレルールになるまでの経緯 「CSS設計の教科書」を読んでから色々考えるようになって、FLOCSSがいいとこ取り感があっていいなーって思って採用していたのですが、自分のように1人でコーディングする場合にページ単位でブロックを作るのがベストかなとか思い始めたのがきっかけです。 色々試行錯誤の末、今のようなルールになりました。 ElementのElement こちらを参考にキャメルケースでやったら結構スッキリしました Modifier Modifierが今でもまだむずいなーって思ってる所です。 実際、CSSのセレクタとかで解決できちゃう場合も多く、ただそうなった時にわかりやすさが無くなってしまうのでModifierの方がいいよなーってなったり。。 PageBLockの依存 当たり前ですが、PageBLockがそのページに依
一番詳しいCSS設計規則BEMのマニュアル - Qiita
一番詳しい(当社比) この記事は 大体1年くらいBEMを実践した中で溜まった知見的なものをルール･規則･注意点をまとめたマニュアルというかたちにしたもの. BEM初心者でもすぐ実践してもらえそうな感じに詳しくしたつもり. ちなみにBEMの実践というのはRails製Webアプリでの実践. ※注 多分に我流な部分も含まれている. この記事の全てを真似しようとせずに一部のエッセンスのみ取り入れるのもいいかもしれない. BEMとは Block Element Modifierの略で, Block => でかい括り Element => でかい括りの中にいる要素 Modifier => 上記2つの変化球 の3つに分けて考えていくことでCSSを設計･命名していく手法. 基本的な考えとか前提とか BEMの中でも特にMindBEMdingと呼ばれている命名法をベースとしている SCSSを使用する 基本的に
BEMの命名規則とスタイルの当て方について - Qiita
BEMの命名規則がいまいち分からない方は必見。 またスタイルを当てていると、いざ変更があった場合に依存関係に困ることがある人も多いハズ。 個人的な書き方を備忘録として書いておく。 おさらい Block 構成のルートとなる要素。この要素はどこにでも置くことのできる、独立して動作するもの。 Element Blockに紐付いて定義される子要素。Blockの要素内のパーツであり、Block要素なしでは動作しないもの。 Modifier 元となるBlockまたはElementの要素から変化した状態を表す要素。元となる要素なしでは動作しないもの。 命名規則 Block, Element, Modifierは全てkebab-caseで記述する。 Block-Element間は__で接続する。 Block-Modifier間、Element-Modifier間は_で接続する。 Modifierは状態の名
FLOCSSメモ - Qiita
レイヤー 下記のレイヤーから構成される。 Foundation - reset/normalize/base... Layout - header/main/sideber/footer... Object Component - grid/button/form/media... Project - articles/ranking/promo... Utility - clearfix/display/margin... 1. Foundation reset.css、base.cssなどのブラウザのデフォルトスタイル（タグ要素への指定）を定義。 ページ全体の背景やタイポグラフィなどが該当する。 2. Layout ページを構成するヘッダー、フッター、サイドバー、メインコンテンツといった広域の共通部品の定義。 ページ単位で唯一の部品となるためIDセレクタによる指定を行っても良い。 3.
【初学者向け】HTML/CSSでのclassの命名を考える 〜CSS設計（BEM）を学んでみよう〜 - Qiita
とかのアレ（hoge部分）です。 この投稿は HTMLやCSSは書けるけれど、使いこなすためにもう一歩勉強したい classの命名にいつも迷う 現場で使われている技術や知識を身に付けたい こんな人を対象に書いた、初学者向けの投稿です。 CSSの設計とBEMの非常に初歩的なところを解説していきたいと思います。 CSS設計の初歩的なところを考えてみる classの命名っていうけどidじゃだめなの？ Qiitaを覗いてるみなさんには当たり前のことかもしれませんが、一応このあたりから書いていきたいと思います。 HTMLおよびCSSにはclassとidの２種類の名前の付け方がありまして、その名前が一致するものを紐づけてスタイルを書いていきます。 classとidの違いは、ページ内に複数存在できる(class)かできない(id)かです。 なので、正直idだけでページを作ることも可能です。が、一般的には
自分にちょうどいいCSSの書き方 - Qiita
CSSは敷居が低い分、書く人がある程度一貫性を意識して書かないと、すぐに破綻してしまうところがあって、いろんな方がいろんな手法を編み出していて、ベストプラクティス！と呼べるものが複数あるような状態だと思います。 自分としては、つまるところ書く人（達）が書きやすく管理しやすい方法であれば何でもいいと思うし、プロジェクトによっても答えは変わる話だと思うので、「これがサイコー！」みたいなことはなかなか言いづらいなあとおもっていたんですが、 最近は、複数人で制作するケースなどもあるので、あらかじめ「自分にとってのちょうどいい」を明文化して おけば、一緒に仕事をするときに「こいつは、こういうのがちょうどいいやつなんだな」と思ってもらえるかなと思い、まとめてみました。 2018-07-31更新: CodePenのサンプルをいくつか追加しました。 🚩基本姿勢 完璧な管理は目指さない。 管理のために迷う
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML/CSS初心者から中級者への一歩を踏み出す練習課題 その３ - Qiita
久しぶりに大量のCSSを書いたら楽勝だった話 - Qiita
Element Modifierと同じノリでElementの見た目を変えれるBlock ModifierのSassの書き方 - Qiita
BEMの命名規則に関する注意点メモ - Qiita
BEMによるコンポーネント設計 - Qiita
今更ながらBEMについてと、それに対応するSassについてまとめてみる - Qiita
BEMのmodifierでスタイルを切り替える時の書き方 - Qiita
【CSS】BEMのデメリットについて - Qiita
BEMを実際に使ってみて - Qiita