140 Colors Found
140 Colors FoundというCSSで使える色キーワードをランダムにちょっとかっこよく表示するツールを作った。CSS Color Keywordsのアレンジ。実用性はまったくない。本当にない。 リロードごとにランダムに色が変わる。body要素にtransition-durationを付けているので、対応ブラウザではフェードインされる。フォントはGeorgiaでも良かったけど、マイブーム中のVollkornにした。tの頭とか一部のグリフの端が斜めにカットされてるとこがお気に入り。 色のフォーマットの変換で手抜きをしてハマった話 色キーワードからrgb(R, G, B)か#RRGGBBに変換するために、その色キーワードを指定した要素の計算済みスタイルを拾おうとした。どんな色のフォーマットでも計算済みスタイルでは統一されている記憶があった(Operaは#RRGGBBで返ってきてしまうけど
初心者が陥りやすいCSSの間違った理解
Life with Web Browser Engine (Gecko, WebKit and etc), Mobile and etc. 一瞬気付かなかったけど、こんなCSS書いて、Chromeしか動かないと言っている人がいるらしい。まさに間違い探しだね！ #transformSample img { -webkit-transform: rotateY(0deg); -webkit-transition: -webkit-transform 0.5s linear; -moz-transform: rotateY(0deg); -moz-transition: -webkit-transform 0.5s linear; -o-transform: rotateY(0deg); -o-transition: -webkit-transform 0.5s linear; } #trans
ナビゲーションのアクティブな項目をマークする
ウェブサイトのナビゲーションでよくある、アクティブ、つまりユーザーが閲覧中のページに対応する項目にマークを付ける場合、画像ファイルでやることが多い。最近はCSSグラデーションを使ってアクティブな時にへこませたような効果を与えたりすることもあるが、よく見かける三角のマークを付けるとなるとやはり画像で……となってしまう。しかし、単純な形に限ってなら枠線付きの吹き出しでも利用した:before又は:after擬似要素を使えば実現できる。 Demo: Pure CSS Navigation Indicator CSSのコードは吹き出しとほとんど変わらない。ただし、位置合わせの方法が異なる。 nav #example1 li a:after { margin: -8px auto 0 auto; border-top-width: 0px; border-right-width: 8px; bord
枠線付きの吹き出し
ミニブログの隆盛以降ウェブ上でよく見かける吹き出しをCSSで作るお話。単色のものはかなり前に書いた。今回はそれに枠線をつけてみよう！ みよう！ みよう！ Demo: Bordered Speech Bubble 枠線は単なるsolidなborderで少し角を丸めただけ。 尻尾を付ける :before擬似要素を使う。デモの3番目のサンプルのように、まず枠線と同じ色で三角形を作る。三角形は以前のエントリで書いた手法と同じで、左右のborderをtransparentにすることによって作る。 .speech-bubble:before { border-top-width: 16px; border-right-width: 16px; border-bottom-width: 0; border-left-width: 16px; border-color: #369 transparent;
リデザイン @ 2011-02-07
へるべちかにゅ～！ CSSが20KBオーバーと肥大化してきたのでダイエットしようと思ったらいつの間にか全部書き換えていた。でも頑張っても13KBにしかならなかった。 以下、覚書。 Reset CSSの変更 リクエストの削減のためにYUIのCSS ResetとCSS Fontsを使うのをやめ、CSSファイルにEric MeyerのReset CSSを参考にしたものをベタに書くことにした。Reset部分はパブリック・ドメイン。欲しかったらCSSのソースからコピペでどうぞ。meyerwebのReset CSSとの違いは、 address, caption, cite, code, dfn, em, strong, th, var { font-style: inherit; font-weight: inherit; } h1, h2, h3, h4, h5, h6 { font-size: 1
CSS3のtransformを使ったフォントの変形
CSS3のtransformプロパティでscale()(または-ms-filterでMatrix())を使うと、ブロックの拡大と縮小ができる。これを利用するとVerdanaをCondensedなフォントっぽく細くしたり、ワープロ時代の倍角文字や縦倍角文字を実現することが簡単にできる。コンテンツ本文に使うのは無理があるが、見出しなどには良さそう。特に@font-faceで気軽に変更できない(してもあまり効果的ではない)日本語の見出しには面白い試みなんじゃないかと思ったが、一番綺麗にしたいIE8で残念なので微妙。 Verdana Narrow? Demo: Verdana Narrow 単純に細くしたいブロックでtransform: scaleX(num);を使えば良い。 .narrow { -webkit-transform: scaleX(0.8); -moz-transform: sca
物事をシンプルにするます
ヘッダが主張しすぎな感じとかがちょっと飽きてきたので、ちょっとだけリニューアルした。ロゴとヘッダ変えただけ。緑ももうやめようかな……とは考えたが面倒になったのでそのままで……。Ctrl+F5！ ロゴ 手持ちのフォントで"h"だけを打ち出して良さそうなのを選んだだけという。使ったフォントはJandlesで、MyFontsから無料で手に入る。ベベルるかグラデるか迷った末グラデった。もうアルファチャンネル付きのPNGファイルでいいよね？ いいよね！ ロゴの配置はちょっと悩んだ。マージンに負の値を入れてfloatさせればいけそうな気がしたが、それではコンテンツとかぶさるように配置するのは無理な感じだった。また、コンテンツの左右のマージンが一定ではないので、absoluteでも正確に配置できない。とりあえず親要素をrelative、ロゴ部分をabsoluteにしてやって、親要素を基準にしてロゴを絶対
CSSで犯しがちな5つの誤ち | エンタープライズ | マイコミジャーナル
Nicole Sullivan, a web developer living in California. Webページのパフォーマンスを向上させる方法のひとつに、CSSファイルを最適化するというものがある。CSSはプログレッシブレンダリングをブロックする効果があるため、最適化しないでおくとページのレンダリング時間に影響を与える。Stubbornella ≫ Blog Archive ≫ Top 5 Mistakes of Massive CSSにAlexa Top 1000サイトを調査した結果が掲載されている。CSSに関して使うべきだが使われていないCSSテクニックがあり、その上位5が紹介されている。紹介されているテクニックは次のとおり。 42%がCSSをGZIP圧縮で提供していない。 44%が2つをこえるのCSS外部ファイルを使っている。 56%がCSSをクッキーとともに提供している
【ハウツー】JavaScriptいらず、CSS3で作るシンプル&クールな多段メニュー | エンタープライズ | マイコミジャーナル
新着記事一覧 【レビュー】タッチボードという新ギミックが楽しい「L-01B」 [22:40 3/24] 【コラム】ペンタブレット「Intuos4」の全てがわかる大百科 第5回 「Adobe Photoshop Elements」を活用して「Intuos4」でイラストを描く [22:06 3/24] 東工大、GPUスパコンを活用し次世代気象予測モデルの計算速度向上を達成 [21:21 3/24] 3Dキャラクターアニメーション作成ツール「Poser 8」日本語版発売 [21:15 3/24] HP、シームレスな物理・仮想サービス管理が可能となるソリューションを発表 [20:35 3/24] Tabula、Spacetimeアーキテクチャに基づく3PLDのABAXシリーズを発表 [20:13 3/24] ステッドラー、ナイトブルーカラーの製図用シャープペンシル「925 35」発売
ユーザに美しい驚きを与える404 Page Not Found | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers Kevin Yank氏がWhat Makes a Good 404 Page? - SitePointにおいて、404 page not foundのページの例としてhttp://idzr.org/404を紹介している。http://idzr.org/404は現在策定が進められているCSS 3D Transforms Module Level 3の機能を使って背後に文字のアニメーションを表示するというもの。Webkitで実装されているためSafariやChromeで閲覧できるほか、iPhoneのSafariからも動作を確認できる。 Safari 4 on Mac OS Xでの閲覧例 Chrome on Windows XPでの閲覧例 iPhone
今使えるCSS3の書き方まとめサイト | エンタープライズ | マイコミジャーナル
CSS3, please! - This element will receive inline changes as you edit the CSS rules on the left. Enjoy! CSS3の規約は現在策定段階にある。しかし、すでにどの主要ブラウザもCSS3に準拠する記述方法か、またはベンダプロパティとしてその機能を実装している。CSS3で提供される角丸め、影付け、グラデーション、透過、回転、Webフォント、スクリュー、スケール、トランジッションなどの機能は魅力的だ。浸透しつつあるプログレッシエンハンスメントのデザイン実装方法論を採用するなら、基本となるデザインをCSS2.1で整え、CSS3の機能で最新ブラウザ向けに一歩先のデザインを提供するというのは悪くない選択肢といえる。 ただし問題がある。CSS3は依然として策定段階にあるため、同様の機能は提供されているものの
CSS display:inline-blockを活用する方法と注意点 | エンタープライズ | マイコミジャーナル
Robert’s talk Webページの制作で水平リストが必要な場合にはフローレイアウトを使って要素を配置していくということがある。しかし、水平フローにさらに可変の高さを持った要素が入っていたり、それを垂直方向に複数行展開するということになると、なかなか面倒なことになってくる。ブラウザの幅に対応したり、ブラウザごとにデザインを揃えるということになると、頭を抱えることになる。 Robert Nyman氏がそうした場合の代替方法のひとつにdisplay: inline-blockを使う方法があるとし、CSS display: inline-block: why it rocks, and why it sucks - Robert's talkにおいて簡潔な説明とサンプルコードおよびその欠点を紹介している。display: inline-blockは要素をブロックとして作成しつつ、インライン
CSS3で綺麗なドロップダウンメニューを作る方法 | エンタープライズ | マイコミジャーナル
Web Designer Wall is all about design, ideas, web trends, and tutorials. It is designed and maintained by Nick La, who also runs N.Design Studio, IconDock, and Best Web Gallery. CSS3 Dropdown Menu - WebDesignerWallにおいてCSS3の機能を活用したマルチレベルドロップダウンメニューのテクニックが紹介されている。デモが提供されており、CSS3に対応したブラウザでアクセスすると丸カド影付きのマルチレベルドロップダウンメニューが表示される。IE8やIE7などCSS3に対応していないブラウザでアクセスした場合は角カド影なしのマルチレベルドロップダウンメニューが表示される。どちらの場合もグラ
IEでCSSが2回ダウンロードされるパターン | エンタープライズ | マイコミジャーナル
Robert’s talk Steve Souders氏は最近獲得したブラウザのパフォーマンス改善に関して注目されるいくつかのテクニックを5回シリーズのブログで公開した。Steve Souders氏はGoogleのエンジニア。Googleに務める以前はYahoo!でYSlowの開発に従事。Webページの高速化に関する開発に携わっており、特にHTMLやHTTP、JavaScript関連の高速化技術に定評がある。 シリーズの1回目であるHigh Performance Web Sites :: 5a Missing schema double downloadでは、IEでCSSファイルが2回ダウンロードされるケースがあることが紹介されている。同内容をRobert Nyman氏もCSS files downloaded twice in Internet Explorer with protoc
CSSグラデーションのちょっとしたテクニック #2
前回のエントリのような応用するための基本というものではなく、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)と
radial-gradient() - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
Pure CSSな吹き出し
Twitterで「CSSで吹き出し作るのブクマし忘れててどこにあったか忘れた……」とかつぶやいたらe_luckさんがImage-free CSS Tooltip Pointers - A Use for Polygonal CSS?を探してきてくれた。このエントリでは枠線をつけるために入れ子になっていたりちょっとわかりづらかったので、ものすごく単純化して解説してみようとかなんとか。 Pure CSSな吹き出しのサンプル: Speech Bubbles とりあえず、吹き出しの尻尾を左下に出すもの(サンプル内では4つめのサンプル)を例にして説明していく。HTMLコードは以下のようなもので、bubbleというクラス名を振ったdiv要素がコンテナ、bodyというクラス名を振ったp要素が吹き出しのベース、tailというクラス名を振った空のdiv要素が尻尾になる。 <div class="bubble
【ハウツー】CSS Spritesの必要素材をサクッと生成! お手軽ブックマークレットSpriteMe | エンタープライズ | マイコミジャーナル
新着記事一覧 TVアニメ『フェアリーテイル』、東京ゲームショウ2009でスペシャルイベント [22:51 9/19] "リボコン"第3弾が決定! 『家庭教師ヒットマンREBORN!』、全国3カ所に降臨 [22:30 9/19] ソニー、ファッション感覚のオーバーヘッドタイプヘッドホン「MDR-770LP」 [21:17 9/19] ヤマハ、AVアンプとサブウーファー1体型のホームシアターパッケージ発表 [20:49 9/19] トヨタ、アイシスを一部改良し全車エコカー減税に適合 [20:18 9/19] ジャガー、「XFスーパーチャージド」を限定発売 [20:04 9/19] 【連載】丸山誠のニューカー試乗レポート 第12回 スポーティで爽快な走りが楽しめるフル4シーターカブリオレ「アウディA5」 [19:24 9/19] 【レビュー】もう撮影担当は要らない!? サイバーショ
視覚整形モデル - CSS2リファレンス
視覚整形モデル概論 この文書では視覚整形モデル――すなわち，視覚媒体を対象としたUser Agentがどのように文書ツリーを処理するのか――その概要について述べます。視覚整形モデルでは，文書ツリー内の各要素はボックスモデルに従ってゼロ個以上のボックスを生成します。 それらボックスのレイアウトは以下のような事項に支配されます： ボックスの寸法およびそのタイプ 配置体系（通常フロー，フロートまたは絶対位置決め） 文書ツリーにおける要素同士の関係 外部情報（表示域の大きさ，画像の内在寸法，etc） この文書で述べるプロパティの対象先は，連続メディアおよび頁メディアにあてはまります。 ただし，マージンの各プロパティに関しては頁モデルに適用されると，意味合いが変化します。 視覚整形モデルは，あらゆる場面の整形を規定する訣ではありません； たとえば文字間隔のアルゴリズムは規定されません。適合User
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
