文字を表示してみよう
目次
文字を表示させるには？
ホームページ上に文字を表示させるには、HTMLという言語の文法に沿って記述する必要があります。HTMLでは文字だけでなく画像や映像も表示できます。
HTMLでは、タグというもので、文章構造を表現します。ここは見出し、ここは段落、ここは注釈、ここは箇条書き・・・といった具合に、文書構造ごとにタグで表現します。
HTMLには種類がありますが、このサイトではHTML5という種類のHTMLを取り扱います。
HTML5の雛形をコピペしよう
HTML5には、概ねどのページでも使い回す、基本の記述があります。下記がその基本の記述です。コピーして、テキストエディタにペーストしてみましょう。
テキストエディタは初期設定が必要な場合があります。初期設定や開き方は、テキストエディタを開こうをご覧ください。
ファイルを保存しよう
Windowsでは、ソフト「メモ帳」を開いた状態で「Ctrl」キーを押しながら「S」キーを押してください。
Macでは、ソフト「テキストエディット」を開いた状態で「command」キーを押しながら「S」キーを押してください。
保存先はわかりやすい様に、デスクトップにしてみましょう。
保存する時のファイル名はわかりやすい様に、test.htmlにしてみましょう。
ページを閲覧しよう Windows編
筆者の作業環境は、Windows 10 Pro バージョン20H2です。バージョンやカスタマイズによって、作業手順が変わる場合がございます。
-
▼１：パソコン画面下端のメニューの中から下記フォルダマークのアイコンを探し出し、選択します。
-
▼２：出てきたウィンドウの左端メニューの中から「デスクトップ」を選択し「test.html」をワンクリックします。(「test」という表記になっている場合もあります。)「test.html」の上にカーソルを持っていき、右クリックします。「プログラムから開く」を選択し「Microsoft Edge」をクリック。
-
▼３：「これはテストページです。」と書かれたホームページが立ち上がります。ホームページといっても、誰もが見られる環境にアップロードをしていない状態なので、お使いの端末上でのみ閲覧できます。公開前の下書きとしてご利用ください。
ページを閲覧しよう Mac編
筆者の作業環境は、macOS Big Sur バージョン11.6です。バージョンやカスタマイズによって、作業手順が変わる場合がございます。
-
▼１：マウスカーソルをパソコン画面の下端に持っていきます。
-
▼２：インストール済みのソフトの一覧が出てくる(マウスカーソルをした端に持っていかなくても、既にソフト一覧が出ている場合もございます。)
-
▼３：出てきたソフト一覧から、一番左端の青い顔のマーク「Finder」をクリックします。
-
▼４：ウィンドウが立ち上がったら、左端のメニューから「デスクトップ」をクリックし、「test.html」を選択した状態で右クリックします。出てきたメニューの中から「このアプリケーションで開く」を選択し、「Safari.app」を選びます。
-
▼５：「これはテストページです。」と書かれたホームページが立ち上がります。ホームページといっても、誰もが見られる環境にアップロードをしていない状態なので、お使いの端末上でのみ閲覧できます。公開前の下書きとしてご利用ください。
好きな言葉を表示させよう
テキストエディタの画面に戻ったら、「これはテストページです。」という文字を消して、そこに好きな文字を差し替えて入力してみましょう。筆者は「失敗は成功のもと」と入力しました。
文字を入力し終えたらHTMLファイルを上書き保存します。前々章ファイルを保存しようと同じやり方で、上書き保存ができます。
ブラウザ(WindowsならEdge、MacならSafari)に戻り、画面上部にある「くるんと丸まった矢印」のボタンを押して画面を更新します。先ほど入力した文字が出て来れば成功です。
