Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

HTML5
入門編

トップページ
HTML5入門編 - まずはコピペでウェブサイトを作ってみよう

まずはコピペでウェブサイトを作ってみよう

みなさまどうもこんばんにちわ。

これまで概要説明や環境構築などかなり地味な記事が続いていたのですが今回の記事から本格的にHTMLファイルの作成方法を学んでいきたいと思います。

というわけでコピペでウェブサイトを作ってみましょう。

まずはパソコン上で作業をする場所を決める必要があります。これはどこでも良いのですが仮に『デスクトップ』に決めちゃいたいと思います。

デスクトップを右クリックして『新規作成 > フォルダ』という項目を選んで『test』というフォルダを作成して下さい。フォルダの名前は何でも大丈夫です。

さっそくフォルダを開いてみましょう。中身はまだ何もない状態です。

WindowsOSの方はそのフォルダの中で右クリックして『新規作成 > テキストドキュメント』と選んで下さい。テキストファイルが出来上がったと思います。そのファイル名を『index.html』に変更します。これは必ず『index.html』としてください。「拡張子変えていいの？」とwindowsちゃんに聞かれるかと思いますが、もちろん『はい』をクリックしましょう。

MacOSの方は右クリックからファイルの新規作成ができないので、まず『mi』を立ち上げて上のメニューバーから『ファイル > 新規作成 > HTML』を選んで新規テキストファイルを作成します。そしてそのまま『command + s』、もしくは上のメニューバーから『ファイル > 別名で保存』を選択し、先ほど作ったデスクトップのtestフォルダの中に『index.html』という名前で保存します。これでHTMLファイルが作成されます。

以下はWindowsOSの画面ですが、最終的にこういう感じになったかと思います。

これで準備は万全です。

拡張子が『.html』になったのでWebブラウザで開くように紐付けられたかと思います。試しに『index.html』をダブルクリックしてみてください。ブラウザが立ち上がればOKで、もし立ち上がらなかったら『index.html』をブラウザにドラッグ・アンド・ドロップすればブラウザで開くことができます。今はまだHTMLファイルに何も記述していないので真っ白なページが表示されていればOKです。

さて、みなさんはこれからHTMLの『コーディング』をしていくので『index.html』をブラウザだけでなくテキストエディタでも開く必要があります。『index.html』を右クリックして開くアプリケーションをWindowsOSの方は『秀丸エディタ』、MacOSの方は『mi』を選んで開きましょう。

プログラムを書いていくことを『コーディング』と呼びます。

無事にテキストエディタで開けましたでしょうか？開けましたら以下のソースを丸ごとコピペして保存してください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<img alt="サンプル画像です" src="https://wp-p.info/reps/html-beginner/img/sample.jpg">

</body>
</html>

保存できましたらこのHTMLファイルを開いているブラウザを更新してみてください。猫ちゃんの画像がでてきましたでしょうか。成功したらおめでとうございます、初めてのウェブサイトの完成です。

何もないところからいきなり画像が出てきて不思議に思った方もいらっしゃるかと思います。なぜ画像が表示されたのかは先の記事で解説していきますね。今回の『HTMLファイルを作成してテキストエディタで編集してブラウザで確認する』という一連の流れだけバッチリマスターしちゃってください。

(´-`).｡oO（猫ちゃんの画像は写真素材ぱくたそ様より拝借させて頂きました。)

続いての記事では『HTMLタグ』について色々解説をしていきたいと思います。引き続き頑張っていきましょう。ではー。

この記事は桜舞が執筆致しました。