※本記事は、Tech Academyの下記YouTube動画を参考に書かせて頂いております。
もくじ
前回のおさらい
前回は、略語の正式名称の表示のさせ方や、名前の特記、住所表現について学んできました。
今回は、コード・改行・プリフォーマットについて学んでいきましょう。
プログラムのコードを表示する
例えば、本記事のような技術系の記事において、コードを表示させたいような時などに便利なタグがあります。
codeタグ
codeタグは、文字通り、「コード」を示すタグとなります。主にプログラム用語やコンピューター用語を示したい時に使用します。
改行をする
前回の記事でもちょっとだけ解説しましたが、改行を示すタグがあります。
brタグ
brタグは、「Line Break（改行）」という言葉を省略したものですが、実際にタグに用いられているのは「Break」の頭文字2文字です。これを入力することで、同一の段落であっても改行をして表示させることが可能になります。
HTMLファイルに入力した通りに表示させる
改行をしたい場合にbrタグを用いるなど、HTMLファイルから実際にWebページに表示させる際には一定の制約があります。これらを無視し、HTMLに記述したまま表示させることができるタグがあります。
preタグ
preタグは「pre-format」の省略です。これについては、説明をするよりも、実際にどのように表示されるかを見た方が分かりやすいと思いますので、進んでいきましょう。
HTMLに記述してみよう
では、今回学んだ3つのタグを使って、実際にHTMLファイルに記述をしてみましょう。今回は、以下のようなHTMLを用意しました。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの練習</title>
</head>
<body>
<p>
If you try to execute the drive() function on the vehicle object, it goes on.
</p>
<p>
思った通りに改行されないと、非常に読みづらくなります。
特に長い文章や、ニュース・ブログの記事だと、なお読みづらくなるでしょう。
</p>
</body>
</html>codeタグを使用してみよう
では、まずはcodeタグを使用してみましょう。1つ目の段落にある英文のうち、「drive()」と「vehicle」にcodeタグを適用してみます。適用後の記述は下記の通りとなります。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの練習</title>
</head>
<body>
<p>
If you try to execute the <code>drive()</code> function on the <code>vehicle</code> object, it goes on.
</p>
<p>
思った通りに改行されないと、非常に読みづらくなります。
特に長い文章や、ニュース・ブログの記事だと、なお読みづらくなるでしょう。
</p>
</body>
</html>この状態でWebブラウザを確認すると、下記のような表示になることが確認できると思います。
brタグを使用してみよう
では次に、改行を表すbrタグを使用してみたいと思います。改行の結果がわかりやすいように、2段落目の文章をコピーして、3段落目を作りましょう。その上で、2段落目にbrタグを用いてみます。コードは下記の通りです。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの練習</title>
</head>
<body>
<p>
If you try to execute the <code>drive()</code> function on the <code>vehicle</code> object, it goes on.
</p>
<p>
思った通りに改行されないと、非常に読みづらくなります。<br>
特に長い文章や、ニュース・ブログの記事だと、なお読みづらくなるでしょう。
</p>
<p>
思った通りに改行されないと、非常に読みづらくなります。
特に長い文章や、ニュース・ブログの記事だと、なお読みづらくなるでしょう。
</p>
</body>
</html>では、これをWebブラウザで確認してみましょう。以下のようになると思います。
preタグを使用し、プリフォーマット表示をさせてみよう
最後に、3段落目にpreタグを用い、HTMLに書き込んだ通りの表示をさせてみましょう。コードは下記の通りとなります。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの練習</title>
</head>
<body>
<p>
If you try to execute the <code>drive()</code> function on the <code>vehicle</code> object, it goes on.
</p>
<p>
思った通りに改行されないと、非常に読みづらくなります。<br>
特に長い文章や、ニュース・ブログの記事だと、なお読みづらくなるでしょう。
</p>
<pre>
思った通りに改行されないと、非常に読みづらくなります。
特に長い文章や、ニュース・ブログの記事だと、なお読みづらくなるでしょう。
</pre>
</body>
</html>実際にどんな表示になるのか、Webブラウザで確認してみましょう。
このように、HTMLファイルの記述を意図的にそのままWebブラウザでも表示させたい場合は、preタグを使用するのが有効です。
おわりに
今回は、コード・改行・プリフォーマットについて学んできました。長いコードの記述などをWebブラウザに表示させたい場合は、codeタグやpreタグを用いると、他の文章と視覚的に差別化できるので効果的です。
