続・ハイパフォーマンスWebサイトを読んでCSSセレクタの高速化の話しが面白かった（というか全然知らなくてちょっとびびった）ので紹介します。 セレクタは右から左に解釈される これは正直知らなくて、結構衝撃でした。 #foo .bar {} これはなんとなく#fooを探して、その中の.barを探している気がしてたんですけど、実は.barを探して、その親要素に#fooがあるかを探すそうです。なので特に#fooが必要なければ .bar {} と書いたほうが高速だということ。 また、以下の様に要素名で指定すると、その要素を全て探します。 #foo a {} これは一度a要素を全て探すので、できればaにclassをふって #foo .anchor {} とするほうが高速のようです。（#fooをとるとより高速） 特にユニバーサルセレクタなどは、 #foo * {} とすると、全ての要素の親要素に対して
mameshibankさん 豆柴日和 amecustomさん アメブロを魅せるブログデザインに変身。ブログ作成方法、カスタマイズ、裏技スキンカスタムCSS編集方法公開！ jade-taさん 脚本家によろしく。 nisishowさん リフォームで地域社会に貢献 ringo417-maさん ★ 月に負け犬 ★ cairさん 広報＆IR担当のオフィシャルブログ shikamaさん 千葉の東京寄りでホームページ制作＆企画・運用中！ saijoさん 経営に終わりはない nina-yuanbeauteさん 芳村仁奈オフィシャルブログ「Nina's Diary」Powered by Ameba frontier-ceo-bossさん フロンティア社長 オフィシャルブログ Powered by Ameba ohtias-ceoさん ソーエネ×オーチアス社長 alfortさん 念ずれば花ひらく「会社経営」
2010.08.20追記 こちらの記事はipad「だけ」に適用する内容ではありませんでした。 実際にはJavaScriptなどの条件判定が必要なようです。 「HOWTO: CSS for the iPad」というエントリーにてiPadだけにCSSを適用する方法が紹介されていましたので、メモ的にエントリー。 詳しくは以下 設定方法 以下のコードで設定できるようです。 <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" /> このタイプのメディアタイプを扱えないブラウザが無視するためiPadだけに適用されるようになるようです。 同様のやり方でiPhoneにも対応できるとの事。 iPhoneだけに適用したい場合はmax-device
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
Make Tech Easier - Uncomplicating the complicated, making life easier WebサイトやWebページ、WebアプリケーションにとってCSSはデザインを実現する中核技術となっている。このCSSを最適化する3つのツールが3 Useful Tools To Optimize your Blog’s CSS - Make Tech Easierにおいて紹介されている。紹介記事そのものはブログで利用されるCSSを取り出して最適化するストーリーになっているが、汎用的なテクニックとして利用できる。紹介されているテクニックとツールは次のとおり。 CSSファイル編集テクニック CSSはHTML内部に記述するのではなく外部ファイルにまとめる 属性に繰り返し同じ設定を記載するのではなく、クラスとして定義して利用するようにする。たとえば複数のクラス
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 cssの情報まとめです。ローカル 環境にストックしていた情報を 開放してみますのでシェアして 頂ければ幸いです。内容は 結構偏っていると思いますので 参考程度になさってください。 全てのcss情報が有るわけではありません。主観でストックしていたリンク集です。ツールとかメニュー関連とかハックとかいろいろ188の情報です。 ツール オンラインのcssツール。 CSS Validation Service / W3C検証サービス日本語版 RoundedCornr / 角丸のHTML・CSSコードを生成してくれる CSS Type Set / ファミリー、色、単語間、行間等をプレビューで確認 CSS Text Wrapper / 様々な形のテキストの回りこみを簡単に実現でき
今年も明けましておめでとうございます。 白石です。 正月明けからイッパイイッパイです。 で、いきなり本題。 HTML5用のリセットCSS（どのブラウザでもデフォルトの見た目が同じになるよう、強制的に表示を調整するCSS）と言えば、昔HTML5Doctorで紹介されたやつが有名です。Google Codeでプロジェクトがホスティングされてもいます。 でもこのCSS、ちょっと悩ましいことに中途半端なんですよね。例えば、HTML5ではあらゆる要素にhidden属性を指定することができるのですが、「hidden属性のついた要素は非表示にする」と言ったスタイル指定が行われていなかったり。 で、完全なものはないのかというと、あります。それも仕様書の中に。これは、HTML5仕様が正式に「提案」しているものです。 でもどう見てもHTML5DoctorのCSSのほうが有名ですよね。 で、みんながその中途半端
前回のエントリのような応用するための基本というものではなく、CSSグラデーションはこういう使い方もできるよ的なもので３つ。普通のグラデーションの作り方はcss gradients in Firefox 3.6とかで。#3はない。 以下プレビュー画像のリンク先がデモ・ページになっているのでそちらも参照のこと。もちろん対応ブラウザのFirefox 3.6とSafari 4やChrome 4以降でないと動作デモは確認できない。 Vista風のテカってるボタン ありがちだけど作れたらなかなか便利そうなので挑戦してみたら、意外に簡単だった。実はdoubleなborderが重要で、これが無いとちょっと間抜けな感じになる。コード的には難しいことはなく、上半分にrgb(138, 138, 138)からrgb(102, 102, 102)、下半分にrgb(36, 36, 36)からrgb(0, 0, 0)と
ちょっとしたトリックを使用して、テキストを画像の下に回り込ませないようにするスタイルシートをNO Margin No Errorから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <div class="content"> <img src="thumbnail.jpg" width="50" height="50" alt="Thumb!" /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ligula arcu, luctus nec elementum quis, condimentum a lectus. Suspendisse potenti. Proin neque diam, dictum ac elementum
floatを解除する際にclearを使用せずに解除する「clearfix」の改良版をPerishable Pressから紹介します。 The New Clearfix Method いわゆる旧タイプのclearfixはMac IEも対応ブラウザに含まれているため、スタイルシートは下記のようになります。 旧タイプのclearfix <textarea name="code" class="css" cols="60" rows="5"> .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-table; } /* Hides from IE-mac */ * html .cle
Radioactive Buttons demo 上記デモはSafariでご覧ください。ボタンのグラデーションがまぶしいくらいにアニメーションします。 Firefoxなどのアニメーションに対応していないブラウザでは下記のように表示されます。 個人的にはデザインはこれで充分のような気もします。 <textarea name="code" class="css" cols="60" rows="5"> @-webkit-keyframes greenPulse { from { background-color: #749a02; -webkit-box-shadow:: 0 0 9px #333; } 50% { background-color: #91bd09; -webkit-box-shadow:: 0 0 18px #91bd09; } to { background-color:
hail2u.net - Weblog - Pure CSS な吹き出し に触発されて、画像や JavaScript を使わずに CSS だけを使って「吹き出し」を作る方法を僕も考えてみた。 Demo: CSS のみで吹き出し マークアップは 2 重の要素があれば OK。ここではそれぞれ bubble と body というクラスを付与した div と p を例に説明する: <div class="bubble"> <p class="body">Speech!</p> </div> CSS の最低限必要な部分のみを抜き出すと以下のとおり。これは背景が黒いボックスの下に左向きのしっぽを出す場合の例: .bubble { float: left; /* または position: absolute; */ border-left: 10px solid black; border-bottom
リリースを間近にひかえたFirefox 3.6で対応されるので、そこかしこで取り上げられているCSSによるグラデーション。基本的な書き方はIntroducing CSS Gradientsやcss gradients in Firefox 3.6を始めとして腐る程あるのですっ飛ばすとして、実際にボタン等で利用する時にどうすれば簡単に書けそうかということをちょっと考えてみようとかいう話。勢いで#1とかつけてしまった……。 button要素にCSSによるグラデーションをかけるには以下のように書くことになる。 button { background-image: linear-gradient(top, rgb(204, 204, 204), rgb(102, 102, 102)); background-image: -moz-linear-gradient(top, rgb(204, 204
web anthologyで、ピュアCSSで作る効果的なエフェクトが紹介されています。 ざっといくつかご紹介。 3-state Button using CSS 通常時、マウスオーバー時、クリック時の3種類のボタンをCSSスプライトで作るチュートリアル Pure CSS Polaroid Photo Gallery 重なり合ったポラロイド写真をCSSを使ってデザインする Bubble Effect with CSS マウスオーバーで拡大するMacのDockのようなバブルエフェクト Pure CSS Lightbox CSSで作るlightbox系画像拡大表示 Change Text Selection Color With CSS テキストハイライト時の背景色を変更する それぞれデモがわかりやすいので、一度見てみてください。 23 Pure CSS Effects/Solutions to
CSSを書く時に「セレクタ内でCSS仕様書でのプロパティの出現順序に従ってソートする」という個人的なルールを守っている。何かコーディングにおいて便利な理由があるからというわけではなく、第三者に説明する時に「仕様書の出現順で書いてます！」とかで済ませられるから。今まではファイル全体を処理するオレオレPerlスクリプトで適当にやっていたのだけど、Vimで選択範囲だけをソートとかやりたくなったので、普通に標準入力を読んで結果を標準出力に吐くように書き直した。ついでにCSS3のプロパティとFirefox(Mozilla)やSafari(WebKit)、Opera(Presto)、Internet Explorer(Trident)の独自拡張などへも対応させたりとか。 #!/usr/bin/perl # Author: Kyo Nagashima <kyo@hail2u.net>, http://h
CSSアニメーションを使ってアイコンを動かしてみたいと思います。 以下、気をつけた点。 CSSアニメーションに非対応のブラウザでもアイコンとして成立している 過剰なマークアップをしない 現実的に使えそうな路線で頑張ってみました。 .iconNew{ width: 3em; text-align: center; background: #54bb00; color: #fff; font-weight: bold; text-shadow: 0 1px 0 #3f3f3f; margin: 0 25px 25px 0; letter-spacing: 2px; padding-left: 4px; } .iconNew.arrange01 span{ display: block; -webkit-animation-duration: 1.5s; -webkit-animation-ti
こんばんは、ishidaです。急に肌寒くなってきましたね。 弊社シーブレインは馬車道から目と鼻の先にありますが、その馬車道にて今年も恒例の馬車道まつりが開催されています。１１月１日（日）～１１月４日（水）まで開催されておりますので、馬車道付近にお越しの際は是非お立ち寄りくださいね。 それはさておき、フォントサイズを指定するときにまずはベースとなる基準のフォントサイズをbody等に指定しますが、サイトによって基準を12pxにしたり、13pxにしたり、たまぁ～に10pxにしたりしてます。 そうなってくると相対指定で20px相当って何％だっけ？ってことがよくあるのと、毎回毎回電卓をたたくのが面倒になったので、ここに基準としてよく使いそうなフォントサイズをメモします。 基準文字サイズ 10px 基準文字サイズ 11px 基準文字サイズ 12px 基準文字サイズ 13px 10px
404 Not Found お探しのファイルは見つからないようです。 お手数ですが、下記リンクからトップページへお戻りください。 CoolWebWindow Copyright (C) Cool Web Window All Rights Reserved
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
