このブログの内容
こんなWEBサイトが作れるよ
私が作ってみたWEBサイトはこちら
↓
どうでしょうか？
HTMLとCSSで作りました。
デザインについてはど素人なので、ご容赦ください。。。
HTMLとCSSの方は大丈夫なはずです！←
一番簡単な構造のWEBサイトです。
トップページから作っていきましょう。
用意するものは？
事前に用意するものは、2つです。
用意するもの
- ブラウザ（GoogleChrome）
- エディター（メモ帳）
ブラウザというのは、WEBサイトを表示するツールです。
今このブログを表示しているものです。
GoogleChromeと書いているのは、私がWindowsで使っているブラウザがGoogleChromeなためです。
こんなアイコンです。
↓
このブログではWindowsでGoogleChromeを使って説明をします。
他のOSやブラウザでも大体は同じだとは思いますが、細かいところが違うかもしれません。
エディターというのは、HTMLを書くためのツールです。
Windowsにはメモ帳があります。
Win11だとこんなアイコンです。（Win10じゃなくすみません）
↓
見つからない方は、デスクトップ画面左下の検索バーや、Windowsキー+Sで検索ウィンドウが開きますので、「メモ帳」と入力すると出てきます。
開くとこんな画面です。
↓
ここにHTMLを書いていきますよ！
いや、私は最初から便利なエディターを使いたい！という方は別記事で。
分かります、私も形から入るタイプなので←
↓
WEBサイト作成～おすすめエディターはこれ！
そういうのはもうちょっと慣れてからで…という方はこのままメモ帳で進めましょう！
HTMLを書いてみよう
以下はメモ帳を使っています。
ブラウザでの実行結果はこちら。
↓
これを書いてみましょう！
<>で囲われたところをタグと言いますが、文章を説明のみにし、タグを分かりやすくしたのがこちらです。
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>タイトルを書く。</title> </head> <body> 本文を書く。 </body> </html>
<head>の左側の空白はTabキーでインデント（字下げ）を付けたものです。
タグの開始と終了などでわかりやすくしています。
これはなくても良いものですが、見やすくなります。
Tabキーではなく半角スペースを使うこともありますが、何個分でインデントを付けるかルールは決めておきましょう。
大体半角スペース2個か4個にすることが多いです。
コピペできるので、自分のメモ帳に貼り付けてみてください。
貼り付けたら「ファイル」「保存」。
保存場所はお好きなところに。
自分が分かる場所にしてくださいね。
ファイル名は
index.htmlにします。
「エンコード」のところは
「UTF-8」にしておいてください。
上の画像では、OneDriveのドキュメントフォルダにWEBサイト作成というフォルダを作ってそこに保存してみています。
保存した場所を開いてくださいね。
保存したフォルダをみると上の画像のようにファイルができます。
私のパソコンでは既定のブラウザがGoogleChromeなので、GoogleChromeのアイコンになっています。
既定のブラウザがMicrosoftEdgeの場合は、MicrosoftEdgeのアイコン、SafariやFirefoxの場合も同様です。
名前がちゃんとindex.htmlになっていますね。
フォルダ名やファイル名は半角英数字です
index.htmlindex.ｈｔｍｌhtmlが全角
ｉｎｄｅｘ.htmlindexが全角
全角で入力した際はF10キーで変換！
HTMLは余計なエラーを防ぐため、半角小文字で統一！
全角スペースの使用は厳禁
保存したら一度メモ帳を閉じて今作ったindex.htmlをダブルクリックで開きます。
ファイル名が「.html」になっていると、ダブルクリックで既定のブラウザで開きます。
こんな風に開くはず！
↓
別のブラウザで開きたい場合はindex.htmlファイルを右クリックをして「プログラムから開く」で開きたいブラウザを選択してください。
メモ帳で開きたい場合も右クリックをして「プログラムから開く」から「メモ帳」を選択すればメモ帳で開けます。
このようにメモ帳で書いて、ブラウザで実行確認しながら作成していきます。
「タイトルを書く」の部分や「本文を書く」の部分を変更してみましょう。
改行したいときは<br>というタグを書きます。
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Yu_chi’s Portfolio Website</title> </head> <body> Yu_chi<br> プログラミングを中心に、<br> GoogleBloggerにて発信。<br> <br> 文系VBプログラマー。<br> 育休中。 </body> </html>
思った通りにブラウザに表示できると嬉しいですよね！
タグの説明
簡単にタグの説明をしておきます。
最初から全部理解しなくても、書いているうちにだんだん分かってくるので大丈夫ですよ！
<!doctype html>
ドクタイプ宣言。
このファイルがHTMLのバージョン5で書かれていますという宣言文です。
バージョン5以外はきちんと数字を指定する必要があります。
<html lang="ja"> </html>
HTMLを書く場所を示しています。
この中にHTMLを書きます。
lang="ja"は日本語の文書を表します。
<head> </head>
ヘッド。html内に書きます。
ページのタイトルや説明文、CSSファイルのリンクなど、ページの情報を書くところです。
<meta charset="UTF-8">
メタ要素のキャラセット属性。head内に書きます。
文字コードをUTF-8に指定しています。
指定しないと文字化けすることがあります。
<title> </title>
タイトル。head内に書きます。
ページのタイトルです。
ブラウザーのタブや、ブックマークに表示されたり、検索エンジンからの検索時に表示されたりします。
<body> </body>
ボディ。html内に書きます。
本体部分を書くところです。
まとめ
HTMLの必要最低限を書いてみました。
次回はもう少し骨組みを足して、WEBサイトらしくしていきましょう！
0 件のコメント :
コメントを投稿