CSS Category Archive

CSS カテゴリの記事一覧。(4 / 13 ページ)

改めて今の技術でやってみたら面白そうな CSS コーディングの大会

2007年の 4月とかの話なので、もうかれこれ 6年近く前の話なんですが、JamGraffiti (@ichi23)さんが企画した、「画像の使用を極力控えてかっこいい CSS デザインをやってみよう大会」 ってのがありましてですね。

簡単に言えば 「css Zen Garden」 なんかと同じで、「同じ XHTML 文書に対してみんなで CSS 書いて、どんなデザインができるか遊んでみようぜ」 っていう試みなわけです。

と言っても、css Zen Garden が盛り上がってたのだって 2006年とか、所謂 Web 標準の啓蒙がとっても盛んだった時代なので、もしかするとお若い方々はご存じない (こういう事書くとあれですね、自分が歳とったのが実感できて微妙な感じですが) かもしれませんが……

Posted by:

特定の範囲内にのみスタイルを適用できる scoped 属性

HTML5HTML5 で style 要素に追加された scoped 属性は特に目新しい属性ではありませんが、ここまで正式に対応したブラウザが存在しなかったため、使う機会がありませんでした。ところが、ここにきて Firefox Nightly Builds が対応したそうなので、ちょこっと試してみます。

scoped 属性付きの style 要素内に記述されたスタイルは、文書全体ではなく、その style 要素の親要素をルートとするサブツリーに対してのみ適用されます。例えばページ内にちょっとした要素ブロックを追加したいんだけど、全体の CSS ファイルにはいちいち手を加えたくないな……なんて時に役に立つかもしれません。

Posted by:

Webkit に最適化されたサイトを IE10 に適応させるためのガイド

スラッシュドットで 「Microsoft、「WebKitはWeb標準を破壊している」と主張」 なんてストーリーが上がってて、なんぞやと思って大本の記事を見に行ったんですけど、そしたらそれが 「Webkit しか対象にしてない Web サイトを IE10 でもきちんと動作させるためにやっといた方がいいことガイド」 っていうお役立ちコンテンツだったってことで、がんばって最後まで読んだ手前、ついでなので翻訳して掲載してみようかなと思います。

Posted by:

改行削除するくらいなら gzip したらいいじゃない

いや、1バイトの無駄もゆるせねぇんだよとか、難読化したいとかなら別にやればいいんですけど、CSS や JavaScript ファイルの改行やスペースを削除しただけでファイル容量圧縮、読み込み速ーい的なこという人がいるので今さらですが書いてみます。すでに色々なところで書かれてるのでかぶるのは承知の上で。

改行や無駄なスペースなどを削除すること自体が悪いと言ってるわけではありませんのでその辺は誤解ないようにお願いします。ただ、gzip 使って圧縮するのに比べたら、改行削除して削れるファイルサイズなんて微々たるものです。もちろん、両方やれば最大限ファイルサイズを削減できますので gzip 使うのとあわせて改行削除もやったらいいと思いますけども。Sass とか使ってるなら CSS の改行やスペース削除なんかは簡単だしね。

Posted by:

Web フォントでアイコン表示。 Font Awesome 使ってみた

Font AwesomeBlog のデザインをリニューアルしました報告でもちょっと書いたんですが、アイコン関係を Web フォントを使ってやってみました。その時に利用させてもらったのが 「Font Awesome」 でして、今回はその簡単な使い方について書いてみようと思います。

Posted by:

Adobe のフォント 「Source Code Pro」 試してみた

Source Code ProPublickey さん経由で知ったんですが、Adobe さんがソースコードを見やすく表示するためのフォントとして、その名も 「Source Code Pro」 というフォントを発表したとのこと。

そこで、早速ですがこの Blog でも使ってみました。Google Web Fonts 等でも使用できるようになっていますので、試すのは簡単です。

実際にこの記事のソースコード部分も 「Source Code Pro」 で表示されていると思いますので確認してみてください。確かに見やすいかも。

Posted by:

HTML5 開発者向け iPhone 5 / iOS 6 での変更点等まとめ

iPhone 5iOS 6 がリリースされましたがアップデートされましたか?私はマップアプリをよく使うのですが、早速アップデートした方々の、マップがぁぁという叫びにびびってまだアップデートできておりません…

で、まだ私の手元の iPhone 4S では iOS 5 が元気に動いている今日この頃ですが、iPhone 5 / iOS 6 における変更点などを、開発者向けにまとめた海外記事がありましたので、簡単にですが日本語にしてご紹介。対訳ではなくて、内容だけ伝わるようにかなり変更していたり、省略もしていますので、詳しくは原文をご確認ください。

Posted by:

「すべての人に知っておいてほしい スマートフォンサイトデザインの基本原則」に寄稿しました

すべての人に知っておいてほしい スマートフォンサイトデザインの基本原則えっと、久しぶりに Blog 書いたと思ったら宣伝で恐縮ですが…MdN さんより 8月27日に発売される書籍 「すべての人に知っておいてほしい スマートフォンサイトデザインの基本原則」 に寄稿しました。リンク先の Amazon さんでは予約受付中です。

過去に出版されている、同シリーズの書籍、「すべての人に知っておいてほしい Webデザインの基本原則」 でも書かせて頂きました (参考エントリ) が、今度のはスマートフォンサイトやアプリケーションを作成する際に役に立つ内容の書籍になっています。

Posted by:

Firefox 13 における HTML5 canvas 要素のアクセシビリティ

HTML5昨日 (6月6日) に Firefox の最新版であるバージョン 13 が正式リリースされました。

この Firefox 13 で実装された新機能や変更点に関しては下記の記事で紹介されていますが、

アクセシビリティコンサルティングを提供する Paciello Group の公式 Blog で、新しい Firefox 13 が canvas 要素のフォールバックコンテンツに対するフォーカスに対応したことに関する記事が上がっていましたので、紹介して見ようかと思います。

Posted by: