Lianのブックマーク - はてなブックマーク

WebフォントのCSS指定2014年度版とこれまでの歩み

比べる。 WEBCRE8.jpとその仲間達で、web制作における「選択」において最良だと思われるものを考察していくカテゴリです。最近Webフォントについて色々調べたので、これまでの経緯やメジャーどころの記法を踏まえつつ良い書き方を探った結果を共有しておきます！私自身はまだ実務で積極的に使っているわけじゃないんですが…(でもぼちぼち使ってます)。足りない部分もあると思うんで何か指摘があったらがんがんツッコんでくださいw @font-faceルール @font-faceルールは、Webフォントの名称と読み込むフォントファイルを関連づける@ルールの一つです。その他、どのウェイトやスタイルに対応するかも指定できます。しかしWebフォントの扱いはブラウザ側のフォントファイルの対応状況、フォントファイル自体の進化によって変遷してきました。 Bulletproof Syntax これまでWebフォ

Lian 2014/05/22

リンク

フォントの総選挙！★ Fonts.com で人気のフォントランキング TOP100その他

Fonts.com の毎日更新ランキング世界最大のフォントファウンダリ(制作会社)である Monotype のオンライン販売サイトFonts.comでは、毎日更新でベストセラーフォントの発表を行っています。ベストセラーということですから恐らくは通算の数字となるのだと思います。今回はこのフォントランキングの2013年6月23日付けでのランキングを調査したので、世界ではどんなフォントが人気があるのかチェックしてみてください★ TOP 10 フォントまずはTOP 10から。とは言え、この辺はさすがに伝統のあるフォントばかりですね。しかし殆どのフォントがこのサイト内で2000年発売の古いものであるなか、比較的販売開始が遅かった ITC Avant Garde Gothic® と Neo® Sans が健闘している印象ですね。 Neue Helvetica® Linotype

Lian 2013/06/25

まぁ上位は当然なラインナップ。/ITCのAvant Garde Gothicは異字体とか少ない印象あるけど、どうなんだろ

font

リンク

[webデザイン]独学デザイナーでも自信を持ってフォントを選ぶための6つのアドバイス

書体デザイナーと話し、長年の疑問を全て解消してきました先日、[クリエイター]英Monotype社の書体デザイナー大曲都市さんに会いにいってきましたという記事を書きました。このときはたまたま英Monotype社の書体デザイナーの大曲都市さん(@Tosche_J)としっかりと話をする機会を得たわけですが、そこで私がフォントについて「こうだと思っているけど実際どうなのか」という質問をたくさんぶつけてきました。私としてはすごく納得がいき、フォントというモノに対する認識がはっきりしました。なので今回はその都市さんから聞いた話を踏まえた上で私の現時点でのフォントについての考え方の着地を6つのアドバイスとして書いてみます。特に独学でデザインの勉強をしてきた人は「こういうものだと思うんだけど、皆は実際どう考えているんだろう」という悩みを抱えているはずだと思うので、それに対する答えを出したいと思います

Lian 2013/05/28

font

リンク

デザイン怖い話「これは本当に私の頭で考えて生み出されたものなのか？」

これはどうでもいい話なんですけどなんかこう考えると怖いなー、と思った話です。あと念のために言っておくと「パクリ」とか「本当に新しいアイディアなんてない」とかそういう話ではないです。規則性と不規則性を使いこなす先週[webデザイン]規則性と不規則性を使いこなすという記事を書いたんですけど。この記事は、基本的に人の目は規則性のあるものに安心や調和、洗練された印象を受けるので規則性にしたがって整ってた方がいいんだけど、上手いタイミングでそれを外したりしないと印象にも残らないし面白くないものになるし、個性も出せないよねという話でした。ちなみに規則性の効果については以下の記事でも述べています。 [フォント・デザイン]水平・垂直・傾斜・円弧・不規則 – WEBCRE8.jp 自由なようでいて法則を持ったもので、なんとなく、普段の制作で自分の発想に基づき規則性から外れた不規則性を作ったと思って

Lian 2013/05/14

リンク

[デザイン]角丸を使う理由、不自然な角丸について徹底的に分析した

角丸の話題が盛り上がってましたね先々週webデザイナーである彩さん(@maritime_color)のブログDesign Colorで、角丸をどういう場合に使うか、という記事がすごい話題になってました！デザイン時に注意したい角丸の使いかた | Design Color そしてその後、ナナメウエの変態イラレラー(褒めてます)すずきさん(@suzukisan__)もそれに続き角丸に触れる記事を書いたりしていました。 illustratorで角丸を扱う際の注意点 ※追記しました | ナナメウエblog 私も以前デザインが苦手な人も分かる「デザインは全て意味がある」6つの要素という記事を書いたとき、角丸についてはさらっと触れるに留めたのですが、いずれもっとがっつり言語化したいものだと考えていました。気になることもあったし、ちょうど良いので今回便乗して記事にしてみようと思います。形状としての

Lian 2013/02/28

design

リンク

[HTML5 入門]HTML5におけるブロック要素とインライン要素の考え方

http://www.hamashun.com/ で、お会いしたときにここぞとばかりに私が気にしているコーディングのしかたなどを聞いてもらったりしたのですが、いくつか気になるコメントをもらえたのでじっくり考えてみました。今まで考えていた根拠の薄いコーディングルール私は普段からかなり文書構造に気をつけてコーディングを行っていますが、仕様の中で理解できない部分についてはわりと独自の解釈も用いています。そのひとつに、「入れ子の同じ階層にブロック要素とインライン要素を置かない」というものがありました。入れ子の同じ階層にブロック要素とインライン要素を置かない具体的に説明すると、body要素等のブロック要素の直下にdiv要素等が置かれていた場合、それの外側の同じ階層状にspan要素等を置かないという事です。 <body> <div id="container"> <header id="top

Lian 2013/02/27

"今までのブロック要素とインライン要素という考え方はレイアウトや見え方、つまりCSSの事を考えるときの扱いの違いのみを指すべきだったのであって、セマンティックな意味を含むものではなかった"たしかに

html5

リンク

ここ一年くらいで参考になったデザイン/webデザインに関するスライド10

スライドはズルいスライドってズルいですよね！ｗ web制作においてはコンテンツを閲覧させる障壁とも言われるクリックを150回とか強いるのに、こんなにも読ませるコンテンツ！！すごい！ズルい！たまに思うんですが、私の長文もスライド形式にしてしまえば読んでもらいやすいんじゃない？とか考えます。フリーのwebデザイナーのたえさん(@ken_c_lo)も同じこと考えてたみたいでひじょーに嬉しかったですｗなんかそのうちブログをスライド化して見られるプラグインでないかなー、もしくは作ってみようかなと思っている今日この頃です。 webデザインに関するスライドまとめ本題です。世間的には少ないと言われているwebデザインにおける「デザイン」にフォーカスを当てたスライドで私がブクマしていたものを集めてみました。タイトル的にうん？と思うものもありますが、全て考え方等を含めデザインを考えることについて参考

Lian 2013/02/20

web
design

リンク

[CSS]擬似要素の実用的な使用用途のまとめ

(個人的な)Graceful Degradationへのシフト webcre8はこれまでIE対応の必要な環境で仕事をしていた為あまりIE6,7で使えない技術には興味が湧かなかったんですが、(ずっと進んでない)ブログのリニューアルのことを考えていると、やはりどうしても擬似要素や過去ブラウザを無視(ざっくり対応)した形でのCSS3の使い方に魅力を感じてしまうわけです。つまりプログレッシブ・エンハンスメント→グレースフル・デグラデーション的な考え方に気持ちがシフトしているんですね。そしてどうせCSS3を使用してディティールに凝るのなら、「空divや重ね使いで無理矢理作っていたものをさっくり作れる」ことに驚くより、「フォールバックを意識したコーディングをして過去ブラウザにはあっさりコンテンツを見せる」方がやっぱりいいなーと感じているわけです。とりあえず擬似要素でそこで今回は自分が擬似要素を使

Lian 2013/02/05

リンク

知らないといつまでたってもHTMLとCSSが理解できない暗黙の仕様4つ

調べる。備忘録としてwebやデザインについて調べたり新しく知ったことなどを書き残していくカテゴリです。

Lian 2013/01/23

web
design

リンク

[デザイン]フォントのことが好きになれるオススメコンテンツ、本、アプリ等を紹介します

フォントについて学ぶの超楽しい！いやー、フォントについて考えるの超楽しいですね。別に私はフォントの専門家ってわけじゃないんですけど、フォントと言えば優さんみたいに言ってくれる人もいます。全然質問には答えられないですけどｗ好きだから勉強中なだけですんで、皆さん一緒に学びませんか！そのうち作ってみようとも思ってます。オススメのフォント関連コンテンツ紹介しますと言う訳でですね、フォントのことを学ぶ上で、私が役に立つ！これは面白い！と思ったものを紹介してみます。色々ありますよ！ブログだったり、本だったり、ゲームだったり…それではどーぞ！フォントについての本フォントのふしぎ