2012-08-16
千と千尋とradial-gradient
iOSアプリを作ったので公開申請しようと思ったんだけど、Androidアプリみたいに「アプリのサイトURL」的な項目を "http://www.yahoo.co.jp" で埋めておくと流石に怒られそうだな、と思ったのでちゃんとサイトを作ることにしました。
で、そのときにアプリのアイコン画像をサイトに載せるわけだけども、iOSのアイコンってなんか角が丸くて上の方が光った感じのものが多いじゃないですか。サイトでもアレを表示したいわけですが、自分の画像処理技術では無理＆仮に出来たとしても時間がかかることうけあいだったのでCSS3でふんばることにしました。
CSS3でフンフンする方法があることはなんとなく知っていたのですが、僕がもともと知っていた記事 ( iOSのホーム・スクリーンのアイコンをCSSでパクる - Weblog - hail2u.net ) では動作サンプルがいつの間にか真っ白になっていたりしたので、結果としてはこちらの記事 ( CSSでiPhoneアイコン風ボタン: あみつづり ) を参考にさせて頂きました。
radial-gradientは位置指定の単位に%が普通に使えるので、レスポンシブWebデザイン（笑）なサイトの場合でも対応することが出来ます。
なんかこれだけ書いてもよくわからないと思うので、動くサンプル置いておきますね。
(追記)
このへん ( IE10 のプレフィックスのない CSS3 グラデーション - IEBlog 日本語 - Site Home - MSDN Blogs ) とかこのへん ( CSS Image Values and Replaced Content Module Level 3 ) 見てると、位置の指定はcenter -> at centerとかにしなきゃダメになるっぽいですね！
Permalink | コメント(0) | トラックバック(0) | 02:34 
「ルパン三世のテーマ」30周年コンサート “LUPI...
できるポケット Twitterをスマートに使いこなす...2012-07-23
メモ
こんなのあったんですねー
http://matome.naver.jp/odai/2132892555765887301
Permalink | コメント(0) | トラックバック(0) | 17:21
2012-02-29
CSS3ではセレクタの詳細度(specificity)って結局どうなったんだっけ、という話
ホッテントリメーカーでエントリのタイトルを作るのはやめにしました。
今日とある場所で、「CSSセレクタの詳細度について説明して」「私は説明するのが面倒なのであなた自身でGoogle検索してください（実際はもっとアグレッシヴな表現）」というやりとりをした結果、自分が色々気になって調べてしまうという病気が発症した。
CSS2.1における詳細度の計算はおおむね知っていたんだけど、あれーよく考えたらこれってCSS3でも使えるんかいな？CSS3って魑魅魍魎が跳梁跋扈する世界だから詳細度の計算の仕方もズドーン変わってたりするのか？と思って（このように思うこと自体が僕のCSS3に関する理解の浅さを示している）調べた。
調べたところ、「それについては数年前にmalaさんやamachangさんが既に調べて検討していた」という俺あるあるが発動。
http://d.hatena.ne.jp/amachang/20080407/1207594307
この時点ではどうやらstyle属性に書かれたスタイルについてはspecの詳細度の定義からモレていたようだ。
おそらく最新のであろうspecを見ると
http://www.w3.org/TR/css3-selectors/#specificity
Note: CSS2.1のspecをみてちょん と書いてあり、CSS2.1のspecは念のため見ると
http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#specificity
こう書いてあるので、つまりstyle属性に書かれたスタイルの扱いについてはCSS2.1と同じだ、と。
（こういうspecってどれが最新 && 正しいのか分かり辛いので、僕が参照しているものが不適切であれば遠慮なくツッコミお願いします。specを検索したら一番イキのいいやつをトップに表示してくれる検索機能をGoogle先生あたりが作ってくれると助かる）
CSS3だからこの辺は特別なんだぜ！みたいのは思ったより少なくて、というかspecを見る限りでは1つしか特例は書いてなくて、どうやら扱いが特殊なのはthe negation pseudo-classだけらしい。
the negation pseudo-classというのはアレです。:not()さんのことです。
http://www.w3.org/TR/css3-selectors/#negation
:not()さんについては、「:not()の中に書かれたセレクタについては他と同じようにカウントし、:not()自体は擬似クラスとしてカウントしない」と書いてありますな。
ほうほう、なるほど。
(あとで検証コードをかく)
Permalink | コメント(0) | トラックバック(0) | 01:05
