「HTML,CSSだって難しいよ！」 初心者でも始めやすいって言ったの誰ですかね。最初は覚えるのに必死だし、少しわかるようになったかな？で始めたサイト制作（コーティング）もエラーだらけで頭を抱える日々。そんな修行を耐えているみなさんに知ってほしい、CSSの設計についてお話できたらなと思います。概念的なこと中心になりますので細かいことは下記の参考文書をご覧ください。 『インプレス社 Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 谷拓樹著 2022年発行第１版』 注意 作者自身もプログラミング初めて１ヶ月の超初心者です。HTML、CSSを使ってデザインカンプを元にサイトを作れるぐらいのレベルです。なので僕より歴長い人はスルーしてもらっていいです。まだ初めたばかりの人は追いついてきてください。僕は先に行ってます。 初め 壊れない完璧な設計を
HubSpotやCSS設計に明るい半田のウェブサイトです。 ウェブサイトの本質は情報を伝えることですので、それを言い訳にデザインは全体的に工事中です。 みんな大好き、あるいは大嫌いなCSS設計。そんな言葉が生まれてから久しく、JavaScriptフレームワーク（以後JSフレームワーク）を始めとする技術が提供するスコープ付きのコンポーネント環境の登場によって、そのなりを潜めている気がしなくもない。 そんなCSS設計とは何だったのか、をちょっと小難しく振り返ってみます。 なお本記事では、区別のためCSS設計が「再利用可能なパーツ」とみなす単位を（あるいは慣習的に）「モジュール」、JSフレームワークにより提供される単位を「コンポーネント」と呼びます。 CSS設計が行っていたこと 「CSS設計」と聞くと Block__Element–Modifier という形式の長ったらしいクラス名を付けることだ
はじめに 今回は『CSS設計完全ガイド』という書籍の内容を元に、実際のホームページを見ながらCSS設計にふれてみよう！という内容になっております。 とりあえずデザインやデモサイトを見ながらHTML、CSSを使ってコーディングできるけど、これからどのようにレベルアップすれば良いかわからない。 CSS設計って聞いたことあるけど、難しそう... そんな方に読んでいただければと思います。 CSS設計を始めるための目を養う CSS設計において大切な２つの法則があります。 抽象化する 分ける 「抽象化するってなに？」「分けるってなにを？」って感じだと思いますので、よりわかりやすくすると 共通する部分を見つける （パーツの大きさ・役割で）分ける となります。 では、上のことを意識しながら弊社のホームページを眺めてみてください。 共通する部分はわりと見つけやすいのではないでしょうか。 例えばこんなものが挙
はじめに この記事は『CSS設計完全ガイド』という書籍の内容を元に、実際のホームページを見ながらCSS設計にふれてみよう！という内容になっております。 前回は、コンポーネントがmarginなどのレイアウトに関わるスタイルを持ってしまうと使いまわすことが難しくなるため、マルチクラスで対応するという「BEM」の「Mix」という書き方をご紹介しました。 今回はそのマルチクラスにおけるもう１つのメリット「詳細度を一定に保つ」というテーマで、そもそも詳細度ってなに？というお話からしていきたいと思います。 前回の振り返り 最初に軽く前回のおさらいをしておきます。 メディアが複数並んでいるレイアウトで、そのメディアコンポーネント自体にmargin-bottomを指定せず、.service-mediaというクラスを付与して、それにmarginを担当させよう、というお話でした。 詳細度について マルチクラス
今回読んだ本 Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 発刊されたのが2014年とおよそ10年前の本になりますが、Web制作においてカオスなCSSに陥らないよう、基本的なCSSのルールから主にコンポーネント設計の手法について書かれています。 以前『CSS設計完全ガイド』という、同じくCSS設計の書籍を読んだことがありましたが、こちらの方がより（文章量的に）ライトで、どちらかといえばCSS設計の概念的な部分で参考になる点が多かった印象です。 自分のCSS設計の現状 普段CSS（SCSS）を書くときは、このあたりを気をつけて臨むようにしています。 SCSS＋BEM記法を使用 セレクタにHTMLタグ、idは使用しない 極力HTMLの構造に依存しないスタイルの当てかたをする（つもり） 既に定義されているスタイルの打ち消しは避ける ハイライ
フロントエンド開発やCMSでのプロジェクトにおいて、CSSはデザインとサイトパフォーマンスに直接影響を与える重要な要素です。だからこそ、CSSの設計やパフォーマンスの最適化が必要です。この記事では、効率的なCSS設計と最適化のベストプラクティスについて解説します。 良いCSS設計をするためには… FLOCSS、BEM、ABC-CSSといった種々のCSS設計手法がありますが、共通の目的は保守しやすく、拡張性が高く、再活用可能で効率的なコードを作ることです。設計方法に多様なルールや方法論がある中で、基本的な目的をしっかり把握して活用することが大事です。それにより、新たな設計アプローチへの適応も柔軟に対応できます。 シンプル要素から設計する シンプルな要素からコンポーネント化し、状況に合わせて少しずつコードを組み立ていくと、効率的な開発に繋がりやすいです。コードの繰り返しも最小限に抑えられ、何よ
はじめに こんにちは、デジタルエンジニアリング部の島田です。 今回はフロントエンドエンジニアにとって基礎的でありながらもはっきりとした正解のない「CSS設計」について、記事を書きました。 私が長らく試行錯誤し落ち着いた、主流の設計手法の（主観的ですが）良いとこどりをしたものをご紹介したいと思います。 CSS設計を考える理由 CSSに触れたことがある人であれば分かるかと思いますが、CSSはLP1ページであろうと数百行の記述になりがちです。 また、サイトの規模が大きくなればなるほど、CSSを1ファイルで保守をしていくのは難しくなっていきます。 そのために考えられたのが「CSS設計」というものであり、内容としては主にクラスの命名規則やファイル構成をルール化したものになります。 どんな基準で作られているか 皆さんは「よいCSS」とはどんなものだと思いますか？ 「よいCSS」には有名な4つの定義があ
はじめに この記事は『CSS設計完全ガイド』という書籍の内容を元に、実際のホームページを見ながらCSS設計にふれてみよう！という内容になっております。 前回は、コンポーネントがmarginなどのレイアウトに関わるスタイルを持ってしまうと使いまわすことが難しくなるため、マルチクラスで対応するという「BEM」の「Mix」という書き方をご紹介しました。 今回はそのマルチクラスにおけるもう１つのメリット「詳細度を一定に保つ」というテーマで、そもそも詳細度ってなに？というお話からしていきたいと思います。 前回の振り返り 最初に軽く前回のおさらいをしておきます。 メディアが複数並んでいるレイアウトで、そのメディアコンポーネント自体にmargin-bottomを指定せず、.service-mediaというクラスを付与して、それにmarginを担当させよう、というお話でした。 詳細度について マルチクラス
「無料」のチケットから「アーカイブ視聴を含む」のチケットに切り替えるには、ご自身でキャンセルしてから再度お申し込みください（終演時刻まで）。終演後はSTORES、および、サブスクでもアーカイブを扱っています。 コンポーネント時代におけるCSS設計について、半田 惇志さんに解説いただきます。 「当日の視聴は無料」スタイルで開催します。ぜひ、ご参加ください！ “コンポーネント” が登場してCSS設計はどう変わったか？ CSS設計がウェブ制作の現場で使われ始めてから久しいですが、CSS設計が考案された時代はウェブ制作の開発環境は比較的シンプルでした。しかし現代のウェブ制作の開発環境の選択肢はとても多く、また複雑化しています。中でもJSフレームワーク等による “コンポーネント” という概念の登場により、BEMなど従来のCSS設計をいつまで、ないし、どの程度利用すべきか迷っている方が多いのではないで
という笑えない状況に簡単に陥ります。 そこで今回は、CSS設計の根幹の考えを理解できる、おすすめのCSS設計を「4つ」紹介します。 他のサイト以上に、具体的なコードをたくさん出して解説します！ また、「CSS設計にはおすすめは無い」と言われますが、初学者の方に限っては、 「この設計思想だけ学んでおけば、大体なんでも対応できるようになる！！」 というものがあるので、その紹介もします。
はじめに 今回は『CSS設計完全ガイド』という書籍の内容を元に、実際のホームページを見ながらCSS設計にふれてみよう！という内容になっております。 とりあえずデザインやデモサイトを見ながらHTML、CSSを使ってコーディングできるけど、これからどのようにレベルアップすれば良いかわからない。 CSS設計って聞いたことあるけど、難しそう... そんな方に読んでいただければと思います。 CSS設計を始めるための目を養う CSS設計において大切な２つの法則があります。 抽象化する 分ける 「抽象化するってなに？」「分けるってなにを？」って感じだと思いますので、よりわかりやすくすると 共通する部分を見つける （パーツの大きさ・役割で）分ける となります。 では、上のことを意識しながら弊社のホームページを眺めてみてください。 共通する部分はわりと見つけやすいのではないでしょうか。 例えばこんなものが挙
ご存知でしょうか。 何を隠そうオレたちのQiitaではダークモードが使えます。 正直私はあまり関与していないのですが、長きに渡って運営されてきたサービスに後付けでダークモード対応は間違いなくえぐいほど大変です。 以下では、これから設計をはじめるケースで備えられるアレコレをメモしておきます。 カラーパレットの設定 これからCSSの設計をはじめるならカラーパレットの設定はもはや必須です。 さらにいえば以下のようなMaterial Design風の思想でやってしまうのがもっとも柔軟性というか、拡張性が高くなりそうな気がしています。 :root { // まず網羅的に色があって、 --color-red-50: #ff0000; // ... // ... // 機能ごとに再代入されるやつ --color-text-error: var(--color-red-50); // ... // ...
ホームページを眺めながらCSS設計の初歩を学ぼう - Qiita
はじめに 今回は『CSS設計完全ガイド』という書籍の内容を元に、実際のホームページを見ながらCSS設計にふれてみよう！という内容になっております。 とりあえずデザインやデモサイトを見ながらHTML、CSSを使ってコーディングできるけど、これからどのようにレベルアップすれば良いかわからない。 CSS設計って聞いたことあるけど、難しそう... そんな方に読んでいただければと思います。 CSS設計を始めるための目を養う CSS設計において大切な２つの法則があります。 抽象化する 分ける 「抽象化するってなに？」「分けるってなにを？」って感じだと思いますので、よりわかりやすくすると 共通する部分を見つける （パーツの大きさ・役割で）分ける となります。 では、上のことを意識しながら弊社のホームページを眺めてみてください。 共通する部分はわりと見つけやすいのではないでしょうか。 例えばこんなものが挙
拡張性・メンテナンス性を高めるCSSの考え方 – FLOCSS+オリジナルルールによるCSS設計 | ファブリカコミュニケーションズ
はじめに CSS設計の重要性は、フロントエンド開発において無視できないテーマとなっています。グローバルCSSを使用する場合、それらを適切に管理しないとスタイルの競合や予期しない表示崩れなどが発生する可能性があるため、メンテナンス性や拡張性を意識したCSS設計が必要となります。不十分な設計では新しい機能やページを追加するたびにコードが複雑化し、最終的には管理が困難なコードに陥るリスクが高まります。 さらに多人数による開発や長期間にわたるプロジェクトでは、統一されたコーディング規約や構造がなければチーム内でのコミュニケーションが困難になることもあります。良いCSS設計はコードの再利用性を高めるだけでなく、デバッグやテストが容易になるというメリットもあります。 このような問題を解消するためには、BEMやOOCSS、SMACSSなどのCSS設計パターンを適用することが有効です。これらのメソッドはC
HTMLとCSSをコーディングしている人は、行数の多いコードになってくると、DOM構造だったり、classの命名だったり、selectorの煩雑さがカオス状態になってしまった経験があると思います。 これはJavascriptやPHPをプログラミングしていても同じ事が起きます。 個人的にエンジニアのスキルは作れるプログラムの大きさに比例すると思います。 MVCとFLOCCS そして、ある一定まで行くと、どんなに大きなプログラムになっても淡々と書き続けていくことができるようになります。 そんなプログラミングの構造思考として、MVCという構造設計指針がありますが、 CSSにも似たような設計指針として、FLOCCSというのがあります。 MVCやFLOCCSの実際の内容については、検索するとたくさん出てくるので、Webコーディング、プログラミングをすると言う人で、まだ知らないという人は是非一度は学習
![[CSS] 設計に便利っぽいfloccsを自分なりにバージョンアップする話](https://cdn-ak-scissors.b.st-hatena.com/image/square/88ecd7b00a841102dabac542f3eae11ac80a625a/height=288;version=1;width=512/https%3A%2F%2Fblogger.googleusercontent.com%2Fimg%2Fb%2FR29vZ2xl%2FAVvXsEiBmHpCGSyS_2ik8stMi3NN956lfXNNSaHAQlr-t0OCLMILQRCJ8mAtatepKAL086YEUj93E4_ZJ1wGqmo22w1kj1op_0RR02ROGcS2lKf7NiDWHZBSGy44P8YoSSREzGnSsXWvIhtwiXoJVIMBlHIB5aItaOIj16wAdFry_x-nEx16HtGEMJrZRZdy%2Fw1200-h630-p-k-no-nu%2Fcss.png)
はじめに この記事は『CSS設計完全ガイド』という書籍の内容を元に、実際のホームページを見ながらCSS設計にふれてみよう！という内容になっております。 前回はCSS設計の第一歩として、「抽象化」・「分ける」 という２つの視点からホームページを眺めてみて、その中で共通するメディアやボタンといったコンポーネントについてお話ししました。 今回はそこからもう少し視野を広げて、複数のコンポーネントが集まったセクションがあり、そのコンポーネント同士の隙間(margin)をどのように設定するか、というテーマで考えていきたいと思います。 前回の振り返り 最初に軽く前回のおさらいをしておきます。 ボタンとメディアという２つのコンポーネントの関係について説明しました。 このメディアにはボタンが内包されており、ボタンのクラス名を.media-btnとするのか、.btnとするのかという問題でしたね。 そして、この
『ITCSSを採用して共同開発しやすいCSS設計をZOZOTOWNに導入した話 - ZOZO TECH BLOG』へのコメント
ブックマークしました ここにツイート内容が記載されます https://b.hatena.ne.jp/URLはspanで囲んでください Twitterで共有
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML,CSS初めて１ヶ月ぐらいの人に知って欲しいCSS設計のこと - Qiita
CSS設計とは何だったのか？と、コンポーネント環境との関わり
ホームページを眺めながらCSS設計の初歩を学ぼう - Qiita
ホームページを眺めながらCSS設計について学ぼう【詳細度編】 - Qiita
実務で使うCSS設計を学ぶ『Web制作者のためのCSS設計の教科書』 - Qiita
CSS設計とパフォーマンス向上のためのベストプラクティス | techlab / baigie
CSS設計を数年試行錯誤して辿り着いた一つの答え（2024年版）
ホームページを眺めながらCSS設計について学ぼう【詳細度編】 - Qiita
“コンポーネント” が登場してCSS設計はどう変わったか？
CSS設計はどれがいいのか？主流・おすすめはこれだ！【コードやディレクトリ構成も紹介】｜しょーごログ
ホームページを眺めながらCSS設計の初歩を学ぼう - Qiita
ふんわりCSS設計でダークモード対応に備える - Qiita
[CSS] 設計に便利っぽいfloccsを自分なりにバージョンアップする話
ホームページを眺めながらCSS設計の初歩を学ぼう【BEM Mix体験編】 - Qiita