現在日本語で公開されているHPを英語でも公開するにあたり、
HTMLとCSSのみで2言語対応したいと思っています。
対応するというのは、
・同じHTMLファイル上で英語と日本語を併記
・ユーザーのブラウザが日本語なら日本語表示(英語は表示しない)
・日本語以外なら英語表示
とします。
なお、FireFoxでは以下のやり方でできましたが、
IEはlang属性が未対応とのことで、うまくいきません。
htmlファイル
<html>
<head>
<link rel="stylesheet" href="global.css" type="text/css">
<link rel="stylesheet" href="local.css" type="text/css">
</head>
<body>
<div class="ja" lang="ja">
<p>日本語のテキスト</p>
</div>
<div class="en" lang="en">
<p>English text</p>
</div>
</body>
</html>
global.css
*[lang='en'] { display: block; }
*[lang='ja'] { display: none; }
local.css.ja
*[lang='ja'] { display: block; }
*[lang='en'] { display: none; }
また、divタグでの判定であれば
htmlを以下のようにして
<div class="ja" ・・・
cssファイルの
*[lang='ja'] を div.ja などに
置き換えることで、
IEも含めうまくいくのはわかっているのですが
すでに日本語で作成済みのため、これからclass名を
日本語と英語で別にしていくのはさけたいと思っています。
シンプルに対応できないものでしょうか。
JAVAスクリプトは使用しないようにしたいと考えています。
また、まったく違う簡単な方法があれば教えていただけないでしょうか
よろしくお願いします。
(注:上記コードはコンテント・ネゴシエーション可能なサーバー上でのみ稼働とのこと。)
No.1ベストアンサー
- 回答日時:
> また、まったく違う簡単な方法があれば教えていただけないでしょうか
英訳、和訳サイトなどで書かれているような、併記を目的としてるわけではないんですよね?
スタイルシートを使わない状態でどう見えるか、という"HTML的"な考え方でいけば、
cssファイルをコンテントネゴシエーションで切り替えるのではなく、
htmlファイルを2つ用意して、言語に合わせて切り替えるほうがいいのでは?と思うのですが。
セオリーとしてはhtmlファイルの切り替えだと思います。
言語の切り替えも、
クッキーを使えばhtmlでもcssでも同じですが(Apache2.0.47以上prefer-language)
一時的な切り替えなら.jaや.enにリンクを張るだけで、簡単に実現できます。
HTMLファイルをもう作っちゃったのであれば、今更ですが。。。
余談ですが、たぶんFxはlang属性に対応していません。
「属性セレクタ」には対応していますが。
参考URL:http://httpd.apache.org/docs/2.0/content-negotia …
この回答への補足
さっそくの回答ありがとうございます。
>併記を目的としてるわけではないんですよね
はい、併記ではありません。
まず、言語別にhtmlを分けずに、1つのhtmlにしたい理由として、
たとえば、ユーザー情報の登録などを行う画面において、
「入力項目を増やす」などという改修は、
日本語か英語かにかかわらない改修のため、
1回だけの改修で済ませたいためです。
htmlファイルそのものを言語別にしてしまうと、
2つのファイルを改修するということになり避けたいところなのです。
やはり、標準的な考え方としてはおっしゃられるように
htmlの切り替えなんでしょうか。。。
うーん。つらいところです。。。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS HTML、cssのatomつぅーやつで 課題Ex1ってやつを表示させたいのですが、 私は課題Ex1が 2 2022/12/15 16:56
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
cssファイルの名称付け
-
エクセルファイルにCSSを読み込...
-
jspにcssを反映させるには
-
cssで、ボタンのテキスト部分を...
-
複数のhtmlで同じcssファイルを...
-
FC2 ホームページを別の人が編...
-
ディレクトリ構成【「common」...
-
CSSを勉強したいのですが…
-
スタイルシート(CSSスタイル)...
-
outlook 文字を揃えたい。tab...
-
マイクロ(μ)の文字を半角で出...
-
教えてください。
-
テーブル内の文字サイズを変更...
-
Illustratorで作成、pngで保存...
-
MsgBoxについて
-
SELECTのプルダウンの長さの調整
-
ペイント3Dのテキストサイズ変更
-
「MS Pゴシック」と同じ幅の...
-
奇数のフォントサイズ指定について
-
入力規則のリストの文字の大き...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
cssファイルの名称付け
-
jspにcssを反映させるには
-
サイトを作る時のcssファイルは...
-
ディレクトリ構成【「common」...
-
スタイルシート(CSSスタイル)...
-
複数のhtmlで同じcssファイルを...
-
cssで、ボタンのテキスト部分を...
-
エクセルファイルにCSSを読み込...
-
cssが反映されません
-
ドキュメントルートより上の階...
-
Dreamweaver のテンプレートで...
-
HTMLの CSSのファイルというの...
-
ブラウザでプレビューでCSSが反...
-
ワードプレスで太字が反映され...
-
行と行の間を一行空けたいです
-
cssファイルを階層の異なるHTML...
-
CSSを最近始めました。実は、2P...
-
BODYタグのstylesrcって?
-
ページ上部の余白をなくしたい...
-
dreamweaverでF12(プレビュー...
おすすめ情報