新・HTML/CSS入門編5:整形済みテキストの出力

※有料会員になるとこの動画をご利用いただけます

＃04:整形済みテキストの出力

このチャプターでは、ファイル内のレイアウトをそのままの形で出力するpre要素について学習します。

アスキーコード

    ####      ##       ####    ########       ##
    ##  ##   ####       ##         ##        ####
    ####    ##  ##      ##        ##        ##  ##
    ##     ########     ##       ##        ########
    ##    ##      ##   ####    ########   ##      ##

pre要素は構造が要素ではなく、印刷規則によって表される整形済みテキストのブロックを表します。

つまり、通常他の要素では空白文字などがそのまま反映されない中で、pre要素に記述した空白やタブ、改行を含んだテキストはそのままの形でブラウザに表示されるということです。

この要素は主に独自の構造を持っている電子メールやアスキーアート、ソースコードの表示に用いられます。

MDN web docs
https://developer.mozilla.org/ja/docs/Web/HTML/Element/pre

今回作成したコード

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <pre>
        ####      ##       ####    ########       ##
        ##  ##   ####       ##         ##        ####
        ####    ##  ##      ##        ##        ##  ##
        ##     ########     ##       ##        ########
        ##    ##      ##   ####    ########   ##      ##
    </pre>
</body>
</html>

プログラミング学習 > 新・HTML/CSS入門編 > 新・HTML/CSS入門編5: グルーピングコンテンツ > 整形済みテキストの出力