普通のHTMLの書き方
保守しやすく、規模に依存しないHTML文書のために 一般 DOCTYPEで始める 置き換えられるべきまたは旧式のDOCTYPEを使わない XML宣言を使用しない 文字参照はできる限り使わない &と<、>、"、'は名前文字参照を使ってエスケープする 制御文字や不可視文字は数値文字参照を使う コメントではその内容の前後へ空白文字を置く 終了タグを省略しない 空要素の書き方を混ぜない タグや属性値の前後へ空白文字を置かない 大文字・小文字を混ぜない 引用符を混ぜない 属性を2文字以上の空白文字で区切らない 真偽値を取る属性の値は省略する 名前空間は省略する XML属性は使わない data-*とMicrodata、RDFa Lite用の属性と通常の属性を混ぜない デフォルトの暗黙のARIAセマンティックスを尊重する 文書要素 lang属性を追加する lang属性の値はできる限り短くする できる限り
遅延読み込み用のぼやけた画像
Mediumでとある記事を高速にスクロールして読んでいたら、さりげなく画像を遅延読み込みしていることを知った。読み込み発火のタイミングがうまいのかあまり遅延読み込みの存在を感じさせないのもすごいと思ったが、プレースホルダー画像の実装方法が良さそうだった。単純に元の画像を幅30px程度まで小さくしてそれをブラウザーにリサイズさせることでぼやけた画像をプレースホルダーとして表示しているだけだが、十分に機能していそうで目から鱗だった。 画像の遅延読み込みはなかなか曲者で、読み込むタイミングやプレースホルダーとしている画像が悪いと大きくユーザーにストレスを与える。プレースホルダーでよく使われるローディング画像は読み込み中のインジケーターではあるが、同時に何か遅いことをやっていますというネガティブな印象も与えてしまう。ユーザーはローディング画像を見るとスクロールを止めなくてはならないのかと感じること
CSS Transformによるセンタリングのベスト・プラクティス
上下左右のセンタリングには様々な手法が編み出されてきた。最近はCSS Transformを使う方法がメジャーになりつつある。コンテナーとセンタリングしたい要素のサイズが共に不明でもうまくいくところなど、そこそこ万能感があるのがポイントだろうか。このCSS Transformによるセンタリングは左下に動かしてから右上に戻すパターンと、その逆の右上に動かしてから左下に動かすパターンがある。どちらでも理論的には上手くいくが、ベスト・プラクティスとなりうるのは後者だけだろう。 Demo: Centering Unknown with CSS Transform (top/left) このデモは実際に不具合が起こりうるパターンになっている。センタリングする要素をtopとleftプロパティーで動かした後、transform: translate(-50%, -50%)で元に戻しているわけだが、Inte
Feedlyでのフィードの分類
Feedlyでは今は亡きGoogle Readerや不死鳥のごとく蘇った(蘇る予定の)livedoor Readerのように全文表示の状態でサクサク読むのはUI的にもパフォーマンス的にも難しい。読む必要があるフィードとそうでないフィードを分類することは、Feedlyではより重要だと言える。 Collectionを使う Collectionはフォルダー分けやタグ付けと似ている機能で、登録したフィードを分類する仕組み。複数のCollectionに所属できるので、タグ付けと言った方がわかりやすいかもしれないが、タグはタグで別にそういう機能がある。 ldRのレーティングのような仕組みは、レーティングっぽい名前でCollectionを作成するだけで実現できる。Collectionのソート順はドラッグ・アンド・ドロップで入れ替えられるので、ソート順は特に考慮する必要はない。絵文字や全角記号は通らない…
書き続けること
昨年の5/27の記事でウェブログ復帰して以来、どうやらほぼ毎日書いたようだ。飛んでる日付では前日に二記事書いてる。誰も褒めてくれないので自分で褒めておこう。 とは言うものの、継続は力なり的な言葉には懐疑的だ。特にウェブログの記事が個々に消費される傾向が強くなった現在では、継続することそれ自体は世界に何も影響を与えない。なにかの肩書があればまた違うのかもしれないが、ないものはないのでどうしようもない。 文章を書けば上達するみたいなこともよく言われるけれど、それはあくまでも適切なフィードバックを得られることができての話で、スルーされるか「ですよね」で終わるか炎上するかの三択のような今は、それほど効果はない。せいぜい表記ゆれが自然に解消していくようになるくらいだ。 でも「ここは単なるメモや自己満足の場だ」などとは言いたくはない。ウェブログに書かれた記事が「メモ」であるか「自己満足」であるかは他人
Fira SansのWebフォント
Firefox OSに採用されているオープンソースのFira SansのWebフォントがMozillaのGitHub Pages経由で配信されていることを知った。ちょっと前までGitHub Pagesはパフォーマンスに難があったけど、最近大幅に改善されたので、Fira Sansをウェブページで使いたい場合はこれを直接読み込めば良さそう。 Demo: Fira CSSは全部入りのが用意されてるので、それを使うと簡単だけど、HTTPリクエストが増える。そのため以下のように必要なだけ直接@font-faceルールを自分で書く方が良い。 @font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 400; src: local("Fira Sans"), local("FiraSans-Regular"), url
Webフォントのホスティング
Webフォントのホスティングのみを提供するようなサービス、つまりWebフォント専用のカスタムCDNを探していた。しかし、Webフォントがメジャーになったとはいえ、そこまでニッチなサービスはあんまりないようだ。代表的なものだとTypeFront。が、かなり制限厳しい。試してすらいないけど、$15/月は払わないとまともに機能しそうもないような仕様だった。 Webフォント専用にこだわらずに、GitHub PagesやDropboxを利用するという手もありそうだけど、Internet Explorer 9以降やFirefox 3.5以降におけるCORSによる制限に対応できない。また、パフォーマンスに難点があったり、Content-Typeでトラブりそうとかも。 Google Drive Google Driveだとどうかなーとテストしてみたら、Access-Control-Origin: *となっ
HTMLにおけるimg要素のalt属性
HTML Standardの4.8.1.1 Requirements for providing text to act as an alternative for imagesをざっと把握できるように日本語で箇条書きにしただけのものです。最終的には原文をしっかりと読むべきでしょう。 基本 必ず定義されるべきである その値は空であってはならない その画像に代わりになる最適な文字列である ページ上の全ての画像をそのalt属性の値で置き換えてもページの意味合いが変わってはならない 画像のキャプションや題名、銘とみなされるような補助的な説明を意味するものであってはならない 前後で解説されている情報の繰り返しであってはならない 画像以外に何も含まれていないリンクやボタンで使われる場合 リンクやボタンの目的を明確に伝える文字列を指定する わかりやすく説明するために文章ではなく画像のチャートやグラフを
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
http://hail2u.net/warn.txt
25度を超え、コリスを使っていじられることをスルーする余裕がなくなったため、下記のURLの人はアイス買ってきてください。 http://lowreal.net/ ハーゲンダッツと明記されていない場合、顔に投げつける可能性があります。
Soma FontFriend
Google Web Fontsのテストはまじめにやる時はちゃんとテストページを作って確認してるけど面倒くさい。Google Web FontsのPreview Textは日本語使えないので、日本語部分との相性やベースラインのずれなどが確認できなくて問題外。でもできるだけ手抜きしたいので、そういう時はSoma FontFriendというブックマークレットをこのWebサイトを開いてから起動している。これは結構昔からあるブックマークレットで元々は単にfont-familyを書き換えるだけだった(と思う)んだけど、今のバージョンだとGoogle Web Fontsからフォントを引っ張ってきて確認できる。愛用してる。 Full preview of Soma FontFriend 起動するとこのような画面が左下(画面位置は矢印をクリックすると移動できる)に出てくるので、中央右の一番上にあるGoog
ブレークポイント
このWebサイトのスタイルではブレークポイントがレイアウト向けに3つ、フォント・サイズ向けに4つ設定されている。なんと7段変速！ なんでそうなってるのかとかそういう話を書きたくなったので書く。 レイアウト向け 主にデザインが格納できるのか、バランスはどうかみたいな理由でブレークポイントを設定している。Mobile Firstで書いているのはパフォーマンス的な問題なので、本当はもっと理由駆動でMedia Queriesを書きたい。em単位を使っているためユーザーのズームやフォント設定などは考慮される。だいたい標準は16pxであることは既知だけどそれに依存しないのでマイナーな標準を採用しているブラウザーとか大きめのフォント・サイズを愛用している人のブラウザーとかでもおかしくならない(可能性が高い)。 小さめのスクリーン On small screen グローバルなヘッダーとフッターがセンタリン
Lea Verouのフレシキブルな複数行定義リスト
Lea Verouの編み出したフレキシブルな複数行定義リストは目からウロコだった。このテクニックを知るまではfloatを使うと長い時(コンテンツ幅に収まらない時)に途中で改行とかうまくできないけどまぁしょうがないか……みたいな感じで我慢していた。LF(やCR)を擬似要素経由で挿入してwhite-space: preで改行させてしまうというのは頭良い。ただ複数のdd要素を持つケースにはうまく対応できないのでちょっと変えて使い始めた。 このテクニックはつまりdt要素とそれとセットになったdd要素を一行に並べるというもの。表的なものならばそれは単にマークアップが間違っているのでtable要素でマークアップし直した方が適切だけど、dl要素のが適切なケースも多くあるのでこのテクニックが生かされる場面は多い。 dt, dd { display: inline; } dd + dt:before { c
Noticia Text
ロゴやフッター他のフォントをCrimson TextからNoticia Textに変えた。WindowsのChromeでもそこそこキレイで、イタリックとボールドが揃っている稀少なGoogle Web Fonts提供のWebフォント。スラブセリフを使ってみたかっただけ。読みやすいけど読みやすいだけかなぁという気もする。Crimson Textは悪くなかったけど飽きた。 Noticia Textはサンセリフも含めた多様なファミリー展開になるようなので、そうなると「読みやすいだけ」みたいな印象も変わってくると思う。そんな期待も込めて使ってみた。サンセリフはぜひ使ってみたいな。 フッターもちょっと整理した。フィードへのリンクを独立させたり、CC BY-NCであることをちゃんと明記したり(前まではhead要素内に書いてただけだった)。フィードのアイコンとFacebook等のアイコンを並べるとおさまり
HTTPエラーページに意味を持たせよう
Translation of: Adding meaning to your HTTP error pages! by Stuart Colville This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license はじめに ウェブ上で何かを検索しようとすると、既に存在しないページしか検索結果になく、それらへのリンクをクリックすることはよくあるだろう。その開いたページにデフォルトのエラー・メッセージの他に何も情報が載っていなかった場合、多くの人々は戻るボタンを押し次の検索結果を開こうとするだろう。 サイト製作者である我々はもっと訪問者に意味のあるエラーページを作成することができる。そうすればたとえエラーページであっても訪問者をサイトに留まらせ、彼ら
Flexbox、おもしろいですよ？
Translation of: Learn You a Flexbox for Great Good! | The Haystack. written by Stephen Hay Flexboxについて知っていますか？ 多分、名前は聞いたことがあるでしょう。もしかしたらチュートリアルくらいは読んだことがあるかもしれません。既に試していたりしますか？ Flexboxという代物についてあまり聞いたことがなかったり、前に試してから随分と経つなら、そのFlexboxに関する知識のことは一旦全て忘れてしまいましょう！ 現時点での最新版である2011年11月29日にリリースされた仕様では完全に別物になっています。 訳注 2012年3月22日に新しく公開されたWorking Draftでもまた大きな変更が加わり、この文書の一部はそのWDにそぐわないものになっています。大筋は変わりませんし、2012年3
Style Guide - hail2u.net
Posted on 07 Dec, 2011 in Web Design? hail2u.netで使われているスタイルの解説兼プレビューのページです。スタイルのコードそのものについてはその公開リポジトリを参照してください。このページのマークアップにはおかしいところが多々ありますが、その多くはやむを得ない事情によるものです。 コンテンツの見出しはh2でマークアップされます。ブログでは見出しに続けてfooterが配置され、更新日時とカテゴリをそこで示します。 FacebookのLikeボタンやはてなスターはその対象の最後にまとめて配置されます。つまり、それらが記事に対するものの場合はarticle要素内の最後になりますが、ページに対するものの場合はdiv#mainの最後になります。対してAdSenseの広告は常に最初のセクションの直後に挿入します。 ベース ブラウザーのデフォルト・スタイルシー
Sassで行こう！
Translation of: Getting Started with Sass - A List Apart CSSの持つその簡明さは欠かせない特徴の一つで、それは最も歓迎されている点でした。CSSによるスタイルシートは、セレクターといくつかの適用したいスタイル情報を含むルールを羅列したものに過ぎません。しかし、WebサイトやWebアプリケーションが巨大に、そして複雑になり、様々なデバイスや画面サイズに対応せざるを得なくなった現在、この簡明さという特徴―fontタグやテーブル・レイアウトの淘汰に大いに役にたったもの―が大きな足かせになっています。 簡単な計算機能や変数を追加するなどといったCSSの修正案が過去に提示されましたが、どれもブラウザー・ベンダーには採用されませんでした。仮にこういった新しく素晴らしい拡張されたCSSがあるブラウザーに実装されたとしても、それが実用に耐える程度に
余白の美
Translation of: Whitespace - A List Apart 僕の最初のデザインの仕事はマンチェスターの小さな印刷系のデザイン事務所でのもので、そこでは様々なものをデザインしました。パッケージや出版、ノベルティ、そして…ダイレクトメール。中でも、大きく、太く、そしてゴミゴミさせることが常のダイレクトメールをデザインする時には、大学で習ったグラフィック・デザインの原則はわずかしか役に立ちませんでした。忘れもしませんが、クライアントの一人にこう言われたことがあります。「余白は無駄なスペースだ」と。 ダイレクトメールの依頼者は大衆向けにデザインすれば効果的なので、そうすることを望みます。しかしながらダイレクトメール以外においては、それはまったくの間違いです。 はじめまして、余白さん 「余白」または「間(ま)」とはあるデザインを構成する要素同士の間隔のことです。もっと細かく言
結局どうすればいいの？ - 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ページを開く
