CSS Transformによるセンタリングのベスト・プラクティス
上下左右のセンタリングには様々な手法が編み出されてきた。最近はCSS Transformを使う方法がメジャーになりつつある。コンテナーとセンタリングしたい要素のサイズが共に不明でもうまくいくところなど、そこそこ万能感があるのがポイントだろうか。このCSS Transformによるセンタリングは左下に動かしてから右上に戻すパターンと、その逆の右上に動かしてから左下に動かすパターンがある。どちらでも理論的には上手くいくが、ベスト・プラクティスとなりうるのは後者だけだろう。 Demo: Centering Unknown with CSS Transform (top/left) このデモは実際に不具合が起こりうるパターンになっている。センタリングする要素をtopとleftプロパティーで動かした後、transform: translate(-50%, -50%)で元に戻しているわけだが、Inte
CSSの非同期読み込み
印刷向けCSSだけじゃなく、ウェブフォントのCSSも非同期で読み込むことにした。FOUTが起こるようになるので、気になったら戻すかも。 var csses = [ { href: '/styles/print.min.css', media: 'print'; }, { href: '/fonts/megrim.css'; }, { href: '/fonts/source-code-pro.css' }, { href: '/fonts/source-sans-pro.css' } ]; var links = document.createDocumentFragment(); csses.forEach(function (css) { var link = document.createElement('link'); link.rel = 'stylesheet'; link.h
AdSenseの広告切り替え
Google AdSenseが公式にいくつかのケースに限って広告コードの改変を許可したので、後に手を入れることも考えて効率的なコードを考えている最中のメモ。 切り替えるそれぞれの広告スロット番号(や幅、高さの設定)はAdSenseで取得できるコードからコピペするようにしないと、コードの間違いなどミスを起こしそう。本当は外部JavaScriptファイルにそれぞれの広告の設定を保存しておいて、viewportでどれかひとつを読んでやるみたいなのがスッキリして良い気がするけどそこまでして良いのかわからない。 ヘルプにあるdocument.documentElement.clientWidthで切り替えるのは、広告のサイズと切り替えの条件文で比較する数字にずれができるのでメンテナンス性が悪そう。なので広告を貼る位置の要素の幅を取得し、ウェブサイトごとに余白や枠線分を適当に引いておいた数字と比較する
適切に改行を行う
ブラウザーはviewportによって折り返しを自動で行なってくれるわけだけど、場合によっては適切ではない位置で行われてしまうのをコントロールしたいという話。見出しをセンタリングしているようなケースで幅によっては一文字だけ次の行になってかっこ悪い！ みたいなのを解消したいということであったり、逆にびろ～んと間延びしないようによさそうな位置で改行を入れたいということであったり。一年くらい前にResponsive Line Breaksと呼ばれるようになった。 具体的なものはResponsive Line Breaksにあるデモやこのウェブログの日付表示の部分とかがそれ。ここではviewportの幅が広い時に良い位置で改行が入るようになっている。 article footer br { display: none; } @media (min-width: 60em) { article foo
CSSのelement()関数
せめてWebKitに実装されてからとか思ってたけど、CSS Image Values and Replaced Content Module Level 3がLast Callになったのでいい機会ということにしてelement()関数についてエントリを書く。element()関数は任意のIDを引数に取ることができ、その要素を画像として参照できるというなかなかの荒業な関数。具体的には画像のサムネイルを簡単に作成できるとかそういうものをイメージするとわかりやすいと思う。 Demo: Filmstrip View いわゆる「フィルムストリップ」のようなものを作るデモだけど、element()はまだFirefox 4以降でしかサポートされていないので、ChromeやSafariなどでは意図した通りに動かない。Firefoxなら下に並んだサムネイルをクリックすると大きな画像が表示される。切り替えやア
結局どうすればいいの？ - 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 この章で
コメント・スパム対策いろいろ
既にそれなりの効果を上げているものから妄想段階のものまで、コメント・スパム対策を羅列してみる。とりあえず10個。とりあえずて。ちなみにうちでは3つほどを連続でチェックしてます。現状では95%近く拒否できている模様。みんなでやればきっと楽しいいたちごっこ！ 評価の星(☆)は5段階。とは言うものの5のものはなかったりする。これは僕が未だに「決定的な対策は無いかなぁ」と感じていることを受けています。また、手作業でのスパミングは考慮外です。文末に「(未確認)」と付いているのは、誰も実装してない妄想段階の対策です。あくまでも機械的に投稿されるものへの対策。手作業でのスパミングはIPで投稿間隔チェックとかで良いと思います。 URLのチェック ☆☆☆ ブラックリストなURLのリストを作成し、それに該当するかどうかでチェックする方法。誤爆の可能性は無く、対策としては確実。しかし、最初の一回は絶対に防げない
hail2u.net - Weblog - floatで並べたリストのセンタリング
ページング・ナビゲーションなどでリスト項目をfloat: left;で横に並べるというのは割りと良く使われると思う。並べること自体は特に難しいわけではないが、その並べたリスト全体をセンタリングしようとするとちょっとややこしい。display: inline-block;を使う手法やdisplay: table;を使う手法という黒魔法的(私見)な手法で実現可能だが、position: relative;でもいける。 ややこしい理由は簡単で、センタリングでよく使われるtext-align: center;やmargin: 0 auto;といった手法が通用しないから。検索するとすぐ出てくる比較的メジャーなdisplayで頑張る方法もわかりやすいし悪くはないのだけど、同一セレクタ内で複数のdisplayを駆使する必要があることやzoomマジックなどを併用する必要があることからコードがややこしくなる
hail2u.net - Weblog - CSS2 Specificationでのプロパティの出現順序
少し前にCSSコーディング・スタイルというエントリで書いたように、各CSSルールのブロック内でプロパティを書く順序はCSS2 Specificationで出てくる順という縛りでCSSを書いている。大体のところはソラで覚えているのだけど、font-weightとfont-sizeはどっちが先だっけとかは忘れるので、備忘録がてら序列付きリストにしてみた。 margin margin-top margin-right margin-bottom margin-left padding padding-top padding-right padding-bottom padding-left border border-top border-bottom border-right border-left border-width border-top-width border-right-widt
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
