2025年

最もシンプルなHTML まずはテキストエディタを開いて次の文字を入力してください。コピペでも大丈夫です。 &lt;!DOCTYPE html&gt; &lt;html lang="ja"&gt; &lt;body&gt; ここに文章を書きます &lt;/body&gt; &lt;/html&gt; 打ち込んだら名前を付けて保存します。名前は index.html とします。この名前をつけると通常はトップページとして表示されます。indexは変更できます。 ファイルを保存したフォルダを開き「index.html」をダブルクリックしましょう。ブラウザが自動で開くと思います。 こんな感じに表示されましたか？&lt;body&gt;と&lt;/body&gt;の間に書いたものが表示されていることがわかります。 &lt;!DOCTYPE html&gt;や&lt;html lang="ja"&gt;の意味はここでは触れません。HTMLのおまじないだと思ってとりあえず書いておいてください（後ろの方で説明します） 見出し&lt;h1>と段落&lt;p> 文章には必ず見出しがあります。少し大きな文字になっていたり太文字になっていたりします。ではbody内を次のように書き換えてみましょう。 &lt;!DOCTYPE html&gt; &lt;html lang="ja"&gt; &lt;body&gt; &lt;h1&gt;これがHTMLだ！&lt;/h1&gt; &lt;p&gt;HTMLはHyperText Markup Languageの略でWEBサイトを制作するのに使われる言語です。&lt;/p&gt; &lt;/body&gt; &lt;/html&gt; ※書き換えたら保存するのを忘れないように！ このように表示されると思います。&lt;h1&gt;は見出しです。&lt;p&gt;は段落です。英語ではパラグラフというのでpが使われています。見出しは全部で6種類あります。 &lt;!DOCTYPE html&gt; &lt;html lang="ja"&gt; &lt;body&gt; &lt;h1&gt;これがHTMLだ！①&lt;/h1&gt; &lt;h2&gt;これがHTMLだ！②&lt;/h2&gt; &lt;h3&gt;これがHTMLだ！③&lt;/h3&gt; &lt;h4&gt;これがHTMLだ！④&lt;/h4&gt; &lt;h5&gt;これがHTMLだ！⑤&lt;/h5&gt; &lt;h6&gt;これがHTMLだ！⑥&lt;/h6&gt; 普通の文章はこの大きさ &lt;/body&gt; &lt;/html&gt; 実際に表示してみると 見出しの大きさや色、背景などのデザインはＣＳＳで変更するのでここでは省略します。 div要素&lt;div>とspan要素&lt;span> よく使う要素を２つ解説します。 div要素 div要素に何か特別な意味はありません。挙動はp要素に似ているのでどちらを使ってもほぼ同じですが段落として使うときはp要素を使いましょう。 使用例： &lt;!DOCTYPE html> &lt;html lang="ja"> &lt;body> &lt;div>汎用性の高い要素がdiv要素です。文字を四角い枠で囲みたいときはよく使います。&lt;/div> &lt;p>p要素は文章の段落として使います。&lt;/p> &lt;/body> &lt;/html> HTML表示 span要素 span要素も特別な意味はありません。これで文字を挟んでも何も変化はありません。ほんとに意味がありませんが文字に装飾をつけたい（色をつけたいなど）ときに使います。使い方はCSSで文字などにデザインするところで説明します。 以上。 まとめ まとめ HTMLは&lt;要素&gt;と&lt;/要素&gt;の間に文字を書いていく 要素には&lt;body&gt;,&lt;h1&gt;,&lt;p&gt;などいろいろある 見出しは6種類ある

2025年

HTML入門03 リストの作成

HTML入門02 テキストの表示と飾り

HTML入門01 基本的な書き方