ch単位を使ったカラム幅指定 - Weblog - Hail2u.net
コンテンツのカラム幅は半角英数で45から75文字という説がある。それをem単位に直すとおおよそ25emから35emと考えられるが、実際にはフォントの横幅に依存する。一方CSSにはch単位というフォントの横幅によって変化する単位がある。ということはこの単位を幅や横方向の余白に利用すると、使用されるフォントに応じてカラム幅が適切に変化するはずだ……が、そうは問屋が卸さなかった。 利用はそれほど難しくない。ch単位は半角数字の0の横幅で決定されることさえ頭に入れておけばそれでよい。45から75文字を直すならそのまま45chから75chになるわけだ。一部でどうしても(r)em単位と組み合わせたい場合も出てくるだろうが、その場合はcalc()関数を使える。これでぱっと見はうまくいく。 しかしながらウェブフォントとの相性が非常に悪い。ウェブフォントの読み込み中と読み込み完了後でch単位の基準が変わって
ローカルのフォント
少し前にこのウェブサイトがNeue HelveticaまたはCalibriになるように変更した。ウェブ・フォントを普通に使う機会が増えたその反動で、自分のウェブサイトは使いたくなくなる、といったところであまり深い理由は無い。ローカルのフォントだと表示の速さが3倍回しくらいに感じる。初期ページ表示までに特に引っかかりがないようなウェブページだと、コンマ1秒もないウェイトですら影響は大きい。 ウェブ・フォントの表示における技術的な問題は、解決することは難しいことがわかってきた。仕様が不十分なこともあるが、実装が依存している技術に左右され、そこはどうにもしようがなさそうな領域だからだ。HTTPS + HTTP/2でかなり改善する可能性はあるが、ウェブ・フォント用の専用ストレージがブラウザーに実装されない限りは完全には解決できないはずだ。 一方ローカルのフォントにも解決できない問題は多い。そのひと
ウェブ・フォントの読み込み - Weblog - Hail2u.net
ウェブ・フォントも完全に行き渡り、今はどう効率的に配信するかについて多くの時間を割くようになった。Google Fontsの低め安定路線を見限り、TypeKitやFonts.comへ鞍替えする人々も増えた。それと同時に自前でホスティングする人々も徐々にその数を増やしており、どれが最適解なのか一応の結論が出るにはもう少しかかるだろう。まず、ウェブ・フォントの読み込みにおいてどのようなアプローチがあり、どのようなメリット、そしてデメリットがあるのだろうか。 TypeKit等に頼るにしろ、自前でホスティングするにしろ、もちろん最終的にはウェブ・フォントをブラウザーに送りつける必要がある。読み込みとはまさにその部分の話だ。話がややこしくなるので、多様な実装を意識した安全な書き方などについては触れない。 普通に@font-face定義を利用 @font-face定義をただ普通に書く場合のメリットは、
HTML5 Shivの削除
このウェブサイトは、rem単位を使っていたりと、Internet Explorerだと事実上バージョン9以降でしかうまく閲覧できないようになっている。となるともうHTML5 Shivを使う意味もあまりないので削除した。これでようやく不格好な条件付きコメントを見ないで済む。 条件付き○○というものはうまく機能するが、それの利用には継続したメンテナンスが必要になる。条件付きで何かを特別視するので、プラットフォームに変化が加わるごとに、意図した通りに機能してくれるかどうかや追加で特別視する必要があるかどうかを確認しなければならない。そうしないと古く時代遅れのプラットフォームに依存し続けることになる。 現実世界の多くの仕組みではメンテナンスなしでも大体うまくいく。それはプラットフォームに変化が加わることがあまりないからだ。人々も大体そう感じているので、何もしなければそのまま動くはずだと考えている。
right: 100%か負のマージンか
これまでCSSにはレイアウト方法があまりなかった。これからはFlexible Box LayoutやMulti-column Layout、Grid Layoutを始め、positionプロパティーに使える値の拡充などもあり柔軟に行えるようになるだろうが、それはけっして既存のレイアウト方法が不必要になるということではない。選択肢が増えると受け止めるべきだ。例えばright: 100%や負のマージンを使って親要素の外側左にレイアウトする手法はそのまま使い続けることになるだろう。 ほとんど同じレイアウトを実現するright: 100%と負のマージンの使い分けを通して、レイアウト方法の選択をどう行うべきかという基本的な思想を解説することにより、今後増えてくるレイアウトの選択肢にどう相対すべきかがわかるのではないかと思う。そしてそれはCSSプロパティーの意図された使い方を理解するということでもある
JekyllみたいなのとWordPressみたいなのの組み合わせ
静的ウェブサイト生成ツール(面倒なので以下Jekyllみたいなの)と動的ウェブログ・システム(同じくWordPressみたいなの)のそれぞれの長所や短所はみなよく知っているようで、よりその人の状況にあったどちらかを選んだみたいな記事をよく見る。そういうの見る度にどうして両方使わないんだろうと思う。 静的なHTMLでのウェブサイトの運営は簡単で楽だしコストも掛からず、環境もあまり選ばない。けどMovable Typeでの破綻を引き合いに出すまでもなく、1000やそれ以上のHTMLを生成できる無理のないシステムはあるのかというと微妙な感じがする。で、規模に応じて動的なCMSと使い分ければ……となることが多いわけだけど、使い分けるのではなくJekyllみたいなのとWordPressみたいなのを組み合わせるのが良いのではないか。 テンプレート 分けちゃうとテンプレートの管理も分かれて面倒くさいとか
Google Web Fontsにあるお気に入りのフォント5つ - Weblog - hail2u.net
Google Web Fontsのフォント登録数も随分増えてきてチェックするのが大変になってきました。一応絞り込みとかそういう機能もありますけど、Typekitのようにかゆいところに手が届く感じではありません。そこで……というわけではないですけど、なんかの参考にでもなればと僕のお気に入りを5つだけ簡単な説明付きで紹介してみます。 Demo: Five Favorite Google Web Fonts Amaranth Amaranthはゆるやかにカーブのかかったグリフが特徴です。比較的小さなサイズからその特徴がはっきりと出るので、ロゴ以外にもナビゲーションなどでも使えると思います。斜体ではそのゆるやかなカーブがセクシーに強調され、また違った味わいがあります。 Arvo Google Web Fontsにはあまりスラブ・セリフがないですが、Arvoは唯一まともに使えそうなそれです。評価の高
Sassで行こう！
Translation of: Getting Started with Sass - A List Apart CSSの持つその簡明さは欠かせない特徴の一つで、それは最も歓迎されている点でした。CSSによるスタイルシートは、セレクターといくつかの適用したいスタイル情報を含むルールを羅列したものに過ぎません。しかし、WebサイトやWebアプリケーションが巨大に、そして複雑になり、様々なデバイスや画面サイズに対応せざるを得なくなった現在、この簡明さという特徴―fontタグやテーブル・レイアウトの淘汰に大いに役にたったもの―が大きな足かせになっています。 簡単な計算機能や変数を追加するなどといったCSSの修正案が過去に提示されましたが、どれもブラウザー・ベンダーには採用されませんでした。仮にこういった新しく素晴らしい拡張されたCSSがあるブラウザーに実装されたとしても、それが実用に耐える程度に
hail2u.net - Weblog - floatで並べたリストのセンタリング
ページング・ナビゲーションなどでリスト項目をfloat: left;で横に並べるというのは割りと良く使われると思う。並べること自体は特に難しいわけではないが、その並べたリスト全体をセンタリングしようとするとちょっとややこしい。display: inline-block;を使う手法やdisplay: table;を使う手法という黒魔法的(私見)な手法で実現可能だが、position: relative;でもいける。 ややこしい理由は簡単で、センタリングでよく使われるtext-align: center;やmargin: 0 auto;といった手法が通用しないから。検索するとすぐ出てくる比較的メジャーなdisplayで頑張る方法もわかりやすいし悪くはないのだけど、同一セレクタ内で複数のdisplayを駆使する必要があることやzoomマジックなどを併用する必要があることからコードがややこしくなる
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がアイコンの前景をつなげたスプライ
hail2u.net - Weblog - よく使うライセンス・フリーのフォント
OSより高かったりする値段のフォントを気軽に使えるわけがないので、ライセンス・フリーのフォントは重要。Webページでロゴやら何やらで使う分にはまるで問題ないクオリティなものを見つけては保存、見つけては保存てな感じ。その中で好んでよく使うものを5つ挙げてみる。 Lacuna Regular Italicの方がスタイリッシュで使いやすそうではあるけど、ところどころに独特の味があるRegularの方が好き。 MiloTF-Text 小さいサイズでもかなり使える。 Lexia Readable Comic Sans MSの系統だが、ふざけた感じが少ないため場所を選ばずに使える。 Fontin-Regular セリフのヒゲの部分のあしらい方がきれい。 Devroye スクリプト系ではあるけれどもしっかりした感じで使いやすい。 IdentifontのFree fontsとかライセンス・フリーのフォント
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
