要素内容に依存する幅の指定について | Unformed Building

2013/04/15 52 users 指定 Safar MdN 草案 Firefox

要素内容に依存する幅の指定についてのメモです。 これらは CSS basic box model (草案) に記載されており、MDN のページ に分かりやすく説明されています。 本来、これらは幅だけでなく高さの指定にも使えるようなのですが、まだ実装されていませんので確認できません。 2013年4月現在、幅の指定として使えるブラウザは Firefox と Google Chrome です。Safar... 続きを読む

CSS と SVG で曇りガラスのような効果を作る | Unformed Building

2013/03/01 132 users SVG CSS Firefox カラス ブラウザ

2011年の9月に CSS と SVG filter でガラスっぽい効果をつける というのを書きましたが、これは Firefox のみを対象としたものでした。 そこで今回はできるだけ多くのブラウザに対応したものを作ってみます。 完成品 Frosted glass effect with CSS & SVG 背景画像には WetFoto.com による #246 Wetlook with Beaut... 続きを読む

CSS の小数点以下の数値を各ブラウザはどのように解釈するか | Unformed Building

2012/11/21 81 users CSS Firefox 単位 数値 バージョン

CSS で小数点以下を指定できる単位で、小数点以下の数値の扱いがブラウザごとに異なっているようなので、単位別にまとめてみました。 調査時の各ブラウザのバージョンですが、Internet Explorer 9 & 10 (Windows 7), Firefox 17, Chrome 25 dev-m, Opera 12.10 となっています。調査にはブラウザ付属の調査ツールを使いました。 表が見づら... 続きを読む

最近の CSS 実装でベンダー接頭辞の外れたもの (2012年11月) | Unformed Building

2012/11/07 69 users ベンダー接頭辞 CSS radial-gradient 実装

Firefox 16, Opera 12.10, そして Internet Explorer 10 がリリースされました (Windows 7 の IE10 はまだですが)。 その中で、CSS のベンダー接頭辞が外れたものをまとめてみます。 CSS Gradients liner-gradient(), repeating-linear-gradient(), radial-gradient(),... 続きを読む

ボーダーで三角形などを作るときには transparent ではなく rgba() で | Unformed Building

2012/10/03 66 users div borde border-width height

よく CSS のボーダーを使った三角形の作り方が紹介されていますが、あれに使われている透明なボーダーのことで少し。 たとえば、こういう HTML と CSS で三角形を作るとしましょう。よく見るタイプだと思います。 <div class="test1"></div> .test1 { width: 0; height: 0; border-width: 0 200px 200px 0; borde... 続きを読む

CSS の書き方についてのメモ | Unformed Building

2012/09/25 355 users CSS メモ 書き方

どんな感じで書けば楽できるかとか、後から修正しやすいかとか、そんなことです。 ボタンのスタイリングを例に、自分の通った道を追ってみます。 今回使う HTML は次のようになっています。 <div class="buttons"> <button class="edit">Edit</button><button class="publish">Publish</button><button cla... 続きを読む

サイト制作時のメモ 2012年前半 | Unformed Building

2012/08/16 259 users サイト制作時

ここ最近でサイトを作ったときに思ったことのメモです。 個人的なサイトを昨年末と今年の7月に1つずつ、仕事でやったのが春に1つ(結局なかったことにされたけど)、今やってるのが1つ。 昨年末のは一応レスポンシブウェブデザイン、7月のと春のは普通のソリッドレイアウト、今やってるのがスマートフォンサイト。 昨年末に作ったものについてははてなダイアリーの方でも書いたし、内容は被るけど改めて。 全般 HTML... 続きを読む

CSS の勉強中に困ったら | Unformed Building

2012/07/02 726 users CSS プロパティ 目次 仕様 CSS3

CSS の勉強中に色々困ることが起きて検索するのですが、だいたい同じところに行き着くので自分用のリンク集も兼ねてまとめておきます。 仕様を確認する とりあえず W3C を見に行った方が早い。 そもそもプロパティや値について分かっていない場合はここで解決することが多い。 CSS current work & how to participate 現在の状況と仕様書の目次。 CSS3の日本語訳集 – ... 続きを読む

そのベンダー接頭辞はいつまで書くの？ | Unformed Building

2012/05/14 151 users ベンダー接頭辞 接頭辞 プレフィックス 接頭辞つき CSS

ベンダー接頭辞(プレフィックス)については最近いろいろと議論が活発ですが、そういう難しい話ではなくて、現状の CSS についての話です。 新しい CSS モジュールを使うために、ブラウザごとに接頭辞をつけなくてはいけない場合があります。まあそれについては現状では仕方ないことなんですが、接頭辞なしでも動作するようになったものでも、いつまで経っても接頭辞つきのものを書くのはどうなのかなと思うわけです。... 続きを読む

CSS Transforms についてのメモ | Unformed Building

2012/01/24 275 users メモ 自信 範囲 デモページ 自分

既に色々なデモページが作られていたり、実用されていたりする CSS Transforms ですが、ちゃんと理解したかったので調べてみました。 まだそんなに自信はありませんが、以前よりは理解できた気がします。 というわけなので、自分が分かる範囲で説明してみたいと思います。 CSS Transforms は 2D と 3D とで別になっていますが、将来的には SVG Transforms と合わせて一... 続きを読む

CSS でつまづいたポイント ― transparent, transition, box-sizing | Unformed Building

2011/11/24 84 users transparent Ｔｒａｎｓｉｔｉｏｎ CSS 過去

CSS でつまづいたポイント ― transparent, transition, box-sizing 過去に CSS でつまづいたポイントとかメモしておこうと思います。 このくらい分かっとけと言われそうですが、まあ自分はその程度だということで。 transparent について CSS グラデーションで何か黒くなるなーと思ったら、transparent を使っていないかどうか見てみましょう。 ... 続きを読む

CSS アニメーションの基礎 | Unformed Building

2011/10/07 531 users 基礎

今さらながら CSS animation の使い方が分かってきたので、プロパティなどを簡単にまとめておきたいと思います。 これを書くにあたって、以下の2つを参考にしました。 CSS Animations Editor’s Draft 25 July 2011 CSS animations – MDN 上のは dev.w3.org にある、2011年7月25日版のエディターズドラフトです。 ちなみに... 続きを読む

斜めグリッドを使ったデザインのウェブサイト集 | Unformed Building

2011/09/22 138 users インパクト ウェブサイト集 基準 デザイン サイト集

ここ最近のことなのですが、綺麗なデザインのサイト集なんかを見て回っていると何度か斜めグリッドを基準にしたデザインのサイトを見かけました。 こういうの何て言うんでしょうね。斜めグリッドなので Diagonal Grid Based Webdesign とでも言えばいいんでしょうか。 どのサイトも非常にインパクトが強く印象的だったので、数は少ないですが紹介してみようと思います。 Jessica Cal... 続きを読む

CSS3 での背景指定方法のまとめ | Unformed Building

2011/08/23 205 users プロパティ CSS モジュール ボーダー CSS3

CSS であれこれやっていたら、まず間違いなく使うであろう背景関連のプロパティ。 CSS3 ではこれまでより多くの指定ができるようになります。 それらの新しいプロパティや値はいったいどういうものなのか、調べてみました。 主に参考にしたのは以下の2つです。 CSS Backgrounds and Borders Module Level 3 現在の仕様です。 CSS 背景 & ボーダー モジュール ... 続きを読む

[翻訳]モバイル向けの CSS Media Queries は見掛け倒しである | Unformed Building

2011/05/18 95 users 原文 翻訳 セクション モバイル向け 怪しい場所

この記事は、2010年8月3日に Jason Grigsby によって書かれた CSS Media Query for Mobile is Fool’s Gold を翻訳したものです。 画像・表・リンクなどは掲載していませんし、翻訳が怪しい場所がところどころにありますので、ちゃんと読みたい方は原文を参照してください。 翻訳部分は次のセクションとなります。 CSS Media Query for M... 続きを読む