ＩＣＴメディア編集Ⅱ 2025年11月21日
Ｗｅｂページ作成ソフト（ワープロソフト：MS-Word）による作成：
・ これまで，ＨＴＭＬのタグ（命令）を用いて，Ｗｅｂページを作成してきましたが，タグをすべて覚えることは，大変です．そこで，ワープロソフトのように，文字や画像をページに書き込み，当てはめれば，自動的にＨＴＭＬのタグに変換してくれる便利なＷｅｂページ作成用ソフトがあります．ここからは，それらを用いてＷｅｂページを作成してみましょう．
・Ｗｅｂページ作成用ソフトには，様々なものがありますが，この講義では，通常はワープロソフトとして使用するMS-Wordと専用の作成ソフトであるAdobe Dreamweaverの使い方について簡単に説明します．
作成練習（演習）
まずは，先ほど作成したものと似た以下のようなＷｅｂページを，通常はワープロソフトとして使用している“MS-Word”を用いて作成してみましょう．
まずは，MS-Wordを立ち上げてください．通常のウインドウは，白紙が立ち上がっている状態になります．
１． まずは，Webページを作成するためのレイアウトに変えましょう．以下のように，メニューバーの「表示」から「Webレイアウト」を選択します．説明画面はMS-Word （Office 365）のものです．メニューバーの構成などが、バージョン（新旧）によって異なる場合がありますので、補足しますので、ご注意ください．
２． 次に，ページに色をつけましょう．以下のように，メニューバーの「「デザイン」から「ページの色」を選択し，色を選びます．ここでは，黄色を選んでいます．
３． 本文を入力していきましょう．以下のように，メニューバーの「ホーム」から「フォント」を「MS Pゴシック」，「24」，「太字」と設定してタイトル部分を入力します．ここでは，これはＷｅｂページ作成を練習するページ（３）ですといれます．
４． 区切りの線として，水平線をいれましょう．以下のように，まず，改行して，メニューバーの「ホーム」から「段落」の中の「罫線のアイコンの右の▼」をクリックし、「水平線」を選択します。
５． 入力した水平線の太さを変えてみましょう．以下のように，入力した水平線をダブルクリックし，「水平線の書式」のウインドウを開いて，高さを変えます．ここでは，７．５ｐｔといれ、さらに、純色を使うに☑とをいれます．
６． 続いて，本文を入力していきましょう．以下のように，メニューバーの「ホーム」から「フォント」を部分で文字の大きさ，色や字体を変えて入力します．ここでは，14ｐｔの赤色で，「これがFONT=4の大きさで，赤色の文字の表示」，12ｐｔの青色の斜体文字で「これがFONT=３の大きさで，青色の斜体文字の表示」，12ｐｔの黒色の文字で，「画像を以下に貼り付けます」といれます．
７． 次に改行をいれて，ディスクトップ上の画像ファイルを入力しましょう．以下のように，メニューバーの「挿入」から「画像」、さらに「このデバイスから」を選択し，ディスクトップ上（画像のあるフォルダ）のファイル“1.jpg”を選択して挿入します．さらに，図の大きさを調整します．
８． 改行をいれ，水平線を入れましょう．先ほどと同じく，以下のように，メニューバーの「ホーム」から「段落」の中の「水平線」を選択し，水平線を入力します．また，ここでは，高さを4ptと色を緑色としています．
９． 水平線のあとに，文字入力をし，リンク部分の文字も入力しましょう．以下のように，ここでは，「明治大学へのリンク付けも以下のように設定できます．」といれ，改行して，「明治大学のホームページへ」といれます．
１０． リンクを設定しましょう．以下のように，「明治大学のホームページへ」の文字を選択し，マウスの右ボタンを押して，プルダウンのメニューを表示し，「リンク」を選択します．リンクの挿入のウインドウで，アドレスの入力部に「https://www.meiji.ac.jp/」と入力して，OKと押します．一度、リンク設定をしたものは、プルダウンのメニューが変わりますので、「ハイパーリンクの編集」を選択して、編集します。
リンクを設定したものを選択して、再編集する場合
１１． 最後に，ファイルをHTML形式のファイルとして，タイトルをつけて保存しましょう．以下のように，クイックアクセスツールバーの「名前を付けて保存」からファイル名を「test4.html」として，また，ファイルの種類の選択を「Webページ（*.htm;*.html）」を選択します．さらに「タイトルを変更」を選択して，ブラウザのウインドウの左上に表示されるタイトル部分の文字を入力します．ここでは，「Webページの作成練習（３）」といれます．最後に「保存」ボタンで保存します．
１２． さらに，別のファイル名で，ファイルの種類を変えて保存しましょう．以下のように，先ほどと同じくクイックアクセスツールバーの「名前を付けて保存」からファイル名を「test5.html」として，また，ファイルの種類の選択を「Webページ（フィルタ後）（*.htm;*.html）」を選択します．保存ボタンで保存します．警告のウインドウが出ますが，「はい」として進みます．
１３． 「test4.html」と「test5.html」のファイルがディスクトップ上にできましたら，２つともブラウザで開いてみましょう．また，プロパティをみて，2つのファイルのサイズ（記憶容量）を比べてみましょう．メモ帳で中身を確認しましょう。中身の確認は、Microsoft Edgeでは、右上の「・・・」の部分の「設定など」を開き、「その他のツール（L）」を開き、「開発者ツール」を開き、ソースを見ることができます。
１４． 「test4.html」と「test5.html」とを比較すると，「test4.html」のファイルが大きく，また，余分な情報が付加されていることがわかると思います．
このように，Webページの作成用のソフトを使った場合は，HTMLの書式に自動変換する時に，ソフトウエアが余分な情報を付加して，ファイルが大きくなる場合がありますので，注意してください．