作成日: 2021/08/08 更新日: 2023/03/25 サイトの紹介と使い方
初めに
「アメーバownd」に興味のない方は、この記事を読み飛ばしても構いません。
① パソコンでプログラムを作成するためには、プラットフォームが必要です。
プラットフォームとは土台のことです。
② 最も基本的な土台は、WindowsやMacなどのOSです。
OSの土台の下に土台を目的に応じて プラットフォーム として用意していきます。
③ この記事では「アメーバownd」をインストールします。
目的
① ホームページ（ブログ）の機能を利用してHTML・CSSを学びます。
② HTML・CSS は、 ホームページを作成するための最も基本的なWEB言語と呼ばれます。
③ この記事では、ブログの説明はしません。
用意するプラットフォーム
① 無料のホームページのプラットフォームはいくつかありますが、「アメーバ ownd」を選択しました。
② 理由は、
・インターネット上の評判や実績と筆者の経験から最も安全なサイトの１つだと判断したためです。
・AWSやGCPは安心・安全ですが、プラットフォームの用意に手間がかかることと、有料プランへと移行する可能性があるため、今回は候補から外しました。
③ AWSやGCPは 無料プランから有料プランへの移行の基準が、難しくてよくわかりませんでした。
アメーバ ownd のインストール
① Windows10であることを前提とします。
② インストールとは、あるソフトウエア（今回は アメーバ ownd ）をパソコン上で利用できるようにすることです。
インストール手順
ステップ１
① アメーバowndをクリックします。
ステップ２
① 赤枠内の「詳しく見る」をクリックします。
ステップ３
① 赤枠内の「サイトを作成」をクリックします。
ステップ４
① 赤枠の「Googleでログイン」をクリックします。
ステップ５
① 黒く塗りつぶされた部分に2-googleアカウントの作成で作成したGmailが表示されるのでクリックします。
ステップ６
① 赤枠の生年月日と性別を入力します。
② 緑枠の「利用規約に同意して会員登録する」をクリックします。
ステップ７
① 赤枠の中に希望する名前を入力します。
既に誰かがその名前を使っているとエラーになるので、その時は、違う名前にしてください。
② 緑枠の「このURLに決定」をクリックします。
ステップ８
① 赤枠の「ホームページを作成する」をクリックします。
ステップ９
① 赤線から下のデザインを１つ選んでクリックします。
デザインは後からでも変更できるので、適当に選んでください。
ステップ１０
① 赤枠の「このデザインで始める」をクリックしてください。
② これで完了です。
アメーバowndへログイン
ステップ１
① ここ（アメーバownd）をクリックします。
ステップ２
① 赤枠の「詳しくみる」をクリックしてください。
② 既にログインしていればステップが省略されることがあるので、下のステップを確認してください。。
ステップ３
① 赤枠の「サイトをお持ちの方」をクリックします。
ステップ４
① 赤枠の「Googleでログイン」をクリックします。
ステップ５
① 黒く塗りつぶされた部分に2-googleアカウントの作成で作成したGmailが表示されるのでクリックします。
ステップ６
① 画面の左側に下図が表示されればログイン完了です。
記事
① この記事の「アメーバownd のインストール」「インストール手順」「ステップ7」で入力したURLが、自分のサイトになります。
② このサイトが本だとすると、記事は本のページになります。
記事を作成する
ログインが完了したならば、プログラミングの準備をします。
ステップ１
① 赤枠の「記事を書く」をクリックします。
ステップ２
① 赤枠の「タイトル」をクリックします。
ステップ３
① 下図のように「タイトル」の左側に縦棒が点滅表示されます。
② ここに適当（好き）な文字を入力してください。
筆者は、[test1]と入力しました。
ステップ４
① 赤枠の「本文を入力」に 適当（好き）な文字を入力してください。
筆者は、[111]と入力しました。
ステップ５
① 赤枠の「今すぐ公開」をクリックします。
ステップ６
① 赤枠の「×」をクリックします。
ステップ７
① 赤枠の中にステップ２で入力したタイトルが表示されていれば完了です。
ステップ８
① ステップ１～７をもう一度行います。
② これによって記事（ページ）が増えます。
③ 記事は最低２つ作成してください。
④ 記事はいくつ作成しても問題ありません。
⑤ ここで作成した記事は全世界の人が閲覧できます（あまり気にする必要はありません）。
作成した記事を編集する（記事の内容を変更する）
ステップ１
① 赤枠①「ブログ管理」をクリックします。
② 赤枠②「記事一覧」をクリックします。
ステップ２
① 編集したい赤枠のタイトルをクリックします。
ステップ３
① 赤枠「HTML編集」をクリックします。
ステップ４
① 赤枠の中をクリックして編集できるようにします。
ステップ５
① 赤枠の中に「<p>abc</p>」と入力します。
② 漢字モードでないことを確認してください。
③ 赤枠「OK」をクリックします。
ステップ５－１
① 再編集したい時など、ステップ５の画面は、下図の赤枠をクリックすると表示されます。
ステップ６
① 赤枠①「更新」をクリックすると、ステップ５で入力した内容が保存されます。
② 赤枠②「×」 をクリックすると、 ステップ７の画面が表示されます。
③ 「更新」しないで、 「×」 をクリックすると、 ステップ５で入力した内容が保存されま せん。
ステップ７
① 赤枠①のタイトルをクリックすると、ステップ３の画面が表示されます。
② 赤枠②「記事を見る」 をクリックすると、 タイトルの内容が表示されます。
ステップ５で入力した内容が表示されるとOKです。
尚、この表示画面では、編集できません。
CSSの編集方法
ステップ１
① 赤枠①「カスタマイズ」をクリックします。
② 赤枠②「CSSカスタマイズ」をクリックします。
ステップ２
① 赤枠①に、下の内容を入力します。
漢字モードでないことを確認します。
p{
font-size:20px;
}② 赤枠②「保存」をクリックします。
メールアドレス：
