本文目次関連項目

テキスト入力の基礎

特殊文字(機種依存文字)

四角やひし形、星マークなど、文法構造ではなく装飾で意図的に目立たそうとする行為は、Googleなど検索エンジンで、スパム要素と判断されてしまう。

ひとつの文字で表した「(株)」や、「丸で囲まれた数字」に代表される「機種依存文字」は、部分的に、2004年の「JIS X 0213」で規定されたが、「Wikipedia JIS X 0213非漢字一覧」ページ右上の注意書きが消えるまで使うべきではない。[詳細]

具体的には、「日本語の約物コード一覧」で、「JIS X 0208」の欄が「-」となっている約物は、固有名詞など特別な場合以外、使用を控えるべき。

特殊記号を使う場合は、文字参照で書くことが推奨されているが、下記程度が妥当。

  • 「 」 ── 「 」区切りでなく文字としての半角スペース
  • 「©」 ── 「©」
  • 「®」 ── 「®」
  • 「™」 ── 「™」
  • 「«」 ── 「«」
  • 「»」 ── 「»」
  • 「&」 ── 「&」
  • 「…」 ── 「…」
  • 「÷」 ── 「÷」
  • 「×」 ── 「×」
  • 「"」 ── 「"」
  • 「“ ”」 ── 「“ ”」引用符
  • 「¥」 ── 「¥」半角¥マークは環境によりバックスラッシュで表示されるので要注意

※三点リーダ「…」は、システムが文章を省略した意味の記号として予約されており、入力からデータベース格納の過程で「ピリオド3つ」に自動的に置き換えられるが、特殊文字表記を利用すれば、すり抜けられる。

また、実際は、システム・データベース・XHTMLも「UTF-8」文字コードで書かれており、世界中の多くのコンピュータ上で文字化けせずに入力および出力できるが、Wikipediaで「記事名の制約」とされている文字は使わない方が妥当。例えば正確には「崎」の部分が「宮﨑駿」でも「宮崎駿」と表記すべき。

迷ったら「Wikipedia」

文章を書く上で文字表記に迷ったら、議論の上で最適化されているネット上の百科事典「Wikipedia」を参考にするのが得策。また、これらに注意して入力することは、視覚障害者が使う音声ブラウザへの有意義な対策となりうる。

区切りを意識する

ネットは英語が基本言語。目に見えなくとも、全角スペースは日本語文字で、半角スペースは単語の区切り。データとしては、改行も区切り文字のひとつ。

半角スペースも改行も、文字コード違いを含めると数種類あるため、ひとつ改行されているように見えても、そこに2つ改行コードが埋め込まれている場合がある。

時間の区切りが全角コロン「:」だった場合、プログラムには数字の間に何か2バイト文字(日本語もそのひとつ)が混じっているとしか認識できず、時刻とは認識されない。日付の全角スラッシュ「/」も同様。

例えば「時間:13:00」だと解釈不可能。半角スペースで区切り半角コロンで時間の方のみにすると「日時 13:00」となり、プログラムにも明確な表記となる。

全角スペースや改行も文字なので、見た目を揃えるためだけで文章に入れるのは避けるべき。「日時」を「日(全角スペース)時」と表記すると、視覚障害者が使うブラウザで「ヒ ゼンンカクスペース ジ」などと読み上げられる。勿論、検索エンジンも日時とは認識しない。

中黒「・」は要注意

記号でも特に日本語でしか使われない全角中黒「・」は、全角でないと意味を成さない。人名や英単語のカタカナ区切りに使う中黒は全角必須。なお、人名にカッコで「よみがな」を添える場合も区切るのならば、中黒を使うより世界標準の区切りである半角スペースが得策。

日本語では、「東京・大阪」など中黒を並列区切りでも利用するので固有名詞に近い存在。明確に個別の単語と認識させたい場合は半角スペースと半角スラッシュの組み合わせで「東京 / 大阪」と区切る方が単語の独立性が高まる。

Word文書的な書き方は避ける

印刷して人間が判断出来れば良いWordでは、出力が確定しているため、場当たり的に行頭位置を半角や全角の空白で埋めて揃えたり、適当な位置で改行されているが、ネットには向かない。

まず、インストールされているフォントは環境に左右される。音声ブラウザが読み上げたり、情報拡散時のため「Twitter」などにコピペ利用する場合も優しくない。そのため、可能なかぎりネット上のテキストでは、文章が終わる「。」で改行する。表題・段落・箇条書きなど、構文として正しく書かないと、PCやモバイルなど多様な環境で意図通りに伝わりにくくなる。

なお、更新すれば FeedBurner で、スタイルシートなしの状態が見れるため確認に使える。

URLの一部となるアップロードファイル名やカテゴリー名は、半角英数字かつ小文字

Windowsでは、ファイル名やフォルダ名に英字大文字が混じっていても、すべて小文字だけでも、同じ名前と扱われる。しかし、その他のOSや世界中のサーバは、少しの差異でも別ファイルとして認識する。

拡張子を表示させない設定など、素人向けに用意されているが、ネットで情報を流す側になるなら表示させ意識する。デジカメでは、拡張子が「.JPEG」となったり、すべて大文字の英数字ファイル名でPCに取り込まれる機種もあるが、拡張子は世界標準の「.jpg」に修正すべき。これは、Twitterなど手軽に画像がアップロードできる環境より不便に思えるが、ファイル名を自由に出来る権限が残されているという事。TwitterやFacebookでアップロードされた画像のネット上のパスを見れば、ファイル名を無視してユニーク(他と重複しない)な連続した英数文字列で置換されている。理由はどの国でも文字化けしないから。

取り込んだ画像は、そのままアップロードせず、ファイル名だけで後からどんな画像が想像できるよう変更。拡張子も含め半角英数字小文字に揃えてからアップロードを推奨。

注意点は、ファイル名で使う記号は「-」か「_」のみとすること。ドメイン名に空白が使えない理由と同じく「-」区切りだけが望ましい。日本語圏の全角記号などが混入しないように注意。日本語ファイル名のまま画像ファイルをアップロードするのは論外。

URL最後の「index.html(index.***)」は、不要の場合が多い

サイトを検索してURLをコピペ、或いはメールで届いた場合、最後に「index.html」が付いていたら、除去でも表示できるか確認する方が良い。サーバでは、最後が「/」で終わる場合、自動で「index.html」や「index.php」を探す設定が標準。

公式サイトなど、ドメイン名の最後に「/pc/」などが付いている場合は一度消して表示を試み、表示されるなら消した状態で最上位の階層にリンクすべき。例えば、モバイルは「mobi.html」、PCは「index.html」と振り分けプログラムが走っている場合などあり、PCで自動的に移動したページにリンクすると、モバイル端末で訪れたユーザーにも、PC用のページを強引に見せることになるため注意。

英数字は、半角英数字、英語圏で使われる記号も半角

検索エンジンは誤入力を想定して表示してくれているが、各ページをクロールしてキーワード分類する場合は、全角と半角で別のキーワードとして蓄積され、優先順位も決まるため、サイト内で使うキーワードは揃える。固有名詞など区切り記号なども含め、公式サイト内では正式な表記が望ましい。

また、デジタル環境での日本語は、一文字に2バイト使ってしまう言語。一文字1バイトの半角英数字では、スペースもドットやカンマも区切り文字として世界共通で認識されるが、日本語の記号は区切りとして認識されない場合もある。

使えるHTMLタグ

XHTML 1.0 Strict で、使えるタグは限られており、タグは半角英小文字で書く必要がある。
開始したタグは閉じねばならず、単独タグは <img /> と <br /> のみ、最後に半角スペースとスラッシュが必要。

  • 文章: <p></p>
  • リンク: <a></a>
  • 画像: <img />
  • 改行: <br />
  • 小さい文字: <small></small>
  • 箇条書き: <ul><li></li></ul>
  • 連番書き: <ol><li></li></ol>
  • 解説: <dl><dt></dt><dd></dd></dl>
  • 表題: <h3></h3> <h4></h4> <h5></h5>
  • ブロック: <div></div>
  • 文字列囲み: <span></span>
  • 引用: <blockquote></blockquote>
  • 略語: <abbr></abbr>

改行の変換動作

空の改行は、ひとつだけで前後の文章をどうするか判断している。

入力エリアの最上部と最下部以外で、行頭にHTMLタグがくる場合は、空の改行を入れる。
一旦、タグで始まる行が連続すると、次の空行が来るまでHTMLタグが続いていると判断している。

タイトルと内容

表題タグは <h1></h1> が最高値だが、ページ名で使われている。
次の <h2></h2> は、この記事では「タイトルと内容」部分に使われている。
ゆえに、内容として利用出来るのは <h3></h3> タグからとなる。

文章中に改行を行うとその場所に <br /> が、自動的に挿入される。
さらに、空行のない文章の場合 <p>文章</p> のように段落としてタグで囲まれて書きだされる。
空行を一行空けると、そこを起点に <p>空行より上の文章</p><p>空行より下の文章</p> として二つの段落で書きだされる。

空行を連続して書いたり、空行のつもりでもスペースなど見えない文字や表示不可能な文字(空行ひとつを示す文字コード以外)があると、誤動作を起こして、全行に改行タグが埋めこまれたり、制御不能になるので注意。
文章の最後にも、不要な見えない文字や改行が無いことも確認。

画像の配置

拡張子まで含め半角英数小文字のファイル名で、サイトパス/imagesに、ファイルアップロード。
必要なのは「画像パス」、「幅ピクセル値」、「縦ピクセル値」、「画層の説明文」のみ、けして「style=""」などで指定しないこと。

<img src="" width="" height="" alt="" />
<img src="http://****/images/****.jpg" width="数字" height="数字" alt="画像説明" />

Rapha ロゴマーク

空行を入れず、並べることも可能。(ひとつ上の例と行間を比較)
Rapha ロゴマークRapha ロゴマーク

Rapha ロゴマーク

画像の右配置には、クラス属性「class="imgright"」を埋め込む。

回り込みを解除する文章の後に「class="imgclear"」を付ける。
文末の改行タグ内であれば、自動改行はスルーされるので妥当。

もし、途中で回り込み解除が不要でも、どこかで「class="imgclear"」しないと、その後の構文に影響が出るので注意。

Rapha ロゴマーク

画像の左配置には、クラス属性「class="imgleft"」を埋め込む。

画像のセンタリングは <p></p> にセンタリング属性を与える。
前述のように、文章は自動的に <p></p> タグで囲まれるが、タグで始まる行は、スルーされるため問題ない。

Rapha ロゴマーク
Rapha ロゴマーク

上下に余白なく、画像のみ配置する場合は <div></div> にセンタリング属性を与える。

Rapha ロゴマーク
Rapha ロゴマーク

文字の大きさ

文章中の特定の単語を太字にしたり、大きくしたり、色をつけたり、なるべく回避。
すべての環境で同じフォントが使われていないため <small></small> タグのみの利用を推奨。

Apple製品では、ヒラギノ系フォントだが、「W3」が通常で、太字は大幅に太く「W6」。
ネットもプログラムも、あくまでも英語がベースでの日本語版。
根本的に日本語用でなく、太字は視認しにくく、その他の変化も見た目通りとは限らない。

例 ).
7月9日(土) 映画『偉大なる微調整 - Great tweak』舞台挨拶
ゲスト: 長州藩兵学者 吉田松陰さん長州藩藩士 高杉晋作さん

箇条書き

箇条書きは、丸と数字があり、階層も可能。
自動改行を有効にするためには、文字中に「空行」が必要になるため、改行タグを書く方が妥当。

  • リスト
  • リスト
  • リスト
  • リスト
  1. 番号リスト
  2. 番号リスト
  3. 番号リスト
  4. 番号リスト
  • リスト 1
  • リスト 2
  • リスト 3 リストタグを閉じる前に開始
    • リスト 3-1
    • リスト 3-2
    • リスト 3-3
      途中で改行して文章追加
    • リスト 3-4
  • リスト 4

解説表記

普通に文章を書いて、その中に説明すべき内容がある場合に利用。文章下に執筆者のプロフィールなど表示する際も利用出来る。タイトルと内容が書け、多重構造も可能。

Facebook
Facebook(フェイスブック)は、Facebook, Inc.の提供する、SNS(ソーシャル・ネットワーキング・サービス)である。2004年にアメリカ合衆国の学生向けにサービスを開始した。
Twitter
Twitter(ツイッター)は、 個々のユーザーが「ツイート」 (tweet) と称される短文を投稿し、閲覧できるコミュニケーション・サービスである。「ミニブログ」「マイクロブログ」といったカテゴリーに括られる。
Timeline
投稿が時系列に並べて表示される画面。TLとも略す。最新の投稿が一番上に表示され、古い投稿は下に流れていく。
Follower
自分をフォローしている他のユーザー。フォローは必ずしも双方向に行う必要はなく、公式では自動で双方向にフォローされるような機能もない。

注意書き表記

前述の内容に「※」印で注意書きを書く場合、確実に一行になるなら問題ないが、複数行になる可能性がある場合は「※」印のみ左側に残して右に行頭を合わせると、複数の注意書きがあっても見やすくなる。

※雨ニモマケズ 風ニモマケズ 雪ニモ夏ノ暑サニモマケヌ 丈夫ナカラダヲモチ
※慾ハナク 決シテ瞋ラズ イツモシヅカニワラツテヰル
※一日ニ玄米四合ト 味噌ト少シノ野菜ヲタベ アラユルコトヲ ジブンヲカンジヨウニ入レズニ ヨクミキキシワカリ ソシテワスレズ

箇条書きの内容に対して注意書きを添える場合は、箇条書き内で行った方が見やすい。

  • 野原ノ松ノ林ノ陰ノ
  • 小サナ萱ブキノ小屋ニヰテ
  • ※東ニ病気ノコドモアレバ 行ツテ看病シテヤリ 西ニツカレタ母アレバ 行ツテソノ稲ノ束ヲ負ヒ
    ※南ニ死ニサウナ人アレバ 行ツテコハガラナクテモイヽトイヒ 北ニケンクワヤソシヨウガアレバ ツマラナイカラヤメロトイヒ
    ※ヒデリノトキハナミダヲナガシ サムサノナツハオロオロアルキ ミンナニデクノボウトヨバレ ホメラレモセズ クニモサレズ サウイフモノニ ワタシハ ナリタイ

内容の中で表題と内容

ひとつ目の表題

表題タグ単体でも機能するが、文字が大きいだけより、左側がインデントされた方が読みやすい。
そのため、ブロックタグに「class="h3"」を使う。

その場合、文章の上下に空行を空けることで、自動改行が機能する。画像やリンク、箇条書きなども自由に書ける。

ふたつ目の表題

このサンプルのように書けば、行頭がHTMLタグでスルー、ブロック要素が終わった直後に空行があってもPタグで囲まないなど、予想通りの動きをする。

不要な改行タグも入る事がないが、空行が二つあったり、ブロックタグ開始の次行に、イメージタグや箇条書きタグを続けて書いたりすると、動作不具合を起こして、全部に改行タグを付けたりしてしまう。

引用表記

普通に文章を書いて、その中に引用すべき文章がある場合に利用。文章下に執筆者のプロフィールなど表示する際も利用出来る。

雨ニモマケズ 風ニモマケズ 雪ニモ夏ノ暑サニモマケヌ 丈夫ナカラダヲモチ 慾ハナク 決シテ瞋ラズ イツモシヅカニワラツテヰル 一日ニ玄米四合ト 味噌ト少シノ野菜ヲタベ アラユルコトヲ ジブンヲカンジヨウニ入レズニ ヨクミキキシワカリ ソシテワスレズ 野原ノ松ノ林ノ陰ノ 小サナ萱ブキノ小屋ニヰテ 東ニ病気ノコドモアレバ 行ツテ看病シテヤリ 西ニツカレタ母アレバ 行ツテソノ稲ノ束ヲ負ヒ 南ニ死ニサウナ人アレバ 行ツテコハガラナクテモイヽトイヒ 北ニケンクワヤソシヨウガアレバ ツマラナイカラヤメロトイヒ ヒデリノトキハナミダヲナガシ サムサノナツハオロオロアルキ ミンナニデクノボウトヨバレ ホメラレモセズ クニモサレズ サウイフモノニ ワタシハ ナリタイ

宮沢 賢治
遺稿整理で発見

定義済みクラス属性

クラスは、HTMLタグ内ににて指定。半角区切りで複数指定も可能。

テキスト周りの余白
文章構造が正しければ相対的に余白ができる。特殊な事情で表題の前に文章がくる場合などに<h3>へ適用する。幅は0.4em、0.8emの2種類。単位「em」は、大文字1文字のサイズを基準とした単位。
st = スペーストップ、sb = スペースボトム、sr = スペースライト、sl = スペースレフト、sa = スペースオール(四方)で、余白設定可能。
使用例
  • <p class="sa4">段落となる文章</p> … 段落の四方 0.4em 余白
  • <h3 class="st8">段落となる文章</h3> … 段落の上側 0.8em 余白
  • <h3 class="st12">段落となる文章</h3> … 段落の上側 1.2em 余白
  • <h3 class="st18">段落となる文章</h3> … 段落の上側 1.8em 余白
対応タグ
<p> <div> <ul> <ol> <li> <dl> <dt> <dd> <h3> <h4> <h5> <img /> <blockquote>
内部要素センタリング
使用例
  • <p class="center">文字や画像</p>
対応タグ
<p> <div> <li> <dt> <dd> <h3> <h4> <h5> <blockquote>
内部要素右寄せ
使用例
  • <p class="right">文字や画像</p>
対応タグ
<p> <div> <li> <dt> <dd> <h3> <h4> <h5> <blockquote>
続きを読むリンク
文章の最後に付けることで、リンクは自動的に一段下がり右寄せとなる。
使用例
  • 文章。<a class="extended">続きを読む &raquo;</a>
対応タグ
<a>
注意書き
※印で開始する文章が数行になっても、「※」部分だけ左に残して文章の頭を揃える。<li>の場合は「 class="none"」と併用が妥当。<p>タグでは、通常の文章と同じ行間が空くため、注意書きならば<div>タグで<small>を使うのが妥当。
使用例
  • <div class="note"><small>※この文章は注意書きです</small></div>
対応タグ
<p> <div> <li>
改行禁止
文章中で改行させたくない単語を囲む。
使用例
  • 文章<span class="nobr">単語</span>文章。
対応タグ
<span>
背景色と同じ文字色
色で指定するため、背景が単色の場合のみ利用出来る。文字を埋めて隠す行為は、スパム判断リスクがある。どうしても左余白を揃えたい場合、半角や全角スペースを連続しても環境により位置が変わる。同じ見えない文字を書くと確実に揃う。
使用例
  • 文章<span class="hide">単語</span>文章。
対応タグ
<span>
注意喚起用の上付き赤文字
使用例
  • Update: 2011-07-15 <span class="sred">NEW</span>
  • Update: 2011-07-15 NEW
対応タグ
<span>
回り込み
使用例
画像などを文章に回りこませて表示する場合に利用。
  • <img src="パス" width="数値" height="数値" alt="日本語代替文字" class="imgright">文章の右に画像が回り込む<br class="imgclear" />
  • <img src="パス" width="数値" height="数値" alt="日本語代替文字" class="imgright">文章の左に画像が回り込む<br class="imgclear" />
回り込み 対応タグ
<img /> <div>
回り込み解除 対応タグ
<br /> <p> <div> <li>
リストの種類
<ul>内 使用例
  • … <li> 指定がない場合は黒丸
  • … <li class="none"> 無印
  • … <li class="siro"> 抜き丸
  • … <li class="sikaku"> 四角
<ol>内 使用例
  1. … <li> 指定がない場合は数字
  2. … <li class="roma"> ローマ数字
  3. … <li class="romas"> ローマ数字小文字
  4. … <li class="alpha"> アルファベット
  5. … <li class="alphas"> アルファベット小文字
default.css (前述ソース抜粋)

.sa4 {
  padding: 0.4em;
}
.st4 {
  padding-top: 0.4em;
}
.sb4 {
  padding-bottom: 0.4em;
}
.sl4 {
  padding-left: 0.4em;
}
.sr4 {
  padding-right: 0.4em;
}
.sa8 {
  padding: 0.8em;
}
.st8 {
  padding-top: 0.8em;
}
.sb8 {
  padding-bottom: 0.8em;
}
.sl8 {
  padding-left: 0.8em;
}
.sr8 {
  padding-right: 0.8em;
}
.st12 {
padding-top: 1.2em;
}
.sb12 {
padding-bottom: 1.2em;
}
.sl12 {
padding-left: 1.2em;
}
.sr12 {
padding-right: 1.2em;
}
.st18 {
padding-top: 1.8em;
}
.sb18 {
padding-bottom: 1.8em;
}
.sl18 {
padding-left: 1.8em;
}
.sr18 {
padding-right: 1.8em;
}
.center {
  text-align: center;
  vertical-align: middle;
}
.right {
  text-align: right;
}
.extended {
  padding: 0 1.8em 0 0;
  display: block;
  text-align: right;
}
.note {
  padding-left:1em;
  text-indent:-1em;
  line-height: 1.2;
}
.nobr {
  white-space: nowrap;
}
.hide {
  color: #FFFFFF;
}
.sred {
  vertical-align: super;
  color: #e47911;
}
.entrydate {
  font-size: 79%;
  padding: 0.3em 0 0 0;
}
.imgright {
  float: right;
  display: inline;
  padding: 0.1em 0.1em 0.1em 0.8em;
  text-align: right;
}
.imgleft {
  float: left;
  display: inline;
  padding: 0.1em 0.8em 0.1em 0;
  text-align: left;
}
.imgclear {
  clear: both;
}
li.none {
  list-style-type: none;
}
li.siro {
  list-style-type:circle;
}
li.sikaku {
  list-style-type:square;
}
li.romas {
  list-style-type:lower-roman;
}
li.roma {
  list-style-type:upper-roman;
}
li.alphas {
  list-style-type:lower-alpha;
}
li.alpha {
  list-style-type:upper-alpha;
}