CSS を使用した非表示テキスト

CSS を使用したテキスト要素の非表示は、さまざまなデザイン目的に役立ちます。一般的なシナリオの 1 つは、テキストをロゴとして画像に置き換えることです。この記事では、画像の表示中に元のテキストを効果的に削除する方法という特定の問題に対処します。

テキストを非表示にする解決策

画像の表示中にテキストを非表示にする方法は複数あります。画像の配置のために要素の寸法を維持します。

方法 1: テキストのインデント

1 つのテクニックtext-indent:

h1 {
    text-indent: -9999px;                 /* sends the text off-screen */
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width:  600px;
    white-space: nowrap;            /* because only the first line is indented */
}

方法 2: テキストの非表示

別の解決策は、負のインデントによって作成される大きな非表示ボックスを回避します:

h1 {
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width:  600px;

    /* Hide the text. */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

どちらのメソッドも、テキストを画面外に押し出すか要素内に隠すことによって、目的の結果を実現します。