ghawkgu/FHlfi.markdown

## FHlfi.markdown

      
    Raw
  

              FHlfi.markdown
            
          
    FHlfi

Forked from A Non Ymous's Pen sbIEt.
A Pen by Yi Gu on CodePen.
License.

  
## index.html
<html lang="ja">
  <head>
    <title>日本語と中国語対応のまとめ</title>
  </head>

  <h2>1. UTF-8にする</h2>
  <p>もう２１世紀だよ。サイトをUTF-8にするのはi18nの基本です。UTF-8にする理由は「スケーラブルWebサイト」という本の第四章にちゃんと書いてあるが、読めばすぐわかると思います。</p>

  <h2>2.「lang」属性</h2>

  <p>「lang」属性はブラウザーにレンダリング用の言語が設定できます。まず例を見てください。</p>

  <p><pre class="sample">
&lt;p&gt;こちらは日本語です。（「lang」という属性を略したら、親要素の「lang」の値を継続する。）&lt;/p&gt;
&lt;p lang="zh-cn" &gt;这是简体中文。（子ども要素で「lang」を指定すると、親の設定を上書きする。）&lt;/p&gt;</pre></p>
  <p>そのレンダリングの結果は下記のとおりです。</p>

  <div class="sample">
  <p>こちらは日本語です。（「lang」という属性を略したら、親要素の「lang」の値を継続する。）</p>
  <p lang="zh-cn" >这是简体中文。（子ども要素で「lang」を指定すると、親の設定を上書きする。）</p>
  </div>
  <p>ただ、一部の漢字の文字コードは共有しているが、言語によって見た目が異なってるので、要注意です。例えば：
    <ul class="sample">
      <li>「骨」（日本語）</li>
      <li lang="zh-cn" >“骨”（中文简体字）</li>
    </ul>
  </p>

  <p>日本語と中国語ともある場合、&lt;span&gt;要素で「lang」属性を明示するのは必要です。例えば：</p>
  <p class="sample" >日本語では「骨」という漢字の書き方は中国語（<span lang="zh-cn">骨</span>）と異なっています。</p>
  <p>もしページでは日本語か中国語か一つしか表示されないなら、一番トップの&lt;html&gt;要素でlang属性を設定すればいいです。</p>

  <h2>3. CSSのfont-family</h2>
  <p>ブラウザーは「lang」属性によって、デフォールトのフォントでページをレンダリングするので、CSSでカスタマイズのフォントリストが使いたいなら、言語別の設定が必要です。例えば、同じ「font-family」を指定すると、「lang」を設定しても、文字は誤って表示されることもあります。</p>
  <ul class="sample font">
    <li>「骨」（日本語）</li>
    <li lang="zh-cn">“骨”（中文简体字）</li>
  </ul>
  <p>なので、CSSでそれぞれの言語によって、「font-family」を明示的に宣言したほうがよいです。例えば：
  <ul class="sample">
    <li class="ja" >「骨」（日本語）</li>
    <li lang="zh-cn" class="zh-cn" >“骨”（中文简体字）</li>
  </ul>

  <p>さらに、「lang」と使い方と同じように、ページでは日本語か中国語か一つしか表示されないなら、classの宣言する必要がなくなり、言語ごとのフォント設定をzh-cn.cssやja.cssに宣言して、そのページは言語に応じてcssファイルを読み込めばいいです。</p>
</html>

## style.css
html {
  font-family: serif;
}

p, pre {
  line-height: 1.3
}

.sample {
  border: 1px dashed gray;
  border-radius: 5px;
  padding: .6em 1em;
  background-color: #DDD;
}

ul.sample {
  padding-left: 2em
}

.font > li {
  font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

.ja {
  font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

.zh-cn {
  font-family: Helvetica, Tahoma, Arial, STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑", SimSun, "宋体", Heiti, "黑体", sans-serif;
}
	<html lang="ja">
	<head>
	<title>日本語と中国語対応のまとめ</title>
	</head>

	<h2>1. UTF-8にする</h2>
	<p>もう２１世紀だよ。サイトをUTF-8にするのはi18nの基本です。UTF-8にする理由は「スケーラブルWebサイト」という本の第四章にちゃんと書いてあるが、読めばすぐわかると思います。</p>

	<h2>2.「lang」属性</h2>

	<p>「lang」属性はブラウザーにレンダリング用の言語が設定できます。まず例を見てください。</p>

	<p><pre class="sample">
	<p>こちらは日本語です。（「lang」という属性を略したら、親要素の「lang」の値を継続する。）</p>
	<p lang="zh-cn" >这是简体中文。（子ども要素で「lang」を指定すると、親の設定を上書きする。）</p></pre></p>
	<p>そのレンダリングの結果は下記のとおりです。</p>

	<div class="sample">
	<p>こちらは日本語です。（「lang」という属性を略したら、親要素の「lang」の値を継続する。）</p>
	<p lang="zh-cn" >这是简体中文。（子ども要素で「lang」を指定すると、親の設定を上書きする。）</p>
	</div>
	<p>ただ、一部の漢字の文字コードは共有しているが、言語によって見た目が異なってるので、要注意です。例えば：
	<ul class="sample">
	<li>「骨」（日本語）</li>
	<li lang="zh-cn" >“骨”（中文简体字）</li>
	</ul>
	</p>

	<p>日本語と中国語ともある場合、<span>要素で「lang」属性を明示するのは必要です。例えば：</p>
	<p class="sample" >日本語では「骨」という漢字の書き方は中国語（<span lang="zh-cn">骨</span>）と異なっています。</p>
	<p>もしページでは日本語か中国語か一つしか表示されないなら、一番トップの<html>要素でlang属性を設定すればいいです。</p>

	<h2>3. CSSのfont-family</h2>
	<p>ブラウザーは「lang」属性によって、デフォールトのフォントでページをレンダリングするので、CSSでカスタマイズのフォントリストが使いたいなら、言語別の設定が必要です。例えば、同じ「font-family」を指定すると、「lang」を設定しても、文字は誤って表示されることもあります。</p>
	<ul class="sample font">
	<li>「骨」（日本語）</li>
	<li lang="zh-cn">“骨”（中文简体字）</li>
	</ul>
	<p>なので、CSSでそれぞれの言語によって、「font-family」を明示的に宣言したほうがよいです。例えば：
	<ul class="sample">
	<li class="ja" >「骨」（日本語）</li>
	<li lang="zh-cn" class="zh-cn" >“骨”（中文简体字）</li>
	</ul>

	<p>さらに、「lang」と使い方と同じように、ページでは日本語か中国語か一つしか表示されないなら、classの宣言する必要がなくなり、言語ごとのフォント設定をzh-cn.cssやja.cssに宣言して、そのページは言語に応じてcssファイルを読み込めばいいです。</p>
	</html>
	html {
	font-family: serif;
	}

	p, pre {
	line-height: 1.3
	}

	.sample {
	border: 1px dashed gray;
	border-radius: 5px;
	padding: .6em 1em;
	background-color: #DDD;
	}

	ul.sample {
	padding-left: 2em
	}

	.font > li {
	font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	}

	.ja {
	font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	}

	.zh-cn {
	font-family: Helvetica, Tahoma, Arial, STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑", SimSun, "宋体", Heiti, "黑体", sans-serif;
	}