真のコンポーネント粒度を求めてObject Oriented CSS https://www.slideshare.net/stubbornella/object-oriented-css Bootstrap - Components http://getbootstrap.com/components/ BEM https://en.bem.info/ Atomic Design http://atomicdesign.bradfrost.com/ Enduring CSS http://ecss.io/
CSS設計を破綻させない
2016/12/3のbuilderscon tokyo 2016で話した内容です。 --- ## 資料内のリンク - "CSS is too fragile"が最初に書かれた記事？ http://www.andoh.org/2009/11/web-directions-east-2009-nicole.html - CSS ルールセット構造図 · terkel.jp http://terkel.jp/archives/2011/09/css-rule-structure/ - "デザインの意図を正確に理解した上で書かれたCSSは破綻しない" の元ネタ http://morishitter.hatenablog.com/entry/2016/07/29/204642 - CSS Stats http://www.cssstats.com/ - StyleStats http://www.st
問題を問題として認識するためにしたこと - メドピア開発者ブログ
こんにちわ、エンジニアの井原です。 どの会社も同じだとは思いますが、自社サービスをフルスクラッチしていた最初のころというのは突貫で作っている部分が少なからずあると思います。 弊社もそういった部分が多々あり、特にフロントエンドは手付かずな状態でした。 この混沌としたフロントエンドに漠然とした不安はあるものの、ルールが全くないため全員が同じ思いになってなく、何をもって悪いと言えるのかといった状態になっていました。 そのため、何が悪いのか、どうしたらいいのかという方針作りからはじめました。 本稿では、方針を作るプロセスとできた方針をいかにまもってもらうかという流れを記載します。 現状を確認する インデント..? styleプロパティ 重複したid 大量のcssファイル ロード目的以外のscriptタグとstyleタグ HTML4のころのタグ invalidなcss etc... あるべき論なルー
UIコンポーネント集 Qiita:Coat - ✘╹◡╹✘
LTを聞いているという感覚でご覧ください。 Qiita:Coat Qiita用のUIコンポーネント集 GitHub用のUIコンポーネント集をForkしてつくりはじめた レポジトリ: https://github.com/increments/qiita-coat デモサイト: http://increments.github.io/qiita-coat/ 今週月曜からやってる これはcommit数 Qiita:Coatが必要に感じた背景 全ての開発者に共通する願い 高速に開発したい 秩序がほしい (a.k.a. 最低限度の品質の保証) 開発体制の情勢に起因する理由 開発人数が徐々に増えつつある 社員11人+アルバイト3人 四半期に1人ぐらい増えてる 50人が51人になるとかならともかく、5人が6人とかになると大きく変わる その他の理由 サポートサイトや採用サイトなどQiita風のデザインを
Bootstrap 4 alpha
The Bootstrap Blog News and announcements for all things Bootstrap, including new releases, Bootstrap Themes, and Bootstrap Icons. Today is a special day for Bootstrap. Not only is it our fourth birthday, but after a year of development, we’re finally shipping the first alpha release of Bootstrap 4. Hell yeah! Bootstrap 4 has been a massive undertaking that touches nearly every line of code. We’re
Atom Flight Manual
CompanyEngineeringProductSunsetting AtomWe are archiving Atom and all projects under the Atom organization for an official sunset on December 15, 2022. January 30, 2023 Update: Update to the previous version of Atom before February 2 On December 7, 2022, GitHub detected unauthorized access to a set of repositories used in the planning and development of Atom. After a thorough investigation, we hav
リガチャなアイコンフォントをお手軽に作成する - アインシュタインの電話番号
リガチャなアイコンフォントを自作しようとするとけっこう大変そうで、そのためのアプリを揃えて操れるようになったり、リガチャの仕様を把握したり、専用のCSSを書いたりする必要がある。そういった正攻法のやり方としては、このページがとてもわかりやすかった。また、実際にそのページの方法によって制作されたLigature Symbolsも魅力的。 ところが自分が欲しいのは、Twitterで使っているアバターアイコンと、ブログのボタン等で使う5〜6個のアイコンを含んだ最小のセットで良くて、そのために前述のような本気を出して作るのは、なかなか重い腰があがらずにいたところ、アイコンフォントを手軽に生成できるサービスIcoMoonの中に、そのリガチャを作成する機能もあることに気がついた。^1 それを使ってみたら、予想以上に簡単にリガチャなアイコンフォントをサクッと作れた。 上のはそのIcoMoonを使って作っ
CSS Filters
Demo showing CSS Filter Effects 1.0, specifically the filter functions, which are being implemented in Webkit. In Webkit, filters can be applied to hw accelerated content ( e.g. img { transform: translateZ(0); } ). Support: Chrome 18.0.976.0, Webkit nightly -webkit-filter: none; blur grayscale drop-shadow sepia brightness contrast hue-rotate invert saturate opacity reset Animations: blur grayscale
Autoprefixerでdisplay: boxしたい - console.lealog();
けどできないってことでいいのかしら。 20150213: 追記 できないと思ってた時期が私にもありました。 ちゃんと設定すれば、できます。 過渡期プロパティのアイツ すーぱー便利なアイツ。 display: boxってありますよね。 もうアレなしじゃ生きていけないですよね？ 例えば上下左右で中央寄せしたい場合。 Box仕様 Flex仕様 display: box display: flex box-flex: 1 flex: auto box-pack: center justify-content: center box-align: center align-items: center 過渡期ということで、書き方が複数あったりする。 え？中間にもなんか仕様あった気がする？ 気のせいです。 ただAutoprefixerってそもそも Q. Why doesn’t Autoprefixer
HTML/CSS実体参照 - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 実体参照とは、文字や記号を表現する符号のこと。特殊な記号とか、HTMLで言う「<」や「>」のようにコードと混同されやすい文字を表現するために使います（もちろん普通の文字も打てる）。 HTMLでは、特定の文字を表現する際に数値で表現するものを「数値文字参照」、人が覚えやすい名前で表現したものを「文字実体参照」と言います。XMLでいう「文字参照 (Character reference)」と「実体参照 (Entity reference) 」に相当します。 postscript: CSSの実体参照は16進数。HTMLの数値参照（10進数）から、Windowsの関数電卓で求
CSS3も少し入れつつ自分流CSSプロパティの書き順を決めてみた
どの段階にあるかはCSS current work & how to participateで確認できます。 また、list-style、backgroundなどのように略せるものは略して書くようにしていますが、略さない場合も下に載せています。略し方については「まとめて書くことができるCSSプロパティの8つのパターン｜Webpark」をご参考に。 若干それましたが、試行錯誤して並べた結果がこちらです。普段よく使うプロパティのみ載せています。 表示に関するプロパティ まずは表示に関する内容です。見える見えないは一番大切なことということでしょうか。 display list-style list-style-type list-style-image list-style-position overflow clip visibility opacity 配置に関するプロパティ 次はどこに配置
プロパティの記述順序：CSSコーディングガイドライン
CSSプロパティの記述順序に、厳格なルールはありません。 ですが、ある程度ガイドラインを決めておいた方が、共有やメンテナンスがしやすくなります。 今日は、私が日々のタスクで使用している、ガイドライン(※CSS3は除く)を紹介しますので、ご参考ください。 参照ガイドライン１：mozilla.org Base Styles 有名なCSSコーディングガイドライン「mozilla.org Base Styles」に示されている、プロパティ記述順は以下のとおりです。 display list-style position float clear width height margin padding border background color font text-decoration text-align vertical-align white-space other text content
Reduce file size with CSS Sorting - Pete Schuster
Let me take you on a journey. In the beginning, I was using Sublime Text 2 (ST2) as my primary code editor. Then, Sublime Text 3 (ST3) came out and people at my company began to switch. They were raving about how much faster it was, the native image preview support, etc. So I decided to switch. Most of the packages that I used in ST2 were also supported in ST3, so I didn’t see much of an issue swi
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」の下部分までがフォントサイズなのが確認出来る つまり、日本語のみだと下部分に余白が多くなり逆に英文
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webアプリケーションで 60fpsを(極力)目指す
Dynamics.js
CodePen - Front End Developer Playground & Code Editor in the Browser
filter.css
jpn-filter.css - The Japanese-styled CSS Filters
CSSに死を！これはJSerの叫び！ #kbkz_tech