ソースコードエディタの機能を使う

ソースコードエディタの機能を使うには, ファイル名の拡張子が重要です. サクラエディタ, mi, CotEditor では, ファイル拡張子に応じた機能が自動的に動作します.

OS に標準で導入されている, メモ帳や, テキストエディットでは残念ながらそのような機能は実装されていません.

サクラエディタ(Windows)の場合:
1. ファイルメニューから「新規作成」を選ぶ.
2. 何も入力していませんが, ファイルメニューから「名前をつけて保存」を選ぶ.
3. ファイル名は, index.html, 保存場所はデスクトップにする.
4. 保存ボタンを押す.
mi(ミミカキエディット, Mac)の場合.
1. ファイルメニューから「新規 → HTML5」を選ぶ.
2. 次ページの内容を入力後に, index.html でデスクトップに保存
CotEditor
1. フォーマットメニュー → シンタックススタイル → HTML
2. 次ページの内容を入力後に, index.html でデスクトップに保存

上のどのエディタでも, ファイル拡張子が html なら, 自動的に HTML モードになりますので, 空のファイルをファイル名指定して保存すれば大丈夫です.

今のままでは, 何も変化が無いように見えますが, 次のページの内容を入力すると, ソースコードエディタの機能が見えます. ここで入力するのは, HTML ソースです. タグと呼ばれる HTML のキーワードが, 着色されて表示されることに注意して下さい.

エディタによっては, 自動的に字下げ(インデント, indent)が起こりますが, そのまま, 字下げをしても, 字下げ部分を消去しても大丈夫です.

入力の際には「XXX」の部分は自分の名前やニックネームにし, プロフィールの部分には自分の事を書いて下さい. また, 1行が長くなりすぎないように, 改行を適宜入力して下さい.

次のページの内容を全て入力して, index.htmlというファイル名でデスクトップに保存して下さい.

<!DOCTYPE html>
<html lang="ja">

<!-- Header -->
<head>
<!-- 文字コード指定 -->
<meta charset="UTF-8" />
<!-- スタイルシートの指定 -->
<link rel="stylesheet" type="text/css" href="index.css" />
<!-- ブラウザのタイトルバーに表示させる文字 -->
<title> XXX のページ </title>
</head>

<!-- body 以下が本文 -->
<body>
<!--見出し-->
<h1> ようこそ XXX のページへ </h1>

<hr>
<!--あいさつ文-->
<p>
講義「情報科学演習」で作成した Web ページです。
</p>

<p>
ここには、簡単な自己紹介、基礎ゼミの同級生の紹介、
時間割、HTMLの書き方、その他を置きます。
</p>

<hr>

<h2>
プロフィール
</h2>
<ul>
<li> 星座：猫座 </li>
<li> 血液型：X 型 </li>
<li> 出身地：沖縄県 </li>
<li> 趣味：読書 </li>
<li> 特技 : 新聞紙を10回折る </li>
</ul>

</body>
</html>

2024-05-11