こんにちは!
「ホームページ作ってみたいな〜、html, css始めよっかな〜。
まずは自分のパソコンに入ってるソフトで始められないのかな??」

今日は、PCにもとから入っているソフトを使って、html, css始める方法を書いていきます!
以前に、オススメのテキストエディタを紹介しましたね。
ですが、
「まずは試しにhtml, css書いてみたい。
わざわざダウンロードしなくても、パソコンにもともと入ってるソフトでやってみたいなぁ。」
な方もいらっしゃるようです!
ということで、
パソコンにもともと入っているであろうソフトでコーディングを始める方法
をご紹介します♪
Windows, Macの2パターン紹介していきますね。
(自作PCの方や、Linuxの方はごめんなさい。)
htmlの例文
まずは、ソフトを立ち上げる前に、htmlの例文を用意しておきましょう。
w3schools.comのhtml例文を使用させていただこうと思います。
https://www.w3schools.com/html/default.asp
上記のURLに掲載の例文を使用していきます。
この例文をコピーしておきましょう。
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Windowsでは「メモ帳」を使おう
Windowsにもともと入っているソフトの中から、htmlやcssを扱う場合は、「メモ帳」が使えます!

メモ帳は「Windowsアクセサリ」の中に入っています。
(Windowsのバージョンにより、場所や画面違うかもしれません。)
早速「メモ帳」を開いていきましょう。
メモ帳を開いたら、先ほどの例文を貼り付けます。

貼り付けたら、cstrl + S で保存します。

デスクトップに「index.html」と名前をつけて保存します。
(デスクトップ以外の場所でもOKです。)
このとき、ファイルの種類は「すべてのファイル」、文字コードは「UTF-8」にしてください。


デスクトップに「index.html」ができていますので、ダブルクリックして開いてみましょう!
作成したhtmlファイルが、ブラウザで表示されます。

これで完成です!
メモ帳でhtmlファイルを作ることができました!
index.htmlを右クリックし、メモ帳でひらけば編集することができます。
Macでは「テキストエディット」を使おう

Macの場合は、テキストエディットが使用できます!
Launchpadからテキストエディットを開いていきましょう。
テキストエディットを開くと、以下の画面になりますので、デスクトップを選び、「新規書類」をクリックします。

すると、エディターが開きます。
例文を入れる前に、メニューの「フォーマット」から「標準テキストにする」を選びます。
(ブラウザでhtmlファイルを表示する際にこの設定が必要となります。)


設定したら、エディタに例文を貼り付けましょう。
あとは保存するだけです。
index.html
という名称で保存します。

以下の確認画面が出るかと思いますが、「.htmlを使用」を選んで進んでください。

デスクトップに「index.html」が出来上がっていますので、ダブルクリックして開きましょう。

ブラウザでhtmlファイルが表示されます。

これにて完了!
テキストエディットでhtmlファイルを作成し、ブラウザで確認もできましたね。
編集する際は、index.htmlを右クリックし、テキストエディットで開けば編集できます。
最後に
メモ帳、もしくはテキストエディットでhtmlファイルを作ることはできましたか?
ブラウザで表示できているかどうか、まで確認してみてくださいね。
今回はコーディングに特化したソフトではなく、多くのパソコンに入っているソフトを利用していきましたね。
まずどんなもんかやってみたいな〜
って方は、ソフトのダウンロードの手間がないので、試しにやってみてください^^
また、Macのテキストエディットは、途中の設定を抜かしてしまうと、ブラウザで実際のhtml表示を確認できません。
コードがそのまま、つらつらとブラウザでも表示されてしまいます。
手順を抜かさずに、このブログの通りやってみてください。
コーディングってこんな感じか!
と体験できたら、コーディングに特化したソフトの使用をお勧めします。
タグの打ち間違いや、記入漏れが軽減されます。
冒頭でも紹介した、オススメのテキストエディタ、も合わせてご覧ください^^
ではでは〜♪