ウェブ・タイポグラフィーのベスト・プラクティス
Translation of: The All-Inclusive Guide to Web Typography Best Practices インターネットを見渡してみると、如何にタイポグラフィーがウェブ・デザインにおいて絶対的な支配力を持っているかに気付くことでしょう。とにかくウェブ・デザインの95%はタイポグラフィーだというわけです。このようなことを考える時は、様々なことを考慮しなくてはいけません。インターネットとはコンテンツであり、コンテンツとは文字そして文章です。すなわちタイポグラフィーを意味するわけです。 懸命なウェブ・デザイナーなら誰しもこのことは知っており、注意深くまた慎重に時間を費やし、作成中のウェブサイトでタイポグラフィーがきちんとなるようにしていることでしょう。その中では読者に機能的で魅力的であるようなタイポグラフィーを提供するため、ウェブサイトの情報アーキテクチャ
1/5くらい欠けた円を回す
新しいApple Storeアプリで使われてるローディング・アイコンをCSSで模したもの。たまにこういうものを作ると、自分が新たなCSSテクニックを学ぶことに貪欲でないことを再認識させられる。 Demo: Apple Store App Loading Icon .loading { border: 1px solid #797673; border-radius: 51%; position: relative; width: 2rem; height: 2rem; background-color: #fff; animation-duration: 1s linear infinite spin; } .loading::before { display: block; position: absolute; width: 50%; height: 50%; content: "";
Segoe UI Mono
Segoe UIに等幅バージョンがあることは前から知っていたのだけど、購入するしか入手方法はないのかなと思っていた。ちょっと調べた所、どうやらXboxのゲームへの同梱を許可する形で再頒布パッケージとして公開されているようだ。 等幅フォントとしては悪くはないけど、全体的に大ぶりで、コーディングにおいてはConsolasの方が全般的に優れているような印象。1ilIあたりは識別可能だけど、0にドットや斜線がなく、大文字のOと区別がほとんどつかないのもマイナス。ウェブページでSegoe UIとセットで使うとするとなかなか良いけど、両者共にそういうためには頒布されてない。 スッキリと見やすい感じではあるので、コードの一部を画像にしてなんかに使うみたいなケースにはうまくマッチしそう。 話題沸騰中のアレを引き合いに出すまでもなく、サンセリフは選択肢がそこそこ増えてきたので、今後はセリフと等幅の充実に期待
Sassでの色管理
Sassでは色を変数として定義でき、また様々な関数でそれを操作することが可能になっている。そのため色を論理的に管理することが可能になっているが、これといった手法が確立されているわけではない。このウェブサイトでは少しややこしい形で管理するようにしている。どういう目的でこういう複雑な構造になっているのかを簡単に書いておきたい。 基本色の定義 基本色、つまりテーマカラーであったり、本文の背景色や文字色といった見た目のイメージを決定する色は、色コードを直接指定して定義する必要がある。これはほぼ間違いなくみんな同じように書いているだろう。 $color-dark: rgb(60, 51, 48); $color-light: rgb(252, 249, 240); $color-accent: rgb(17, 136, 187); これらは背景色であったり文字色、そしてリンクの文字色として使っている
git subtreeの練習
Gitのサブモジュールでは面倒そうな、頻繁に更新される別のリポジトリを取り込む方法としてサブツリーマージを行うラッパーであるgit subtreeコマンドを使う練習を始めた。どちらかというと「参照する」要素の強いサブモジュールに対して、サブツリーは「切り分ける」や「取り込む」という感じなんじゃないかと理解している。全般的に間違ってそうで怖い。 「切り分ける」、つまりリポジトリのサブディレクトリを別のリポジトリにしたい場合は、単純なケースだと親にあたる方で.gitignoreや.git/info/excludeを使ってサブディレクトリを除外してやれば良い。でもこの場合、両方のリポジトリで関連した変更がある時にそれぞれのリポジトリでコミットしてやらないとならないので面倒くさい。 「取り込む」場合はサブモジュールが基本なわけだけど、他で作業して戻ってきてたりする必要があるし、サブモジュールの更新
ファビコン・カンニング・ペーパー
Translation of: favicon-cheat-sheet ファビコンのサイズや形式についての読むと頭が痛くなる偏執的なカンニング・ペーパーです。以下のURLを参考にしました: rel="shortcut icon" considered harmful · Mathias Bynens <-- special thanks @mathiasbynens Everything you always wanted to know about touch icons · Mathias Bynens <-- special thanks @mathiasbynens Jonathan T. Neal | Understand the Favicon Favicon - Wikipedia, the free encyclopedia Making a Good Favicon -
入力フォームのラベルをフワッと浮かせるパターンの別解
Float Label Patternはかっこよくて、単にラベルをプレースホルダーにするよりはマシなので使いたくなる。しかしラベルとプレースホルダーは別に提供してやりたい。機能も違うものなので、その方がきっと良いはずだ。そこで別解として、ラベルが斜めに動くものを考えた。もちろんCSSのみで実装している。 Demo: Alternative Float Label Pattern 入力フォームにフォーカスすると、左にあるラベルが斜め右上に少し移動すると同時に入力フォームが左へ拡大する。これによりFloat Label Patternと同じような結果になるが、デフォルトの状態ではラベルとプレースホルダーを両立させることができる。 ラベルを入力フォームのフォーカスと連携させるには、隣接兄弟セレクターを使うくらいしか方法はなさそうなので、マークアップは入力フォーム→ラベルの順にする必要がある。また
word-break: break-all
英単語の間であっても自動改行されるように、word-breakプロパティーでbreak-allを採用しているウェブサイトが地味に増えているような印象だ。コスメティックな理由で見出しやサムネイルの付記などに使うのは悪くない妥協だと思うが、本文にもわりと気軽に使われていてかなり気になる。 日本語では特に単語の切れ目という論理的な箇所は存在せず、ブラウザーではどこでも自動改行される。せいぜい句読点が行頭にならないように制御されるくらいだ。word-breakプロパティーではこの自動改行における単語の禁則処理を制御できる。値としてbreak-allを指定すると禁則処理が解除され、現在のブラウザーの実装では以下のような事象が起こる。 英単語の間で改行される 行頭でも記号が許可される 前者がわかりやすく、これを目的としていることが多い。こうすることによってタイポグラフィーでいうところのflush le
コードをなんとなく色付けするやつ
Coding in colorという記事を読んだ。どのようなものか、通常の構文強調とはどのように違うか、は僕が言葉で説明するよりもそのデモを見てみた方がわかりやすい。記事ではtypoに気づきやすいとかあるけど、どちらかというと読むのに向いていると感じる。 GitHubのコード・ビューワーやウェブログの記事のコード・ブロックのように、ハイライト規則を読む人が知らない(ことがある)ようなケースだと、こういう色付けの方がスタティックな色付けよりも読みやすいような気がする。 とか書きつつ、結構前からウェブログのコード・ブロックには色付けは必要ないと考えていたりもする。色付けをしないと読みづらいほど長いコードを丸々載せると、記事の文章が分断されて読みづらくなるし、短いコードなら色付けが必要になることはまずない。コメント部分のみコントラストを下げるみたいなので十分な気がする、と、そういうJavaScr
CSSポストプロセッサー時代の到来
SassやLESSといったCSSプリプロセッサーは市民権を得たと言って良いと思う。しかしそれらCSSプリプロセッサーは開発という段階にのみ利をもたらすもので、今のところはそれ以上ではない。CSSを実際にユーザーに届けるまでには、開発だけではなくレビューとリリースという段階もある。レビューとリリースも確実性を持って効率的に行うためには、CSSポストプロセッサーと総称されるようなツール群が必要になるだろう。 この文書はFrontrend Advent Calendar 2013の4日目への記事として寄稿した。明日は@hilokiさんがスタコラサッサと書くようだ。 目次 CSSポストプロセッサーとは CSSプリプロセッサーの出力するCSS CSS Lint 開発用とレビュー用、リリース用のCSS CSSポストプロセッサーのユースケース ベンダー拡張プリフィックスの付加 Media Queries
SVGのanimateTransform要素
SVGのanimateTransform要素は、その親要素をアニメーションさせながら変形したり動かしたりするためのもの。fromとto要素だけでもちょっとしたことならできるけど、複雑なことをやるにはvaluesとkeyTimes属性とを組み合わせるようだ。 Move 300px in 2s, Sleep 2s, Move -300px in 2s, Sleep 2s 均等にシーンを割り当てる場合はvalues属性を書くだけで良い。 <animateTransform attributeName="transform" attributeType="XML" begin="0s" dur="8s" repeatCount="indefinite" values="0; 300; 300; 0; 0" type="translate"/> values属性に指定した値の個数から1を引いた数でd
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. つまりユニークなため再利用できないというマイナスの面がある、と。確かに再利用できない。でもこれはマイナス
Prism vs. Google Code Prettify
UglifyJSを通すとGoogle Code Prettifyの大量のコメントが消え、なんと逆転した。Only 2KBに騙された感じある。ここからのgzipではほとんど差は出ないし、どちらも言語定義は正規表現のため新たな言語定義の追加でも差は出ることはない。双方の強調機能に少し差があることを考慮しても、Prismが特に小さいということはないようだ。 ただPrismの優位性はコアのサイズだけではなく、必要な言語定義を必要なだけ導入できる所などにもある。新しい言語定義もGoogle Code Prettifyのそれと比較して格段に書きやすい。サイズのメリットはあまりないことがわかってしまったが、コンパクトに抑える努力が可能なPrismに乗り換えたい気もする。……んだけど、ちょっとこのサイトに合わせて作り込もうとしたらすごく面倒だった。 まず、言語定義の依存があるため、自前で連結しようとすると
OpenTypeのfeaturesをプレビューする
あるフォント・ファイルがオールドスタイルの数字とかスモールキャプスとかのOpenTypeのfeaturesを持つかどうか確認する方法は色々ある。Photoshopでもいいし、FontForgeでもいい。ただ、あるfeatureを有効にした状態が手軽にプレビューできるものとなるとあまりない気がする。ググってもらしきものを見つけることが出来なかったので、Drag and DropとFileReaderを使ってfeatureを一覧プレビューするページを作った。 Demo: Preview OpenType Features 適当なOpenTypeフォントをページにドロップすればフォントが変更されて確認できる。TrueTypeフォント・ファイルでもプレビューできたりする。WOFFも大丈夫なはず(単なるコンテナーなので)だけど、多くのWOFFはOpenTypeのfeaturesを軽量化のために削除し
ArbitraryCounter
Hacker News経由でArbitraryCounterというのを知った。カウントをアップまたはダウンするだけというニッチなAPIを提供するだけのもの。データは48時間しか保たないので本当に開発者向けなんだろうけど、いいね！ ボタンっぽいものを作るという形で遊んだら楽しかった。 Demo: ArbitraryCounter Like Button いいね！ と違って何回でも押せるのではてなスターに近い。こういうのがちょっとした工夫でJavaScriptだけで書ける。ArbitraryCounterのAPIは非常に単純なものなので、それの使い方というよりもOpen Data Tablesを書いてYQLでPOSTする話。 総カウントを取得する カウント数の取得はGETで可能なので、JSONPは用意されていないけどYQLでラップしてやれば良い。 select * from json wher
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なら下に並んだサムネイルをクリックすると大きな画像が表示される。切り替えやア
v6.13
ちょっと色々手を入れたのでエントリにする。手を入れたというか一度全部Webフォントでやってみたいなーと思ったので、そうしてみた話。まぁ日本語は無理なのでそんなにだけど。 本文フォント 今はフォントサイズをごく一部でしか指定していないのでx-heightにはあまりこだわらなかった。16pxでがたつかず、Boldがあるという条件で選別した結果、 CarthoGothic Std DejaWeb Fontin Sans Lato Open Sans PT Sans あたりが候補に残った。Fontin Sansはさすがに派手すぎるかなーという理由で、PT Sansは小文字のlの曲がりがきつすぎる気がするという理由でそれぞれ外した。残りのどれでも良かったんだけどあんまり使われていない気がするLatoにした……がSafariで文字が一部ぶっ壊れるのでとりあえずOpen Sansに……。DejaWebに
Style Guide - hail2u.net
Posted on 07 Dec, 2011 in Web Design? hail2u.netで使われているスタイルの解説兼プレビューのページです。スタイルのコードそのものについてはその公開リポジトリを参照してください。このページのマークアップにはおかしいところが多々ありますが、その多くはやむを得ない事情によるものです。 コンテンツの見出しはh2でマークアップされます。ブログでは見出しに続けてfooterが配置され、更新日時とカテゴリをそこで示します。 FacebookのLikeボタンやはてなスターはその対象の最後にまとめて配置されます。つまり、それらが記事に対するものの場合はarticle要素内の最後になりますが、ページに対するものの場合はdiv#mainの最後になります。対してAdSenseの広告は常に最初のセクションの直後に挿入します。 ベース ブラウザーのデフォルト・スタイルシー
ページめくりの矢印
定期的に発症する画像使いたくなくなる病のため、ページめくりの矢印を画像じゃなくしたいなといろいろ考えているんですけど、なかなか良い物ができません。ユニコードのArrowやDingbatsなどにはいわゆる矢印的なもの(→みたいなもの)はいくつもあるので、そういうのが良いのならそれで良いと思うんですけど、自分のイメージではあんまり矢印々々してないのが良いかなというのがあるので、それらはちょっと使いづらかったです。いろいろ作った中ではborderとtransformプロパティを使ったものがそこそこまともに見えるような気がしました。 Demo: Paging Arrow 最初のスクリーンショットはこのデモを各ブラウザで表示したもので、左からChrome 15・Safari 5.1.1・Firefox 7.0.1・Opera 11.52・Internet Explorer 9.0.3です。各ブラウザ
結局どうすればいいの？ - 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 この章で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
