第5回 Internet Explorer 8 Betaについての雑感
このようにIE7への移行は現時点ではちょっと微妙な感じになっております。IE8も2008年中に正式リリースと噂されている訳ですから，IE7はすっ飛ばしてしまって次期スタンダードはIE8になってしまえば良いのにと思います。 最後にちょっと残念（というかやっぱり）な感じというものです。IE8ではあらたに「WebSlices」という独自の機能を実装しています。これは何かと言うと，セマンティックWebということでは有名な，あの Microformats の代替的な機能となるものです。より詳しい情報は，【詳報】セマンティックWebに向かうIE8の「8つの強化点」，で説明されています。 まぁ，ついにマイクロソフトもここまで対応するようになったということは間違いなく喜ばしいことなのではあります。が，せっかくセマンティックWeb的なことに対応するのであれば，独自の機能を作り出すのではなくて，世界中の皆でせ
第21回 ディスプレイのワイド化にページ・デザインをどう対応させるのか
PCのモニター・ディスプレイは，ここ数年で液晶が標準となり，併せてワイド化が進んでいます。ワイド液晶ディスプレイが登場するまでPCの画面構成比は，一部のノートPCなどの小型端末を除いて，「横4対縦3（640*480）」～「横5対縦4（1024*768）」という比率でした。解像度は「XGA（1024*768）」を大多数の環境としていればよく，XGAベースで構成しておけば「SXGA（1280*1024）」でも特に問題はありませんでした。 一時期，「サイトデザインはSVGA（800*600）を意識しろ」と言われていましたが，現実問題としてSVGAはほぼなくなりました。2006年の時点でディスプレイ全体の出荷台数に占める液晶ディスプレイの比率は99.7％（電子情報技術産業協会の市場調査結果）です。SVGAまでしか表示できない液晶ディスプレイはほとんどありませんから，これが現在の「XGAを標準解像度
第3回 Webページで行間はどのくらいにしましょうか？
小林 信次 マークアップ・エンジニア。茨城県出身。1980年生まれ。専修大学経営学部卒業後，1年弱のニート生活を経て，販売代理店の営業職を経験後，有限会社アイエイトワンに入社。主に，Webディレクション，マークアップを務めるかたわら，講師活動・執筆活動を行う。allWebクリエイター塾ではCSS講習の講師。著書に「XHTML&CSSデザイン |基本原則，これだけ。」（共著，MdN発行）がある。 いろいろな方と話しているときに，line-height（1行の高さ。行間として認識できる余白を制御する値）ってどのくらいに指定していますか？という話題が出ることがあります。そこで改めて，他の人がサイトでどんな指定をしているのかを調べてみました。 ※ 今回は，Webのフロントエンド制作を仕事にしている人の間でよく知られており，アクセシビリティ，ユーザビリティ，文字の読みやすさなどにも気を使っていると思
ログインしてください：日経クロステック（xTECH）
会員限定サービスです 会員の方はこちら ログイン 有料会員（月額プラン）は初月無料！ お申し込み 日経クロステック TOPページ
第2回 CSSレイアウトとか，Web標準とか
小林 信次 マークアップ・エンジニア。茨城県出身。1980年生まれ。専修大学経営学部卒業後，1年弱のニート生活を経て，販売代理店の営業職を経験後，有限会社アイエイトワンに入社。主に，Webディレクション，マークアップを務めるかたわら，講師活動・執筆活動を行う。allWebクリエイター塾ではCSS講習の講師。著書に「XHTML&CSSデザイン |基本原則，これだけ。」（共著，MdN発行）がある。 2カ月に一度くらい，allWebクリエイター塾というところで，XHTML+CSS講習のCSS講師を担当させていただいております。休み時間など受講生の方に，「CSSでデザインを再現することができないー！」というお悩みを聞くことがあるんですね。そんな時，レイアウト目的にtable要素を少しだけ利用してみては？とアドバイスすることがあります。 本来table要素とは，データを集積している「表」をマークアッ
「最高のWeb人」を選ぶ恒例企画が推薦募集を開始
社団法人日本アドバタイザーズ協会 Web広告研究会は2008年5月12日、インターネットの発展に貢献した人物を顕彰する「第6回Web クリエーション・アウォード」の推薦募集を開始した。募集期間は2008年6月10日まで。同Webサイトで受け付ける。 Webクリエーション・アウォードは、コンテンツやプロジェクトなどに携わることで、インターネットの世界に貢献した人を発掘し、「Web人」として称える賞。「Web人大賞」など5つの賞を用意する。2003年より毎年実施しており、今回で6回目となる。第5回のWeb人大賞には、モバゲータウンの仕掛け人である畑村匡章氏が選ばれた。 推薦者は随時ホームページ上に掲載していく。推薦者リストから、応援コメントを加えることができる。具体名が分からない場合、Web上のコンテンツ名やサービス名から「○○を作った人」としてもよい。 推薦募集が終ると、推薦者から約10名を
作業効率を高めるDreamweaverの小技---目次：ITpro
制作会社に身を置きながら、テクニカルライターとして執筆をしている筆者が，リファレンスやチュートリアルなどの執筆を通して細かい機能を探る中でひらめいた，「日々の作業効率を高めるDreamweaverの小技」をご紹介します。 ・第1回 ひきついだサイトはdivでいっぱい！ ・第2回 特定の要素（タグ）を削除したい ・第3回 マークアップの高速化について考える（1) ・第4回 マークアップの高速化について考える（2) ・第5回 環境設定を見直そう（1） ・第6回 環境設定を見直そう（2） ・第7回 環境設定を見直そう（3） ・第8回 Office書類の活用 ・第9回 Dreamweaver CS3は使えるのか？
新ポータルサイトに見るWebページ・デザインのトレンド
この春，主要な国内ポータルサイトが相次いでトップページをリニューアルした。情報ポータル分野では2008年3月31日にgoo，4月7日にlivedoor，4月14日にMSN Japanと新トップページの公開が続いた。検索大手のGoogleも3月19日にトップページをリニューアルしている。2008年1月のYahoo!ジャパンのリニューアル（関連記事：メディアとしての価値を向上させる -- 1月1日正式公開のYahoo! Japan新トップページ）が先陣を切ってから数カ月で，主要ポータルの顔が一新された格好だ。 ポータルサイトは何万人というユーザーが日々訪れる場所。それだけに，ここには幅広いユーザー層に受け入れられているデザインのポイントがあるはず。各ポータルサイトのデザイン的な共通点や，訴求ポイントの違いを分析して「ページ・デザインのトレンド」を探った。 検索機能が目立つように まずはページの
6000人が作ったシステムは必ず動く：ITpro
最盛期の開発要員6000人，開発工数11万人月，投資額2500億円，取引件数1日1億件。三菱東京UFJ銀行が「Day2」と呼ぶ，勘定系システム一本化プロジェクトの成果物である。6000人のシステムズエンジニア（SE）が作り上げた巨大システムは，2008年5月の連休明けに必ず動くはずだ。 23年間にわたって情報システム開発プロジェクトの取材を続けているが，6000人のSEを集めた事例は過去に一度も見聞きしたことがない。世界を見渡してもおそらく例がないはずだ。これから何年間，記者を続けるのか分からないが，今回の三菱東京UFJ銀行を除けば，6000人を動員するプロジェクトを取材する機会は二度とないだろう。 6000人のSEが同時期に集まったのであって，「6000人月」ではない。開発工数は先に書いた通り，11万人月である。この数字も凄い。一体何を作ったのかと思ってしまう。正確にはこのSEパワーは開
第16回 Webサイトの配色で失敗しないための知識
今回のポイント Dull，Dark，Light，Vivid 標準灰色 トーンによる印象 補色と等色相差 今回は色の使い方について，少しつっこんだお話をしましょう。色味を表現する形容詞や，ある色の色味を変えた「トーン・バリエーション」から喚起されるイメージなどについて説明した後，色を組み合わせる際の考え方について，以前に紹介した「同系色の組み合わせ」から一歩進んだ知識を紹介します。 色味を表現する形容詞と明るさの基準 古くからある日本語の色の呼称は，その色を持つ物体からつけられることがよくあります。例えば「藍色」「橙色」「鶯色」「茜色」などはわかりやすい例です。こうした呼称はあいまいさもあります。「ねずみ色」と「灰色」はどちらもグレーを指しますが，果たしてどちらが暗い灰色なのかは微妙です。日本語は何事に対してもあいまいさが美徳とされる言語なのです。 あいまいな日本語の世界は置いておくとして，
第15回 色使いによる立体的なWebページ構成と“1/6の法則” : ITpro
前回のお話の冒頭で，白背景に黒文字は目を疲れさせるということを指摘しました。今回はその問題の解決策から始めましょう。 白はすべてが全力で点灯している色（#ffffff）であり，黒はすべてが消灯している色（#000000）です。白と黒というのは，他のどの色を2色選んだときよりも明度の差があるわけです。2色またはそれ以上の色数の中での明度の高低差を「コントラスト」と言います。コントラストが激しいものは目を疲れさせます。 「本や雑誌も白に紙に黒いインクじゃないか」と思うかもしれませんが，紙はディスプレイの白ほどは明るくありません。昼間に十分に読書できる明るさの部屋で，フラッシュを使用せずに本を撮影すると図1程度です。想像よりもはるかに暗く，写真で見ると白には見えません。 目を疲れさせない配色の探し方 人間には見た物を脳で補完する機能があります。裸電球の下でフラッシュを使わずに白い画用紙を撮影する
第13回 Webページで読みやすいテキストとは：ITpro
今回のポイント 1行あたりの文字数の目安 1段落の文字数の目安 段落に含む文字数 行間調整の考え方 字間調整を使ったロゴ風味見出し 日本語というのはもともと縦書き文化です。文字も筆で縦書きしていくときに書きやすいように作られています。現在PC画面上で見るフォントは，活字印刷物のフォントとは違い，横書きで読みやすいようにもともとの字体から若干形を変えられています。それでも起源である縦書きの形を完全に壊すことができないので，やはり横書きでは読みづらいようになっています。 日本人が苦痛を感じることなく読める横書き1行あたりの字数は20字＋α程度だと言われています。意識して雑誌などを見るとたいていが!)25文字から28文字程度です。用紙，つまり本のサイズがA4を超えるような大判になると，1ページを左右2段組に分けて25～28字程度に調整されています。 一方，縦書きの場合には識別許容量はグンと増加し
「変な会社」が徹底する真っ当な情報共有
QAサイトやブログ、ソーシャルブックマークなどのネットサービスをてがける「はてな」。同社は、「立ったまま会議をする」「ミーティングをポッドキャスティングする」などユニークな試みを実践している「変な会社」として知られている。「超オープン」と言われる同社の情報共有の仕組みについて、川崎裕一副社長に話を聞いた。（聞き手は小野口 哲） はてな社内での情報共有はどんな仕組みになっているのでしょうか。 はてなでは、社員が全員ブログを書いています。業務日報的なものだけでなく、基本的に何でも書くんです。例えばあるサーバー担当者は、仕事がきつい、眠いといった自分の状況やフットサルの感想の後で、エラーのログや監視プログラムの話を書いています。 「個人のブログみたいなことを書いても意味がない」と感じる人もいるでしょうか、そうではないんです。ブログを読んで、この担当者が眠いことを知ったら、「もう眠ったらどうか」と
第25回 これからWebプランニングを始める人へ〜開業予備知識〜：ITpro
プランナーに限らず，どんな職業でも，プロになった後の「継続」のほうが難しい。今回は，地方で生き延びているSOHO小規模事業者の一人として，これからWebプランナーとしての開業を目指す人たちへの助言を書いてみよう。 SOHO事業主に必要な資質と，覚悟 本連載のタイトル通り，筆者は現役のSOHOだ。四国の山奥で開業して黒字転換をはかった後，現在地に越してきた。開業10年目になるが，いわゆる一般的な営業活動は一切していない。仕事の話が転がる宴席に出席することも稀だ。Webサイトでの発信と企画書だけで仕事を得ている。 小規模自営では，技術習得や自己研鑽はもちろんだが，健康の維持，仕事への責任感，顧客への還元，エンドユーザーへの配慮，家族への思いやりを心がけてこそ，継続が可能になると思う。 開業が，今の生活や仕事から逃げるための手段であってはならない。生計を一にする家族がいるなら，一人だけの問題でも
第20回 XHTMLの設計～状況に合った要素選び（5）～
XHTMLの制作でもっとも難しいのは「どの要素を使ってマークアップするか」という判断である。正解がひとつの場合もあれば、ふたつ以上の場合もある。人間の判断に負う部分も大きいので、あるマークアップを適切に感じる人もいれば感じない人もいる。シチュエーションごとの一般的なマークアップ例を見ていこう。 画像（img要素）を見出しとするのは悪か？ 「見出しとして埋め込むのはテキストだけであって、画像（img要素）を埋め込むのは正しくない」と勘違いしている人が意外と多い。特にテーブルレイアウトに慣れ親しんでいる人は、Webページにとって骨格である「見出し」をきちんとマークアップするという発想がなく、見た目として「見出し」のように見える画像を置いておけばそれでオーケーと判断してしまうケースが多いようだ。 構文的なことをいえば、どの文書型であっても、h1～h6要素はテキストだけでなくインライン要素を含むこ
グーグルが語る「働きがいのある会社の作り方」
「Trust Conference」では，働きがいのある会社をいかに実現するかについて活発な議論が交わされた 米サンフランシスコに本部を置くGreat Place to Work Institute（GPTW）は，1998年から毎年，経済誌「フォーチュン」に，「最も働きがいのある会社 ベスト100」（以下，ベスト100）を発表している。そのGPTWが，4月18日～20日に米ロサンゼルスで，働きがいのある会社をいかに実現するかを話し合う「Trust Conference」を開催した。2003年には250人程度だった参加者が年々増え続け，5回目の今年は750人を超えた。 このカンファレンスは，ベスト100に入っている会社の経営者が登壇し，信頼関係の高い経営をいかに実現しているかについて，考え方や具体的な取り組み事例を発表する。3日間の会期中には，朝食会や昼食会，カクテルパーティが催されるなど，
第22回 画像の代替テキストのベタープラクティス（1）
XHTMLのマークアップは、人間的な判断に負うところが大きい。その最たる例が画像の代替テキスト（img要素のalt属性値）だ。代替テキストの構文上の注意点や、どのように工夫すればユーザーにとって理解しやすくなるかを考えてみよう。 画像（img要素）のalt属性は必須か？ 画像（img要素）のalt属性値は、「代替テキスト」（alternartive textまたはalternate text）としてよく知られている。制作現場では、属性名のつづりから「オルト」と呼ばれるのが一般的だ。 Webをさまざまな環境で利用してもらうためにも、「代替テキストをつけるのは当たり前」という認識が広がっているのは望ましい傾向だ。Webページはビジュアルブラウザだけでなく、音声ブラウザやテキストブラウザなど、グラフィカルな表示・表現ができないソフトウェアでも閲覧され、またビジュアルブラウザであっても、画像読み込
第20回 “使いやすいURI（URL）”の設計を考える
今回は「URIの使いやすさ」について考えてみたいと思います。URIの使いやすさ，というのは，ウェブサイトやウェブ・アプリケーションにおいて，どういうURIでそれぞれのページにアクセスできるようにすると，利用者は使いやすいのか，ということです。つまりは，どのようにURIを設計するのがいいんだろう，ということです。URIの設計については，これまでもいろいろなところで議論がなされていますので，それらの議論や動向などを見ながら，考えていきたいと思います。 URIを話題として取り上げようと思ったのは，4月の4，5日に行われたYAPC ASIA 2007（YAPCはYet Another Perl Conferenceの略）で，Six Apartの創業者でMovable Typeの生みの親であるBen Trott氏がSix Apartのサービス「Vox」について発表を行ったとき，「Voxの出力するRS
人気急上昇の“Twitter”，ミニブログがもたらす個人と企業の新メディア
「YouTubeの次に来るサービスはこれだ！」。そんな評判を得て，今ネット上で大変盛り上がっているサービスがある。「Twitter」である。このサービスを一言で表現すれば「ミニブログ」あるいは「ミニSNS」。140文字以内の短いテキスト・メッセージを投稿し，仲間と情報共有するというサービスだ。 写真1●Twitterのトップページ 「What are you doing?」をキーワードに世界中のユーザがさまざまなメッセージを投稿。Twitterのトップページではそれらを一覧表示している。 [画像のクリックで拡大表示] 「今何してる？」という質問に答えるかたちで，ユーザーがそれぞれ現在の状況や思いを書き込んでいく。メッセージは友人間のみで公開してもよいし，全世界のユーザーに向けて一般公開することも可能である（写真1）。誰かを「友人」として登録すると，自分の投稿と友人の投稿を同じ画面にリスト表
第12回 非推奨属性の代替方法（3）
XHTML 1.0 StrictやXHTML 1.1ではいくつかの要素・属性が廃止されている。これらは「非推奨要素・属性」と呼ばれ、主に視覚表現に関するものであるため、シンプル＆クリーンなXHTMLのためには使わないほうがよい。前回、前々回に引き続き、非推奨属性の代替方法を見ていこう。 21. （table要素）align、bgcolor属性 table要素のalign属性は、値が「left」「right」の場合はCSSのfloatプロパティで、値が「center」の場合はmargin-leftとmargin-rightプロパティで「auto」と指定して代替する。bgcolor属性は、background-colorプロパティで代替する。 [XHTML 1.0 Transitional/Frameset] <table summary="Web用語の一覧表。1列目が用語、 2列目が説明"
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
