タグ

ブックマーク / xtech.nikkei.com (8)

  • 第13回 Webページで読みやすいテキストとは:ITpro

    今回のポイント 1行あたりの文字数の目安 1段落の文字数の目安 段落に含む文字数 行間調整の考え方 字間調整を使ったロゴ風味見出し 日語というのはもともと縦書き文化です。文字も筆で縦書きしていくときに書きやすいように作られています。現在PC画面上で見るフォントは,活字印刷物のフォントとは違い,横書きで読みやすいようにもともとの字体から若干形を変えられています。それでも起源である縦書きの形を完全に壊すことができないので,やはり横書きでは読みづらいようになっています。 日人が苦痛を感じることなく読める横書き1行あたりの字数は20字+α程度だと言われています。意識して雑誌などを見るとたいていが!)25文字から28文字程度です。用紙,つまりのサイズがA4を超えるような大判になると,1ページを左右2段組に分けて25~28字程度に調整されています。 一方,縦書きの場合には識別許容量はグンと増加し

    第13回 Webページで読みやすいテキストとは:ITpro
  • 作業効率を高めるDreamweaverの小技---目次:ITpro

    制作会社に身を置きながら、テクニカルライターとして執筆をしている筆者が,リファレンスやチュートリアルなどの執筆を通して細かい機能を探る中でひらめいた,「日々の作業効率を高めるDreamweaverの小技」をご紹介します。 ・第1回 ひきついだサイトはdivでいっぱい! ・第2回 特定の要素(タグ)を削除したい ・第3回 マークアップの高速化について考える(1) ・第4回 マークアップの高速化について考える(2) ・第5回 環境設定を見直そう(1) ・第6回 環境設定を見直そう(2) ・第7回 環境設定を見直そう(3) ・第8回 Office書類の活用 ・第9回 Dreamweaver CS3は使えるのか?

    作業効率を高めるDreamweaverの小技---目次:ITpro
  • 第1回 まずは「クッキー」を理解すべし

    Webアプリケーションのぜい弱性がなかなかなくならない。メディアなどでも盛んに取り上げられているにもかかわらず,である。特に,セッション管理がからむアプリケーションのぜい弱性には,気付かないことが多い。具体的には「クロスサイト・リクエスト・フォージェリ」(CSRF),「セッション・フィクセーション」などである。これらはクロスサイト・スクリプティング,SQLインジェクションといった比較的メジャーなぜい弱性に比べて認知度が低く,対策も進んでいない。 原因の一つは,アプリケーションの開発者が原因を正しく理解していないこと。CSRFやセッション・フィクセーションについて言えば,セッション管理に使うクッキー(cookie)の動作を理解していないと対策が難しい。ところが最近の開発環境では,セッション管理の仕組みが隠ぺいされているため,必ずしもこの知識は要求されない。こうした開発者は容易にはぜい弱性に気

    第1回 まずは「クッキー」を理解すべし
  • Flash 8 入門講座:ITpro

    Flash 8 入門講座 目次 お絵描きからActionScriptを使ったアニメーション制作まで いまやすっかり,Web上のインタラクティブ・コンテンツの代名詞となった感がある“Flash”。実は,アニメーションやゲームなど私たちが目にする,いわゆるFlashコンテンツは正確には「Flashムービー(ファイルの拡張子は.swf)」と呼びます。 Flashムービーを作成する方法はいくつかありますが,一般には,アドビシステムズの開発ツール「Macromedia Flash(以下,単にFlash)」を使います。連載では,Flashの最新版である「Flash 8」を使って,Flashムービーの作成方法を中心に紹介していきます。Flash 8を持っていないという人も,1カ月間タダですべての機能を使用できる体験版がアドビシステムズのWebサイトに用意されているので,ダウンロードして一度試してみては

    Flash 8 入門講座:ITpro
  • 第19回 XHTMLの設計~状況に合った要素選び(4)~

    XHTMLの制作でもっとも難しいのは「どの要素を使ってマークアップするか」という判断である。正解がひとつの場合もあれば、ふたつ以上の場合もある。人間の判断に負う部分も大きいので、あるマークアップを適切に感じる人もいれば感じない人もいる。シチュエーションごとの一般的なマークアップ例を見ていこう。 dl要素の多様な使い方 dl要素(定義リスト)は多様な用途に利用される。来は「definition list」、つまり「用語」と「解説」を対応させてるリストに利用する要素であるが、XHTMLでは「ある内容」と「ある内容」を直接的に対応させるための要素がないため、dl要素をやや拡大解釈をし、さまざまな目的で利用するのが一般的だ。例をあげると次のとおりである。 新着情報(日付と内容) お問い合わせフォーム(名前、Eメール、内容などのラベルと入力欄) カテゴリーリスト(カテゴリー名と説明) 会社案内(社

    第19回 XHTMLの設計~状況に合った要素選び(4)~
  • 第36回 画面設計書を書くための手法とツール:ITpro

    画面設計書について,前回に引き続き,それを書くツールや手法について考えてみましょう。 画面設計書の基 まずは,画面設計書の中にあるべき情報から見てみましょう。これらすべてがそろっていなければならない,というわけではありませんが,望ましいのではないかと私自身は考えています。 header ページIDやタイトルなど,一目でそのページがどの画面仕様を記述しているかがわかるような「ヘッダー」部分。細かく書くならば,文字コードや対象ブラウザまで記述する場合もある。また,プロジェクトの名前(プロジェクト・コード)や版番号なども記し,似たようなドキュメントの中からも引き出せるようにしておく。 footer 制作サイドのコピーライトやページ番号などを記す。最終的には,クライアントのコピーライトに置き直して,最終納品とする場合もある。 Page Layout 画面内に配置する「ユーザー・インタフェース(U

    第36回 画面設計書を書くための手法とツール:ITpro
  • 第10回 文字のサイズとブラウザの違い 〜「はてなダイアリー」で起こった問題点:ITpro

    今回は,先日筆者の勤務するはてなのサービスの一つである「はてなダイアリー」で起こった,使いやすさに関する問題を取り上げてみたいと思います。使いやすさの向上のためにデザインを変更したところ問題が発生し,それをプログラミング言語であるところのJavaScriptを使って解決した,というお話です。 その問題とは,「文字の大きさ」に関するものです。 ブラウザには,文字のサイズを変更する機能が用意されています(図1)。例えばInternet Explorer(IE)なら「表示」メニューの「文字サイズ」から「最大」「大」「中」「小」「最小」の五つの段階を選ぶことができます。Firefoxも「表示」メニューの「文字サイズ」から選ぶことができますが,「大きく」「小さく」というメニューになっており,より自由に表示サイズを変更することができます。 図1:ブラウザでは文字サイズを変更できる ちなみにOperaは

    第10回 文字のサイズとブラウザの違い 〜「はてなダイアリー」で起こった問題点:ITpro
  • 第8回 デザイナーとともにより良いサイトを目指そう 〜「はてな」のやり方:ITpro

    連載第5回(「デザインのセンス,持ってますか?」)においてちょっと触れましたが,ウェブサイトを構築する際に,デザイナーとエンジニア(プログラマ)がかかわり,共同で作業を行うケースというのは少なくないと思います。これはもちろん,デザイナーとエンジニアがどちらもそれぞれ別のスキルを持っているからなのですが,それぞれのスキルや立場が異なるために,お互いにうまく意思疎通ができないケースも多いんじゃないかと思っています。 例えば,デザイナーの作成したウェブページのデザインが,システムを作る側からすると扱いづらい構成になっていたり,逆にエンジニアがシステムの修正や機能追加を行った際に行った表示上の変更が,デザイナーからすると許せないものだったり。そうでなくてもデザイナーの意図を読みきれていなかったり,といった感じで,お互いの作業が,相手の作業を阻害してしまったり,手戻りを発生させてしまうといった経験を

    第8回 デザイナーとともにより良いサイトを目指そう 〜「はてな」のやり方:ITpro
  • 1