HiGash.Net ホームページへ戻る

Home [Blog] » 2008 » 9月

2008年9月

テキストをハコ組みする際のdivを計算して作ってみる

テキストをハコ組みする際のdivを計算して作ってみる

グラフィックデザインにおける文字組みはWebのように閲覧環境に左右されることがなく、トラッキングやカーニングによる文字間隔の調整もしやすいので、Webよりもずっと細かくデザイン設計ができます。
当然エディトリアルデザイン(雑誌や書籍などの編集デザイン)の場合はその傾向が顕著で、書籍や雑誌の誌面はかなり緻密に計算して文字を組んでいます。

グラフィックデザインでは “級(Q)・歯(H)” という単位を使って文字の大きさや文字間・行間などを設定します。QとHは写植時代からの日本固有の単位で、 1Qと1Hどちらも0.25mm です。
印刷物で文字の単位というと、一般的なのはポイント(pt)ですがプロのグラフィックデザイナーはあまりポイントでは作業しないと思います。 メートル法を長さの単位の基準にする以上、メートル法で端数となってしまうポイント(1pt=0.352778mm)では厳密な計算ができないから です。

Read More...

Share & Bookmark
このエントリをFacebookでシェアする
このエントリをTwitterでつぶやく
このエントリをはてなブックマークに追加
Delicious
livedoorクリップ
Yahoo!ブックマーク
Buzzurl

Google Chromeでは input type=”search” が効かない?

Google Chromeでは input type=

先日ベータ版がリリースされたGoogleのWebブラウザ Google Chrome 。残念ながらまだWindows版しか公開されていないため、Macユーザーの僕はBoot Campで試しに触ってみた程度なのですが、第一印象としてはなかなか速そうですね。キビキビ動く感じがします。

Apple Safariと同じWebKitをレンダリングエンジンにしているものの、描画にSafariのような強い個性はありません。外観もとてもシンプルでいかにもGoogleらしい。ぼちぼちシェアを獲得するのではないかと思うので、Webデザイナーにとっては頭の痛い話ですがまたひとつ表示の確認を迫られるブラウザが増えそうです・・・。

今回のエントリーはそんなGoogle ChromeのユーザーエージェントやCSSに関して、まだベータ版ではありますが少しばかり調べた情報をまとめてみることにします。

Read More...

Share & Bookmark
このエントリをFacebookでシェアする
このエントリをTwitterでつぶやく
このエントリをはてなブックマークに追加
Delicious
livedoorクリップ
Yahoo!ブックマーク
Buzzurl

僕がCSSによる “画像置換” を使わなくなった3つの理由

僕がCSSによる “画像置換” を使わなくなった3つの理由

今更聞き飽きた感のある方も多いであろうネタですが、Webデザインの仕事をするうちに思い直した “画像置換” に関する僕個人の見解。

まず、 画像置換(Image Replacement) とはそもそも何かというと、その名の通り、CSSのbackgroundプロパティを使って、テキストを画像に置き換えてしまおうというもの。広く普及しているCSSの基本テクニックと言えるでしょう。

当サイトもページ上部のグローバルナビなどでこの手法を用いていて、以下のようなHTMLとCSSで画像置換を行っています。

Read More...

Share & Bookmark
このエントリをFacebookでシェアする
このエントリをTwitterでつぶやく
このエントリをはてなブックマークに追加
Delicious
livedoorクリップ
Yahoo!ブックマーク
Buzzurl

痒いところに手が届くJavaScriptをバンドル化 — bundle.js

痒いところに手が届くJavaScriptをバンドル化 — bundle.js

前回のエントリー 「痒いところに手が届くJavaScriptライブラリたち」 でリストアップしたJavaScriptのうち、画像のロールオーバーを自動化する smartRollover.js 、 テキストフィールドのフォーカス時に背景色を変更する colorful.js 、 1行おきにテーブルの背景色を変える Auto-striped table using Javascript 、 ページ内リンクのスムーススクロールを行う smoothscroll.js の4つのJavaScriptを、僕がWebサイトを作る際に(基本的に)必ず読み込むデフォルトのJavaScriptとしてバンドル化することにします。名付けて bundle.js

Read More...

Share & Bookmark
このエントリをFacebookでシェアする
このエントリをTwitterでつぶやく
このエントリをはてなブックマークに追加
Delicious
livedoorクリップ
Yahoo!ブックマーク
Buzzurl

Page Top