【解説】CSSでテキストを非表示にする方法【コピペOK】

パソ君

・テキストを非表示にする方法ある？

こんな疑問にお答えします。

案件によっては、サイトロゴ画像だけ表示させて、それにつくテキストのみ非表示にしたい場合があります。

実はそれCSSでとあるコードを記述すれば簡単に実装可能です。

ジト

すぐにできるよ！

ということで、この記事では「CSSでテキストを非表示にする方法」について解説していきます！

【解説】CSSでテキストを非表示にする方法【コピペOK】

そんなテキストを非表示にしたサンプルがこちら↓

See the Pen テキストを非表示にする方法➀ by jito-coder (@jito-coder) on CodePen.

下の画像に対してのテキストが、非表示になっていますよね。

テキストのみを非表示にするコードが下記になります↓

.text{
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

コードの中で重要な点がこちら↓

順に解説してきます。

➀：100％の幅インデントさせる

まず「text-indent」を使い、インデントさせます。

インデント量は100％に指定。

これで下記画像のように、テキスト要素分を字下げすることができます↓

.text {
    text-indent: 100%;
}

➁：改行をなくしはみ出させる

ただ先ほどのままだと、改行しちゃいます。

そこで改行をなくす「white-space: nowrap;」を指定。

すると下記画像のようになります↓

これで完全に要素の幅100％分をインデントできました。

.text {
    text-indent: 100%;
    white-space: nowrap;
}

➂：はみ出させた部分を非表示にする

あとはインデントしてはみ出た部分を非表示にすればOKです。

そこで「overflow: hidden;」を使います。

すると下記画像のようになり、テキストを非表示にさせることができました↓

.text {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

【解説】CSSでテキストを非表示にする方法【別のやり方】

最後にちょっと補足。

実はfont-sizeにある値を入れるだけで、テキストを非表示にすることができます。

それが下記コード↓

font-size: 0;

非表示したいテキスト要素に「font-size: 0;」を指定すれば、要素はあるけどテキストは見えない反映が可能です。

【解説】CSSでテキストを非表示にする方法【コピペOK】：まとめ

ジト

テキストを非表示にする時はためしてみてね！

コーディング知識を
『チート級』に得れる教材を作成！

見てみる⋙