フォント・サイズ変更機能をCSSで
実装と実行の両面でコストの低いフォント・サイズ変更機能の実装を考えていた。:target疑似クラスを使う方法が最もコストが低いように思えた。 Demo: CSS Font Size Changer id属性を振ったdiv要素でフォント・サイズを変更したいコンテンツを括り、それにページ内アンカーでジャンプすることによって:target疑似クラスを有効化するという仕組みだ。:target属性を使った画像のズーム機能の実装と考え方としては同じだ。フラグメント識別子を消したり、ブラウザーの履歴をクリーンに保つにはJavaScriptが必要になる。 このままではページ移動が起きてしまうので、HTMLコードにはもう少し工夫が必要かもしれない。div要素で括らずに空要素として固定位置に隠して配置し、兄弟セレクターで制御するとうまくいきそうだ。 #large:target ~ main { font-si
chやexとpxの対応関係
1emが必ず16pxになることに対して、chとex単位ではフォントによって変化している。それぞれのフォントのグリフの特定のパーツ、ch単位では0の幅、ex単位ではxの高さ(とされるx-height)、が考慮された上でpx単位に変換され、計算済みスタイルの値となっていることがわかる。Impactのようなx-heightがかなり高く設定されているフォントではex単位で大きく差が出てくるというわけだ。 このことは普通にCSSのプロパティーの値として使う場合はあまり問題になることはない。しかしながらブラウザー以外の何らかのツールで扱おうとすると一定の決めつけが必要となる。そうでないとフォントを調べて係数をひねり出さなければならなくなるからだ。 少なくともメディア・クエリーにおいては初期設定の値を基準として変換されることになるので、Arial (やHelvetica Neue)を基準にした係数を使っ
ウェブ・フォントの読み込み - Weblog - Hail2u.net
ウェブ・フォントも完全に行き渡り、今はどう効率的に配信するかについて多くの時間を割くようになった。Google Fontsの低め安定路線を見限り、TypeKitやFonts.comへ鞍替えする人々も増えた。それと同時に自前でホスティングする人々も徐々にその数を増やしており、どれが最適解なのか一応の結論が出るにはもう少しかかるだろう。まず、ウェブ・フォントの読み込みにおいてどのようなアプローチがあり、どのようなメリット、そしてデメリットがあるのだろうか。 TypeKit等に頼るにしろ、自前でホスティングするにしろ、もちろん最終的にはウェブ・フォントをブラウザーに送りつける必要がある。読み込みとはまさにその部分の話だ。話がややこしくなるので、多様な実装を意識した安全な書き方などについては触れない。 普通に@font-face定義を利用 @font-face定義をただ普通に書く場合のメリットは、
JavaScriptで配列をシャッフル
配列をシャッフル、つまりランダムに要素の位置を入れ替えるというのを、sortメソッドを使ってやってみたのだけど、明らかにダメダメなものになってしまった。その後、あーでもないこーでもないと考えたのだけど、算数が得意すぎて頭が痛くなった。ということを某所でぼやいたらはてのくんがコードを見つけてくれた。どうやらFisher-Yatesという有名なアルゴリズムでやると良いらしい。 最初に書いたコードは、 var a = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9); a.sort( function (a, b) { return Math.ceil(Math.random() * 3) - 2; } ); というもの。sortメソッドは、パラメータに与えられた関数が負の値・0・正の値を返すことによって要素の順序を決定するので、その関数がランダムに値を返せばランダ
media=printとHTTPリクエスト
スクリーン向けスタイルシートと印刷向けスタイルシートを分けるように戻そうかと考えてた。過去ログ検索すると何度か切り替えてることがわかる。最近印刷向けとかに注意を向けてなかったので忘れてたけど、media=printとしてもHTTPリクエストは常に書いたところで走る。ので、別ファイルにするとHTTPリクエストがほぼ無駄な形で増えてしまう。 HTTPリクエストを無駄に増やさず印刷向けスタイルシートを別にするには、印刷前にJavaScriptでスタイルシート読んでやれば良さそう。スタイルシートの読み込みを待ってからprint()するボタンを用意するみたいのなら簡単そうだけど、印刷はブラウザーの機能を使ってもらいたい。となるとbeforeprintイベントを使うのが王道のようだ。 <link id="print-css" media="only print" href="/css/print.cs
IE11以下でのmax-widthとSVG
Internet Explorer 11以下でSVGをmax-width: 100% (max-height: 100%)を使って親要素の幅(高さ)に合わせてリサイズしようとすると、SVGのアスペクト比が考慮されないバグがあった。width: 100% (height: 100%)や、SVGではなくPNGやJPEGなら大丈夫。max-*とSVGの組み合わせの時のみなぜか起こるバグ。 Demo: SVG Resizing Bug on ~IE11 デモのSVG画像とPNG画像は共に256x256。IE11以下のみ縦にびよ～んと伸びて(64x256で)表示される。併記したPNG画像ではIE11以下でもちゃんとアスペクト比が維持され真ん丸(64x64)で表示される。ChromeやFirefoxではSVGであろうとPNGであろうとちゃんと維持される。 img[src$=".svg"], img[s
Sassの変数名での-と_
SassでBEMを利用して変数名を付けようとして、今までハイフンのみでどうにかしていた変数名を書き換えていた時に気づいたんだけど、Sassの変数名ではハイフン(-)とアンダースコア(_)が同一視される。バグだと思ってIssue立てたら、3.0.0でSCSS記法を追加した時に入れた仕様だという返事だった。 -と_が同一視されるということはどういうことかというと、以下の変数はすべて同じとみなされるということで、すべての変数の値は最後に定義した変数の値になる。 $foo--bar: "foo--bar"; $foo-_bar: "foo-_bar"; $foo_-bar: "foo_-bar"; $foo__bar: "foo__bar"; .test-foo--bar { content: $foo--bar; } .test-foo-_bar { content: $foo-_bar; }
opacityとz-index
opacityプロパティーで1より下が指定された要素はその重なり順が変化するという仕様があるようだ。擬似要素を複数組み合わせて紙をずらして重ねたようにロゴをちょっと改悪した時に初めて知った。いつものChromeのバグかと思った……。 仕様ではpositionプロパティーがstatic以外の要素でopacityプロパティーを1より下にするとz-indexプロパティーが0であるとみなされるようになっている。そのためその要素でz-indexプロパティーを-1にして背面に移動するようにしたり、100等で意識的に手前に持ってきたりするようにしている場合、その重なり順が壊れてしまう。 と、こう書くと結構単純な感じなんだけど、実際には0とみなされた上で新たな重なり順が作られるので、いくつかの要素をまとめて半透明にして重ねまくってたりすると、どういう重なり順になるかとてもイメージしにくい。ので余程の理由が
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
Sass - チュートリアル
この文書は古いSassウェブサイトに載っていたチュートリアルの訳で、2013年12月現在もう新しいウェブサイトには存在しません。新しいウェブサイトでのチュートリアルにあたるSassの基本の日本語訳を参照してください。 Translation of: Sass - Tutorial Ruby と Sass のインストール まず、Sass がちゃんと動作するようにします。OS X を使用しているのなら、既に Ruby がインストールされているでしょう。Windows ユーザーならば Ruby のWindows インストーラーで、Linux ユーザーならパッケージ・マネージャーでそれぞれ Ruby をインストールすることが出来ます。 Ruby のインストールが完了したら、以下のようにして Sass のインストールを行います: gem install sass 最初の Sass スタイルシート 非
Git Cheat Sheets JP
設定 基本 ブランチ リモート・リポジトリ git-stash git-svn 参考 修正履歴 設定 Git には様々なオプション設定がある。中には挙動を大きく変えるものもあるので注意が必要である。 設定をすべて表示する $ git config --list システム (/etc/gitconfig) の設定 $ git config --system --list や、ユーザーごと (~/.gitconfig) の設定 $ git config --global --list など表示する対象を絞ることもできる。 ユーザ名とメール・アドレスを設定する $ git config --global user.name "John Doe" $ git config --global user.email "john.doe@example.com" コミットする時に記録されるユーザー名とメ
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がアイコンの前景をつなげたスプライ
結局どうすればいいの？ - 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 この章で
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
