title属性を使っておくとCDPが捗る

up:

title属性を使っておくとCDPが捗る

title属性は要素に対しての補足情報を付け足す属性ですが、メニューや見出しのtitle属性に英訳や日本語訳を指定しておくと、デザインに幅を持たせることができます。

<a href="index.html" title="index">最初のページ</a>
<h2 title="サイトについて">About Site</h2>

CSSの:before:aftercontentを使って、title属性を併記したり、title属性だけ見えるようにしたりできます。IEは8以上で対応しています。IE7や6だと有効になりませんが、そういう未対応のブラウザでは普通の内容が見えるだけなので、display:nonetext-indentpaddingで内容を見えなくして背景画像だけを見せる画像置き換えと違って可読性は損ないません。JavaScriptを使えばIE7や6でも使えます。その部分をコピーできるかどうかはブラウザによります。

軽く解説

:beforeは要素の前、:afterは要素の後の擬似要素です。contentでその擬似要素内の内容を追加します。contentで指定できるのは、任意の文字列か任意の画像か要素の属性値です。

2016年9月30日追記

HTML5を利用するなら、title属性ではなく、独自データ属性(data-**)を利用するのもいいと思います。title属性だとツールチップ出たりしますし。

<h2 data-sub="サイトについて">About Site</h2>

h2[data-sub]:after{ content:attr(data-sub); }

実践

併記デザイン

英字の下に小さめの日本語訳、みたいなデザイン。

<h2 title="サイトについて">About Site</h2>
h2[title]:after
{
    content: attr(title);
    display: block;
    font-size: smaller;
}
<h2 title="About">サイトについて</h2>
h2[title]:before
{
    content: attr(title);
    display: block;
    font-size: larger;
}

title属性値を内容の後に挿入したければ:after、前に挿入したければ:beforeを指定し、大きく表示したいほうを大きいフォントサイズ、小さいほうは小さいフォントサイズを指定して、あとは好みでデザインを調整します。

title属性だけを表示する

  • 高さや幅の調整が必要なのでaなどインライン要素で使う場合はdisplay:block(display:inline-block)も指定する必要があります。
  • フォントサイズや文字色など継承されるスタイルやボーダーなどはelement:beforeではなくelementに指定したほうが、:beforeに対応していないレガシーブラウザでの見た目も揃えられます。(IE7はelement[title]には対応しています)
方法その1(高さを決めて内容を領域外に)
element
{
    display: block;
    line-height: 1.2em;
    height: 1.2em; /* line-height値×title属性値表示行数分 */
    min-width: 10em; /* 内容かtitle属性値、長いほうの文字数 */
    overflow: hidden;
}
element[title]:before
{
    content: attr(title);
    display: block;
    padding-bottom: 5em; /*一応余分に押し下げ*/
}
  • heightはpx指定含め絶対値だと文字サイズが大きい場合見切れるので、heightとline-heightはem指定(1em=1文字)推奨
  • 指定行数以上になると見切れるので、min-width(最小幅)で必要文字数分領域を確保しておくと安心め
方法その2(positionで重ねる)
element
{
     display: block;
     line-height: 1.2em;
     min-height: 1.2em; /* line-height値×title属性値表示行数分 */
     min-width: 10em; /* 内容かtitle属性値、長いほうの文字数 */
     position: relative;
}
element[title]:before
{
    position: absolute; top: 0; left: 0;
    width: 100%;
    content: attr(title);
    display: block;
    background: #EEE; /* 必ず必要 */
}
  • 背景色によって内容の文字を隠しているので、背景色の指定は必ず必要。背景画像を用いる場合は、背景色も併記必須。下の背景を透かす(背景色未設定・opacityなど)ことはできないので、background-position:fixedでそれらしく代用するか方法1を
  • :beforeで生成したブロックが本来のブロックより大きくなると、前後の内容が重なるので、min-width(最小幅)やmin-height(最小高さ)で必要な領域を確保しておくと安心め

そんでもってWeb Fontsも使えば画像使わなくてもさらにいい感じにできます。

webfonts

CSS3からの機能です。いままでは、サイトを見るとき、閲覧者のパソコンに既にインストールされているフォントしか用いれなかったので、どんなに可愛くキレイで印象的なフォントを作成者側で指定しても、そのフォントを持っている閲覧者にしか見ることができず、どうしてもそのフォントで表示したい場合は画像を使って表現せざるを得ませんでしたが、これからはフォントデータをWebにUPして閲覧者にそのときだけダウンロードさせて使うことができます。

Webfontサービスを使えば、scriptlinkの一行で、自分でデータを作成する必要もなく、簡単にフォントを使うことができます。