Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
7
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Organization

多言語サイトで使うlang属性、lang属性を使ったCSS指定

多言語サイト制作ではlang属性を使います。

<html lang="en"> 言語指定は今までこのように書いていましたが
Google推奨の書き方があったのでメモしておきます。

HTML
<link rel="alternate" hreflang="ja" lang="ja" href="https://hoge.com/"><!--日本語-->
<link rel="alternate" hreflang="en" lang="en" href="https://hoge.com/en/"><!--英語-->
<link rel="alternate" hreflang="zh-cmn-Hans" lang="zh-cmn-Hans" href="https://hoge.com/zh-cn/"><!--中国語(簡体)-->
<link rel="alternate" hreflang="zh-cmn-Hant" lang="zh-cmn-Hant" href="https://hoge.com/zh-tw/"><!--中国語(繁体)-->
<link rel="alternate" hreflang="ko" lang="ko" href="https://hoge.com/ko/"><!--韓国語-->
<link rel="alternate" hreflang="fr" lang="fr" href="https://hoge.com/fr/"><!--フランス語-->

hreflang属性=国コードを指定
herf属性=国別URLを指定

主要な国のlang属性

サイト制作でよく使う国のlang属性は以下となります。

国名 lang属性
日本語 ja
英語 en
中国語(簡体) zh-cmn-Hans
中国語(繁体) zh-cmn-Hant
韓国語 ko
フランス語 fr

その他の国はこちらを参照ください。

HTML5/HTML5の基本/言語コード - TAG index
https://www.tagindex.com/html5/basic/langcode.html

lang属性で言語別のCSS指定

lang属性で文字色を変更するmixnです。
font-familyやline-height言語ごとのCSSを指定します。

Sass

scss

//言語ごとにfont-familyを指定するmixin
@mixin font_style {
  [lang=ja] & {
    color: darkred;
  }
  [lang=en] & {
    color: darkcyan;
  }
  [lang=zh-cmn-Hans] & {
    color: darkgreen;
  }
  [lang=zh-cmn-Hant] & {
    color: darkorange;
  }
  [lang=ko] & {
    color: darkviolet;
  }
  [lang=fr] & {
    color: darkslategray;
  }
}

まとめ

classを使わないCSS指定は便利ですね〜。
lang属性に新しい属性が増えていて知識のブラッシュアップの必要を感じました。

海外市場に進出するため多言語サイトを制作する日本企業が増えています。
正しい多言語サイトを制作できるよう細かい部分を覚えておきたいです:v_tone1:

参考URL

ページのローカライズ版について Google に知らせる - Search Console ヘルプ
https://support.google.com/webmasters/answer/189077?hl=ja&ref_topic=2370587

他言語サイトを制作するときのメモ
https://gist.github.com/manabuyasuda/dd976907005a588e3203da433289e6af

:lang擬似クラスは便利 - Qiita
https://qiita.com/butchi_y/items/334f2dd35a54fbbd116d

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
7
Help us understand the problem. What are the problem?