★ Let's become a Web Designer! 【プロフィール】 【商品一覧】 【特典画像】 【よくある質問】 【あなたのお手伝い】
 

preタグとは

 
ホーム はじめに 講座の効果 作成実績 受講者の声 パーツ集 ホームページ基礎講座 スマホサイト講座 よく使う用語集
 
 
  ホーム > ホームぺージ作成でよく使うHTMLタグ一覧
 

preタグとは?意味と使い方を初心者にわかりやすく解説!

「preタグってなんだろう」や「preタグはどういうときに使うの」と悩んでいませんか?

ここでは、preタグの意味と使い方を、初心者向けに分かりやすくお伝えします。


preタグとは?意味と使い方を初心者にわかりやすく解説!

preタグは、入力した文字をそのまま表示させるタグです。

便利なタグですが、デメリットもあるので、ここでpreタグの意味と使い方をしっかりと確認していきましょう。



【目次】このページを読んで分かること
 
  • preタグの基本知識
  • preタグを使うとき
  • preタグとCSSの組み合わせ
  • preタグと他のタグとの違い
  • 【まとめ】preタグとは

 

preタグの基本知識


まずは、preタグの基本知識からお伝えします。


preタグとは

preタグは、入力した文字をそのまま表示させるタグです。

文章を preタグで囲むことで、入力した文章をそのままホームページ上に表示させることができます。


preタグの使い方

preタグを使うことで、次のように、文章をそのままホームページ上に表示させることができます。


<pre> タグの記述例

 
<pre>
ホームページに
掲載する文章
</pre>

ホームページ上の表示

 
ホームページに
掲載する文章

普通の文章を書くときは、スペースや改行は無視されることが多いですが、preタグを使うと、そのまま表示されます。

そのため、コードや詩など、整った形で見せたいテキストを表示するときに便利です。



 

preタグを使うとき


ここでは、preタグを使うときについて、お伝えします。


コードを表示したいとき

プログラムのコードをきれいに見せたいときに、preタグが役立ちます。
たとえば、下記のように使います。


<pre>
function sayHello() {
  alert("こんにちは!");
}
</pre>

これを使うと、コードのスペースや改行がそのまま表示されて、読みやすくなります。



詩や歌詞を表示したいとき

詩や歌詞など、特定の形で表示したいテキストにも、preタグが便利です。
たとえば、下記のように使います。


<pre>
あの青い空の下で
  私たちは笑った
    楽しい時間だった
</pre>

このように書くと、詩や歌詞の形をそのまま見せることができます。



テーブルを表示したいとき

簡単な表を作るときにも、preタグが使えます。
たとえば、下記のように使います。


<pre>
名前       年齢
たろう    10
はなこ    12
じろう    11
</pre>

このように書くと、スペースや改行がそのまま表示されて、表の形がきれいに見えます。



 

preタグとCSSの組み合わせ


preタグにCSS(スタイルシート)を使うことで、もっときれいにテキストを見せることができます。

ここでは、preタグとCSSの組み合わせについて、お伝えします。


背景色を変える

たとえば、preタグの背景色を変えたいとき、下記のように書きます。


<pre style="background-color: lightblue;">
動画で覚える無料ホームぺージ制作講座
</pre>

このように書くと、preタグの中のテキストの背景が水色(lightblue)になります。



テキストの色を変える

テキストの色を変えることもできます。
たとえば、下記のように書きます。


<pre style="color: green;">
動画で覚える無料ホームぺージ制作講座
</pre>

これで、preタグの中のテキストが緑色(green)になります。



枠をつける

preタグの周りに枠をつけることもできます。
たとえば、下記のように書きます。


<pre style="border: 1px solid black;">
動画で覚える無料ホームぺージ制作講座
</pre>

これで、preタグの周りに黒い枠がつきます。



いろいろなスタイルを組み合わせる

CSSを使って、いろいろなスタイルを組み合わせることもできます。
たとえば、背景色、テキストの色、枠を一緒に変えたいときは、下記のように書きます。


<pre style="background-color: lightyellow; color: blue; border: 2px dashed red;">
動画で覚える無料ホームぺージ制作講座
</pre>

このように書くと、背景が黄色、テキストが青色、枠が赤い点線になります。

CSSを使うことで、preタグをもっときれいに、見やすくすることができます。



 

preタグと他のタグとの違い


ここでは、preタグと他のタグとの違いについて、お伝えします。


preタグとcodeタグの違い

preタグは、テキストのスペースや改行を、そのまま見せるために使います。

一方、codeタグは、コードをインラインで表示するために使います。
なお、インラインとは、普通の文章の中に組み込むことです。

改行やスペースは、そのままにはなりません。


<p>
この文の中に<code>alert("こんにちは!");</code>というコードがあります。
</p>


preタグとdivタグの違い

preタグは、スペースや改行をそのまま見せるためのタグです。

一方、divタグは、ブロック要素といって、セクションを作るために使います。
テキストの形をそのまま見せるためではありません。


<div>
  <p>これはdivタグの中にあるテキストです。</p>
</div>


preタグの特徴

preタグは、特にスペースや改行を大切にするテキストに向いています。
コードや詩、特定の形を保ちたいテキストに便利です。


<pre>
  これがpreタグです。
  形がそのまま
  保たれます。
</pre>

他のタグも便利ですが、使い方が違います。

それぞれの特徴を理解して、うまく使い分けていきましょう。



 

【まとめ】preタグとは

preタグとは?意味と使い方を初心者にわかりやすく解説!の内容は、いかがでしたでしょうか?



preタグは、入力した文字をそのまま表示させるタグです。
たとえば、スペースや改行が そのまま表示されます。

preタグは、プログラムのコードをきれいに見せたいときに役立ちます。

ただ、preタグを使うと、テキストはそのままの形で表示されるため、折り返しがされません。 そのため、長いテキストがある場合、画面が横に広がってしまいます。

これが preタグのデメリットになるので、最低限必要なときにだけ、preタグは使うようにしましょうね。






【おすすめ外部コンテンツ】
 
会員制サイドビジネス講座
 
私がお金を稼ぐ理由 ~ お金を持ったときのメリット ~
 
インターネットで月20万円の収入を継続して稼ぐ方法
 
初心者用ホームページテンプレート
 

インターネットビジネスのすごさを認識してください
 
無料ホームページ制作講座の受講者の声
 
動画で覚える無料FX講座
 
ホームページが作れる能力は、最高の能力
 



当サイトで使用しているサンプルサイトを無料でダウンロード!

当サイトで使用しているサンプルサイトのデータを、無料でダウンロードできます。
サンプルサイトがあれば、さらにホームページの作り方が分かりやすくなりますよ。

⇒ 当サイトで使用しているサンプルサイトの無料ダウンロードはこちら



【特典画像100枚】オフィスで働いている女性が人差し指を立てている画像

高品質で、ホームページでとても使いやすい画像100枚を「特典」としてお渡ししています。 人物の画像素材は少ないため、とても貴重な画像素材です。

⇒ オフィスで働いている女性が笑顔で人差し指を立てている画像について



AIやChatGPTを使ってインターネットビジネスを行う講座

これからはAIの時代になります。 私も、AIを使って文章や画像やホームページを作っています。 私が実際に行っているやり方を、分かりやすく解説した講座が、下記の講座です。

⇒ 「AI」や「ChatGPT」を活用してビジネスを行う講座はこちら



 
 
今スタートできるサンプル
サイトを無料ダウンロード
 
サンプルサイトの無料ダウンロード
 
サイドビジネス講座
 
会員制サイドビジネス講座
 
初心者がホームページを自分で作れる能力を身につけて、 そのホームページをビジネスに活用する方法をお伝えする、会員制のサイドビジネス講座です。

この講座は、初心者がインターネットで収入を得られるようになることを目的として、運営しています。
 
 
HPテンプレート
 
自分で更新できる最短ホームページテンプレート
 
初心者が、簡単にホームページを作るための「ホームページテンプレート」です。

テンプレートと、たくさんのパーツ集をコピーして貼り付けるだけで、ホームページが完成する仕組みになっています。

さらに、テンプレートの使い方はすべて動画で解説しています。
 
基礎講座と用語集
 無料ホームページ作り方 ホームページ基礎講座
 無料ホームページ作り方 スマホサイト作成講座
 無料ホームページ作り方 HPでよく使う用語集
 無料ホームページ作り方 HTMLタグの書き方
 無料ホームページ作り方 スタイルシートの書き方
 
ホームページ作成ソフト
 
レンタルサーバ
 
ワードプレス
 
ChatGPTの使い方
 
インターネット副業
 
サイドビジネス・副業の始め方
 
初心者が、インターネットを使ったサイドビジネスで、自宅にいながら収入を得る方法を、すべて動画でお伝えするサイトです。

また、仕事ができるようになるノウハウや、「最高の成長法」などもお伝えしています。
 
 
リンク
 
会社概要
 
特定商取引に基づく表記
 
個人情報保護ポリシー
 
お問い合わせ先
 
 
NPO法人の推薦状
 
NPO法人の推薦状

 
当サイトは、NPO法人「起業とキャリア支援センター」様からの推薦を受けて、運営しています。
 
トップページプロフィール特定商取引法取り扱い商品よくある質問あなたのお手伝いお問い合わせ
 
 
Copyright © 動画で覚える無料ホームページ制作講座 All rights reserved.
 
by おすすめ副業ランキングサイト
^