ぜったいできる！「ホームページの作り方～徹底解説」 テーブル表
今回も”テーブル”について解説しますが、今日はちょっとHTMLが絡んできます。
ホームページを作る以上はHTMLを理解しないとダメなんですが、なかなかパソコン初心者には取っ付きにくい、というのが現状ですね……。
でも、たぶん大丈夫だろうと信じます。
HTMLはなんだか英語の文字がぐちゃぐちゃ書いてあって分かりにくい、という印象ですが、ちゃんと一コ一コ整理して勉強していけば、ぜったいに分かるものと筆者は思ってます。
さて、前回は「テーブル」を実際に作ってみましたが、それがどんな構造になっているかを今回は見てみましょう。
下の図を見てくださいませ。
前回つくった「テーブル」はこんな形でしたが、私たち人間が「テーブル」をデザインするときは、上のような図を描いてみるとよいでしょう。
テーブルも整理して考えていけば、そんなに難しいものではないのです。
上から順に「HTML用語」を解説してまいります。
（HTMLはすべて”半角”で書きます。パソコン画面、右下にある「あ」とか「般」とか書いてあるところで、「あ」となっているところを押すと”全角”とか”半角”という文字が出てきますので、そこで「半角英数」というのを押すと、文字の入力を半角にできます）
まずは、
<table>でテーブルを作成するのですが、実際のホームページ用のファイルでは、
<table border="1" width="950">
と書かれています。
border は線の枠の太さを設定します。
width はテーブルの横幅を決定しています。
tr という文字は”表”の「行」をつくります。
上の図は４行３列の表になっています。
なので、tr という文字が各行ごとに一個ずつ書かれていますね。
また、ホームページ用のファイルでは、
<tr height="200">
といった感じに、height という文字で「行の高さ」を設定しています。
上の図で、実線で囲まれた四角い「セル」が何個かありますが、
この「セル」を
<td>
という文字でつくれます。
たとえば、ホームページ用のファイルでは、
<td colspan="2"> とか
<td width="40%">
といった感じに書くのです。
colspan はセルを結合させるときに使う文字で、
width はセルの幅をテーブル全体の幅の何％にするかを設定しています。
また、rowspan という文字で、セルを下方向に割り込んで結合させることができます。
上の図では、２行目の一番左の四角が、３行目のセルとくっついています。
こういう”タテ方向”のセルの結合には、rowspan をつかうわけです。
どうでしょうか？
HTMLが何かを知らない人には、もしかしたら、ちんぷんかんぷんな話だったかもしれないですが、基本的に、
上のように描いた図を見ながらHTMLを書いていけば、ホームページは出来上がってきます。
上の図では、/tr とか /table というふうに、「/」という記号が書かれている文字がありますが、これは「tr はここで終わり」とか「table はここで終わり」という意味になっていて、
”HTMLは作ったら、閉じる”
というのが、決まりとなっているんですね。
テーブルを作ったら、ここで終わり、というのを決めないといけないし、
行やセルを作ったら、それもここで終わり、というのをいちいち書かないとダメなのです。
だから、/ という記号を書いて、〇〇はここで終わり、と決めているわけなのです。
と、今回はかなり難しい話になりましたが、HTMLのことを大まかに話しただけですので、まだ全然わからなくても大丈夫です。
次回は、実際に上の図のような「テーブル」を、HTMLをつかって作ってみようと思います。
あ、あと、このブログではホームページのデザインに”エクセル”を活用します。
テーブルとエクセルの相性がよいので、エクセルでつくったものを、そのままホームページに使えるからです。
ホームページはエクセルでつくる。
というのを目標にしてやっていきます。
ややっこしいことを考えずに、感覚的にホームページを作れるなら、それにこしたことはないですからね……。
もっと楽につくりたい！！
と私も思いますから。
そういうコンセプトでやっていきますよ……。
ぜったいできる！「ホームページの作り方～徹底解説」テーブルとは何ぞや？(その２)
ホームページを作るのに、”テーブル”がとっても大事、ということを前回までに書いてきたので、
今回は実際にテーブルを作ってみます。
下のリンクに、実際にテーブルを作ってみたので、見てみてくださいませ。
(今回も画面の拡大率は１００％にしたほうが見やすいと思います)
リンク先に黒い枠線だけのページがあったと思いますが、それがテーブルというものなのです。
そして、これ自体はすぐにご自宅のパソコンで作れますので、実際に作ってみましょう。
今回もイラストをつかって説明していきます。
１、まずは、先ほどの”テーブル”というリンクを押して、テーブルのページに行きます。
２、テーブルのページに行きましたら、好きなところで「右クリック」をいたします。
３、四角いウィンドウが出てきますので、「ソースの表示」を押していただきたい。
４、ヘンな英語がたくさん書かれたページが出てくるので、再び好きなところで「右クリック」し、「すべて選択」を押してください。そのまま、再び「右クリック」し、今度は「コピー」を押していただきます。
そうしたら、一旦このブログは小さくしていただいて（画面右上の×の左にある□か＿という記号を押して）、「メモ帳」を開きます。
１、デスクトップ(パソコンの最初の画面)の左下の「スタート」を押します。
２、すぐ上に出てまいります「すべてのプログラム」を押します。
３、すると、たくさん文字が出てきますが、その文字列はアルファベット順、アイウエオ順に並んでいると思いますので、「アクセサリ」というのを探して、押してください。
４、また、いろいろ文字が出てきますが、「メモ帳」というのを探して押していただきます。
次に、メモ帳にコピーした”ソースコード”というものを貼り付けます。
１、メモ帳の白い画面上(好きなところでよいです)で、「右クリック」いたします。
２、四角いウィンドウが出てきますので、「貼り付け」を押します。
メモ帳にヘンな英語がたくさん出てくると思いますが、うまくいきましたでしょうか？
次に、そのメモ帳をパソコンのデータとして”保存”します。
１、メモ帳の左上にある「ファイル」を押します。
２、四角いウィンドウの中の「名前を付けて保存」を押していただきます。
３、すると、また別の四角い画面が出てくると思うので、図の斜線部分に「index.html」(インデックス ドット エイチ・ティー・エム・エル)と記入します。
ドットを忘れないように注意してください。(キーボードでいうと、Mの２個右にあります)
４、デスクトップ(パソコンの最初の画面)上に、”index”という名前のファイルができてるかと思いますので、それをクリックしていただければ、テーブルのページが出てきます。
(インターネット・エクスプローラというソフトを使ってる人は、indexのファイルは図のような”e”の文字がくっついてると思います)
これで”テーブル”のホームページ(用のファイル)ができました。
このままでは、自分の好きなデザインのホームページになっていないかもしれないので、「テーブル」の形をお好きなように変えていかないとダメですが、とりあえず”ホームページの骨格”となるテーブルは作れたので、
あとは、この枠の中に、自分の好きな文章や絵を入れていけばよいことになります。
ここまで、ちゃんとできましたでしょうか？
できない人はコメント欄に書き込んでもらえると、こちらも対処できるかと思います。
さて、次の回もテーブルについての解説となります。
ぜったいできる！「ホームページの作り方～徹底解説」 テーブルとは何ぞや？
前回、ホームページを作る上で、テーブル(表)さえ覚えとけば何とかなる、ということを書きましたが、
では、テーブル(表)とは何ぞや？
ということについて、今回は解説していこうと思います。
まず見てもらったほうが早いでしょうから、
サンプルホームページを用意しました。
こちらがテーブルを使って作った”ふつうのホームページ”
そして、こちらが”テーブルを見えるようにしたホームページ”
下のホームページはテーブル(表)を見えるように設定したもので、黒い線がホームページ上に見えています。
(もしインターネットの画面の拡大率を１２５％とかにしている人がいましたら、パソコン画面の右上の歯車を押して、拡大→１００％としといた方が、見やすいと思います)
そして、ホームページ上のそれぞれの文章やイラストが、テーブルという枠の中に入って、並べられていることが分かると思います。
ホームページの文やイラストが……、
”テーブル”という枠の中におさまっている。
つまり、テーブルの形を自分で自由に作れれば、文やイラストを好きなように配置できます。
要するに、
”ホームページのレイアウト(デザイン)は「テーブル」で思い通りにできる”
ということです。
なので、これからホームページを作ろうという方は、まずテーブル(表)のお勉強をなさることが重要だと言えます。
（実は、パソコンに詳しい人とかは、テーブルの機能はあまり好きじゃない人もいますが、初めてホームページを作る分には、テーブルで十分すぎるくらいにいろいろできるので、問題はないでしょう）
さて、じゃあテーブルをどうやって作るか？
ということですが、
これもイラストで見てもらったほうが早いでしょう。
下の絵のように、”テーブル”というのは、”表”の形をしています。
エクセルの表のように、たくさんのセルが整列して、”表”を形作っているのです。
上の図の場合、左の絵のテーブルは、右のように”４行３列の表”から作られています。
（右図の点線部分は、「セルの結合」によってホームページ上では見えなくなります）
このように”４行３列の表”から、ホームページのレイアウトの骨格を作っていたのでした。
ホームページをつくるときには、”表をつくって、その中に文やイラストを入れていけばよい”わけです。
お分かりいただけたでしょうか？
ホームページは、表を作れれば、できる。
となれば、なんとなく「パソコンが苦手な自分でも、ホームページが作れるかも？」と思えてきたりしないでしょうか？
思えてこなければしょうがないですが、
ここで作れそうだと思えた人は、たぶん作れます。
これさえできれば、あとはどうとでもなりますので。
この”表”自体は、”エクセルの表”に非常によく似ています。
エクセルを使ったことのある人なら、すんなりテーブル(表)の機能を使いこなせるものと思います。
では、具体的にどうやって作っていくのか？
それを次回に書こうと思います。
ぜったいできる！「ホームページの作り方～徹底解説」
世の中にそうそう絶対なんてない、と思いつつも、「ぜったいできる」とタイトルに宣言しながら、ホームページの作り方をわかりやすく解説するシリーズをやっていきたいと思います。
ブログをやってもアクセス増えないし、
ツイッターも飽きた。
なんというか、もっと自由に自分を表現できるツールがほしい。
でも、そんな便利なツールがあるわけ……。
という方は、ぜひ自分の個性ある”ホームページ”をつくることを考えてみてはいかがでしょうか？
自分のサイトなら、形の決まったブログと違い、自分の好きな形で、好きなものを表現できる。より、多くの人とコミュニケーションする”きっかけ”が生まれる。
なので、独創的なサイトをつくって、たくさんの人に見てもらいましょう。
とは言っても……。
「やっぱりホームページって難しいんでしょう？」
「自分はパソコン苦手だし、そんなことできるわけないよ。」
と思われる方が、少なくないと思います。
たしかにホームページ作りは難しいのですが、ここのブログでちゃんと一コ一コ（イラスト付きで）わかりやすく説明するつもりですので、どんなにパソコンが苦手な人でも、また、ほぼパソコン初心者という方であっても、必ずホームページのことを理解できるようになる、そして実際に作れるようになるものと考えています。
まず自分のサイトで恐縮ですが、
サンプルとしてホームページへのリンクを貼っておきますので、
完成図はだいたいこんな感じとお考えください。
（スタイルシートやホームページ作製ソフトを使わず、純粋にHTMLだけで作っています）
あまり何もないホームページですが、ページ全体が曲線的になるようには気を付けています。
ホームページ作りのプロみたいな人が作ると、なんかすごくキラキラした、にぎやかなサイトにはなるのですが、どこを見ても形が直線的でカクカクしているため、少し温かみがないものになっているような気がします。
なので、もうちょっとデザイン性のあるものを、このブログでは作っていこうと思ってます。
（曲線的なセンスをもうちょっと出していこうと思っています）
さて、ホームページつくるには、まず何をお勉強すればよいか？
ですが、
ホームページ作りを始めると、大体、次のような壁にぶち当たります。
・HTMLってなあに？
・サーバーってなあに？
・FTPってなあに？
ホームページ作りにはいくつかのハードルがあって、そのハードルを越えていかないといけないのですが、では、まず何から手をつければよいでしょう？
その答えは、なんといっても、
・”テーブル（表）”の概念を理解し、使いこなす
ことでしょう。
HTMLが何かは、まだ知らなくても問題はありません。
とりあえず、HTMLというものの中に、テーブル（表）という機能があって、それを使うことがホームページ作りには重要なんだと、ご理解いただけるとよいかと思います。
というか、これさえ分かればホームページはできたようなもんなのです。
あとのハードルは些末な問題であり、どうとでもなります。
テーブル（表）はけっこう厄介な機能ですが、これが使えれば、ホームページのデザインに関して、いくらでも応用できるので、
テーブル（表）を制するものは、ホームページ作りを制す
なのです。
なので、次回以降しばらく、このテーブル（表）について、わかりやすくイラスト付きで解説していこうと思います。
興味が湧いた人はどうかお付き合いくださいませ。
ホームページつくりましたの報告
ホームページつくりました。
今後、ホームページの作り方を、このブログ上で書いていくつもりです。
「ぜったいできる！ ホームページの作り方 徹底解説」
みたいなタイトルにしようか考え中です。
それでは。