サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ブックレビュー
unformedbuilding.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
よくCSSのボーダーを使った三角形の作り方が紹介されていますが、あれに使われている透明なボーダーのことで少し。 たとえば、こういうHTMLとCSSで三角形を作るとしましょう。よく見るタイプだと思います。 <div class="test1"></div>.test1 { width: 0; height: 0; border-width: 0 200px 200px 0; border-style: solid; border-color: transparent transparent #eee transparent; }こっちでもいいです。好みで。 .test1 { ... border-color: transparent; border-right-color: #eee; }CSS Triangle 1 見えづらいかもしれませんが、直角三角形になっていますね。 ただし、Fire
要素の高さを0からautoまでCSSでトランジションさせたいと思って色々試してみました。 試した順に書いていきます。 例として横並びのドロップダウンナビゲーションを使います。 こういうのはユーザビリティ的にどうなのとかそういう話は今回の本題じゃないので置いておきます。 動作サンプルとして違いが分かりやすいので選んだだけです。 HTMLは次のようにしました。最小構成だと大体こんな感じになるかと思います。 <nav class="global"> <ul> <li class="dropdown"> <a href="#">Lorem</a> <ul> <li><a href="#">Lorem ipsum dolor sit amet</a></li> <!-- 3つまで繰り返し --> </ul> </li> <li class="dropdown"> <a href="#">Ipsum<
どんな感じで書けば楽できるかとか、後から修正しやすいかとか、そんなことです。 ボタンのスタイリングを例に、自分の通った道を追ってみます。 今回使う HTML は次のようになっています。 <div class="buttons"> <button class="edit">Edit</button><button class="publish">Publish</button><button class="delete">Delete</button> </div> これを CSS でスタイリングしていきます。 1. とりあえず個別指定 こんな極端な書き方する人はあまりいないでしょうけど、例として。 .edit { margin: 0 5px; padding: 0; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 5px; widt
誰かがこのタイトルで書くだろうと思っていたけど誰も書かないのでセルフ実行。 Webkitにposition: stickyが実装されましたね。 というわけで試してみましょう。 現在、Chrome 23.0.1247.0以降(今はCanaryのみ)とWebkit Nightlyで見ることができます。 Sticky Positioning サンプルをダウンロード HTMLとCSS は次のようになっています。 <div class="container"> <div class="column-left"> <section> <h2>Lorem Ipsum</h2> <p> Lorem ipsum dolor sit amet... </p> </section> <section> <h2>Cupcake Ipsum</h2> <p> Cupcake ipsum dolor sit amet
スマートフォンサイトのナビゲーションで、タッチできるリンクエリアの右端に「>」みたいなアイコンがあることが多いのですが、それを擬似要素で作ろうという試みです。 ちょっと必要になったので作ったんですが、あまり使い道はないと思います……。 一応言っておきますが、画像を作って背景に指定したほうが面倒が少ないと思います。 どうせ小さい画像ですし……。 とりあえずシンプルにCSSを書いてみましょう。 擬似要素を2つ使います。 <div class="test1">...</div> <div class="test2">...</div> <div class="test3">...</div> /* この部分は本題ではない */ body { font-size: 14px; font-family: "Arial", sans-serif; line-height: 1.4; } div { m
ここ最近でサイトを作ったときに思ったことのメモです。 個人的なサイトを昨年末と今年の7月に1つずつ、それ以外でやったのが春に1つ(結局なかったことにされたけど)、今やってるのが1つ。 昨年末のは一応レスポンシブウェブデザイン、7月のと春のは普通のソリッドレイアウト、今やってるのがスマートフォンサイト。 昨年末に作ったものについてははてなダイアリーの方でも書いたし、内容は被るけど改めて。 全般「HTML5 Boilerplate」は丸ごとというより必要な部分だけ抜き出して使うと便利。 「これは要らないかなー」という部分を探すのにはコード読まないといけないので、それだけでも結構勉強になると思う。 単純なサイトなら頑張って画像作らなくてもなんとかなったりする。 (対象がいわゆるモダンブラウザの場合) Sass 3.2から使えるPlaceholder Selectorは凝ったことしなくても普通に便
SVGアニメーションの練習をしていたので、後から見直してなぜこうなったのか分かるように記録しておきます。 SVGアニメーションの練習 <!-- アニメーションしたときに消えてしまわないように overflow="visible"を指定している --> <svg viewBox="0 0 512 512" overflow="visible" class="hex"> <!-- 同じ図形を使いまわすのでdefs要素内で定義しておく --> <defs> <!-- アニメーションにwidthを使いたいので symbol要素で新しいviewBoxを作成する --> <symbol id="symbolTrapezoid" fill="#ff7a7a"> <!-- 各辺にある台形 --> <polygon id="trapezoid" points="140.8125,56.46875 128.0
以前に「サークルがランダムに配置される背景をSVGで作る」というものを書きましたが、それを発展させて多角形も混ぜられるようにしてみました。 今回はブラーとかはありません。 多角形の座標算出は、こちらの記事を参考にしました。 HTML5 Canvas で Polygon(多角形)描画 | TM Life 対応しているのは Internet Explorer 9+, Firefox 4+, Chrome, Safari 5.1+, Opera 11.6+です。 Random Geometric Pattern Background with SVG 一応、コメントつきのも載せておきます。 (function () { /** * window がロードされたら実効 */ window.addEventListener('load', function () { geometricPattern
テキストボックスに入力するとき、ユーザーに入力候補を表示してあげることのできる要素です。 個人的には早く普及するといいなと思っています。 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一番古いの
CSSの勉強中に色々困ることが起きて検索するのですが、だいたい同じところに行き着くので自分用のリンク集も兼ねてまとめておきます。 仕様を確認するとりあえずW3Cを見に行った方が早い。 そもそもプロパティや値について分かっていない場合はここで解決することが多い。 CSS current work & how to participate現在の状況と仕様書の目次。CSS3の日本語訳集 - 血統の森 web実験小屋日本語訳へのリンク集。W3Cの目次から探すのが面倒なときはGoogleで「w3.org プロパティ名」で探すと早い。「devs.w3.org」と「www.w3.org」を分けて検索するのもいいと思う。 ブラウザの対応と実装対応しているかどうかだけの場合は以下の2つのサイトで事足りる場合も多い。 When can I use… Support tables for HTML5, CSS3
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
簡単なLightboxみたいなものを作っていたんですが、ローディング画像出すのがめんどくさくて「CSSのcursorでprogress出せばいいんじゃね」と思いました。 そうすればアニメーション画像読ませなくていいし、ちょっとだけ軽くなるんじゃね、とか。 まあ、少し考えて使うのはやめにしたんですが、その後にこんなツイートをしました。 「HTTP リクエストを減らすために、ローディングアイコンは cursor: progress で決まり!」とかあったらちょっと読みたい。 @ub_pnr https://twitter.com/ub_pnr/status/208021702406455297そしたら、Briccsで書かれてたと言われたので読んでみました。 乱暴にまとめると「くるくるするあれじゃなくてcursor: wait使えば?」みたいな内容です。 Bricss - Forget load
単にSassファイルをwatchするだけなら、以前書いた記事とはてなダイアリーで書いたもので大丈夫なんですが、分割されたSCSSファイルごとにやるのもあれだし、partialなんかはどうするのってなるので、ディレクトリ単位でwatchしておきたいわけです。 まあ前のと同じようにディレクトリを指定すればいいんだろうと思ったらエラー。 で、調べてみたら、--watchコマンドのディレクトリ指定時のパスの書き方が問題のようです。 SASS -watch path:path broken on Windows - Sass | Google グループ つまり、パスを指定するときはバックスラッシュじゃなくてフォワードスラッシュ(普通のやつ)で書いてね、ってことみたいです。 次の問題はPhpStormのExternal Toolsの設定なんですが、Parametersのマクロにはフォワードスラッシュの
HTML5 Boilerplateでも使われている、テキスト選択時にtext-shadowを消すためのコードがFirefoxで動いていないので調べてみました。 テキストに影をつけることのできるプロパティtext-shadowですが、普通に見る分にはよくても選択時にも同じ影がついていると読みづらいことが多いので、そのときだけ影を消したほうがユーザーに優しいと思います。 なので、HTML5 Boilerplateを参考にそれをやろうとしたのですがFirefoxで上手くいきませんでした。 以下がサンプルです。テキストを選択してみてください。 defaultが通常の場合、test1が::selectionにtext-shadow:none;だけを書いたもの、test2が::selectionにbackground:Highlight;,color:HighlightText;, text-shad
ベンダー接頭辞(プレフィックス)については最近いろいろと議論が活発ですが、そういう難しい話ではなくて、現状のCSSについての話です。 新しいCSSモジュールを使うために、ブラウザごとに接頭辞をつけなくてはいけない場合があります。まあそれについては現状では仕方ないことなんですが、接頭辞なしでも動作するようになったものでも、いつまで経っても接頭辞つきのものを書くのはどうなのかなと思うわけです。 CSSのコードも冗長で読みづらくなりますし、もう使われていない(使われることもない)であろうものを残しておくのもちょっとなー。 実際に運用されているサイトなんかだとそうそう簡単に手を入れられないかもしれませんが……。 また、はてなダイアリーの方でも書きましたが、ブログのチュートリアルを見ていて「もうその接頭辞つきの役目は終わった(終わりつつある)のに、なんでそれしか書いてないの」と思うことが結構あります
ブラウザで画像ファイルを単体で開いたとき、ブラウザによって表示の仕方が違っていたのが気になったので、画像表示ページの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)で調査。 表示領域は暗い感じに塗りつ
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
Firefoxで画像を開いたら、背景が暗い感じのCSSが使われるようになってました。Firefox 12からですかね? 11 からでした。そのページでは画像が上下左右中央に配置されています。 ちょっと興味が湧いたので中身を覗いてみたら、上下左右中央配置もCSSで行っていました。 使われているCSSファイルはresource://gre/res/TopLevelImageDocument.cssにあります。 このファイルはMPL 1.1/GPL 2.0/LGPL 2.1のトリプルライセンスです。 @media not print { body { background-color: #222; margin: 0; } img { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; } } @medi
SVGを使って、毎回ランダムな色・大きさ・配置でボケ(bokeh)なサークルを作ってみます。 まあやってることは前回の「Kawaii Bubbles!」とあんまり変わりませんけど……。 前回はli要素を使ってやったのですが、背景として使うには適切ではないとかもなーと考えてました。で、SVGなら画像だから別にいいかと思って、今回のを作ってみました。 Random Bubbles Background with SVG デモファイルをダウンロード 始めはCSS BackgroundでSVG読み込ませようとしたりimgで置こうとしたんですが、それだとSVGのスクリプトは実行されないので、HTMLファイルで読み込んでいるJavaScriptでSVG要素を作ってインラインSVGとして追加することにしました。 今回の各ファイルは次のようになっています。 使ったテキストは与謝野晶子の「セエヌ川」です。
最近疲れてたので気晴らしにCSS Animationsを使ったサンプルを作ってみました。 めちゃくちゃ重いので低スペック環境の人は気をつけてください。できればGoogle Chromeで見たほうがいいと思います。 名前が「Kawaii Bubbles」となってますが、可愛いかどうかは個人の感性に任せます。 Kawaii Bubbles! デモファイルをダウンロード 背景画像にはcammy♥claudiaさんの「virginie and lambie2」を使用しています。この画像はCC BY-NC-SA 2.0でライセンスされていますので、ダウンロードしたファイル内の画像も同様のライセンスとなります。 一応、中身はこんな感じになっています。今回は解説なしです。 (あんまり関係部分は省略しています) <ul id="container" class="bubbles"> <li>muffin<
まあタイトル通りなんですが、ブラウザウィンドウが非アクティブになったらアニメーションを停止したいという話です。 今はFirefoxをメインに使っているんですが、要素をアニメーションさせたりするとChromeやSafariに比べて結構な負荷がかかるのです。 アニメーション回数を無限に指定していると、それを表示しているタブが最前面にある限り、ウィンドウがアクティブであろうとなかろうとアニメーションは続きます。 当然、起動しているのはFirefoxだけではないですから、実行中の他のアプリにも影響が出ます。 それをせめて違うウィンドウを見ているときだけでも上手いことできないかと思ったわけです。 そこで:-moz-window-inactive擬似クラスで対応することにしました。 サンプルは以下です。Firefox 10で確認できます。 アニメーションしているのを確認したらウィンドウからフォーカスを
以前、「元画像を変更せずに画像をグレースケールで表示する」という記事で「canvasでの変換は重いから現実的じゃない」みたいなことを書いたのですが、-webkit-filterが使えるようになった(なる)ことにより、もう少し負担を減らして使えるのではないかと思いました。 そこで、なるべくcanvasでの変換を行わずにやってみようと思います。 今回作ったものはこれです。 Grayscale Image Gallery 2012年3月5日 21:24 追記: Firefoxをご利用の方で、環境によっては、CSSグラデーションをbackground-sizeで小さくしてbackground-repeatで敷き詰めると、gfx.direct2d.disabledがfalseの場合にフリーズするようです(Firefox 10.0.2で確認)。 Firefoxで見ても安全なデモページはこちらです。 本
既に色々なデモページが作られていたり、実用されていたりする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」の紹介をしてみたいと思います。 現在、このプロパティは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で使
「CSS Values and Units Module Level 3」のViewport-relative lengths(または Viewport-percentage lengths)についての覚え書きです。 これは新しく追加された長さの単位です。 CSS Values and Units Module Level 3 - 5.1.2. Viewport-relative lengthsCSS Values and Units Module Level 3 - 5.1.2. Viewport-percentage lengths上は2011年9月6日版のWorking Draftの仕様へのリンクで、下がEditor’s Draftの最新版へのリンクです。 Editor’s Draftの方は2011年12月13日版を参考にしていますが、ページが見つからないので最新版へのリンクにしてあ
2011年12月時点でのCSSを書くときの自分内での決まりごとを書いておきます。 まあこういうのは自分(やチーム)が分かりやすければ何でもいいと思いますけどね。 基本的に自分以外は編集することがないので、結構好き勝手に書いてます。 インデント・改行・空白基本的にセレクタはインデントなし。宣言(プロパティと値)の部分はセレクタの開始位置から半角スペース2つ分インデントする。@media内など、ネストされている場合はその中のセレクタはアットマークルールの開始位置から半角スペース2つでインデントする。セレクタが複数ある場合は基本的にカンマで改行するが、擬似要素・擬似クラスが違うだけの場合は同一行でもよい。 (リセットCSSなどは除く)宣言ブロック開始の波括弧{は最後のセレクタと同じ行に書き、直後に改行を入れる。宣言ブロック終了の波括弧}の直前に改行を入れる。各宣言ごとに改行する。基本的にはセミコ
CSSとJavaScriptを圧縮できる「YUI Compressor」をWebStorm/PhpStormから使う方法です。 1つ前の「WebStorm/PhpStormでSassをコンパイルする」で、コマンド入れて何かできるんならこれもできるかもなーと思ったのでやってみたら上手くいったのでついでに書いておきます。 まず、JavaがインストールされていたらYUI Compressorをダウンロードして、適当な場所に展開します。ダウンロードは以下のリンクからどうぞ。 YUI Compressor 前回と同じようにSettingsからExternal Toolsと進んで、[Add]ボタンをクリック。 ダイアログが出てくるので、そこに入力していきます。 Programの欄には、java.exeへのパスを入力。自分の場合はこれでした。 C:\Program Files\Java\jre6\bin
次のページ
このページを最初にブックマークしてみませんか?
『Unformed Building』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く