1.125 (v9.31.0)
3^2 / 2^3の答えである1.125を基本の比にし、様々な大きさをすべて計算しなおす。「黄金比なんて誰も設計に使っていない」というような本を読み、黄金比を使っているのがちょっと恥ずかしくなったからだ。4乗していくとなんとなく大きくなっていくようで、キリの良い数字が増え、自己満足度が上がる。結局は黄金比に近い(1.125^4 = 1.602)ので、最終的な結果は変わらない。 巨大なハイパーリンク まず、かつてTwitterとして知られていたプラットフォームへ投稿する時に使う、短めの概要を別に作るようにする。それに使うだけではもったいないので、ホームの投稿一覧をリストからセクションに変えて、そこでも使うようにする。その流れでsection要素全体をハイパーリンクにするようにし、その結果CSSが複雑になる。ここで言う「複雑」とは、やりたいことと実装に大きな乖離があり、レンダリング結果とコード
スクロールバーの幅
スクロールバーの幅を知りたいことはままある。CSSで拾えれば最高なのだけど……というところで、calc(100vw - 100%)で拾えることがわかった。ただこれで拾えるかどうかはその要素の親に依存するので、いつでもどこでも使えるわけではない。せめてJavaScriptでは扱えるようにしてみたい。 Demo: Get Scrollbar Width with JavaScript ボタンをクリックするとスクロールバーの幅がダイアログで表示される。オーバーレイのスクロールバーの場合は0pxになり、そうでない場合はスクロールバーの幅が返る。body要素の幅が100%であることが条件になるが、まず大丈夫だろう。 仕組みは単純なものでwidthプロパティーをcalc(100vw - 100%)にした要素をbody要素の子に突っ込んで、計算済みスタイルを拾うというだけだ。overflowプロパティー
GitHub Packagesと.npmrcファイル
興味があったのでGitHub Packagesを試してみている。node-css-mqpackerを復活させて、公開するところまではできた。ヘルプの通りでうまくいったが、.npmrcファイルで気になるところがあったので、メモを残しておく。 公開時 オーナーとして公開する場合、.npmrcファイルを編集してregistryを編集しろとなっている。もちろんこれで公開できる(できた)けれど、npmのauditコマンドが動かなくなってしまった。 $ npm audit npm ERR! code ENOAUDIT npm ERR! audit Your configured registry (https://npm.pkg.github.com/hail2u) does not support audit requests. npm ERR! audit The server said: 404
このウェブサイトについて
許諾 このウェブサイト内の全ての文書とファイル(画像やスタイルシートを含みます)は、Creative Commons (表示)の元で公開されています。ただし、それぞれのファイル自体に別のライセンス情報が明記または添付されている場合、そちらが優先されます。 スタイル・ガイド HTMLや、CSS、JavaScriptについては、ほぼすべてをスタイル・ガイドで解説しています。アイコンや、カラー・パレット、コンポーネントまで、あらゆる挙動を確認できるでしょう。たまに実装とずれがあることもありますが、ここでの解説が正しい挙動を説明しています。 アクセシビリティー ユーザーの環境をなるべく優先することや、見やすい色合いであること、普通のHTMLであること、スクリプトを最小限にすること、などを主眼に制作しています。細かい部分では、WCAG 2.1のLevel AAを参考にしています。そのため、アクセシビ
BreakpointTesterとish.
少し前にBreakpointTesterというツールを知った。任意のページでそのブックマークレットを起動すると、参照されているCSSファイルをスキャンしてMedia Queriesのブレークポイントを探し、そのブレークポイント全てを使ってiframe要素で表示しなおしてくれるというもの。また、ほぼ同時期にish.というツールがBrad Frostにより公開された。こちらは大中小でチェックでき、リサイズも可能というもの。こちらもデバイスを特に意識はしていない。しかし、両者は似ているようで少し違う。 ish.はメジャーなデバイスを強く意識することをやめ、あらゆるデバイスでコンテンツが機能するようにしようというコンテンツ側からの視点で作られているように思う。対してBreakpointTesterはビジュアル・デザイン側からの視点で作られており、どのようなビジュアル・デザインを作成したのかをチェッ
Reset vs Normalize
CSSの記述法として、ブラウザごとの違いを「Reset」して一から指定するという方法が長らくマジョリティを占めていました。まだまだその方向で書いている人が大半ですが、「Normalize」するという方法を採る人達も増えています。なぜリセットではなくノーマライズなのかというような話をなんとなくダラダラ書いてみたい感じです。 以下、リセットはYUI 2のCSS Resetを、ノーマライズはNormalize.cssをイメージして読んでみてください。 リセットとノーマライズ まずは両者の違いから。リセットはなかったことにするというもので、ほぼ全ての要素に対するスタイル指定を排除しブラウザごとの違いを吸収するものです。対してノーマライズはブラウザのデフォルト・スタイルシートを生かしつつ、各ブラウザ間の挙動を擦り合わせるものです。リセットが負の方向で統一しているとすれば、ノーマライズは正の方向で統一
lorempixel
簡単なクエリー・パラメーターで好きなサイズのランダムな画像を返してくれるlorempixelというウェブサービスを見つけた。主にウェブサイトのプロトタイピングに使うことになると思う。多少遅い気もするが、それに目をつぶってでも使いたくなる簡便さ。 クエリーは非常に簡単で、横320px・縦180pxのランダムな画像が欲しいなら以下のようにする。 http://lorempixel.com/320/180/ このエントリの最初の画像はこのクエリーでリクエストしたもの。指定できる縦横のサイズは最大1920pxまでのようだ。縦横のサイズ以外にもいくつかパラメーターがあり、 http://lorempixel.com/320/180/abstract/ とテーマ名を最後に付けると、 テーマで絞り込みができる。 http://lorempixel.com/g/320/180/ 縦横サイズの前にgを挟むと
CSSでアイコンをデザイン
ものすごく大雑把に言うと今まで画像編集ソフトでやっていた、角を丸くするとか背景をグラデーションにするなどという作業をCSSでやってしまおうというお話。もちろんCSSでできないことは多くあるので万能というわけではないが、できることに限って言えば数行のCSSコードでスクリーンショットのような効果を柔軟に適用することができる。 Demo: Design icon with CSS ul li a { display: block; width: 32px; height: 32px; background-image: url("icons-w.png"); background-repeat: no-repeat; text-indent: -10000px; } 各アイコンになるa要素へのスタイルは以上のような単純なものがベースになる。icons-w.pngがアイコンの前景をつなげたスプライ
枠線付きの吹き出し
ミニブログの隆盛以降ウェブ上でよく見かける吹き出しを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;
Sass、そしてSassy CSS (SCSS)
CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass (主にSCSS)の良さを解説する。 CSSフレームワーク Sass Sassy CSS aka SCSS SCSSでCSSフレームワーク 2カラムレイアウトの作成 clearfixやReset CSSの組み込み カラム幅の変更 カラムの入れ替え SCSSで完結することの意義 まとめ 最後に CSSフレームワーク 960.gsやBlueprint、BlueTripなどCSSフレームワークと呼ばれるものは色々ある。フレームワークと名乗るだけのことはあって、それらの生産性はとても高い。テンプレートで適切にクラス名やIDを埋め込むだけなので、複雑怪奇なCSSコーディングを意識することなく誰でも簡潔にきれいなカラム・レイアウトを作成できる。 HTML 4
結局どうすればいいの？ - Dive Into HTML5
Translation of: What Does It All Mean? - Dive Into HTML5 Diving In The Doctype The Root Element The <head> Element Character Encoding Friends & (Link) Relations rel = stylesheet rel = alternate Other Link Relations in HTML5 New Semantic Elements in HTML5 A long digression into how browsers handle unknown elements Headers Articles Dates and Times Navigation Footers Further Reading 訳注 Diving In この章で
CSSのみでスライドして画像を切り替えるギャラリーを作る
ポートフォリオとかでよく見かけるクリックすると横にスライドしながら画像を切り替えるギャラリーUIをCSS3だけで作ってみた。最終的に、エフェクト的には満足のいかないところがあるもののすごくシンプルに作成できたのでまぁ満足。:target擬似クラスとtransitionプロパティ(とtransformプロパティ)の組み合わせは色々できて楽しい。 Demo: CSS Sliding Image Gallery ギャラリー全体のマークアップは以下のような単純なもの。 <ul id="gallery"> <li class="image" id="first"><a href="#second"><img src="161-1.png"></a></li> <li class="image" id="second"><a href="#third"><img src="161-2.png"></a
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)と
Google Closure Compiler ServiceでJavaScriptファイルをコンパイルするPerlスクリプト
Google Closure Compiler ServiceでJavaScriptファイルをコンパイルするPerlスクリプト 最近になってGoogleのClosure Compiler Serviceを良く使うようになった。今まで使っていたYUI Compressorと比較すると、複数のJavaScriptファイルをまとめて圧縮出来ることと圧縮にとどまらない最適化を行うことも出来ることがメリットで、CSSの圧縮には対応していないことがデメリット。ウェブのUIで圧縮するのは面倒になってきたので、REST APIを利用してウェブのUIと同じようにコメントで設定を記述してコンパイルするPerlスクリプトを書いてみた。タイトル長い！ #!/usr/bin/perl # gccs.pl - Compile your JavaScript code with Google Closure Compi
はてなブックマークのブックマークレットをlightbox化
はてなブックマークのデフォルトのブックマークレットはiframeでオーバーレイ表示されるが、サイズ的にも位置的にも見づらい気がするので、ユーザースタイルシートをいくつか書いてみた。最初はオーバーレイ表示ではない旧バージョンのブックマークレットを使い、そのページのスタイルシートを書き換えてみたのだけど、見やすいことは見やすいがイマイチな感じだった。そこでもっと単純にオーバーレイ表示のサイズと位置を変更するだけのものを書いたりしてみたが、これもイマイチ。最終的にlightboxっぽく表示してやれば良いんじゃないかと思い、試してみたらなかなか良さそうな感じだった。 投稿フォームはブラウザ・ウィンドウのど真ん中に表示される。調節するのが面倒だったのでサイズの変更はしていない。ユーザースタイルシートのコードは以下の通り。 .hatena-bookmark-bookmarklet-container
スマートキーワードは後ろが良い
IE5(やそれを利用したタブブラウザ)を利用していた頃からロケーション・バーで検索していたので、特に操作性が優れているわけでもない検索バーなどはまったく使う気になれずスマートキーワードしか使ってない。最近はロケーション・バーで履歴やブックマークの絞込みも可能なので、ますます重要度が上がった。このスマートキーワード機能自体に特に不満があるわけではないのだけど、キーワードは前に付けるのではなく後ろに付けるのが良いのじゃないかと、履歴やブックマークの絞込み機能が付いて以降は考えるようになった。「g foobar」じゃなくて「foobar g」というように。 上述の通り、今の多くのブラウザは履歴やブックマークをロケーション・バーから手軽に検索できるので、 とりあえず探したい情報に関係ありそうな単語をロケーション・バーで入力する 見つかった: そのままドロップダウンから選択して開く 見つからなかった
YUI 3: CSS Resetの問題
ブラウザごとのデフォルト・スタイルシートの違いを吸収するためのスタイルシートをメンテするのが面倒になったので、YUI 3のCSS Resetを使うことにした。が、このサイトではちょっとした問題が起こった。少し前にTwitterでつぶやいたりしたhtml要素にbackground-colorやbackground-imageを指定した場合、body要素の背景が描画エリアいっぱいにならなくなるというCSSの仕様絡みの問題。 この仕様によってbody要素に指定していたヘッダの背景画像がずれてしまった(ずれるサンプル)。ずれる理由は上記仕様によりbody要素の上下でmarginの相殺が起こり、marginの相殺が起こった部分は透明(親であるhtml要素)が透けて見える)ようになり、背景画像の開始点はそれに続くbody要素のコンテント・エリアになるから。 html { color: #000; ba
fenrirでTabを項目選択に使う
コマンドライン・ランチャのfenrirではデフォルトで上下カーソルで候補を選択するようになっている。Vimを使い始めた影響でカーソルを使わないで頑張るように心がけているのでTabとShift+Tabで選択できるようにしたかったのだけど、設定ダイアログではTabを指定することができなかった(フォーム要素のフォーカスの移動が起こってしまう)。INIファイルを読んでみると仮想キーコードを10進数で指定すれば良さそうだったので、適当に書き換えてみたらうまくいった。 fenrirが起動中なら一旦終了させて、INIファイル(fenrirをインストールしたフォルダのdata/fenrir.ini)を開き、KeyListCursorUpとKeyListCursorDownを以下のように書き換える。 KeyListCursorUp=265 KeyListCursorDown=9 うまく設定できたかどうかは設
Vimで"gf"をスラッシュで始まる相対URLに対応させる
Vimではファイル名らしき箇所でgfを押すと、見つけることができればそのファイルを開いてくれる。この機能はとても便利なのだが、HTMLファイルにスラッシュで始まる相対URLでCSSファイルやJavaScriptファイルのURLを書いた場合は、そこでgfを押してもうまく開くことができない。これを解決するためにvimでHTMLとかを編集するときに絶対パスのファイルを開くで公開されているプラグインをちょっと使っていたのだけど、どうやらpathオプションとincludeexprオプションを設定することでも対応できるようだ。Vimすげー。 とりあえず設定から。 autocmd FileType html :setlocal path+=W:/www/test,W:/www/hail2u.net,W:/www/blosxom.info autocmd FileType html :setlocal i
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Test Page for Web Fonts