• 無料でHTMLが学習できる

ウェブサイト制作

テキスト・フォント

目次

見出しを設定したい

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>初めてのウェブサイト制作(練習)</title>
</head>
<body>
<h1>テキスト・フォント</h1>
<hr>
<h2>見出しを設定したい</h2>
<h1>見出し</h1>
<h2>見出し</h2>
<h3>見出し</h3>
<h4>見出し</h4>
<h5>見出し</h5>
<h6>見出し</h6>
</body>
</html>

このページのトップへ

段落を設定したい

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>初めてのウェブサイト制作(練習)</title>
</head>
<body>
<h1>テキスト・フォント</h1>
<hr>
<h2>段落を設定したい</h2>
<p>タグを使います
この<p>タグは一つの段落を指定したい時に使います。
<要素>にはブロックレベルとインラインの2種類があります。
<p>タグは要素区分がブロックレベルです。
</body>
</html>

このページのトップへ

改行させたい

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>初めてのウェブサイト制作(練習)</title>
</head>
<body>
<h1>テキスト・フォント</h1>
<hr>
<h2>改行させたい</h2>
文章を改行するには<br><br>を使います。
</body>
</html>

このページのトップへ

文章を引用したい

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>初めてのウェブサイト制作(練習)</title>
</head>
<body>
<h1>テキスト・フォント</h1>
<hr>
<h2>文章を引用したい</h2>
<p>Wikipediaより</p>
<p<blockquote site="https://ja.wikipedia.org/wiki/HyperText_Markup_Language">
<p>HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ、HTML(エイチティーエムエル))は、ハイパーテキストを記述するためのマークアップ言語の1つである。<br>
<p>World Wide Web (WWW)において、ウェブページ(1990年代後半頃からはコンテンツという語も利用されている。「中身」という意味の語であり、大層な意味は無い)を表現するために用いられる。</p>
</blockquote>
<p>CSSは
<q site="https://ja.wikipedia.org/wiki/CSS">Cascading Style Sheets - HTML、XMLの表示レイアウトなどの修飾を指定するのための仕様。
</q>
と書かれています。
<p>
</body>
</html>

このページのトップへ

強調したい

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>初めてのウェブサイト制作(練習)</title>
</head>
<body>
<h1>テキスト・フォント</h1>
<hr>
<h2>強調したい</h2>
<p>
強調したい時は<em>を使います。</p>
<p>
より強い強調したい時は<strong>を使います。
</body>
</html>

このページのトップへ

上付き文字にしたい・下付き文字にしたい

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>初めてのウェブサイト制作(練習)</title>
</head>
<body>
<h1>テキスト・フォント< </h1>
<hr>
<h2>上付き文字にしたい</h2>
a<sup>2</sup> + b<sup>2</sup>=√C<sup>2</sup>
a2+b2=√C2
<h2>下付き文字にしたい</h2>
水は H<sub>2</sub>O です。
水はH2O
</body>
</html>

このページのトップへ

記述した通りに表記したい・コードをしたい

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>初めてのウェブサイト制作(練習)</title>
</head>
<body>
<h1>テキスト・フォント</h1> 
<hr>
<h2>記述した通りに表記したい</h2>
<p> <pre>
html
head
</pre></p>
<h2>コードをしたい</h2>
<p><code>
<html>
<head>
</code></p>
<pre>code>
<html>
<head>
</code> </pre>
</body>
</html>

このページのトップへ

特殊な文字を使いたい

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>初めてのウェブサイト制作(練習)</title>
</head>
<body>
<h1>テキスト・フォント</h1>
<hr>
<h2>特殊な文字を使いたい</h2>
©
半角英字で『©』記述します。
¥
半角英字で『¥』記述します。
&
半角英字で『&』記述します。
≠
半角英字で『≠』記述します。
等々があります。
</body>
</html>

このページのトップへ

略語や頭文字を示したい

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>初めてのウェブサイト制作(練習)</title>
</head>
<body>
<h1>テキスト・フォント</h1>
<hr>
<h2>略語や頭文字を示したい</h2>
<p> <abbr title="Hyper Text Markup Langage">HTML
< </abbr>< </p>
</body>
</html>

このページのトップへ

内容の追加を示したい・内容の削除を示したい

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>初めてのウェブサイト制作(練習)</title>
</head>
<body>
<h1>テキスト・フォント</h1>
<hr>
<h2>内容の追加を示したい</h2>
<p><ins>みかん</ins></p>
<h2>内容の削除を示したい</h2>
<p><del>りんご</del></p>
</body>
</html>

このページのトップへ

太字のフォントを示したい・斜体のフォントを示したい

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>初めてのウェブサイト制作(練習)</title>
</head>
<body>
<h1>テキスト・フォント</h1>
<hr>
<h2>太字のフォントを示したい</h2>
<p><b>太字</b>のフォント</p>
<h2>斜体のフォントを示したい</h2>
<p><i>斜体</i>のフォント</p>
</body>
</html>

このページのトップへ

横罫線を指定したい

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>初めてのウェブサイト制作(練習)</title>
</head>
<body>
<h1>テキスト・フォント</h1>
<hr>
<h2>横罫線を指定したい</h2>
↓に罫線引きます。</p>
<hr>を使います。
</body>
</html>

このページのトップへ