Sassの変数の仕組みとOOCSS
A List Apartに掲載されたA Vision for Our Sassという記事を読んでいた。ここに書かれていることが正しいとすると、やはりOOCSSあってのSassなのかなという思いを強くした。でも、今のSassの変数の仕組みとCSSのフラットな構造を考えると、Sassを使ったOOCSSの実現は既に詰みかけている局面だと考えることが多い。 例えばFunction over Presentationの例を見てみよう。 $primary-color: #b32293; //magenta $secondary-color: #2f6b49; //green これは確かに機能すると思う。しかし大体においてカラーパレットは最低でもあと5色くらいは必要になることが多いだろう。もちろん$primary-colorのバリエーションであったりするわけだが、それらの名前付けはどうするのだろうか。例
透過PNGをSVGを利用して軽くするテクニック
透過PNGは現状では唯一に近いフルカラーの透過画像を作成する手段だが、ファイル・サイズが大きくなりがちだ。対してJPGはファイル・サイズという点で大きく優るが、透過することは出来ない。このあちらを立てればこちらが立たずの問題をSVGのマスク機能を使って透過だけを受け持つPNGとJPGを組み合わせることで両立させるテクニックを知った。 透過させた画像をまず普通に作る。それから透過してないJPG画像と、透過を反転させてマスクに使うPNG画像を生成する。それらをHTMLでSVGのmask要素をインラインに書くことで組み合わせる。ベースとなるJPG画像が一般的にファイル・サイズに優れ、マスクに使うPNGは空白が多いこと、SVGの記述はごく短いもの、というわけで最終的に低ファイル・サイズが実現できる。 SVGのセキュリティ上の制限により、HTMLにインラインで記述するケースでしか使えないのでCSSの
CSSのローディング・アイコンのコスト
今までは主にアニメーションGIFで作られていたローディング・アイコンをCSSアニメーションで作るみたいなのが流行っている。面白いとは思うし、ちゃんと作ればスケーラブルなので便利そうでもある。けれどもローディング・アイコンを表示するための空要素が必要になり、かつ後にそれを消さなくてはならない。CSSだけだと面倒くさそうだ。 どういうローディング・アイコンかはこの際問題ではないので、とりあえずmain要素以下に何かしら(仮にサムネイルとする)をロードするまでローディング・アイコンを表示することを考えてみる。普通はJavaScriptでローディング・アイコンの追加→サムネイルのビルド→ローディング・アイコンの削除→サムネイルの追加とやるわけだけど、ローディング・アイコンの追加と削除でDOM操作を伴うのはコストがある気がする。 <main id="result"> <div class="spin
BEMを使ったSassファイルの整理
このウェブサイトのSassファイル群はずっとフラットなファイル構成でやっていた。主にSassが相対パスの修正を行うことができないことが理由だったけど、最近はポストプロセスすればどうにでも出来そうな感じなので、あまり気にせず整理することにした。単純にカテゴリ分けするだけでも良いのだけど、BEMを応用してやってみている。 CSSのクラス名及び変数やプレースホルダー・クラスにはまだ手を付けず、まずはBEMツリーとルールセットの配置の対応を作るところから始めた。 ファイル名でブロック ディレクトリでブロックのネスト セレクターの1段階のネストでエレメント &を使ったセレクターのネストでモディファイア 以上のようなルール付けの元にやってる(未完成)。 ブロック scss/ ├ _header.scss └ header/ ├ _logo.scss └ _site-navigation.scss ファ
ウェブデザインにおけるセマンティック・バージョニング
アプリケーションの世界ではセマンティック・バージョニングが広く受け入れられた……かどうかはわからないが、採用例はすごく増えている印象だ。ウェブデザインではどうかというと、ウェブ・アプリケーションのバージョニングに追随しているだけであったり、そもそもバージョニングされていなかったりするような気がする。ウェブデザイン、主にCSS(とCSSプリプロセッサー)においてセマンティック・バージョニングを導入するとすると、どのようなタイミングでメジャー、マイナーそしてパッチ番号を増やせば良いのだろうか。 セマンティック・バージョニングの中心となる概念は後方互換性だ。後方互換性が: 失われる: メジャー 失われない新機能の追加: マイナー 失われない修正: パッチ 数語でまとめるとこのようになるだろう。ウェブデザインにもこれを当てはめるとすると、ウェブデザインにおける後方互換性とは何なのかということをまず
CSSポストプロセッサー時代の到来
SassやLESSといったCSSプリプロセッサーは市民権を得たと言って良いと思う。しかしそれらCSSプリプロセッサーは開発という段階にのみ利をもたらすもので、今のところはそれ以上ではない。CSSを実際にユーザーに届けるまでには、開発だけではなくレビューとリリースという段階もある。レビューとリリースも確実性を持って効率的に行うためには、CSSポストプロセッサーと総称されるようなツール群が必要になるだろう。 この文書はFrontrend Advent Calendar 2013の4日目への記事として寄稿した。明日は@hilokiさんがスタコラサッサと書くようだ。 目次 CSSポストプロセッサーとは CSSプリプロセッサーの出力するCSS CSS Lint 開発用とレビュー用、リリース用のCSS CSSポストプロセッサーのユースケース ベンダー拡張プリフィックスの付加 Media Queries
CSSでフォント・ファミリーのショートカットを作る
最近のブラウザーではlocal()を使ってフォント・ファミリーのショートカット(的なもの)を作ることができる。CSS Fontsモジュール仕様のsrcプロパティーの項にも思いっきり書いてあるんだけど、今まではそんなに必要なかったのであまり使われていない。5ウェイト展開なヒラギノ角ゴのiOS 7へのバンドルと、3ウェイト展開の游ファミリのWindowsへのバンドルにより必要性が少し増えた気がする。 特に游(ゴシック|明朝)はWindows 8.1とOS X 10.9でファミリ名が違う上、少し古いFirefoxでのアレとか、OS Xには細字がないとかもあるので、色々考慮するとfont-familyプロパティーではややこしいフォント指定を行う必要が出てくる。そうやって出来た長いリストのfont-familyは読みづらく、デバッグのしづらさにつながる。local()を使ってフォント名を作り直してや
Sass 3.3の新しいデータ型: マップ
SassConfに合わせたのか、Sassの3.3 RC.1が出た。これで3.3での追加機能も固まったようなので、CHANGELOGをちゃんと読んだところ、1か月ほど前に取り込まれていた新しいデータ型であるマップについてもちゃんと入っていた。マップは、いわゆるハッシュとか連想配列とかいう名前で呼ばれるもの。 マップの書き方はリストとほとんど同じで、リストの各要素にコロン(:)区切りでキーと値をワンセットで書く、というようなもの。例として、プロ野球セ・リーグの各チーム色を背景色にしたクラスを吐くもの作ってみる。 $team-colors: ( giants: #f90, tigers: #fc0, carp: #f00, dragons: #009, baystars: #269, swallows: #03c ); @each $team, $color in $team-colors {
抄訳 RDFa Lite 1.1
この文書はRDFa Lite 1.1 (W3C Recommendation June 07 2012)の一部を日本語に訳したものです。正確な仕様についての情報を得たい方は、上記URLを参照してください。 Table of Contents 1. はじめに 2. 属性 2.1 vocab、typeof、property 2.2 resource 2.3 prefix 1. はじめに RDFaの完全な文法 [RDFA-CORE] は、人間関係や場所、イベントなどの構造化されたデータをHTMLやXML文書でかなり複雑な形で表現する事ができるよう、基本的なものから高級なものまで様々な機能を規定しています。それら高級な機能は時に構造化されたデータについてあまり詳しくない制作者によるRDFaの利用を難しくしています。この簡略化されたバージョンのRDFaは構造化データの世界の優しい手引きで、Webペー
中央(右)揃えと三点リーダーによる省略
text-overflow: ellipsisではみ出した文字列を三点リーダーで省略できる。画面サイズのバリエーションが増え続けているので、こういったなんとなくどうにかしてくれることを期待できるCSSプロパティーは積極的に使いたい。のだけど、これとtext-align: center (right)を組み合わせた場合、テキストの開始位置がChrome 28だけ変化する。 Demo: text-overflow: ellipsis and text-align Internet Explorer 10とFirefox 23ではtext-alignプロパティーの値はどれでも同じ。Chrome 28ではcenterで少し、rightでは更にもう少しずれる。三点リーダーによる省略で余った余白をtext-alignプロパティーでどう扱うか、またはtext-alignとtext-overflowプロパ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
