Ads by Google
新しい記事を書く事で広告が消せます。
高校初日
ホームページ作成の記事は一旦お休みします。
今日は、入学式後本格的に高校生活がスタートした記念の日です。
明るいクラスと、静かなクラスとで若干偏りがあったのですが、まあ様子を見て…
今日は希望の日でもあり、試練の始まりでもあります。
気合を入れていかないと！
のはずだったんですけど、
悲しい...(泣
周りは野球好き多し→話し合わないorz
私服→先輩と同級生の区別がつかない...
結局、敬語が無難だということだ...
いや、みんなタメ...
どうすれば！！
「慣れ」
それが全てを可能にするでしょう。
辛抱してみます。。。
今日は、入学式後本格的に高校生活がスタートした記念の日です。
明るいクラスと、静かなクラスとで若干偏りがあったのですが、まあ様子を見て…
今日は希望の日でもあり、試練の始まりでもあります。
気合を入れていかないと！
のはずだったんですけど、
悲しい...(泣
周りは野球好き多し→話し合わないorz
私服→先輩と同級生の区別がつかない...
結局、敬語が無難だということだ...
いや、みんなタメ...
どうすれば！！
「慣れ」
それが全てを可能にするでしょう。
辛抱してみます。。。
Ｍｙホームページを作るべし＃４
続きです♪何のことか分からないという方は、第一回から見てください^^
第一回 第二回 第三回
6. 「head」とか「body」って何？？？
ヘッドとかボディって....別に頭や体のことではありませんよ（笑）
でも、体を想像すると分かりやすいかも…
最初の方に、つまり頭にheadがきていて、次に体のbody…
これは、htmlの大事な構造です！
どんなホームページも、これと同じ形をしていますから、絶対に覚えましょう！
ホームページ作り、HTMLの基本は、「はさむ」ことです。まず慣れることが大事です。
まず緑色の部分に注目してください。
開始タグの<html>と、スラッシュのついた終了タグの</html>がありますね。
<html>は、「htmlを使ってホームページを作ります！」という宣言のようなものです。
ですから、htmlを使って作ったホームページは絶対に、<html>で始まって</html>で終わります。
次に赤色の部分に注目してください。
<html>の中で、<head>と</head>がまた何かをはさんでいます。
<head>は、ホームページの情報をはさむところです。
情報というのは、誰がいつ作ったとか、タイトルとか、検索キーワードとか…いろいろです。
必要だと思う情報だけを入れておけばいいので、全部は必要ありません。
例えば、<title>と</title>の間には、ホームページのタイトルを入れます。
タイトルはGoogleやYahooで検索するときに使われるので、とても大事です！
最後に青色の部分に注目してください。
この<body>が一番大事です！！
<body>と</body>の間には、ホームページの中身をはさみます。
つまり、実際に見える部分は<body>なのです！
わかりましたか…？
なんとなくでもいいので、「はさむ」ということを忘れないで下さい！！
第一回 第二回 第三回
6. 「head」とか「body」って何？？？
ヘッドとかボディって....別に頭や体のことではありませんよ（笑）
でも、体を想像すると分かりやすいかも…
最初の方に、つまり頭にheadがきていて、次に体のbody…
これは、htmlの大事な構造です！
どんなホームページも、これと同じ形をしていますから、絶対に覚えましょう！
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir="ltr">
<head>
<meta content="text/html;
charset=Shift_JIS" http-equiv="Content-Type" />
<title>FC2ホームページデフォルトページ</title>
</head>
<body>
<p><strong>このページは、Zircomのホームページです。ようこそ！！</strong><br />
<br />
<b>太字</b><br />
<i>斜体</i><br />
<u>下線</u><br />
<br />
<span style="font-size: medium;">次は…？</span></p>
<p><span style="color: rgb(255, 102, 0);">色</span>や<span style="font-size: small;">大きさ</span>を変えてみよう。</p>
</body>
</html>
<html dir="ltr">
<head>
<meta content="text/html;
charset=Shift_JIS" http-equiv="Content-Type" />
<title>FC2ホームページデフォルトページ</title>
</head>
<body>
<p><strong>このページは、Zircomのホームページです。ようこそ！！</strong><br />
<br />
<b>太字</b><br />
<i>斜体</i><br />
<u>下線</u><br />
<br />
<span style="font-size: medium;">次は…？</span></p>
<p><span style="color: rgb(255, 102, 0);">色</span>や<span style="font-size: small;">大きさ</span>を変えてみよう。</p>
</body>
</html>
ホームページ作り、HTMLの基本は、「はさむ」ことです。まず慣れることが大事です。
まず緑色の部分に注目してください。
開始タグの<html>と、スラッシュのついた終了タグの</html>がありますね。
<html>は、「htmlを使ってホームページを作ります！」という宣言のようなものです。
ですから、htmlを使って作ったホームページは絶対に、<html>で始まって</html>で終わります。
次に赤色の部分に注目してください。
<html>の中で、<head>と</head>がまた何かをはさんでいます。
<head>は、ホームページの情報をはさむところです。
情報というのは、誰がいつ作ったとか、タイトルとか、検索キーワードとか…いろいろです。
必要だと思う情報だけを入れておけばいいので、全部は必要ありません。
例えば、<title>と</title>の間には、ホームページのタイトルを入れます。
タイトルはGoogleやYahooで検索するときに使われるので、とても大事です！
最後に青色の部分に注目してください。
この<body>が一番大事です！！
<body>と</body>の間には、ホームページの中身をはさみます。
つまり、実際に見える部分は<body>なのです！
<html>
<head>
ここにはホームページのタイトルなど、情報を入れます。
</head>
<body>
ここに書いたことが、ホームページとして表示されるんです！
</body>
</html>
<head>
ここにはホームページのタイトルなど、情報を入れます。
</head>
<body>
ここに書いたことが、ホームページとして表示されるんです！
</body>
</html>
わかりましたか…？
なんとなくでもいいので、「はさむ」ということを忘れないで下さい！！
Ｍｙホームページを作るべし＃３
第一回と第二回の続きです。
もう大分慣れてきたのではないでしょうか？
ところで、左上にある「ソース」ってなんでしょうね…
ちょっとクリックしてみましょうか。
うおおおおお！！
これが『HTML』だーーー！！
5. 「HTML」をいじる
HTMLとは、ホームページを作っている言葉です。
といっても、話をするための言葉ではありません。
とにかく、どういうものか説明してみます。
１１行目を見てください。
「太字」が、「<b>」と「</b>」に、はさまれていますよね。
このように、「<」 と 「>」 で囲まれた文字を「タグ」といいます。
文字を「<b>」と「</b>」で挟むだけで、太字にするという意味になるんです。
始めのタグ「<b>」を、開始タグといいます。
終わりのタグ「</b>」を、終了タグといいます。
終了タグには「/」（スラッシュ）がついています。
これをコンピューターが理解し、文字や写真を組み合わせてホームページを画面に表示し、
それを人間が見て理解するのです。一種の言語ですよね^^
「<br />」というのは、改行という意味のタグです。
BRには、終了タグはありません。また、「<br>」と書く事も出来ます。
BRがないと、文章が切れないのでとても読みづらくなってしまいます。
BRのように、挟むものがない、つまり中身が空っぽのタグを、「空要素」といいます。
ためしに、「<b>」と「</b>」を、
「<u>」と「</u>」に変えて、
もう一度「ソース」をクリックしてください。
「太字」が「太字」になっているはずです。
もう大分慣れてきたのではないでしょうか？
ところで、左上にある「ソース」ってなんでしょうね…
ちょっとクリックしてみましょうか。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir="ltr">
<head>
<meta content="text/html;
charset=Shift_JIS" http-equiv="Content-Type" />
<title>FC2ホームページデフォルトページ</title>
</head>
<body>
<p><strong>このページは、Zircomのホームページです。ようこそ！！</strong><br />
<br />
<b>太字</b><br />
<i>斜体</i><br />
<u>下線</u><br />
<br />
<span style="font-size: medium;">次は…？</span></p>
<p><span style="color: rgb(255, 102, 0);">色</span>や<span style="font-size: small;">大きさ</span>を変えてみよう。</p>
</body>
</html>
<html dir="ltr">
<head>
<meta content="text/html;
charset=Shift_JIS" http-equiv="Content-Type" />
<title>FC2ホームページデフォルトページ</title>
</head>
<body>
<p><strong>このページは、Zircomのホームページです。ようこそ！！</strong><br />
<br />
<b>太字</b><br />
<i>斜体</i><br />
<u>下線</u><br />
<br />
<span style="font-size: medium;">次は…？</span></p>
<p><span style="color: rgb(255, 102, 0);">色</span>や<span style="font-size: small;">大きさ</span>を変えてみよう。</p>
</body>
</html>
うおおおおお！！
これが『HTML』だーーー！！
5. 「HTML」をいじる
HTMLとは、ホームページを作っている言葉です。
といっても、話をするための言葉ではありません。
とにかく、どういうものか説明してみます。
１１行目を見てください。
<b>太字</b><br />
<i>斜体</i><br />
<u>下線</u><br />
<i>斜体</i><br />
<u>下線</u><br />
「太字」が、「<b>」と「</b>」に、はさまれていますよね。
このように、「<」 と 「>」 で囲まれた文字を「タグ」といいます。
文字を「<b>」と「</b>」で挟むだけで、太字にするという意味になるんです。
始めのタグ「<b>」を、開始タグといいます。
終わりのタグ「</b>」を、終了タグといいます。
終了タグには「/」（スラッシュ）がついています。
これをコンピューターが理解し、文字や写真を組み合わせてホームページを画面に表示し、
それを人間が見て理解するのです。一種の言語ですよね^^
「<br />」というのは、改行という意味のタグです。
BRには、終了タグはありません。また、「<br>」と書く事も出来ます。
BRがないと、文章が切れないのでとても読みづらくなってしまいます。
BRのように、挟むものがない、つまり中身が空っぽのタグを、「空要素」といいます。
ためしに、「<b>」と「</b>」を、
「<u>」と「</u>」に変えて、
もう一度「ソース」をクリックしてください。
「太字」が「太字」になっているはずです。
Ｍｙホームページを作るべし＃２
前回大きな反響がありました、第一回の続きです^^
4. index.htmlを書式設定でもっと編集する
前回はただ文章を変更してみただけですが、「書式設定」（しょしきせってい）というものをしてみましょう。
早い話が、文字に色を付けたり、大きさを変えたり…です。
A) 文字を太くしてみる
「トップページ」という文字を太字にしてみましょう。下の画像のように、
「トップページ」をドラッグ＆ドロップで選択し、「B」のマークをクリックします。
すると、太字になりましたね^^ ちなみに「B」は「bold」のBです。
ドラッグとは、マウスのボタンを押したままマウスを動かすことです。
ドロップとは、マウスのボタンをはなすことです。
B) 文字を斜めにする
斜めの文字を「斜体」（しゃたい）といいます。
文字を斜体にするには、Aの手順のように文字を選択し、「I」をクリックします。
「I」は「italic」のIです。
C) 文字の下に線を引いてみる
文字の下の線のことを下線（かせん）といいます。
文字に下線をつけるには、Aの手順のように文字を選択し、「U」をクリックします。
「U」は「underline」のUです。
ちなみに、ショートカットキーもあります。
文字を選択して、パソコンの「Ctrl」（コントロール）キーを押しながら、「B」キーを押すと、
太字になります。「I」や「U」も同様です。
D) 改行する
改行（かいぎょう）とは、１つ下の行に進むことです。
【改行しないとき】
文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章
【改行したとき】
文章文章文章文章文章文章文章文章文章文章文章
文章文章文章文章文章文章文章文章文章文章文章
このように、改行によって文章を好きな場所で区切ることが出来ます。
改行をするには、キーボードの「Shift」キーを押しながら「Enter」キーを押します。
カーソルが下に移動すると、そこから文字を入力することが出来るようになります。
カーソルを好きな場所に移動させたいときは、その場所をクリックします。
E) 文字の大きさを変える
文字の大きさを変えるには、文字を選択して、「サイズ」の横の三角のマークをクリックし、
文字の大きさを選んでクリックします。
文字の形、色、背景も同じです。画像のように三角のマークをクリックし、選んでください。
4. index.htmlを書式設定でもっと編集する
前回はただ文章を変更してみただけですが、「書式設定」（しょしきせってい）というものをしてみましょう。
早い話が、文字に色を付けたり、大きさを変えたり…です。
A) 文字を太くしてみる
「トップページ」という文字を太字にしてみましょう。下の画像のように、
「トップページ」をドラッグ＆ドロップで選択し、「B」のマークをクリックします。
すると、太字になりましたね^^ ちなみに「B」は「bold」のBです。
ドラッグとは、マウスのボタンを押したままマウスを動かすことです。
ドロップとは、マウスのボタンをはなすことです。
B) 文字を斜めにする
斜めの文字を「斜体」（しゃたい）といいます。
文字を斜体にするには、Aの手順のように文字を選択し、「I」をクリックします。
「I」は「italic」のIです。
C) 文字の下に線を引いてみる
文字の下の線のことを下線（かせん）といいます。
文字に下線をつけるには、Aの手順のように文字を選択し、「U」をクリックします。
「U」は「underline」のUです。
ちなみに、ショートカットキーもあります。
文字を選択して、パソコンの「Ctrl」（コントロール）キーを押しながら、「B」キーを押すと、
太字になります。「I」や「U」も同様です。
D) 改行する
改行（かいぎょう）とは、１つ下の行に進むことです。
【改行しないとき】
文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章
【改行したとき】
文章文章文章文章文章文章文章文章文章文章文章
文章文章文章文章文章文章文章文章文章文章文章
このように、改行によって文章を好きな場所で区切ることが出来ます。
改行をするには、キーボードの「Shift」キーを押しながら「Enter」キーを押します。
カーソルが下に移動すると、そこから文字を入力することが出来るようになります。
カーソルを好きな場所に移動させたいときは、その場所をクリックします。
E) 文字の大きさを変える
文字の大きさを変えるには、文字を選択して、「サイズ」の横の三角のマークをクリックし、
文字の大きさを選んでクリックします。
文字の形、色、背景も同じです。画像のように三角のマークをクリックし、選んでください。
Ｍｙホームページを作るべし＃１
「Create」のZircomがお送りする、
「Create My HP」シリーズ第一回。
今回は、ホームページとは何なのか、これから作りたい！！
...という人にオススメの最新情報をおとどけし…
…何だか変だったのでやめます（笑）
…ブログやプロフなんかも含めると、ホームページを持っている人って
どれくらいいるんでしょうね...
国内のサイトだけでも数十TB（テラバイト）を超えるという、想像もつかないような情報が
不特定多数の人々に公開されています。
そこで、「Create」（創造する）らしく、ホームページの簡単な作り方を説明したいと思います。
ただし、超初心者向けに、本当に簡単にです。
難しくしようと思えばいくらでも出来ますが、それだとこのブログの趣旨から脱線してしまうので。
● ホームページを作る手順
1. 「サーバー」を用意する。
サーバーとは、ホームページの内容を保存するための場所です。
「FC2」や「@PAGES」や「NINJA TOOS」などで無料で借りることも出来ます。
ホームページアドレスをゲットしないと何もできません。
FC2の登録方法は2番で解説しています。
2. 「index.html」を作る。
ホームページを作って、他の人に見てもらうときに
一番最初に出てくるページは大抵「index.html」です。
（違う場合もかなりありますが、あまり気にしないで下さい）
「index.html」はファイルの名前です。
index → ファイルの名前です。自由に変えることが出来ますが、
最初に出て来るようにするには「index」にしましょう。
.html → 「.」はただの点ですが、とても大事な意味があります。
「.」の後の文字を、「拡張子」（かくちょうし）といいます。
拡張子はファイルの種類をあらわしていますので、
写真や音楽などにもそれぞれの拡張子がついています。
まずは「FC2」の場合の「index.html」について説明します。
まずはFC2IDに登録し、「ホームページ」を選んで設定を済ませましょう。
「ホームページ」をクリックし、「FC2 ホームページ」の「このサービスを追加」をクリックします。
次に、「無料ホームページ」の「無料ホームページ登録」をクリックします。
次に、「同意する」をクリックします。
そうすると、「新規登録」画面が表示されますので、必要事項を入力してください。
「希望アカウント名」はホームページアドレスです。開いているところを好きなように
決めることが出来ます。ただし、日本語は使えません。
全て入力して、「以上の内容で登録する」をクリックしてください。
少し待つと、「管理画面はこちら」と表示されるので、クリックしてください。
通常、管理画面にはこの画面からログインします。
今回は初めてなのでもう「FC2 ホームページ ユーザー管理画面」と表示されているはずです。
次に、「ファイルマネージャー」を開いてみましょう。（画像をクリックで拡大）
この画像には色々な種類のファイルが載っていますが、
始めは「i」と「index.html」しかないはずです。
虫眼鏡のマークをクリックして、「index.html」を見てみましょう。
「このページは、FC2ホームページのデフォルトページです。」と表示されれば成功です。
これであなたはウェブマスターの仲間入りです！！
（ウェブマスターとは、ホームページ作りのプロのことを言うこともあれば、ホームページを持っている人全員でもあります）
3. 「index.html」を編集する。
それでは早速、中身をいじってみましょう。
「ユーザー管理画面」に戻って、「index.html」の横にある、
をクリックします。
すると、「ファイルエディタ」が表示されるはずです。
適当に文章を変えて、「保存する」をクリックし、
もう一度虫眼鏡のマークをクリックして、「index.html」を見てみて下さい。
ちゃんと変わっていますね？
…長くなってしまったので、一旦区切ります。
「Create My HP」シリーズ第一回。
今回は、ホームページとは何なのか、これから作りたい！！
...という人にオススメの最新情報をおとどけし…
…何だか変だったのでやめます（笑）
…ブログやプロフなんかも含めると、ホームページを持っている人って
どれくらいいるんでしょうね...
国内のサイトだけでも数十TB（テラバイト）を超えるという、想像もつかないような情報が
不特定多数の人々に公開されています。
そこで、「Create」（創造する）らしく、ホームページの簡単な作り方を説明したいと思います。
ただし、超初心者向けに、本当に簡単にです。
難しくしようと思えばいくらでも出来ますが、それだとこのブログの趣旨から脱線してしまうので。
● ホームページを作る手順
1. 「サーバー」を用意する。
サーバーとは、ホームページの内容を保存するための場所です。
「FC2」や「@PAGES」や「NINJA TOOS」などで無料で借りることも出来ます。
ホームページアドレスをゲットしないと何もできません。
FC2の登録方法は2番で解説しています。
2. 「index.html」を作る。
ホームページを作って、他の人に見てもらうときに
一番最初に出てくるページは大抵「index.html」です。
（違う場合もかなりありますが、あまり気にしないで下さい）
「index.html」はファイルの名前です。
index → ファイルの名前です。自由に変えることが出来ますが、
最初に出て来るようにするには「index」にしましょう。
.html → 「.」はただの点ですが、とても大事な意味があります。
「.」の後の文字を、「拡張子」（かくちょうし）といいます。
拡張子はファイルの種類をあらわしていますので、
写真や音楽などにもそれぞれの拡張子がついています。
まずは「FC2」の場合の「index.html」について説明します。
まずはFC2IDに登録し、「ホームページ」を選んで設定を済ませましょう。
「ホームページ」をクリックし、「FC2 ホームページ」の「このサービスを追加」をクリックします。
次に、「無料ホームページ」の「無料ホームページ登録」をクリックします。
次に、「同意する」をクリックします。
そうすると、「新規登録」画面が表示されますので、必要事項を入力してください。
「希望アカウント名」はホームページアドレスです。開いているところを好きなように
決めることが出来ます。ただし、日本語は使えません。
全て入力して、「以上の内容で登録する」をクリックしてください。
少し待つと、「管理画面はこちら」と表示されるので、クリックしてください。
通常、管理画面にはこの画面からログインします。
今回は初めてなのでもう「FC2 ホームページ ユーザー管理画面」と表示されているはずです。
次に、「ファイルマネージャー」を開いてみましょう。（画像をクリックで拡大）
この画像には色々な種類のファイルが載っていますが、
始めは「i」と「index.html」しかないはずです。
虫眼鏡のマークをクリックして、「index.html」を見てみましょう。
「このページは、FC2ホームページのデフォルトページです。」と表示されれば成功です。
これであなたはウェブマスターの仲間入りです！！
（ウェブマスターとは、ホームページ作りのプロのことを言うこともあれば、ホームページを持っている人全員でもあります）
3. 「index.html」を編集する。
それでは早速、中身をいじってみましょう。
「ユーザー管理画面」に戻って、「index.html」の横にある、
をクリックします。すると、「ファイルエディタ」が表示されるはずです。
適当に文章を変えて、「保存する」をクリックし、
もう一度虫眼鏡のマークをクリックして、「index.html」を見てみて下さい。
ちゃんと変わっていますね？
…長くなってしまったので、一旦区切ります。
