home wiki.fukuchiharuki.me
Menu

  • 追加された行はこの色です。
  • 削除された行はこの色です。
*関連 [#e42a64db]
-HTML
-JavaScript/jQuery
-CSS

*概要 [#fe28ce22]
JavaScriptとCSSで言語切り替えをする方法のメモです(後日きれいにまとめるかも)。

Webアプリケーションのフレームワークが多言語対応しているケースが多いと思いますが、ここではあえてJavaScriptとCSSだけで実現する方法を考えてみます。多言語対応した静的なページをWebサーバで、なんてときに。

*方法 [#md0ebb7e]
-index.html
 <!DOCTYPE html>
 <html>
 	<head>
 		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
 		<meta charset="utf-8">
 		<title>多言語対応テスト</title>
 		<link rel="stylesheet" type="text/css" href="css/style.css">
 		<noscript>
 			<link rel="stylesheet" href="css/noscript.css">
 		</noscript>
 		<script type="text/javascript" src="js/jquery.js"></script>
 		<script type="text/javascript" src="js/multilingal.js"></script>
 		<script type="text/javascript">
 <!--
 jQuery(function() {
 	appendLangSelectorTo('#multilingal');
 });
 // -->
 		</script>
 	</head>
 	<body class="ja">
 			<div id="multilingal"></div>
 			<div id="header">
 				<span id="m001-001"></span>
 			</div>
 			<div id="content">
 				<span id="m001-002"></span>
 			</div>
 			<div id="footer">
 				<span id="m001-003"></span>
 			</div>
 	</body>
 </html>

-css/style.css
 @charset "UTF-8";
 
 body {
 	display: none;
 }
 
 .ja #m001-001:after {
 	content: "日本語ヘッダ";
 }
 
 .en #m001-001:after {
 	content: "English Header";
 }
 
 .ja #m001-002:after {
 	content: "日本語コンテント";
 }
 
 .en #m001-002:after {
 	content: "English Content";
 }
 
 .ja #m001-003:after {
 	content: "日本語フッタ";
 }
 
 .en #m001-003:after {
 	content: "English Footer";
 }

-css/noscript.css
 @charset "UTF-8";
 
 body {
  	display: block;
 }

-js/multilingal.js
 var langs = [
 	{lang: 'ja', name: '日本語'},
 	{lang: 'en', name: 'English'}
 ];
 
 var setLang = function(lang) {
 	if (! lang) {
 		lang = langs[0];
 	}
 	jQuery.each(langs, function() {
 		jQuery('body').removeClass(this.lang);
 	});
 	jQuery('body').addClass(lang);
 };
 
 var appendLangSelectorTo = function(target) {
 	jQuery.each(langs, function() {
 		jQuery(target).append(
 			jQuery('<a />')
 			.attr('rel', this.lang)
 			.text(this.lang)
 			.click(function() {
 				setLang(jQuery(this).attr('rel'));
 			})
 		);
 	});
 };
 
 jQuery(function() {
 	setLang(langs[1].lang);
 	jQuery('body').css('display', 'block');
 });


*解説 [#db4b36c8]
後で

*参考 [#p9c54789]
-http://terkel.jp/archives/2012/07/styles-for-noscript/