CSSに死を！これはJSerの叫び！ #kbkz_techCSSの問題 セレクター設計が辛い 特に大規模化する場合、「CSSの問題」===「セレクターの問題」と言っていい （それ以外にもあるけど、大規模化するとほぼ確実にセレクターは問題になる） なぜ大規模化するとセレクターが辛くなるのか 「隠蔽ができない」 サイト全体で使用しているグローバル変数に対する定義を書いているようなもの
レスポンシブEメールデザイン
2015年1月21日 著 こもりまさあきさんの最新？著作『レスポンシブEメールデザイン』を読了。先だって、同じくこもりさんの『Responsive Email Design』を読んでいたのだけど、さまざまなリソースの紹介を通じ日頃から勉強させていただいてますので、敢えて一方的な御礼兼ねて購入。コンパクトで可愛らしい外見そのままに、さらっと読み終えられる分量ではあるものの（ソースコードに割かれたページ数もそこそこある）、新たな気づきもいただけたので買ってよかったです。こもりさんは『ごんぎつね』好きなのかしら、とか（謎）。ほか気になった点： p.31で、安心して使えるHTML要素やCSSプロパティの一覧を公開しているEmailologyの存在は知りませんでした。 p.39の注釈で、閲覧者の拡大操作を抑止する「maximum-scale=1, user-scalable=no」という指定もできる
Re: 音声出力環境における擬似要素(::before, ::after)の内容(content)の読み上げについて
Re: 音声出力環境における擬似要素(::before, ::after)の内容(content)の読み上げについて 2015年1月20日 著 音声出力環境における擬似要素(::before, ::after)の内容(content)の読み上げについて｜Web制作 W3Gを読んでの感想。文章中に「WAI-AREA」という誤記が何度か登場するの（正しくはもちろんWAI-ARIA）、いまだに修正されていないのはさておき（ [ 2015-01-20 追記 ] 既に修正していただけました）。 スクリーンリーダーや音声ブラウザなどの音声出力環境で::before擬似要素、::after擬似要素にcontentプロパティで生成した内容は多くのソフトウェアで読み上げることができます。使い方次第で、薬にも毒にもなりえます。 音声読み上げ環境は、あくまで多種多様にあるWeb閲覧環境のひとつでしかありません。
少し細かいBEMい話 - Qiita
BEMってむずかしい？ 2014年はたくさんのサイトでBEM 、もといBEMな命名規則が採用されたのではないかとおもってます。（拙著でも取り上げてます。） しかし、実際に導入されているサイトのコードをみてみると、んー、と感じることがあったり、または周りの開発者が、BEMむずかしい、といってるのを聞くことがある。 「これで合ってるの？」 むずかしい、と感じるのはたぶんBlockとElementとの関係やバランス、あとはクッソ名前が長くなってしまうことの不安にあるのではないかと考えてます。 例えば、ふとこのQiitaの記事ページのサイドバーにある、関連投稿モジュールをみてみましょう。 これをどうマークアップするか、どういうセレクタを書くかっていうのは人やプロジェクトによって全然違うし、このパターンがQiitaの中でどのくらい・どのように存在するかで変わります。 ただBEMを意識しはじめたことだ
BEM失敗談 その2 - canblr
BEM失敗談 その2 この記事はCSS Architecture Advent Calendar 2014 4日目の記事です。 1年ぐらい関わっていたプロジェクトで設計したCSSをざっくり振り返りつつ、そこで経験した失敗談を残しておこうと思います。 昨日の続きになりますが、ようやくタイトル通りBEMの話です。 BEM失敗談 その1 命名規則編 今回のプロジェクトで採用したのはいわゆるMindBEMdingで、あまり厳格にしすぎずゆるくやっていく方針でした。 冗長すぎる BEMを導入した際、ひとつのBlockに対してElementやModifierをどのようにつけていくのか、というのは特に決めていませんでした。 Moduleの中では1Blockに紐づくElementは大体1階層か2階層で、 3階層目ぐらいまで繋げる必要が出てきたら別のModuleにして…という目安で命名しています。 最初
Style Guide Template in CSS | CodyHouse
Style Guide Template A customizable Style Guide template, to gather design guidelines and share them with colleagues and clients. A Style Guide is a collection of design guidelines, to be used as a reference by teammates - and clients - while collaborating on a web project. While it's particular useful for big projects, it can be handy for small ones too. A common approach to a style guideline is
Using Object-Oriented CSS with Sass – TheSassWay.com
Nicole Sullivan first introduced the world to Object-Oriented CSS (OOCSS) at Web Directions North in 2008. Since then it has emerged as one of the leading modular systems for organizing your CSS. OOCSS is not that different from other CSS methodologies like SMACSS or BEM. All of them aim to separate content from structure by placing CSS styles in reusable modular blocks of code. In fact, I usually
[CSS]フラットなデザインに使いたい！タップ時の新しいエフェクト「波紋」のアニメーションを実装するテクニック
Googleが先日発表したAndroid Lで使われる新しいUX「Material Design」で採用されているようなタップすると波紋のように円が広がるエフェクトを実装するテクニックを紹介します。 タップやクリックでよく見かけるのは、押した感じにへこむエフェクトでしたが、この波紋はフラットにあっててなかなかいいエフェクトですね。 Material Design 波紋状のエフェクトのコードは、下記のようになります。 HTML div要素で矩形のボタンを作成します。ラベルはスタイルシートのcontent属性で配置しています。 <div id="button" class="android-btn"></div> <div id="button2" class="android-btn ink"></div> CSS エフェクトのアニメーション、ボタンのサイズや波紋の大きさは、スタイルシートで
BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号
BEMを使った命名がとても明快で、このところHTMLやCSSを書くのによく使っている。CSSのクラス名として書く場合は、BEMをCSS用に使いやすくしたMindBEMdingという書き方を採用している。最初にこれを知ったときは「こんな汚い記述の仕方は使いたくない」と思ってたんだけど、すっかり慣れて、今ではその明快さにちょっと心酔しかけているほど。 BEMの方法論とMindBEMdingのルールについてはそれぞれの文書を読んでもらうとして、それらをひっくるめて大雑把に説明すると、BEMとはBlock、Element、Modifierの頭文字を取ったもので、構成する要素をそのどれかに当てはめて命名していく方法。どの場合でも必ずBlockもしくはそのModifierがルートにあり、その中に、所属するElementもしくはそのModifierが含まれる構成になる。 Block - 構成のルートとな
BEMってどうよ的な流れ。
闇鍋 @_346_ 前にも BEM の話で疑問に挙げたけど、.foo のクラスを持つ見出しモジュールがあったとして、見出しの横にリンクがついたりすると .foo の親要素として div 等が必要になるわけだけど、その時、BEM の視点からその div にクラスをつけるとしたらどうすべきなのか？ と。 the llama @roatnek @_346_ そのdivが.fooになって.fooだったものが.foo__elementになる。見出しの横に付いたりするリンク（fooのelement）はあったりなかったりするけどそれでいいと思う。 the llama @roatnek BEMは、というかああいう厳密なネーミングルールはJavaScriptから触るとすごく便利。でもそのちょっとしたメリットのために「すべてに名前を付ける罰ゲーム」をやらなあかんのは割に合わんのが実感。
Accessible Mega Menu
1. Perceivable Information and user interface components must be presentable to users in ways they can perceive. 1.1 Text Alternatives Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language. 1.1.1 Non-text Content 1.2 Time-based Media Provide alternatives for time-based media. 1.2.
WebアイコンフォントFont AwesomeのSCSS版を使ってみる | DevelopersIO
画像作るのって面倒ですよね。最近はRetinaディスプレイの対応で解像度別に画像を作らなければならない機会もあると思います。個人的にはできるだけ画像は使いたくない。少し前に登場したWebアイコンフォントっていうテクニックがありますが、これを自作するのはかなり面倒です。そんなわけで少し前から話題になっていたWebアイコンフォントを詰め合わせたCSS「Font Awesome」を使ってみることにしました。 Webアイコンフォントを自作した時の記事も過去に書いているのでよければこちらもどうぞ。 【前編：フォント作成】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応 【後編：Webフォント化】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応 注意 今回は継承したり、Classを書き換えたりできるSCSS版を使ってみたい
SMACSSを試す - rono23
Railsで小さなwebアプリを作り始めたけど、その際に、SMACSS（スマックス）を試して見ることに。 SMACSSを選んだのは、単にBEMはちょっと見た感じ好きになれなかったり、メリット・デメリットとか調べるのがめんどくさかったからです。 あと、「この手のやつは、サービスを中長期的に運用してみて、初めてその真価がわかるよー」的なことをお世話になっている方々から伺ったのも1つです。 ぐだぐだ言ってないで、さっさ動くもの作って、公開しろ、ハゲチャビン！ 公開しねぇ奴に発言権ねぇから！おめーの席ねぇから！お゛め゛ぇ゛の゛席゛ね゛ぇ゛がら゛あ゛！ SMACSSは、CSSの書き方を5つにカテゴライズしたスタイルガイドみたいなもんです。 SMACSSの5つのカテゴリー base : body, h1, aとか layout : .l-grid、. l-constrainedとかレイアウト関連。クラ
40 CSS3 Animated Button Tutorials And Experiments
In this post, we have compiled a useful set of CSS3 animated button tutorials and different experiment that may fascinate you. As we all know that CSS3 is the most important and crucial aspect of the web designing that can make your website even more appealing and interactive for your visitors. Since the world of internet is changing and people tend to like those sites that have more interactive e
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
メンテナブルでありつづけるためのCSS設計
How to create a radial menu in CSS?
Summary of http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/ エッセンスだけ訳。翻訳の正しさは微妙。
https://github.com/juno/bem-methodology-ja/blob/master/definitions.md
How to Create a Simple and Stylish Pricing Table using CSS
今必要なCSSアーキテクチャ
