このサンプルサイトを今から加工してゆきます。
※クリックすると大きな画像が見れます
テンプレートを自由に操れるようになるための
もくじ
○まずはパーツの確認
何がどんな役割を果たすのか?】
○恐る恐るHTMLを操作してみる
○タグを使った文字装飾をいろいろ試してみる
まずはパーツの確認
【何がどんな役割を果たすのか?】
先ほどダウンロードして保存したテンプレート
を使って作業してゆきます。
「index.html」はメインページとなる要のページ
「index.html」というファイルがありますが、
これがいわゆる「トップページ」になります。
トップページはwebサイトの「顔」のような、1番
主になるページです。
ちょっと開いてどういうページか見てみましょう。
開き方は、下の画像の通りお持ちのウェブブラウザ
を使います。
ウェブブラウザをクリックすると冒頭の
サンプルサイトが表示されるはずです。
次は「TeraPad」で開いてみます。
「TeraPad」でindex.htmlを開くと、たくさんの
文字が並んでいて、一瞬「げっ！」と思います。
でも、少し落ち着いて画面を眺めてみてください。
「黒い文字」は普通の文章だってわかるはずです。
まずは、「黒い文字」の部分を変えることから
はじめる予定です。
「css」ファイルで全体のデザインを整える
「css」フォルダを開くと、「○○○.css」
で終わるcssファイルがあります。
cssファイルのことを「スタイルシート」と
いいます。
スタイルシートはwebサイト全体のフォント
サイズなどのデザインを決める役割を果たして
います。
先ほどのトップページindex.htmlの
「HTMLファイル」と少し様子が違いますね
私は、文章の文字サイズが少し小さいと感じたので
文字サイズだけ数ヶ所だけ修正しましたが、今回は
HTMLファイルの修正を中心に説明しますので、
cssは文字サイズ以外触りません。
「images」「js」「psd」は、今回そっとしておく
画像などが格納されているファイルですが
今回は全く触りません。
サイトを構成するのに必要なフォルダなんだ
って考えておいてください。
「readme.txt」ファイルは はじめに読んでおく
テンプレート製作者さんからの注意事項です
軽く目を通しておいてください
恐る恐るHTMLを操作してみる
まずは「＜h1＞タグ」を修正して、基本の動きを覚える
最初にわかりやすい＜h1＞タグを
修正して基本の動きをマスター
しましょう。
まず、＜h1＞～＜/h1＞の「～」の部分を
好きなタイトルに変更してみてください。
上の例では「HTMLファイルの修正のしかた」と
入力しています。
＜h1＞タグの「黒い文字」の部分だけなら
好きなように修正しても大丈夫です。
何を入れたらいいか思いつかない人は
例の通り入力してみてください。
変更はできましたか？
変更が終わったら「TeraPad」で「保存」
します。
「保存」ができたら変更が反映されて
いるか確認してみます。
今度はindex.htmlをウェブブラウザで
開いてみます。
「ほら、変更したタイトルが変わってるでしょ」
私は初めてこの作業をしたとき「HTMLの
操作が自分にもできるかも」とけっこう
感動しました。
あなたはどうですか？
まだそんな感覚は持てませんか？
続けてすぐ下にある＜p＞～＜/p＞で囲まれた
部分も変更してみましょう。
先ほどと同じように「TeraPad」で「保存」して
ウェブブラウザで確認します。
こんどは既にブラウザが開いているので、
「画面の更新」をして確認します。
※クリックすると大きな画像が見れます
「TeraPadで保存」→「ブラウザで確認」の
動作は今後もよく使いますので、早く慣れましょう。
ホームページ公開には「ドメイン」「サーバー」
が必要です
ウェブブラウザで作業をしていますが、
今やっている作業をいくらやっても、あくまで
自分のパソコン内の作業なので、他の人からは
見ることができません。
「このページが他の人に見られたら嫌だな」って
感じていた方はご安心ください。
ホームページを他の人から見てもらえるように
するためには、「ドメイン」と「レンタルサーバー」
が必要です。
また、レンタルサーバーに掲載するために
「アップロードの作業」も要ります。
ひとまずはそういう作業をしないと「公開」が
できないんだと覚えておいてください。
ここでは、「HTMLを修正して公開前のwebサイトを作る」
ことをメインにお伝えしてゆきますので、
ドメインやサーバーの知識は必要ありません。
ドメイン取得とレンタルサーバーを使用
しようと思うと通常お金がかかります。
サイト公開しようとお考えの方はぜひ取り組んで
みてください
「サーバーでパソコン同士がつながる世界が『ネット』」
ご参考まで、私が運営しているサイトに参考となる
記事がたくさんありますので、興味がある方は
ご確認ください。いくつかご紹介しておくます
→ そもそもホームページを作ることとはどういうこと？
→ ホームページ作成ソフト購入までにしておきたい「４つの準備」
→ いまさら聞けない「ドメイン名」超入門
→ これだけは知っておきたい！レンタルサーバーの基礎知識
＜h＞タグの修正は思いのほかカンタン
先ほど＜h1＞タグを修正してもらいましたが
＜h2＞＜h3＞・・＜h6＞まで「css」で表示の
しかたが決めてあります。
下の画像のように＜h2＞が下線の2重線、
＜h3＞からは、フォントの大きさが違う
見出しになっています。
＜ウェブブラウザの表示＞ ＜TeraPadの表示＞
＜h2＞タグの中身を変更して、「TeraPadで保存」
「ブラウザで確認」すると下のように＜h2＞タグが
表示されます。
＜TeraPadの表示＞
↓↓↓
＜ウェブブラウザの表示＞
テンプレートのどの部分が抵抗なく加工できるのか？
テンプレートの加工もだんだん慣れて
きたことと思います。
これからタグを使った加工もやって
ゆきますが、なにも知らない人が
自由に加工していいといわれても
適当にやったら、元に戻せなく
なりそうで怖いですよね。
基本的には本文の部分はいじっても
大丈夫ですが、具体的にいうと下の
画像の＜h2＞タグより下は、自由に
作りこむ部分です
上の部分を触ってもいいのでしょうが
HTMLに慣れるまでは、加工しないほうが
無難です。
では、下はどこまでが大丈夫な部分でしょうか？
画像の＜/p＞の上の部分が本文にあたります
ので、その部分が自由に加工できる部分と
考えてください。
慣れていないと怖くてHTMLを触りにくい
と感じている方は多いと思いますが、
下の画像のように、加工できる部分に
思い切り「enter(改行ボタン)」で
スペースを空けてから作業すると、
やりやすいですよ。
タグの入力は基本コピーアンドペーストでやる
今からタグの入力をたくさん行いますが
基本コピペで作業します。
手打ちで頑張ると、誤入力で上手くいかない
ことが多いです。
テンプレートにたくさんタグの入力サンプル
がありますので、そこからコピペしてタグを
使うようにしましょう。
タグを使った文字装飾をいろいろ試してみる
みなさんお気づきかと思いますが、HTMLの命令は
基本「<○>～</○>」のスタイルで、文章などを
はさみ込みます。
これからご紹介します文字装飾も一部を除き同様です
<h>タグの修正では「黒い文字」の部分だけ
修正していきましたが、これからは実際に文章を
入力してからタグをつけていきます。
タグの入力で１つだけ気をつけていただきたいことがあります
HTMLのタグは<○>で始まり</○>で閉じる
とお伝えしました。
作業の途中で、対(つい)になっているどちらかが正しく
入力されていないと、サイト全体が崩れることがあります。
もし、作業中にサイトが崩れたら、タグがきちんと
対になっているかどうか確認すれば、たいていどこかに
入力漏れがあったりしますので、自分でも修正できます。
落ち着いて対応すればたいてい大丈夫です。
よくあるのが、「/(スラッシュ)」が抜けていたり、
「<」が2重で記載してあったり・・ほとんどが
ささいな入力ミスです。
当然ですが、サンプルテンプレートの入力例を消すときも、
<○>と</○>を対にして削除してゆきます。
もう片方が離れていることも多いので、注意深く見て
対(つい)で両方を消すようにしましょう。
<strong>～</strong> 「太字」で強調する
<strong>～</strong>
で囲んだ文字は、太字になります。
文字を強調したいときに使ってください。
＜TeraPadの表示＞
＜ウェブブラウザの表示＞
これから、今ご覧のwebサイトを作るところを
ご説明してゆきますので、ひとつひとつ試して
例文を実際に入力するときは、「ENTER」キーで
一度大きくスペースを空けてから作業すると
やりやすくていいと思います
大きく開けたスペースに、まずは文章を入力し
その後でタグをコピペするとスムーズです。
<u>～</u> 「アンダーライン」で強調する
アンダーラインを引いて強調するときに
使うタグです。
当サイトでは<h3>タグとあわせて使っています
＜TeraPadの表示＞
＜ウェブブラウザの表示＞
<u>～</u> 「アンダーライン」で強調する
上のTeraPadの表示で「＆lt；」「＆gt；」が
気になった方は多いと思います。
半角の「<>」は普通にTeraPadで入力
すると、タグとして認識されてしまいますので
ウェブブラウザで<>として表示できません
全角で＜＞と入力してもいいのですが、全角で
入力したものをコピーして貼り付けると、命令文
として認識されませんので、タグをコピペして
貼り付けた人が困ることになります
ですから<>を表示する際に「＆lt；」
「＆gt；」を使うのです。
おぼえておくと便利ですよ。
よく利用する「改行の表示」をマスターする <br/>と<p>
HTMLで文章を書いて、いくらTeraPad上で
改行しても、ブラウザで表示すると改行に
なっていません。
HTMLの文章を改行するのに利用するのが
<br/>です
下の画像のようにめちゃめちゃ多用しています。
※クリックすると大きな画像が見れます
↓↓↓
※クリックすると大きな画像が見れます
単に<br>で表記するとしている教材も
多いですが、このテンプレートは<br/>を
使用しているのでそれに従っています。
次は<p>ですが、<p>タグは段落を示すタグで、
<p>～</p>で囲まれた部分を１つの段落と
見なして、</p>の後には自動で余白ができます。
このテンプレートでは、<p>～</p>で囲まれた部分
のフォントが少し小さく表示されるよう設定されて
いますので、文章は段落＜p>で囲むようにしました
使ってみたい「番号付きリスト」と「箇条書きリスト」
「番号付きリスト」と「箇条書きリスト」も
このサイトで使ってみました。
オリジナルのテンプレートにありますので、
コピペして使ってみてください。
＜TeraPadの表示＞
＜ウェブブラウザの表示＞
普通のリスト
- 普通のリスト1
- 普通のリスト2
- 普通のリスト3
番号付きリスト
- 番号付きリスト1
- 番号付きリスト2
- 番号付きリスト3
li要素の中はブロックレベルのタグを使用することが出来ます。
例えば、<p>タグも記述することが出来ます。
定義リストとは？ 説明をするときに使うと便利
定義リストは、よく用語の説明などに使用します。
当サイトのトップページの始めのほうに使って
いますので、そのまま使用例として掲載します。
例では背景がグレーで囲まれた部分で、用語の説明を
しています。
＜TeraPadの表示＞
＜ウェブブラウザの表示＞
- テキストエディタとは？
- コンピュータで文字情報(テキスト)のみのファイル、
すなわちテキストファイルを作成、編集、保存するためのソフトウェア
（プログラム）です。 文字情報の入力、削除、コピー、貼り付け、検索、
置換、整形などの機能を備えています。今回はwebサイトを作るHTML言語
を操作するのに使います。
※Wikipediaのコメントを引用しました
フォントサイズを変えるタグはよく使う
フォントサイズを変えるタグもよく
使うタグです
<span style="font-size:○○px">～</span>で表します
数字の部分を変えるといろいろな大きさの
文字に変えることができます
黒字の「大きな字」の部分にフォントサイズを
変えたい文字を入力します
＜TeraPadの表示＞
＜ウェブブラウザの表示＞
大きな字
私は文中で<strong>タグと
あわせて使う使い方もしてみました
＜TeraPadの表示＞
※クリックすると大きな画像が見れます
＜ウェブブラウザの表示＞
- 普通の画像処理は軽くて使いやすい「JTrim」
- 文字入れは多機能な「PhotoScape」
覚えておきたい「文字の色を変える」タグ
今回は使っていませんが、文字の色を変える
タグもよく使います
<span style="color:カラーコード">～</span>で表します
＜TeraPadの表示＞
＜ウェブブラウザの表示＞
文字の色を赤にする
カラーコードについては無料ソフト
を使って、コードをコピペすると
いいでしょう。
ネットで探したカラーコード生成ソフト
「ColorMaster」をご紹介しておきます。
無料ダウンロードはこちらから→ Vector ソフトを探す！
タグの使用ができるようになったら
次のステップはこちら→画像の加工とリンクの貼り方を学んでみる！
