普通のHTMLの書き方
保守しやすく、規模に依存しないHTML文書のために 一般 DOCTYPEで始める 置き換えられるべきまたは旧式のDOCTYPEを使わない XML宣言を使用しない 文字参照はできる限り使わない &と<、>、"、'は名前文字参照を使ってエスケープする 制御文字や不可視文字は数値文字参照を使う コメントではその内容の前後へ空白文字を置く 終了タグを省略しない 空要素の書き方を混ぜない タグや属性値の前後へ空白文字を置かない 大文字・小文字を混ぜない 引用符を混ぜない 属性を2文字以上の空白文字で区切らない 真偽値を取る属性の値は省略する 名前空間は省略する XML属性は使わない data-*とMicrodata、RDFa Lite用の属性と通常の属性を混ぜない デフォルトの暗黙のARIAセマンティックスを尊重する 文書要素 lang属性を追加する lang属性の値はできる限り短くする できる限り
Gitのdiffコマンドにある--exit-codeオプション - Hail2u
npmコマンドでよく書くパターンにGitで固定のファイルをステージしてコミットするというようなものがある。なんらかの処理を行うメインコマンドのpostコマンドでよくやる。まれにその固定のファイルが更新されないこともあり、その時コミットしてしまうとcommitサブコマンドが正常に(終了コード0で)終了しない。これを避けるためにはステージされることで更新があったかどうかをチェックする必要があることになる。それはdiffサブコマンドの--exit-codeオプションを使うとうまく書くことができる。 例えば更新されているかもしれないfooというファイルをステージして、更新があった場合にのみコミットしたい、とすると以下のようにコマンドをつなげれば良い。 $ git add foo && git diff --cached --exit-code --quiet || git commit --mes
遅延読み込み用のぼやけた画像
Mediumでとある記事を高速にスクロールして読んでいたら、さりげなく画像を遅延読み込みしていることを知った。読み込み発火のタイミングがうまいのかあまり遅延読み込みの存在を感じさせないのもすごいと思ったが、プレースホルダー画像の実装方法が良さそうだった。単純に元の画像を幅30px程度まで小さくしてそれをブラウザーにリサイズさせることでぼやけた画像をプレースホルダーとして表示しているだけだが、十分に機能していそうで目から鱗だった。 画像の遅延読み込みはなかなか曲者で、読み込むタイミングやプレースホルダーとしている画像が悪いと大きくユーザーにストレスを与える。プレースホルダーでよく使われるローディング画像は読み込み中のインジケーターではあるが、同時に何か遅いことをやっていますというネガティブな印象も与えてしまう。ユーザーはローディング画像を見るとスクロールを止めなくてはならないのかと感じること
表のセルにおける少数の行揃え
表のセルでは数字は右揃えにすることが多い。しかし少数を右揃えにすると、小数点以下の桁数が違う時に読みづらくなる。等幅フォントにしてもそれは解決しない。少数点がうまく縦に並ぶように揃えたいわけだ。CSSではtext-alignプロパティーで文字列が指定できるようにしたいようで、いずれ可能になるかもしれない。とされているが、実はHTML4.01の頃からほぼ同じ機能は仕様で定義されているものの実装はないので、期待は薄い……と思ったものの、うっかり実装されていないかどうか確認した。 Demo: Test Page for Decimal Alignment in Table Cell やはりというか<td align="char" char=".">の実装はなかった。ついでにtext-align: "."もテストしてみたが、こちらもまだ実装はない模様だ。テスト・ページでは省いたが、ベンダー拡張プリ
node-inlining
HTMLからlink要素で参照しているCSSの内容をstyle属性に全部展開するNode.jsパッケージ、node-inliningを書いていた。HTMLとCSSを別々に普通に書き、このパッケージに含まれるCLIプログラムでコンパイルすると、HTMLメールとしてうまく機能するHTMLができあがるということになる。GitHubで推奨されている外部リソースに依存しない静的なエラー・ページを作成するためにも使えるかもしれない。 CLIプログラムはごく簡単に使うことができる。 $ npm install -g inlining $ inlining input.html >output.html これでoutput.htmlにインライン化されたHTMLファイルが吐かれる。処理例はREADMEの簡単な例やtestディレクトリーを見てくれればわかるはずだ。 Node.jsパッケージとしての利用は少しや
CSSできれいな斜め線
CSSで斜めに線を引くようなことをするには多少なりとも工夫が必要だった。つまりCSSで作る吹き出し(もう5年前の記事だ)のようにborderプロパティーを使って頑張るしかなかったわけだ。今はlinear-gradient()があるので直観的に作ることができるようになった。しかしきれいに引くとなるとまだ工夫が必要そうだ。 Demo: CSS Diagonal Line borderプロパティーを使ったもの、linear-gradient()を背景で使ったもの、Data URI化したSVGを背景に使ったもの、以上の計3つのデモを作った。 .lg { background-image: linear-gradient( to right bottom, transparent 50%, #f0f 50% ); background-repeat: no-repeat; background-si
git-release.js
Gitリポジトリでgit release majorなどとすると設定したターゲットのファイルの指定行にあるバージョン番号をインクリメントし、コミット、タグ付けまでやるNode.jsスクリプトを書いて使っている。汎用的でどこかに公開とかまでは面倒みないものがあればいいのになと思って、適当にNode.jsで書いて使ってる。 Download: git-release.js インストールはパスの通ったディレクトリにコピーしておまじないするだけ。semverモジュールに依存しているので、それをあらかじめグローバルにインストールしておく必要がある。コミットとタグ付けがGit専用なことに加え、Gitがgit-*で始まる実行ファイルがあるとサブコマンドとして呼んでくれるのを利用したり、設定をGitのローカル設定ファイルに書いたりして使うので、他のVCSではまったく使えない。 設定はgit configサ
SVGでローディング・アイコン
アニメーションSVGでローディング・アイコン、画像の読み込みの時とかにグルグルする奴を作った。回るスピードやサイズの変更が簡単なのが売り。8個の丸いパスを丸く並べ、g要素でグルーピングし、その子のanimateTransform要素でcalcMode="discrete"を使えば結構簡単に出来た。 <animateTransform attributeName="transform" attributeType="XML" dur="1s" repeatCount="indefinite" calcMode="discrete" values="0 256 256; 45 256 256; 90 256 256; 135 256 256; 180 256 256; 225 256 256; 270 256 256; 315 256 256" type="rotate"/> type属性でr
ID使っても別に問題ない
CSSでID使うの良くない……どころか、ID使うのはゴミクズカスみたいな風潮で辛い。その根拠はいくつかあり、それらはCSSだけをただそのまま書く場合には納得出来ないこともないかなーと思うので余計に辛い。特にOOCSSのようなアプローチではIDは混ぜるな危険。だからといってIDを使わないのがベスト・プラクティスなわけじゃない。 CSS Lintの利用が広まり、これがID使うなって怒るのも原因の一端な気がする。Disallow IDs in selectorsではIDの問題点として以下のようなものを取り上げている。 However, IDs have a downside: they are completely unique and therefore cannot be reused. つまりユニークなため再利用できないというマイナスの面がある、と。確かに再利用できない。でもこれはマイナス
Handlebars.jsのincludeヘルパー
Handlebars.jsでのテンプレートファイルの取り込みはpartial使えみたいな感じだけど、partialにするものを全て定義しなくちゃいけない。partialのテンプレートでの記述もpartialごとに変わる。それをSSIのインクルードみたいに{{include "foo.hbs"}}でコンテキストを考慮して取り込めたら簡単なんじゃないかなーと。でincludeするだけのヘルパーを作って使うようにしたメモ。 色々遠回りしたけど、結局はテンプレート・ファイルを読んでコンパイル→レンダーする関数を作ってそれをヘルパー関数にすれば良いだけだった。Handlebars.jsがカシコイのでコンテキストとかは自動的に良しなにしてくれる。 var fs = require('fs'); var hbs = require('handlebars'); function applyTemplat
Amazonの画像を拡大してリサイズし切り抜く
Amazonの商品画像は色々なパラメーターで加工できるのはよく知られている。大抵の場合はウェブサイトに合うようにサイズを変更したりとかが主なのでAA320やSX480とかを使うだけ。ただ非矩形な商品の画像の場合、余白がないことがあり白背景のウェブサイト以外ではサイズの変更だけでは上手くなじまない。それを拡大(SS)とリサイズ(AA)・切り抜き(CR)を組み合わせることにより適切に余白を追加してやろうというテクニック。頭悪そうなタイトル。 以下のデフォルトの画像では余白がなくキツキツでちょっとアレな画像を例にして説明する。 元の画像のサイズは500x221 https://m.media-amazon.com/images/I/31Eybjr97iL.jpg SSとAAというパラメーターによる画像サイズの変更は、元になる画像のサイズ(長辺が500pxのことが多い)を超えると余白が追加される。
安全な@font-faceの書き方(抄訳)
Internet Explorerではかなり昔からあった埋め込みフォント(@font-faceによるフォントの参照)の機能は、Safari 3とFirefox 3.5で有効になったことから急速に話題になることが増えた。ようやく時代がMicrosoftに追いついてきた感じですね。その書き方は大筋では一緒なのだが、細かな仕様の違い、というかIEがEmbedded OpenTypeしかサポートしていないことから工夫が必要になる。その工夫をBulletproof、つまり将来にわたって安全であろうという観点で短くまとめたBulletproof @font-face syntaxというすごく参考になったエントリがあったので訳しておく。語調などは超訳なので、原文とニュアンスが変わっているかもしれない。 安全な@font-faceの書き方 以下は訳注と私見。 条件付コメント 面倒くさいというのはわからなく
SCSSファイルの整理
SCSSファイルの整理をしてた。Sass 3.2を使い始めて以降、%セレクターをとりあえず使ってみる感じが多かったけど、ようやくどういうものに使うべきでどういうものに使うべきではないのかがわかってきたような気がする。というわけで現在のこのWebサイトのスタイルの構成のメモ。 関数 変数 Webフォント プレースホルダー・セレクター IDやクラス指定のないHTML要素 normalize.css ページを構成する要素のデコレーション ページを構成する要素のレイアウト その他ウィジェット 印刷向け 関数はどこで使われるかわからずプライオリティが高いので最初にインポート。それから変数を定義して、それを使ってスタイルを書いていく。Webフォントは変数のところでインポートして定義するようにした。Sass 3.2ではCSSの@importディレクティブを自動的に先頭に移動してコンパイルしてくれる機能が
meta要素のcontent属性でURL
meta要素のcontent属性は特にどういう値が入るものか決められていない。のでURLじゃないかもしれないし、URLとみなせる文字列なのかもしれない。OGPではRDFaだからmeta要素を使いましょうと書かれていて、URLを値とするurlやimageプロパティーもmeta要素のcontent属性を使う。昨日見たのだとWindows 8のピンに使われるmsapplication-TileImageとかもそう。 例えば「相対URLを使った場合はどうなるのか？」とか。IEBlogで例示されているコードでは相対URL使ってるので、Windows 8はとりあえずどうにかしてくれそうだけど、「base要素あってもちゃんと判断してくれるの？」とか疑問を持ち始めたらキリがない。こういうのはやっぱりURLだと明示されている要素の属性で行うべきだと思う。他に使えるものがないというのならしょうがないけど、この
git logを見やすく
git log --graph --onelineをメインに使っていたんだけど、現在時刻に対する相対的な時刻とかコミッターの名前とか表示したくなったので色々いじってた。%C(white bold blue)とかでターミナルの色を参照して文字色と背景色を指定することができるということを理解するまでが長かった……。 上記スクリーンショットのようなgit logは以下のようなコマンドで実現できる。 $ git log --graph --pretty='format:%C(yellow)%h%Cblue%d%Creset %s %C(black bold)%an, %ar%Creset' %dで参照名(ブランチやタグ、リモートブランチ)を、%anでコミッターの名前を、%arでコミットの相対的な日付を表示するようにして、%Cで色を変えている。%Credと%Cblue、%Cgreen以外を使う場合は
Learn You a Flexbox for Great Good!を訳した
おもしろい！Stephen Hayの書いたLearn You a Flexbox for Great Good!というCSS Flexible Box Layout Moduleについての記事がとても良かったので「Flexbox、おもしろいですよ？」というタイトルで日本語に訳した。もう一回言うけど、おもしろい！ まぁ細かくは翻訳の方を読んでもらうとして、ざっとさわりというか読むにあたって知っとくと良さそうなことだけちょっと結構書く。 Flexbox？ Flexboxはリサイズされたりとかした時に、それに合わせて並んだボックスをそれぞれ割合でリサイズさせたり、あるものだけリサイズするようにしたり、リサイズはしないけど位置をずらしたり(右や中央寄せとかだけでなく均等割付とかも)とかするもの。FirefoxのUIやアドオンでは既に普通に使われている(Web標準を目指しているものとはちょっと違うけ
余白の美
Translation of: Whitespace - A List Apart 僕の最初のデザインの仕事はマンチェスターの小さな印刷系のデザイン事務所でのもので、そこでは様々なものをデザインしました。パッケージや出版、ノベルティ、そして…ダイレクトメール。中でも、大きく、太く、そしてゴミゴミさせることが常のダイレクトメールをデザインする時には、大学で習ったグラフィック・デザインの原則はわずかしか役に立ちませんでした。忘れもしませんが、クライアントの一人にこう言われたことがあります。「余白は無駄なスペースだ」と。 ダイレクトメールの依頼者は大衆向けにデザインすれば効果的なので、そうすることを望みます。しかしながらダイレクトメール以外においては、それはまったくの間違いです。 はじめまして、余白さん 「余白」または「間(ま)」とはあるデザインを構成する要素同士の間隔のことです。もっと細かく言
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 スタイルシート 非
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がアイコンの前景をつなげたスプライ
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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
