Tag: WebDesign

タグ WebDesign がつけられた記事のリストです。

行の長さ

ウェブ・デザインにおける和文横組みの本文で、適切な行の長さはどのくらいか。いくつかの事例をもとに、「読みやすいのは 24 字から 40 字程度で、長くても 48 字程度までにすると良い」というガイドラインを提案。

v5

久々にこのサイトをリデザインしました。5 代目のテーマです。

Re-Make/Re-Model

およそ 2 年ぶりにこのサイトを全面的にリデザインしました。印象としてはさほど大きく変化していないと思うんですが、内部的にはけっこういじってます。細かい部分は追って別の記事にするとして、とりあえずおもな変更点などをざっとまとめてみました。

HTML5 へ移行

というわけで、このサイトを HTML5 でマークアップしてみました。個別記事内のフレージング系の見直しはまだ手つかずで、まずはセクショニングまわりから固めています。納得のいかない部分もありますが、まずは公開して、これから […]

WordPress で HTML5 を書くための準備

現在、このサイトを HTML5 で再構築しようと画策しています。今日はその「準備編」ということで、WordPress で HTML5 をパブリッシュするために、どのようにテンプレートをいじればよいかを考えてみました。ここ […]

13 か 15

先日、Twitter で @smashongmag (Smashing Magazine のアカウント) からこんな問いかけがありました: What font-size do you usually use for yo […]

画像のマークアップを通じて Progressive Enhancement を理解する試み

Progressive Enhancement と Graceful Degradation って、ひょっとしてこういうことかな? という思いつき。 <img src=”logo.png” alt=”Google” […]

リデザイン!

約 1 年半ぶりにサイトをリデザインした。細かいところはまだいろいろといじると思うけど、とりあえずおもな変更点をまとめておきたい。 Before: Vesion 2.1 After: Version 3.0 レイアウト […]

フロントエンド Web 開発のためのローカル・ブックマーク

最近はブックマークといえばページ単位で Delicious に登録する場合がほとんどだけど、リファレンス系のサイトやオンライン・ツールなど、仕事中にちょくちょく使うものはやはりブラウザにブックマークしておくのが便利。というわけで、「フロントエンド Web 開発」とか言うとなんか大げさだけど、とにかく僕が仕事場の Firefox に保存している「そっち方面」のブックマークを、整理しつつさらしてみる。 W3C HTML HTML 5 HTML 4.01 XHTML 1.0 CSS CSS: Current Work CSS 2.1 CSS 2 CSS 1 HTML ごく簡単な HTML の説明 (The Web KANZAKI) ばけら…

みんなで IA: CSS Nite LP, Disk 7

「情報アーキテクチャ (Information Architecture)」をテーマにしたセミナー、CSS Nite LP, Disk 7: IA スペシャル に参加してきました。6 時間にも及ぶ長丁場でしたが、どのセッションもかなり濃い内容で、有意義なイヴェントだったと思います。 情報アーキテクチャとは何かを僕なりにごく乱暴に要約すると、「情報をわかりやすく伝えるための設計」といったところでしょうか。ユーザが何を求めているかを分析すること、コンテンツを把握し適切に分類すること、ナビゲーションを構造化すること…。そう、つまり、Web サイトを作る人ならだれもが考えていることだし、また考えるべきことだと言えます。 情報ア…

小学校 8 年生

僕たちは高校 3 年生と小学校 6 年生を同じ教室に集めて、同じ教科書を使って授業をしている。まずみんなに教科書どおりの説明をするけど、当然ながら小学生の子たちは正しく理解できない。僕たちは彼らの机まで行き、説明してやらなければならない。「あのね、ここはわかりやすく言うとね…」 body { font-size: 10px; } * html body { font-size: 62.5%; } この見慣れた光景に高校生たちは心底うんざりしている。彼らは早く次のページに進み、授業を終わらせたい。その気持ちはふたとおりの教え方をしなきゃいけない僕たちも同じ。でも机の半数以上を占領している小学生を無視するのはなかな…

link か @import か

In Chapter 5 of High Performance Web Sites, I briefly mention that @import has a negative impact on web page performance. I dug into this deeper for my talk at Web 2.0 Expo, creating several test pages and HTTP waterfall charts, all shown below. The bottomline is: use LINK instead of @import if you want stylesheets to…

インライン要素に背景画像を指定する

Fig 1: インライン要素に背景画像を指定 CSS でインライン要素に背景画像を指定する場合、IE6 と IE7 では致命的なバグがあるので注意。たとえば Fig 1 のように、パラグラフ中のハイパーリンクにアイコンを表示させたいとする。となると CSS はこんな感じになるだろう: a.pdf {   padding-left: 20px;   background: url(/img/pdf.png) no-repeat 0 50%; } a.external {   padding-right: 20px;   background: url(/…

チェック/ペケ

HTML/XHTML で チェックマーク (Tick) や ペケ (X mark) を表示させるには以下の文字参照が使える。 数値文字参照名称 ✓&#10003;CHECK MARK (tick) ✔&#10004;HEAVY CHECK MARK (bold tick) ✗&#10007;BALLOT X (cross) ✘&#10008;HEAVY BALLOT X (bold cross) しかし IE6 では文字化けすることが多いようなので、CSS で Unicode フォントを指定するといいみたい。 <!– HTML/XHTML…

jQuery と CSS を使った Apple 風パンくず

パンくず (Breadcrumbs) ってその必要性に疑問を感じることの多い要素の筆頭だと思う。この案件で要るか、これ? みたいな。そんなわけだからあまり力を入れて作ったことがなかったんだけど、Veerle’s blog のパンくず作成チュートリアル Simple scalable CSS based breadcrumbs を読んで、必要かどうかはとりあえず置いといて、どうせ置くならお洒落な方がいい、っていうか俺もクールなパンくず作る! と盛り上がってしまい、作ってみた。 Fig 2: Apple のパンくず。影響力大 Fig 3: Delicious のタグのリスト。妙に好き 目論んだイメージとしては Apple …

スペースの幅

いわゆる「半角スペース」の幅って font-size の値に対してだいたいどのくらいの割合なの? ってのを調べる必要があったので、よく使う代表的な欧文フォントについてまとめてみた。どうやって調べたかというと、 <p><span>&nbsp;</span></p> こんな感じのマークアップに、 p {   font-family: “Arial”;   font-size: 1000px; } p span {   background-color: red; } というスタイルシートを当てる。ブラウザで表示させてみて、…

jQuery 1.3、リリース!

jQuery の最新メイジャー・アップデイト、jQuery 1.3 がいよいよリリースされました! .live() とか .die() とか新しい要素もあるけど、全体的にかなり速くなったっぽいとこが売りっぽい。CSS セレクタ・エンジン Sizzle の搭載や各種リライトが奏功している模様。ベンチマークを見てみると、セレクタの書き方の最適化メソッドもやや変わってきそう。ともあれ、明日は仕事そっちのけでチェックする構えです。 そうだ、書き忘れてた。お誕生日おめでとう、jQuery! …

スクロールで背景画像が変化する (ように見える) トリック

CSS を使ったエフェクトで久々に楽しいのを発見! 説明するのが難しいので、下記ページのサンプルを (IE 6 以外のモダン・ブラウザで) チェックしてみてほしい。 Mike asks the CSS Guy about a scrolling trick with background images (Ask the CSS Guy) これは思いつかなかったなー。垂直方向に並んだ要素にそれぞれ背景画像を用意して、background-attachment プロパティに fixed を指定、同じ位置に重ねるのがミソ。前述のとおり IE 6 には対応していないので、適宜ハックなどで対応を。…

JavaScript と CSS を使った「このページを印刷」リンク

クリックするとブラウザの印刷ダイアログが立ち上がる、いわゆる「このページを印刷」リンク。マークアップはだいたいこんな感じになると思う: <p class=”print”>   <a href=”#” onclick=”window.print(); return false;”>このページを印刷</a> </p> でもこれ、JavaScript が無効の場合はどうなるだろう? そう、何も起こらない無意味なリンクになっちゃうよね。そこで、JavaScript と CSS を使ってひと工夫してみよう。 まずは JavaScript。例によって jQuery を読み込んだ…

jQuery で外部サイトへのリンクをコントロール

外部のサイトへのリンクについて、例えばそのことを示すアイコンを付けたり、あるいは別ウィンドウで開いたり、といった扱いをすることはよくある。そんな場合、jQuery があれば以下のような JavaScript でそのコントロールが簡単に。 まず最初に jQuery のセレクタ機能を拡張 しておく。ここでは要素が href 属性を持ち、かつその属性値 (リンク先) のホスト名 (ドメイン名) が今いるページのホスト名と異なる場合に :external セレクタで捕まえられるように拡張。 $.extend($.expr[‘:’],{   external: function(a,i,m) {   &…

jQuery のセレクタ機能を拡張する

jQuery の魅力のひとつは豊富な セレクタ機能 だけど、それをさらに拡張することもできる。その簡単な方法を紹介してくれている記事をみつけた。 Extending jQuery’s selector capabilities – James Padolsey たとえばインライン要素を取得するセレクタ機能は以下のように書けば作れちゃう。 $.extend($.expr[‘:’],{   inline: function(a) {     return $(a).css(‘display’) === ‘inline’;   } }); これで…

この数値文字参照がすごい! 2008 年版

早いもので今年ももうこの季節である。文字実体参照に比べて覚えづらい数値文字参照、その中でも使用頻度の高いものにスポットを当てる「この数値文字参照がすごい!」の 2008 年版をお届けする。 第 1 位: 〜 (&#12316;) 満場一致。文句なしでぶっちぎりの首位に立ったのはご存知「波ダッシュ」。その ややこしい背景 を考えれば HTML での表記は可能な限り避けて他の表現で代替したいところ。たとえば英語圏では「いつからいつまで」「どこからどこまで」の「から」は en ダッシュ (–) を使うことが多いみたい (ソース: Dash – Wikipedia, the free encyclopedi…

768 グリッド・システム

Gridding the 960 ~ Authentic Boredom や 960 Grid System などに触発されて、幅 960 px のグリッド・システムについて考えてみた。 まず、なぜ 960 px なのか? この数字が導き出される大きな理由は 2 つ。まず前提として幅 1,024 px 以上のモニタを想定する。そこからスクロールバーやブラウザ自体のボーダーなどを差し引くと、考えられる「有効内寸」は幅 1,000 px 未満。ではなぜ 980 でも 950 でもなく 960 px なのかといえば、960 が「割り切りやすい」数字だからだ。 960 is divisible by 2, 3, 4, 5, 6, 8, 10…

CSS ハックをフォーマット

いわゆる「スターハック」に代表されるセレクタレベルの CSS ハックについて、ソースコードの整形を工夫してみる。 body {   font-size: 10px; } * html body {   font-size: 62.5%; } *:first-child+html body {   font-size: 62.5%; } この書き方、ハック部分が目立つのでメンテナンス性に優れてはいるものの、本来は必要ないはずの余分な記述が妙に偉そうにに居座ってる感じが、なんかイヤ。というわけで、こんなのはどうだろう: body {   font-size:…

ときには真珠のように

「Web デザイナーがあらゆる閲覧環境でのタイポグラフィをコントロールしようなんておこがましいとは思わんかね…」…

(要素に) 名前をつけてやる

いわゆるヘッダやフッタなど、ページを構成する主要なブロックをマークアップする際、div 要素に id 属性で名前をつけることが多い。<div id=”header”> とか。なぜ class ではなく id なのか? その理由としておそらく最も多いのが、「ページ内で唯一のものだから」。HTML を解説した本やなんかを読むと、「複数出現する (またはその可能性のある) 要素は class で、唯一の要素は id で」なんて書いてあることがよくある。 僕も長いことそうしてたんだけど、どうも違うんじゃないか、と最近は考えてる。今しっくりくるのは、「id 属性は唯一の要素に名前をつけるためのものではなく、要素に一意の (uniq…

Google サイトマップを Movable Type で生成

Google ウェブマスター ツール を利用すると、Google にサイトマップを送信することができる。そうすることで、君のページを Google に見つけてもらいやすくなるわけだ。このサイトマップは Google の指定する XML 形式で記述する必要があるんだけど、ここでは、そのサイトマップを Movable Type のテンプレートを使って自動生成してみる。こんな感じ: <?xml version=”1.0″ encoding=”UTF-8″?> <urlset xmlns=”http://www.google.com/schemas/sitemap/0.84″>   <url…

「右クリック禁止」に戸惑う

クライアントから、ある画像を「右クリック禁止」にしてほしい、との依頼があった。そのとき僕が感じた気持ちをひとことで言い表すのは難しい。それはいらだちでもあり、無力感でもある。 僕たち Web デザイナーは「右クリック禁止」がいかにバカげたギミックかを知っている。でも、クライアントが本当に心を痛めているとしたら? 「私の描いた絵が誰かのハードディスクに保存されてしまったら…」「見ず知らずのサイトからいつの間にかリンクされてしまったら…」そう考えると夜も眠れないんだとしたら? 彼らにその要望がいかに的外れなものであるかを説くことは、はたしてベストの選択だろうか?…

のっちメソッド: One pixel notched corners

Ask the CSS Guy の記事 One pixel notched corners as used by Google Analytics を試してみた。Google Analytics で使われてるような、四隅が 1px 欠けているボックスの表現を画像を用いず CSS のみでやってみよう、という話。上記記事に対する Simon さんて方のコメント で「もっと簡単にできんじゃね?」という例があるけど、なんだか不思議なマークアップだったので、僕なりに整理してみる。 まず、例としてナビゲーションメニューのようなものを考えてみる。マークアップはこんな感じ: <!– HTML –> <ul>  …

Mac 版 Firefox 3 はデフォルトのフォントサイズが 16px に

4月16日に開催されたセミナー、CSS Nite in Ginza, Vol.24 に参加してきた。リリース間近の Firefox 3 の新機能について Mozilla Japan のスタッフが語る、というのがテーマ。僕はといえば、実はアンケート回答者に配られた Firefox ストラップ が目当てだったりもしたわけだけど、ちょっとうれしい話も聞けた—Mac 版 Firefox のデフォルトのフォントサイズがついに 16px になるという! これはおそらく日本語版のみの話だと思うけど、ほぼすべてのモダン・ブラウザがデフォルトのフォントサイズを 16px に標準化しているのに、Mac 版 Firefox だけが 14px …