Atomic DesignとCSS設計 | 第1回 Atomic Designとは何か
Atomic DesignとCSS設計 第1回 Atomic Designとは何か 「Atomic Design」という言葉を聞いたことがある人は多いかと思いますが、実際それがどのようなものなのか、理解しにくい部分があります。本記事ではAtomic Designについて学び、それをCSS設計に活かすにはどうしたらよいかを考えます。 はじめに Atomic Designという言葉を聞いたことがあるでしょうか。Atomic Designとは、デザインシステムを中心とした設計の方法について書かれた書籍です。 Atomic Design by Brad Frost 著者のBrad Frost氏は、書籍の内容をすべてWeb上で公開しているため、上記サイトで読むことができます。 Atomic DesignについてWebで検索していろいろな記事を眺めていると、このAtomic Designの設計思想がコ
Flash of unstyled content - Wikipedia
Some of this article's listed sources may not be reliable. Please help improve this article by looking for better, more reliable sources. Unreliable citations may be challenged and removed. (June 2023) (Learn how and when to remove this message) FOUC when loading Wikipedia's main page. A flash of unstyled content (FOUC, or flash of unstyled text)[1][2] is an instance where a web page appears brief
FOUT, FOIT, FOFT | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Remember FOUT? When using a custom font via @font-face, browsers used to display a fallback font in the font stack until the custom one loaded. This created a “Flash of Unstyled Text” — which was unsettling and could cause layout shifts. We worked on techniques for fighting it, for instance,
flexboxのバグに立ち向かう（flexboxバグまとめ） - Qiita
注）本文中の「コンテナ」「アイテム」について 本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。 コンテナ display: flexや、wrap指定などをする 複数のアイテムを含む アイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題（Safari） Chrome Safari 潰れてますね。 起きる条件 Safari なぜ コンテンツの最小サイズを尊重してくれない模様 どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定（デフォ値なので、指定がなければそのままでOK） Safari10にて修正済み（つまり、SierraとiOS 10以降では対応不要） 2. align-items:center はみ出す問題 Chrome IE11 はみ出てますね。 起きる条件 IE10-11 f
もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita
HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか？ モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。 今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。 「日本語、文字詰めできないかな？ほら、このカタカナとかキモい。。」 「Webで文字詰めだと？無理なんだよあきらめな！」なんていう時代はもうとうに過ぎ去っています。OpenTypeのフォントであれば、日本語でもちゃんと文字詰めできるんです。 .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } ↓こんなかんじで
宣言ブロックのCSS設計 - kojika17
日本語で「CSS設計」を検索すると、記事やつぶやきなどでセレクタの命名規則に関する話題が多いです。 CSSを設計する上で、命名規則は重要な要素でしょう。 簡単なセレクタ名だと他のスタイルと重複する可能性もあります。他のスタイルと重複しないようにセレクタの子孫数を増やしてしまうと、今度はスタイルの取り回しが悪くなります。 またデザインをコンポーネントに分ける粒度について紹介されていますが、命名規則の分け方のように紹介されているよう感じます。 論理的に構造をわけて命名していくため、覚えやすく、伝えやすさもあわさって、現在の「CSS設計 = 命名規則」のような構図ができあがったと感じています。 CSS設計は命名規則だけか 命名規則はCSS設計において、重要な要素です。 しかしCSSは命名規則させ気を付ければ良い、というものではありません。 私は、すでにあるサイトの一部のコンテンツの作成やすでに用
実装を引き受ける前に詰めておくべきWebフロントエンドの想定漏れチェックシート - Qiita
リキッドレイアウトのように幅が常に変動するレイアウトのデザインは、動かないカンプからは実際の挙動が読み取れず、デザイナーの意図が汲み取りきれないことが多い。また、複雑化するアニメーションの実装においても、カンプだけではコミュニケーションに不備が生まれてしまう。ほかにも、CMSを使った案件ではデザインカンプと実際のデータの間に齟齬がある可能性もある。 実装効率を高めてスケジュール通りに仕事を終わらせるには、とにかく事前に仕様を固めることが大事だ。ワイヤーフレームやデザインの途中の段階からなるべくデザイナーとコミュニケーションを重ね、想定外の要件が発生しないように気をつけるべきだろう。 この記事では、デザイナーやフロントエンドエンジニアが見落としがちなWebフロントエンドの課題について列挙していく。 ホバー表現を後から指示される ツッコミ 後から仕様追加されると困るから先に決めて! メモ 最近
CSS Modules 所感 - morishitter blog
CSS Modulesという、CSSの新しい設計概念・指針のようなものがある。 CSS Modulesチームの1人であるGlen Maddern氏が書いた「CSS Modules - Welcome to the Future」という記事の翻訳がバズっていたので、僕がCSS Modulesについて思ったことをまとてみる。「CSS Modulesとは何か」ということは、上記の記事に書かれているのでここではあまり触れない。 CSS Modulesとコンポーネント設計 CSSのルールセットは全てがグローバル定義であり、CSS（Cascading Style Sheets）というスタイルシート言語の最大の特徴である"カスケーディング"という機能により、CSSファイルを見ただけでそのスタイルの影響範囲を理解することは難しい。 CSS Modulesは、CSSのルールセットの影響範囲を、Webアプリケ
Cascading Style Sheets Level 2 Specification (Editor's Draft)
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification W3C Recommendation 07 June 2011, edited in place 12 April 2016 to point to new work, edited in place 07 December 2021 to correct markup. This version: http://www.w3.org/TR/2011/REC-CSS2-20110607 Latest version: http://www.w3.org/TR/CSS2 Previous versions: http://www.w3.org/TR/2011/PR-CSS2-20110412 http://www.w3.org/TR/2008/REC-CSS2-
mb_strimwidth関数なんて必要なかった（？） - Qiita
$str = mb_strimwidth($str, 0, 10, '…', 'UTF-8'); しかし出力結果が意図したとおりになるためには、以下の条件が揃っている必要がありました。 等幅フォントを使用している 半角幅になる特殊なマルチバイト文字を使用していない（半角カナなど） 実はこれらの問題を鮮やかに CSS3 だけで解決する方法がありました。 実装 以下のようなクラスを適用すれば実現できます。 .trim { /* 任意 */ min-width: 100px; /* 最小表示幅の指定 */ max-width: 200px; /* 最大表示幅の指定 */ /* 必須 */ white-space: nowrap; /* 空白で改行させない */ overflow: hidden; /* はみ出た部分を表示しない */ text-overflow: ellipsis; /* はみ出
うわっ、私のサイトBootstrapくさすぎ!? たった数文字変えるだけでBootstrapのくさみが抜ける7つのCSSテクニック。
なんか、このサイトBootstrapくさい。そう感じることはありませんか? その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。 それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。 そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。 しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1. line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。 欧文をベースに設計されたBootstrapをそのまま
CSSレイアウトを学ぶ
position さらに複雑なレイアウトをつくるには、position プロパティについて理解する必要がある。取り得る値はたくさんある。名前には意味がないので、覚えるのはなかなか難しい。１つずつ見ていこう。だけど、このページをブックマークしておくのが無難かもしれない。 static .static { position: static; } <div class="static"> static はデフォルト値だ。position: static;を設定した要素は、どんな方法でも位置を指定できない。 staticな要素は、位置指定無効な要素とも呼ばれている。また、それ以外の要素は位置指定有効な要素と呼ばれる。 </div> relative .relative1 { position: relative; } .relative2 { position: relative; top: -2
line-height の値には単位なしが良いとされる理由
CSS で行ボックスの高さを指定する line-height 値に、em(length) や %(percentage) などの単位を付けて指定しているサイトを意外と見かける。それは間違いではないし、例えばナビゲーションとかでブロック要素の垂直センターに配置するために意図的に指定しているんであれば良いんだけれど、そうでないなら line-height 値には単位なし (number) で指定した方が良いのにとか思ったりする。その理由は Eric's Archived Thoughts: Unitless line-heights でも分かりやすく説明されているんだけど、ちと劣化コピーしてみる。 単位ありと単位なしの違い 手っ取り早く説明するために、サンプルを作ってみた。p 要素があって、その中にインライン要素の em で一部分を強調している。分かりやすいようにそれぞれの font-size
paddingとline-heightとheightの考察 - Webデザインの方法 | Webデザインメソッド
要素の高さ 始めにHTMLのbody部分を下記のように記述し <body> <h1>ｈ１タグ Google 24px</h1> <h2>ｈ２タグ Google 20px</h2> <p>ｐタグ Google 16px</p> </body> フォントサイズを下記の値に固定して考える ＊ { margin: 0; padding: 0; }/* ユニバーサルセレクタのリセットの*が表示バグで記述できないのでここでは大文字になっています */ h1 { font-size: 24px; } h2 { font-size: 20px; } p { font-size: 16px; } まず始めに各要素のバックグラウンドカラーをそれぞれ変更して高さを確認すると、 「グ」の点の上の部分から「g」や「p」の下部分までがフォントサイズなのが確認出来る つまり、日本語のみだと下部分に余白が多くなり逆に英文
CSSでもオブジェクト指向を実現する書き方 - Qiita
英語版はこちら。 OOCSSとは異なり、CSSでちゃんとオブジェクト指向を実現するための方法について解説します。 0. まず「オブジェクト指向」とは 「オブジェクト指向」はIT業界を支えている重要なパラダイムのひとつで、JavaScriptを含む様々なプログラミング言語でサポートされています。特徴としては「型」や「クラス」といった雛形を持ち、雛形から生成された「インスタンス」とクラスとを区別します。 クラスとインスタンスとを区別することで、長期的にメンテナンスしやすいプログラムにすることができます。クラスを修正したり、インスタンスに変更を加えたり、それぞれ自由に拡張できます。 こういったオブジェクト指向プログラム言語（OOPL）に共通の特徴は、CSSでは見られることがありませんでした。2008年にOOCSSという手法が登場した後もです。 それも今日でお終いです。さっそく見ていきましょう。
もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife
class名やid名って付ける時悩みませんか？ 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ！？ 2010年6月10日追記： この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bootstrap 4 Cheat Sheet - All Classes List with Descriptions 2023
https://mizchi-sandbox.github.io/grid-generator/
Amazon.co.jp: HTML5&CSS3デザインブック: エビスコム: 本
Amazon.co.jp: XHTML&CSSデザイン |基本原則、これだけ。: こもりまさあき, 神森勉, 小林信次, 矢野りん: 本
