とあるエンジニアの闇歴史帳

コピペで使える便利Wiki ※現在構築中です。

ユーザ用ツール


webp:vol61

差分

このページの2つのバージョン間の差分を表示します。

この比較画面にリンクする

webp:vol61 [2020/06/23 14:10] (現在)
行 1: 行 1:
 +====== Code.016 文章を読みやすくするテクニック/今週は小休止 ======
 +<html><pre style="font-family:monospace; font-size:10pt">
 +   Code.016                                                 2003年02月03日発行
 +■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━■
 +                           【 Webプログラミング 】
  
 +                       〜 猫的プログラマーとその軌跡 〜
 +■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━■
 +
 +              ▼毎週月曜日に配信しています。
 +              ▼等幅フォントでご覧いただくとキレイに見えます。
 +              ▼登録・解除はこちらから可能です。
 +                &lt; http://www.ichikoro.com/webp/ &gt;
 +                  ※ぜひお友達にもご紹介ください(^^)/
 +
 +
 +こんにちは、編集長の勝部です。
 +週末は何だか疲れてぐったりしていた関係で、
 +今回は小休止。Q&amp;Aだけお届けします。
 +
 +うーん、何だろう。
 +体力不足?不摂生?(^^ゞ
 +
 +━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 + ここが知りたい! WebプログラミングQ&amp;A
 +──────────────────────────────────────
 +ここでは読者の皆様からよせられたギモンをQ&amp;A形式に
 +編集しなおしてお届けします。
 +
 +    Q. 文章を読みやすくするテクニックはありますか?
 +
 +    A. CSS(スタイルシート)を活用しましょう。
 +
 +紙と比べてパソコン上に表示される文章を長時間読むのは、かなり
 +つらい物があります。資源の無駄だと分かっても、ついつい印刷し
 +てしまいますよね。
 +    ※ドキュメントの検索置換やコピー&amp;ペーストが
 +     出来るパソコンの方が、業務上は作業効率いい
 +     んですけどね。
 +
 +これは色彩感覚などWebページ制作者の「センス」から来る問題と、
 +紙(印刷物)とディスプレイの違い、この二つが大きな原因でしょう。
 +今回は後者を取り上げてみたいと思います。
 +
 +    (1)行間の違い
 +        行間とは、行と行の間にある隙間のことです。
 +        パソコンはビシッと詰まっているのに対し、
 +        読みやすい印刷物には適当な行間があるのに
 +        気がつくでしょうか?
 +
 +        →解決法
 +            CSSの line-height を使いましょう。
 +            
 +                &lt;DIV style="line-height: 130%"&gt;
 +                    ここに文章を書いてください。
 +                    行間が普段より開いているのが
 +                    分かりますよね?
 +                &lt;/DIV&gt;
 +
 +
 +    (2)縦書きにしてみる
 +        例えば台本(脚本)など、縦書きにした方が圧倒的に読みやす
 +        い場合があります。もともとマイクロソフトもアップルも横
 +        書き文化であるアメリカで開発されたこともあり、縦書きの
 +        対応は貧弱でした。
 +
 +        →解決法
 +            CSSの writing-mode を使いましょう。
 +
 +                &lt;DIV style="writing-mode:tb-rl"&gt;
 +                    対応しているブラウザは縦書きに見えます。
 +                    やっぱ、日本人はこれですな。
 +                &lt;/DIV&gt;
 +        
 +        IE5.5以上で有効です。
 +        対応外のブラウザでは横書きの状態で見えます。
 +            ・参考
 +             Internet Explorer 5.5 における縦書きレイアウトの使用
 +             http://www.asia.microsoft.com/japan/msdn/web/ie/ie55/verticaltext.asp
 +
 +        これ以外にも、テーブルで無理矢理に縦書き風の文章に
 +        する技がありますが、長文だったりすると修正するとき
 +        に結構大変なのであまりおすすめしません。
 +
 +
 +最初に述べた制作者のセンスですが、例えば背景と文字はお互いに
 +輝度の近い色を使わない、ユーザーの目の疲れる事をしない(安っぽ
 +い広告バナーを張るとか(苦笑))、読みやすい文章になるよう根本的
 +な部分を努力するといったことも重要です。
 +
 +本当に読みやすい、高度な編集がしたいのであればPDFにする
 +という手もあります。またFLASHを使うのも一つの手段です。
 +
 +他にもみなさんが行っている、読みやすくするテクニックがあったら
 +教えてくださいね(^^)/
 +
 +    ★募集中!
 +      Webプログラミングではこのコーナーで聞いてみたいご質問を
 +      受け付けております。メルマガで取り上げた内容と違っても
 +      OKです。お気軽にお寄せください。
 +
 +              mm-webp@ichikoro.com
 +              (かつべへダイレクトに届きます)
 +
 +───────
 +  分からない
 +───────
 +いまいちよく分からない場合は、以下で聞いてみることも
 +できます。
 +
 +  ・サポートBBS
 +    このメルマガ専用のサポート掲示板です。
 +    勝部が(分かる範囲内で)ギモンにスパッとお答えします。
 +    メールで聞くより高速です。お気軽にお書き込みください(^^)/
 +      http://www.ichikoro.com/webp/bbs/
 +
 +  ・CGIプログラミングML
 +    CGIなどWebに関する話題を繰り広げるメーリングリスト。
 +    このメルマガとは関係ありませんので発言時は注意を。
 +      http://www.ichikoro.com/cgi/ml/
 +
 +
 +━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 +                           編    集    後    記
 +━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 +エクセルの本を数冊買ってきて会社でお勉強をしていました。
 +Perlで100行程度のプログラムが、ほんの数アクション(数秒)で
 +出来るのはちょっと感動します。ピポットテーブル(グラフ)っ
 +てすごい!(笑)
 +
 +業務でアクセスを使ったツールを作成したり、会議の資料をパワー
 +ポイントでまとめることは良くあるのですが、あまりエクセルの深
 +いところ、例えば細かいデータ分析などをする機会がそんなに多く
 +なかったため、いつも力技でやっていました。
 +
 +優秀なプログラマーほど、過去の資産(ライブラリとかね)やツールを
 +使いこなすと言われています。自分で作ることが大事なのではなく、
 +どれだけ早く、確実に実現するかが大切なのです。
 +
 +マイクロソフトは正直大嫌いなのですが、使える物はしっかりと
 +利用しましょう。さぁデータに埋もれている方、データの加工に
 +難儀している方、今すぐエクセルを手にとりましょう!
 +
 +    ・超図解 データ分析入門 from Excel &amp; Access
 +     http://www.amazon.co.jp/exec/obidos/ASIN/4872832620/ichikorocom-22
 +        「表計算」を一通り覚えたら次に取り組む本でしょうか。
 +        ピポットの使い方から始まり、Accessとの連携などにつ
 +        いて解説した本。
 +
 +    ・Excel関数 逆引きハンドブック
 +     http://www.amazon.co.jp/exec/obidos/ASIN/4883370712/ichikorocom-22
 +        一押しです!
 +        エクセルの関数の説明は、直感的に分かりづらい物が多く、
 +        探すのに一苦労するのですが、こいつが一冊あるだけで
 +        ずいぶん助かります。
 +
 +また来週お会いしましょう! (^-^)/~~~
 +■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
 +
 +                   【 Webプログラミング Code Sample 】
 +
 +                    発  行 : ichikoro.com
 +                発行責任者 : 勝部 麻季人
 +                              &lt; mailto:katsube@ichikoro.com &gt;
 +                 Webサイト : &lt; http://www.ichikoro.com/webp/ &gt;
 +            お問い合わせ先 : &lt; mailto:mm-webp@ichikoro.com &gt;
 +
 +                            Powerd by まぐまぐ
 +  All Right Reserved, CopyRight(C) 2001-2003 Webプログラミング Code Sample
 +■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
 +</pre></html>

関連ページ

webp/vol61.txt · 最終更新: 2020/06/23 14:10 (外部編集)