--- title: 多言語サイトで使うlang属性、lang属性を使ったCSS指定 tags: mixin lang HTML CSS 多言語 author: flatsato slide: false --- 多言語サイト制作ではlang属性を使います。 `` 言語指定は今までこのように書いていましたが [Google推奨の書き方](https://support.google.com/webmasters/answer/189077?hl=ja&ref_topic=2370587)があったのでメモしておきます。 ```HTML:HTML ``` 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: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