San Franciscoと日本語フォント
CSSでSan Franciscoフォントを指定しようとすると、特定の状況で日本語フォントがHiragino Kaku Gothic Interfaceというフォントに固定され、日本語フォントが指定できなくなる、という問題があります。たとえば以下のようなCSSの場合、日本語がヒラギノ角ゴではなくHiragino Kaku Gothic Interfaceになります。 body { font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", sans-serif; } このHiragino Kaku Gothic Interface（正式名称不明）は、おそらくヒラギノ角ゴをSan Franciscoに調和するよう調整したものと思われます。一見ヒラギノ角ゴと見分けがつかないのですが、文字サイズがひとま
Mojik
Mojikという、ウェブにおける和文の文字組みをコントロールするためのJavaScriptライブラリを公開しました。いまのところ、以下のパターンでの「アキ」を調整できます。 連続する約物のアキ 行頭の始め括弧のアキ 欧文間のアキ Mojik.compose()メソッドの引数にCSSセレクターを渡すと、マッチする要素から上記に該当する箇所を検出し、それぞれマークアップが挿入されるので、CSSでアキ量を調整します。以下のページに実際に動いているデモがあるので、ぜひ見てみてください。 Mojikデモ ウェブページの本文やタイトルなどで使われることを想定しているので、HTMLタグがあっても問題なく動作することは必須条件でした。基本的に、まずHTML文字列をテキストとタグに分けて、正規表現でテキストの検索を繰り返す、という方法を採っています。ここらへんはkotarok/jQuery.waokonなど
ウェブサイトでシステムフォント
GoogleのRobotoや、AppleのSan Franciscoなど、OSベンダーが独自のフォントを開発し、自社製品のUIにシステムフォントとして採用する、という事例が相次いでいます。これらのフォントは、プラットフォームの特性を考慮して最適化されたもの（あるいは最適なものとして選ばれたもの）と言え、かつ今後のOSのアップデートにともなってさらに改善されることも期待できます。また、ユーザーがそのシステムを操作するときにもっとも頻繁に触れる、つまりもっとも見慣れているフォントでもあります。というわけで、これらシステムフォントをウェブサイトのUIに採用するというのはかなり良いアイデアに思えます。 一方で、システムフォントはあくまでUIのためのもので、長い文章などには向かない場合もあるので、コンテンツ部分は別のフォントを指定すると良いかもしれません。たとえばMediumなどではそのようなアプロ
行の長さ
ウェブページの和文横組みの本文で、適切な行の長さはどのくらいか。もちろんこれは一概に言えるものではなく、内容、デバイス、書体、行間など、様々な要素に左右されます。しかし多くの場合、読みやすい行の長さは24字から40字程度で、長くても48字程度までにすると良い、というのが僕の意見です。これは僕の感覚もありますが、以下のようなガイドラインや実例を参考にしています。 まず欧文の場合、『The Elements of Typographic Style』にある「45字から75字」というガイドラインがスタンダードとして広く受け入れられているらしく、ウェブ・デザインについての書籍やブログ記事でも多く参照されています。 Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a s
#767676
僕はウェブデザインでグレーのテキストを使うとき、背景色が白（#ffffff）なら、前景色を#767676かそれより暗くするようにしています。これがWCAG 2.0の達成基準「最低限のコントラスト（レベルAA）」を満たすもっとも明るいグレーだからです。 ちなみに、背景色が黒（#000000）のとき上記達成基準を満たすもっとも暗いグレーは#757575です。つまり、#767676または#757575のテキストは、背景が白でも黒でも最低限のコントラストを確保できます。またこれらの背景色と前景色を入れ替えても同様で、#767676または#757575の背景ならテキストが#ffffffでも#000000でもOKです。 フォントのサイズやウェイトによってはこの限りではないし、背景色が真っ白や真っ黒でない場合はツールなどを使って検証する必要がありますが、とりあえずこの#767676という値を覚えておくと
要素をスクロールに追従させる jQuery プラグイン
Apple Store のサイドバーのように、要素をウィンドウのスクロールに追従させる jQuery プラグイン、jQuery Floating Widget を作りました。説明が難しいので、まずはデモをご覧ください! jQuery Floating Widget plugin demo このアイデア自体は新しいものではなくて、たとえば以下の記事で詳しく紹介されています: Fixed Floating Elements | jQuery for Designers - Tutorials and screencasts この方法で基本的にうまくいくんですが、フッターの高さがある程度あると、下までスクロールしたときに該当要素がフッター領域に食い込んでしまう場合があります。そこで、上記記事での実装を参考に、要素の「動ける範囲」を制限するための処理などを加えたものを考えてみました。 例として、フ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
