円や多角形をランダムに配置する背景をSVGで作る その2
「円や多角形をランダムに配置する背景をSVGで作る」の続きです。 もうちょっと使いやすくなるように練習を兼ねてやってみました。 GPBG.js サンプル 1 GPBG.js サンプル 2 GPBG.js サンプル 3 GPBG.jsのJavaScriptファイル 前のはインラインSVGを作ってbodyの最後に入れていましたが、今回はstyle要素を作り、指定したセレクタの背景画像としてData URIにしたSVGを指定するようにしました。 一番簡単に使うと、こんな感じになります。 <script type="text/javascript" src="gpbg.js"></script> <script type="text/javascript" src="script.js"></script> </body>// script.js の中身 (function () { if (wi
CSSの小数点以下の数値を各ブラウザはどのように解釈するか
CSSで小数点以下を指定できる単位で、小数点以下の数値の扱いがブラウザごとに異なっているようなので、単位別にまとめてみました。 調査時の各ブラウザのバージョンですが、Internet Explorer 9 & 10 (Windows 7), Firefox 17, Chrome 25 dev-m, Opera 12.10となっています。調査にはブラウザ付属の調査ツールを使いました。 表が見づらいかもしれませんが、我慢してください。 なお、これはどうレンダリングされるかなどは考慮していません。 その指定がどう解釈されるかだけを調べたものです。 指定した値についてですが、但し書きがない場合は1.5555555555です。 Percentageフォントサイズをパーセンテージ指定。
最近のCSS実装でベンダー接頭辞の外れたもの 2012年11月
Firefox 16、Opera 12.10、そしてInternet Explorer 10がリリースされました（Windows 7のIE 10はまだですが）。 その中で、CSSのベンダー接頭辞が外れたものをまとめてみます。 CSS Gradientsliner-gradient(), repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient()の4つ。 IE 10から。標準構文。IE 9以下はCSSグラデーションに対応していない。Firefox 16から。標準構文。-moz-付きのは古い構文扱い。Opera 12.10から。標準構文。-o-付きのは古い構文扱い。Chrome、Safari は-webkit-が必要。古い構文。CSS Transformstransform, transform-sty
meter要素のスタイリングについてのメモ 2012年10月
2011年1月27日に「meter要素のスタイリングについてのメモ for Webkit & Opera」という記事を書きましたが、先日リリースされたFirefox 16もmeter要素に対応し、またWebkitの指定方法も変更されていましたので改めてメモしておきます。 なお、前回同様にOperaについてはスタイリングの方法が分かりませんので（まだないっぽい）、WebkitとFirefox向けの指定方法となります。 時間のある方は前の記事も読んでおくと理解しやすいかと思います。 Webkit向け::-webkit-meter-inner-elementこれはユーザーエージェントスタイルシートに書かれているものですが、気にしなくていいと思います。 meter要素の中の部分を指定します。::-webkit-meter-barメーター自体を指す擬似要素です。バーの背景などはここで指定します。 以
GoogleモバイルサイトやDisney.comのオフキャンバスっぽいメニュー
Googleのスマートフォンサイトがリニューアルされたというので見てみたら、メインメニューの表示方法が面白い感じになっていたので自分でも作ってみました。 ちなみに、先日レスポンシブウェブデザインに変更したDisney.comも、表示幅が1024px以下だと似たようなメニューの表示方法になります。 作ったものは以下。 オフキャンバスメニュー サンプルなのでHTMLは適当に。 実際にはもっと複雑になるでしょうが、動きを試すためのものなのでこんな感じで。 <div id="nav" class="globalnav"> <a href="#">Navigation</a> </div> <div id="main" class="content"> <div class="switcher"> <button id="toggleMenu">☰</button> </div> Mai
samp要素にスクリーンショットを使うことについて
HTMLのsamp要素について。 この要素はプログラムやコンピュータシステムの出力を表すとなっています。 Thesampelement represents (sample) output from a program or computing system. 4.6.13 The samp element — HTML5ということはCSSの実行結果なんかのスクリーンショット画像をsamp要素でマークアップしてもいいのではないかと思ったわけです。 <pre><code> body { color: red; } </code></pre> <p><samp><img src="ss.png" alt="ページ全体の文字が赤くなりました。" /></samp></p>こんな感じですか。 で、それをTwitterで書いていたら意見をもらいました。 スクリーンショットは実行結果というよりそれを恣
サイト制作時のメモ 2012年前半
ここ最近でサイトを作ったときに思ったことのメモです。 個人的なサイトを昨年末と今年の7月に1つずつ、それ以外でやったのが春に1つ（結局なかったことにされたけど）、今やってるのが1つ。 昨年末のは一応レスポンシブウェブデザイン、7月のと春のは普通のソリッドレイアウト、今やってるのがスマートフォンサイト。 昨年末に作ったものについてははてなダイアリーの方でも書いたし、内容は被るけど改めて。 全般「HTML5 Boilerplate」は丸ごとというより必要な部分だけ抜き出して使うと便利。 「これは要らないかなー」という部分を探すのにはコード読まないといけないので、それだけでも結構勉強になると思う。 単純なサイトなら頑張って画像作らなくてもなんとかなったりする。 （対象がいわゆるモダンブラウザの場合） Sass 3.2から使えるPlaceholder Selectorは凝ったことしなくても普通に便
datalist要素
テキストボックスに入力するとき、ユーザーに入力候補を表示してあげることのできる要素です。 個人的には早く普及するといいなと思っています。 4.10.10 The datalist element — HTML5 ブラウザの対応状況Internet ExplorerIE 10から対応。datalist object (Internet Explorer)Mozilla FirefoxFirefox 4から対応。datalist - MDNGoogle ChromeChrome 20から。Changeset 114545 – WebKitこのへんかなあ。 「datalist landed in Chrome Canary - HTML5Rocks Updates」に、Canaryで使えるようになったときの告知もある。Safariまだ。たぶん次のSafari 5.2ですかね。Opera一番古いの
initialキーワード
initialキーワードというものが「CSS Values and Units Module Level 3」で定められているのですが、知りませんでした……。 The ‘initial’ keyword represents the specified value that is designated as the property's initial value. CSS Values and Units Module Level 3 - 3.1.1. CSS-wide keywords: ‘initial’ and ‘inherit’この値が指定されたプロパティには、そのプロパティの初期値が指定されます。 以下はその例です。 initialキーワード デモ <ul> <li>Unordered List Item</li> <!-- 4回繰り返し --> </ul>ul { color
画像単体表示時に各ブラウザが適用するスタイル
ブラウザで画像ファイルを単体で開いたとき、ブラウザによって表示の仕方が違っていたのが気になったので、画像表示ページのCSSを調べてみました。 なかなか面白かったですし、何かの参考になるかもしれません。 Google Chrome & SafariChrome 20.0.1115.1 dev-mとSafari 5.1.5で調査。 画像は表示領域の左上にぴったりと表示される。画像が表示領域内に収まりきらない場合は縮小して全体表示。スタイルは各要素にstyle属性で直接指定されます。 body { margin: 0px; } img { -webkit-user-select: none; cursor : -webkit-zoom-in; /* 縮小表示時 */ }FirefoxFirefox 12.0とAurora 14.0a2 (2012-05-01)で調査。 表示領域は暗い感じに塗りつ
News Links N.46: 2012-04-20 | Unformed Building
4月15日から4月20日まで。 ブラウザはどの画像をダウンロードするのかの調査結果、CSS をチェック・整形する RECESS、メールアドレスのドメイン名のタイプミスをチェックしてくれる mailcheck.js、Metro UI 風の見た目を実装する CSS ライブラリ metro.css、レスポンシブウェブデザインを確認する Screenqueri.es など。 Web Design & Develop Media Query & Asset Downloading Results | TimKadlec.com どういうマークアップ、どういうスタイル指定ならブラウザは画像をダウンロードするのか、という調査結果。 Boilerplate by DeviaVir 個人的なボイラープレートとのことです。サイト制作時の参考になるかも。 jQuery NailThumb 画像から色々なサムネイ
CSSで使用できる角度の単位
degdegree、度数法。 360で円を一周するお馴染みの表し方。 gradグラード。ゴン（gon）、グレード（grade）、グラディアン（gradian）とも。 1直角を100とする単位。 つまり90degの1/100が1gradになる。360degは400gradで表すことができる。 radラジアン（radian）。弧度法。 円周上でその円の半径と同じ長さの弧を切り取る2本の半径が成す角の値だそうです。 360degは2πradで表すことができる。 degreeからの変換はdegree * π / 180で行う。 2011年9月6日版でWho is going to use this anyway?とか言われてた単位。 turn1回転を1つの単位として扱う。 1turnは360degと等しい。 まとめ1deg = 約1.1111111111grad = 約0.0174532925ra
サークルがランダムに配置される背景をSVGで作る
SVGを使って、毎回ランダムな色・大きさ・配置でボケ（bokeh）なサークルを作ってみます。 まあやってることは前回の「Kawaii Bubbles!」とあんまり変わりませんけど……。 前回はli要素を使ってやったのですが、背景として使うには適切ではないとかもなーと考えてました。で、SVGなら画像だから別にいいかと思って、今回のを作ってみました。 Random Bubbles Background with SVG デモファイルをダウンロード 始めはCSS BackgroundでSVG読み込ませようとしたりimgで置こうとしたんですが、それだとSVGのスクリプトは実行されないので、HTMLファイルで読み込んでいるJavaScriptでSVG要素を作ってインラインSVGとして追加することにしました。 今回の各ファイルは次のようになっています。 使ったテキストは与謝野晶子の「セエヌ川」です。
:window-inactive擬似クラスとanimation-play-state
まあタイトル通りなんですが、ブラウザウィンドウが非アクティブになったらアニメーションを停止したいという話です。 今はFirefoxをメインに使っているんですが、要素をアニメーションさせたりするとChromeやSafariに比べて結構な負荷がかかるのです。 アニメーション回数を無限に指定していると、それを表示しているタブが最前面にある限り、ウィンドウがアクティブであろうとなかろうとアニメーションは続きます。 当然、起動しているのはFirefoxだけではないですから、実行中の他のアプリにも影響が出ます。 それをせめて違うウィンドウを見ているときだけでも上手いことできないかと思ったわけです。 そこで:-moz-window-inactive擬似クラスで対応することにしました。 サンプルは以下です。Firefox 10で確認できます。 アニメーションしているのを確認したらウィンドウからフォーカスを
CSS Transformsについてのメモ
既に色々なデモページが作られていたり、実用されていたりするCSS Transformsですが、ちゃんと理解したかったので調べてみました。 まだそんなに自信はありませんが、以前よりは理解できた気がします。 というわけなので、自分が分かる範囲で説明してみたいと思います。 CSS Transformsは2Dと3Dとで別になっていますが、将来的には SVG Transforms と合わせて一つの仕様になるそうです。 今はまだ別々なので、それぞれにリンクをしておきます。括弧内は現時点での最新の日付です。 WD: CSS 2D Transforms（2011/12/15）ED: CSS Transforms（2011/11/28）WD: CSS 3D Transforms Module Level 3（2009/03/20）ED: CSS 3D Transforms（2011/03/21）新しくなった
三点リーダの垂直位置をどうにかしたい
三点リーダはご存知かと思いますが、一応言っておくと「……」こういうものです。 これがfont-familyで欧文フォントと日本語フォントのどちらが先に指定されているかによって垂直位置が変わるのをどうにかしたいというわけです。 まず、なんでこんなことをしたいのかをちょっと書いておきます。 WindowsにはVistaからメイリオという日本語フォントが入っています（XPでも自分で入れれば使えます）。このフォントは結構気に入っているんですが、英語とか数字の文字がなんだかぽっちゃりしているように感じてしまって好きじゃないんですよね。 そこで、欧文や数字にはArialなどの欧文フォントを、日本語用にはメイリオを使いたいと考えたわけです。 最初はCSSのfont-familyで指定する順序によって、ブラウザにうまく解釈してもらおうと考えました。 body { font-family: "Arial",
CSS Filter Effects!
「CSS Filter Effects」の紹介をしてみたいと思います。 現在、このプロパティはWebkit nightlyとGoogle Chrome Canaryで使うことができます。たぶんdevとかにももうすぐ来るんじゃないでしょうか。 Filter Effects 1.0 - 5. The ‘filter’ property 2011年12月16日版を参考に書いていきたいと思います。 サンプルページは以下です。 CSS Filter Effects Sample このサンプルの画像は、通常だと次のように表示されます。 左側がjpg画像で、右側はハートの外側が透過されているpng画像です。 これにフィルタをかけていきます。 なお、スクリーンショットはWindows版Google Chrome 18.0.982.0 canaryで表示したときのものです。 このプロパティをWebkitで使
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
News Links N.44: 2012-04-06 | Unformed Building
News Links N.41: 2012-03-16 | Unformed Building
News Links N.35: 2012-01-20 | Unformed Building