英語の副題はカスタムデータで入れとこ

大見出しの日本語の上にチマッッとした英語の副題がついてるアレ。コーポレートサイトなどでよく使われてますね。なるほど、と思った方法を見かけたので備忘録です。未来の自分のために。

まずはHTML。

<h1 class="title" data-en-title="HOGE HOGE">日本語の見出し</h1>

そしてCSS。

.title {
    font-size: 36px;
    text-align: center;
    position: relative;
}

.title::after {
    font-size: 16px;
    letter-spacing: .1em;
    color: #707070;
    display: block;
    line-height: 1;
    left: 0;
    right: 0;
    top: -2em;
    position: absolute;
    content: attr(data-en-title);
}

HTMLでカスタムデータ(data-en-title=”~~”)として値を入れておき疑似要素でそれを表示させる、というやり方。
確かにあのチマッとした副題、デザイン的に入れてることの方が圧倒的に多い。意味のないHTMLを書くとGoogleがイラッとすると聞きました。今度機会があったらこの方法を真似しよう。

Search

Author

管理人:ナツ

WEB制作等で糊口をしのいでいる限界フリーランス。調べたことなどを備忘録としてまとめたり普通の日記を書いたりしています。デザインとBlenderは趣味。