2/22（水）、モリサワのTypeSquareサービスが開始されたので、WebFontサービスをピックアップしてまとめることにした。
ちなみに、モリサワは2012年2月22日(水)〜2012年12月31日(月)まで、【オープン記念¥0キャンペーン】を開催中なので、短期サイトならビジネスでも使用できる可能性が高いですね。
太っ腹なモリサワさん。ありがたや(人´∀`)ｱﾘｶﾞﾄｰ♪
CSS Nite LP, Disk 21「タイポグラフィ、組版、Web Fonts」を聴講した。
ここ最近、有料版に出席していたものの機を逸してBlogをUPせず状態・・・いかんよなあ。途中まで書いて力つきるという情けなさ。
…ということで、「鉄は熱いうちに打て」ということで、さっそく覚え書きという名のレポート。
今回はWebデザインやコーディング技術に関する話というよりも、意外と知られていないアルファベットや欧文の表記の仕方など、デザインを考える上で非常に重要なタイポグラフィの話です。
私自身は建築系のデザイナーから出発しており、その業務の中で若干のDTP制作や、学生時代に写植の初歩中の初歩を教わったり、タイポグラフィの授業があった程度なのですが、Webデザイナーはフォントの扱いについて、あまり丁寧ではないと言われています。
これはMacやWinがDTP業界に進出し、ベタ打ちのままでもそれなりにできてしまうからという側面がありそうですが、その中でも「なんとなーく」流し込んでいるアルファベットや欧文に関する話です。
正直、欧文に関しては「なんとなーく」入力していたので、目から鱗な数々です。
以下、各セッションのタイトル部分の人物名は敬称を省略させていただいています。
“CSS Nite LP, Disk 21「タイポグラフィ、組版、Web Fonts」を聴講した。” の続きを読む
2012年の初投稿は各デバイスの覚え書きー主にスマホとiPadー
あけましておめでとうございます。本年もよろしくお願いいたします。
さて、今年の課題の一つに「複数デバイス対応」というのが私の中にあります。
PCの他にスマートフォン・フィーチャーフォン（ガラケー）・タブレットとデバイスが増え、それら全てに対応する場合が多くなりました。
今のところ、各デバイスにあわせてデザインやコーディングをしているものの、更新効率などを考えるとワンソースで対応できた方が好ましいと個人的には思う訳です。
Webカラーセミナー【実例から学ぶWebサイトの色彩設計】に参加した。
株式会社エフシーゼロのヤマモトイズミさんに誘われて、5/28（土）に行われた【実例から学ぶWebサイトの色彩設計】セミナーに行ってきました。
講師は、フォルトゥナの坂本 邦夫氏です。
大まかな内容としては
- 配色ではなく色彩設計をしよう
- サイト運用のための色彩設計
- 実例10歳とから学ぶ色彩設計
携帯・スマートフォンサイトの覚え書き その1
フリーランス時代、確認環境が確保できなくて制作を断ってきた携帯サイト。
さすがに無視できる状況ではなくなってきたので、しこたま携帯サイト関連の書籍を買い漁ったのだが、デザインカンプを制作する上で、重要な情報ってあまり載っていなかったりする。
と、言うわけで。
携帯サイトの覚え書き。
画像を使わなくても意図したフォントが表示できる-Google Font API-
悲しいことに、Webサイトはユーザーの環境に依存するため、指定できるフォントが決まっています。
ゴシック体なら、MS Pゴシック、ヒラギノ角ゴ、Osaka
明朝体なら、MS P明朝、メイリオ、細明朝体、ヒラギノ明朝
サンセリフ体（日本ではゴシック体とも呼ばれる）なら、Arial、Helvetica、Geneva、sans-serif
セリフ体（日本語では明朝体とも呼ばれる）なら、Georgia, Times New Roman, Times, serif
これらはWindowsまたはMacにデフォルトで入っているフォントタイプ。
これ以外のフォントも指定できますが、明朝体である「リュウミン」を表示させたいと思っても、閲覧側のPCに「リュウミン」が入っていないと正しく表示されません。
そのため、意図するフォントタイプをWeb サイト上で表示させたいと思ったら、その部分を画像文字にするしかありません。
でも、それをある程度解決する方法が最近出てきました。
まあ、すてき(￣▽￣*)
“画像を使わなくても意図したフォントが表示できる-Google Font API-” の続きを読む
よく利用する jQueryプラグイン
本日は誕生日でした。(￣∀￣*)イヒッ
34歳ですよ〜・・・なのに、なぜか1歳上にサバを読み「35歳ですよ〜」とか言いそうになる・・。
なぜに上にさばを読む・・・orz
という、話じゃなくて。
色々な案件で使用している「 jQuery」。
本当に助かっています。
そんなわけで、今まで使ったスクリプトについてのご紹介。
WEBページをA4印刷するには
仕事上よくあるのですが、地図や間取りなどを印刷するように設定したいことがあります。
大半のブラウザは、横幅がA4サイズ以上になると勝手にリサイズして収めてくれる場合が多い・・が、IEの場合そのままではリサイズしてくれないらしい。
ここでもIEのダメさ加減発揮。
ユーザー側のプリンター設定にもよりますが、この設定を変更することによってA4サイズに納まることもあります・・が、いちいちプリンターの設定云々とト書き書くのも、不親切きわまりない。
たとえダメダメを発揮していようとも、ユーザー率が一番高いのはIE。
このブラウザであまりよろしくない結果が出た場合、やはり手直しは必要。
全部組み終わってから直すのは結構泣けてくるので、あらかじめ印刷させるページと分かっている時は、下記に留意して組んでいく。
標準モードのCSSで高さ100%のボックスを可能にする方法。
サイト制作の際、ボックスを高さを100%にしてブラウザの下端へ合わせたい事がある。
Copyright表記なんかは特にそうしたいが、標準モードでCSS制御をする場合、ボックスの高さを100%に指定してもうまくいかない。
標準モードの場合、ボックスの高さは中に入る文章量などに依存する。
そのため、手っ取り早く高さを100%にしたい場合は、互換モードを使用すればいい。
しかし、だ。
仕事でサイト制作を行うと、きっちりレギュレーションが決まっている場合がある。
そしてその場合「標準モードにせよ」と言う規約があることが多い。
互換モード自体はあまり推奨されるものではないので、できれば標準モードでサイトを制作したいところ。
でも、ボックスの高さは100%にしたい。
そんなジレンマを抱えた場合は、CSSの記述を下記のようにすればいい。
スタイルシートを切り替えるJavascript-styleswitcher.js-。
A List Apart: Articles: Alternative Style: Working With Alternate Style Sheetsで紹介されているスクリプトは、ユーザー側でスタイルシートを切り替えることのできるサイトを構築する際に便利なスクリプトです、
アクセシビリティを考慮したサイトを構築する時は、ぜひとも導入したいところ。
詳しい設置方法などはstyleswitcher.js-スタイルシート切り替えjavascript – WEBデザイン BLOGにお任せするとして、実際設置してみて不具合が発生。ページを移動すると、選択していたはずのCSSが無効になる。
このスクリプトはクッキーを利用して、ページを移動しても選択されたCSSを記憶する設定になっている。が、それが動かない。ページを移動するとデフォルトCSSに戻ってしまう。
そのため、解消するために小一時間考える羽目に。(￣▽￣;