CSS Nite LP, Disk 21「タイポグラフィ、組版、Web Fonts」を聴講した。

CSS Nite LP, Disk 21

ここ最近、有料版に出席していたものの機を逸してBlogをUPせず状態・・・いかんよなあ。途中まで書いて力つきるという情けなさ。

…ということで、「鉄は熱いうちに打て」ということで、さっそく覚え書きという名のレポート。

今回はWebデザインやコーディング技術に関する話というよりも、意外と知られていないアルファベットや欧文の表記の仕方など、デザインを考える上で非常に重要なタイポグラフィの話です。

私自身は建築系のデザイナーから出発しており、その業務の中で若干のDTP制作や、学生時代に写植の初歩中の初歩を教わったり、タイポグラフィの授業があった程度なのですが、Webデザイナーはフォントの扱いについて、あまり丁寧ではないと言われています。
これはMacやWinがDTP業界に進出し、ベタ打ちのままでもそれなりにできてしまうからという側面がありそうですが、その中でも「なんとなーく」流し込んでいるアルファベットや欧文に関する話です。

正直、欧文に関しては「なんとなーく」入力していたので、目から鱗な数々です。
以下、各セッションのタイトル部分の人物名は敬称を省略させていただいています。
“CSS Nite LP, Disk 21「タイポグラフィ、組版、Web Fonts」を聴講した。” の続きを読む

2012年の初投稿は各デバイスの覚え書きー主にスマホとiPadー

あけましておめでとうございます。本年もよろしくお願いいたします。

さて、今年の課題の一つに「複数デバイス対応」というのが私の中にあります。
PCの他にスマートフォン・フィーチャーフォン(ガラケー)・タブレットとデバイスが増え、それら全てに対応する場合が多くなりました。
今のところ、各デバイスにあわせてデザインやコーディングをしているものの、更新効率などを考えるとワンソースで対応できた方が好ましいと個人的には思う訳です。

“2012年の初投稿は各デバイスの覚え書きー主にスマホとiPadー” の続きを読む

IEの独自フィルタでグラデーションをかけるのはキケンだ。

最近は規約がなければhtml5とcss3を用いるようにしている。
プログレッシブ・エンハンスメントという考えのもと、IE8以下に関しては角丸などを無理に実装せず、使用に支障のない内容にしている。

CSS3にはグラデーションが設定できるので、Firefox・safari・chromeについてはcss3で、IEには独自フィルタでグラデーションを設定する事にした。

そこで問題が発生。

IEにおいて、a要素のdisplay:blockが効かない事が発覚した。

“IEの独自フィルタでグラデーションをかけるのはキケンだ。” の続きを読む

Webカラーセミナー【実例から学ぶWebサイトの色彩設計】に参加した。

株式会社エフシーゼロのヤマモトイズミさんに誘われて、5/28(土)に行われた【実例から学ぶWebサイトの色彩設計】セミナーに行ってきました。
講師は、フォルトゥナの坂本 邦夫氏です。

大まかな内容としては

  1. 配色ではなく色彩設計をしよう
  2. サイト運用のための色彩設計
  3. 実例10歳とから学ぶ色彩設計

の3つ。
“Webカラーセミナー【実例から学ぶWebサイトの色彩設計】に参加した。” の続きを読む

WordPressプラグインを使う-Custom Field GUI Utility 3

私はデザイナーなのでphpの知識がありません。
・・となると、WPを使ったサイト構築の場合、多くのプラグインを利用することになります。

カスタムフィールドのカスタマイズプラグインは色々ありますが、Custom Field TemplateCustom Field GUI Utility 3 – WordPress プラグイン – かたつむりくんのWWWが使いやすいかなと思っています。

Custom Field Templateはエディタ付きテキストエリアも設定できるのですが、今回必要だった画像専用イメージフィールドがない。
Custom Field GUIと違って、インストール後の設定は管理画面から行えるので使い勝手はいいようですが、設定方法についての説明を見つけるのが大変かも。

・・というわけで、今回はCustom Field GUI Utility 3 – WordPress プラグイン – かたつむりくんのWWWに軍配が上がったので、そちらのインストールメモ。

“WordPressプラグインを使う-Custom Field GUI Utility 3” の続きを読む

IEでposition: absoluteがうまくできない。

突然だが、私はpositionを指定するのが苦手だ。

でも、どうしても使いたい時がある。
それで使ってみるとIE6+IE7 VS Firefox+safariになる。
Firefox+safari+IE8で確認すると、意図する場所ボックスが移動しているのに、IE6+IE7は全然違うところにある。

おおおーーいぃぃぃぃ・・・。orz..

検索した結果、親要素に100%を指定すると問題は解決する。

おのれ、IE。

もういやん。(汗

携帯・スマートフォンサイトの覚え書き その1

フリーランス時代、確認環境が確保できなくて制作を断ってきた携帯サイト。
さすがに無視できる状況ではなくなってきたので、しこたま携帯サイト関連の書籍を買い漁ったのだが、デザインカンプを制作する上で、重要な情報ってあまり載っていなかったりする。

と、言うわけで。

携帯サイトの覚え書き。

“携帯・スマートフォンサイトの覚え書き その1” の続きを読む

WordPressをローカル環境で運用してみる-マルチサイト機能を使う場合-

前回のサイトルートパスで書かれたhtmlをローカル環境で確認するという記事の続編。・・・的な記事。

WordPressなどでサイトを構築する際、やっぱりローカル環境で動いてくれるとありがたい。
公開前なら直接サーバー上で変更もできるが、はっきり言ってすごく面倒。
ただ、ローカルで環境を作ったはいいが、そのままでは使えない機能も存在したりする。

・・・というわけで、ローカル環境のWordpressで、マルチサイト機能を利用する方法。
Wordpressのインストール方法は割愛する(説明欲しい人、いる?)。

“WordPressをローカル環境で運用してみる-マルチサイト機能を使う場合-” の続きを読む

サイトルートパスを使用したhtmlをローカル環境で確認する。

下記の記事はものすごく古いです。
新しくMAMPでローカル環境を作る-WordPressのテーマを作る前に-という記事を書きました。

こんにちは。
約3ヶ月ぐらいぶりのWebデザイン系の更新です。

最近、とある企業にお世話になることになりました。
で、その会社は業務システムなどを制作している会社なので、htmlもサイトルートパスで記述されています。

ただ、このサイトルートパス、ローカル環境では確認できないんですよ。

“サイトルートパスを使用したhtmlをローカル環境で確認する。” の続きを読む