パソコンに入ってるソフトで、html始めたい

  • このエントリーをはてなブックマークに追加
  • LINEで送る

こんにちは!

「ホームページ作ってみたいな〜、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表示を確認できません。

コードがそのまま、つらつらとブラウザでも表示されてしまいます。

手順を抜かさずに、このブログの通りやってみてください。

コーディングってこんな感じか!

と体験できたら、コーディングに特化したソフトの使用をお勧めします。

タグの打ち間違いや、記入漏れが軽減されます。

冒頭でも紹介した、オススメのテキストエディタ、も合わせてご覧ください^^

ではでは〜♪

  • このエントリーをはてなブックマークに追加
  • LINEで送る

LINEで無料レッスン配信中!


  • 売り手市場じゃなかったの?案件獲得に苦労するなんて・・・
  • なかなか単価が上がらない。どうすれば・・・
  • グラフィックデザインだけじゃ厳しい。じゃ、Webデザイン?

な方は今すぐご覧ください!!


今すぐチェック!

SNSでもご購読できます。

コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください