CSS
無料お問合せはこちらから TEL 075-257-4588 営業時間 AM10:00〜PM7:00
| ホーム |
| 無料講座 | Dreamweaver編 | トップページ作成 |
2,実際にページ「index.html」を作っていく
この部分を作っていきます。ページ全体に中央寄せを指定しているので、画像を挿入し、テキストを打ち込むだけで完成します。

あいさつ文を作る

画像の挿入タグを打ち込んで、画像を挿入します。

widthは画像の幅、heightは高さです。きっちり合っていないと縦横の比率がずれて、崩れた状態で表示されてしまうので注意しましょう。

方法1:タグを打ち込む
画像の挿入タグはこちら。<img src=" まで打てば、Dreamweaverの入力補助ツールが現れて入力を助けてくれます。
<img src="画像ファイルのURL" width="400" height="50" alt="Welcome to My Homepage">

画像の挿入

方法2:挿入ツールパレットを使う
Dreamweaver画面の右側にある、ツールパレットを使う方法もあります。アイコンをクリックすることで挿入したいものを選べるので、初心者の方にはこちらの方法がおすすめです。
青丸が画像ですね。

画像の挿入

画像には、必ず代替文字を設定します。これはalt(オルト)ともいい、画像が表示されなかった場合に代わりに表示されたり、目の不自由な方などが使用する音読ブラウザで読み上げに使われたりします。
IEでは、画像にマウスを当てると表示されるテキストとなります。この機能はIEにしかないので、他のブラウザで閲覧する人もいることを考えて、あくまで補助的なテキストを入力しましょう。

代替文字の設定

Dreamweaver画面最下部のプロパティウインドウの中に「代替」という項目があります。ここに書き入れたテキストが代替文字となります。

代替文字の設定

代替文字内にはタグは使えません。
画像を二つ、挿入しました。しかしこれでは単に横に並べただけとなります。
縦に並べてかつ少し隙間を空け、きれいな配置にしましょう。

pタグで画像を縦に並べる

pタグというのはパラグラフ、paragraphから来ています。
開始タグ<p>と、閉じタグ</p>の間に入る画像やテキストが一つのまとまり、段落である、と宣言することになります。

pタグで画像を縦に並べる

画像をどちらとも、pタグで囲みました。
二つともpタグの中に入れてしまうと「二つの画像は一緒のまとまり」だということになり、横にぴったり並んで表示されたままになりますので気をつけましょう。
デザインビューには出ないものがタグです。

「タグを打ち込む時」「タグごとコピーやペーストする時」は、必ずコードビューで作業をしましょう。 デザインビューは便利ですが、例えば「テキストだけコピーしたかったのに、pタグごとついてきてしまった」など、思わぬ違いや、エラーが出ることがあります。

最初はプレビューしながら進められるデザインビューに頼ると思いますが、できるだけコードビューでの作業に慣れて下さい。

縦の間隔を手っ取り早く空けるには、もう一つbrタグというものがあります。これは「改行タグ」で、breakから来ています。
brとpの違いは、一番簡単に言えば「空くスペースが違う」ということですが、詳しくは下図を参照して下さい。

brとpの違い

この部分は全てテキストですが、心に残る旅を…の部分は他のテキストよりも大きく、太字になっていますよね。
これもcssで指定をします。

「少しサイズの大きい、太字」というcssを用意する

これぐらいのシンプルな指定なら他の場所にも使えそうなので、idではなくclass指定にしましょう。
後で何の指定だろう? と悩まないように名前をfontにしました。そしてうっかり同じ名前をつけてしまわないように、末尾に01と番号を振っています。

「少しサイズの大きい、太字」というcssを用意する

「01font」などというような、数字が最初に来る名前はつけないようにしましょう。ブラウザによっては全く指定がきかず、表示がひどく崩れることがあります。
数字をつけて管理するなら末尾に。これも小さなポイントです。
pタグに、クラスを指定します。半角空けて(全角ではいけません)class、まで打ち込むと、Dreamweaver入力支援(下図の赤枠部分)が出てきます。ここでfont01を選択すれば完了です。

「少しサイズの大きい、太字」をhtmlに指定する

この部分はノーマルなテキストですね。クラス指定はせず「贅沢で〜信じています。」の文章を入力しましょう。

あいさつ文を打ち込む

入力し終えたらタグを追加します。これも「心に残る旅を…」との間隔を空けたいと思いますので、pタグで囲みましょう。
pタグの中にbrを入れることもできます。適当な箇所で改行を入れて、読みやすいテキストにしましょう。

あいさつ文を打ち込む

閉じタグのいらないタグ
brタグは、pタグとは違い「囲む必要のないタグ」です。
pタグは<p></p>というように「ここから」「/ここまで」をどちらも書く必要がありますが、brタグは一つだけ、<br />というタグを文末に入れることで機能します。

<br>ではなく<br />なのがポイントです。最後の/が「このタグはこれで完結しています」という宣言になり、閉じタグの代わりをしているわけですね。

あいさつ文の最後に、線が入っています。これはhrタグといって、水平線です(horizonから来ています)。
下図の赤枠部分、これもbrタグと同じように、閉じタグのいらないタグですね。

水平線を入れる

hrは古くからあり、シンプルなものに見えますが、cssで指定をするのがなかなか厄介なタグです。ブラウザによってかなり表示が違い、また指定も手間がかかります。

ですので、今回はささっとhtml指定で行います。
がちがちに「ここはこういう書き方が正しいはずなんだけど、うまくいかない…」と悩んでしまって作業がストップするよりも、なじみのある簡単な方法で済ませてしまうのも一つの手。ブラウザできれいに表示されているなら、後で調べたり、ウェブ制作にもっと慣れたところで直せばいいのです。

下図で「お楽しみプレゼント」だけがピンクになっていますね。

テキストの一部だけ色を変える

コードは下図のようになります。pタグの中に、spanというタグが入っているのがポイントです。

<span></span>で囲まれた中は改行されないため、文中でピンポイントの強調をする時にとても便利です。

テキストの一部だけ色を変える

pやdivタグは、brタグを入れなくても改行されます。文中の一部だけを色を変えたい・大きくしたい…という時はspanタグでclass指定をしましょう。
下図で番号順に並んでいるテキストは、番号つきリストというものです。

リストを作る

コードは下図のようになります。 <ol></ol>で囲まれた中がリストになり、<li></li>で囲まれた部分に番号が振られます。番号つきリストにすれば、自分で1.2.3....というようにテキストを打つ必要はありません。

リストを作る

リストの種類
リストには様々な種類と指定がありますが、最もよく使われる二種類のリストをご紹介します。
<ul>
<li></li>
</ul>
  • 最もシンプルなリストです。
  • 冒頭に「・」がつきます。
<ul>
<li></li>
</ul>
  1. 番号つきリストです。
  2. 冒頭に「半角数字.」がつきます。
リストの上下左右には元々、スペースが空くように設定されています。
隙間なく並べたい場合はcssファイルで指定をしますが、リストをcssで装飾するのは複雑なプロセスがありますので、ここでは割愛します。
下図の部分です。色分けしてあればどのコースがどんな内容で、いくらなのか非常に分かりやすいですね。

セルの背景色が様々なテーブルを作る

cssファイルに、それぞれのセルに指定するクラスを作りましょう。

セルの背景色が様々なテーブルを作る

htmlでは、コードは下図のようになります。
コース名と価格のセルにはnowrapというタグがついていますが、これは「このセルの中では改行をしません」という指定です(たとえば\100,000-という金額が途中で改行されたら、とても見づらいですよね)。
あまりにも長い文章などにnowrapをつけるとレイアウトの崩れにもつながりますので、多用はしないでおきましょう。

セルの背景色が様々なテーブルを作る

下図の部分です。びっくりマークが先頭についたリストを作ってみましょう。

装飾したリストを作る

まず、リストにつけるcssの指定を作成します。list-style-imageという指定が「このリストは先頭に画像がつきます」という宣言になります。
また、行間を適度に空けるため、line-height: 150%として、「行間は150%(1.5倍ですね)」と指定しています。

装飾したリストを作る

リストの先頭に持ってくる画像は、 フォントの大きさを上まらないようにしましょう。あまり大きいと、画像とテキストが上下にずれてしまいます。

html上では下図のように指定をします。class="annnailist"と指定すれば完了、簡単ですね。

リストは<ul></ul>で一まとまりになります。<ul>の上と、</ul>の下にはスペースも空きます。
そして、<li></li>で区切られた部分が項目となります。

ulの中にliが入って一つのリスト、と覚えましょう。ulだけでも、liだけでもリストにはならないのです。

装飾したリストを作る

何の指定も加えないリストを組むと、下図のように、黒丸のついた項目になります。

  • これはリストの中の項目1です。
  • これはリストの中の項目2です。

リストタグは使い方もきわめて多く、非常に広がりのあるタグです。またブラウザによって見え方が異なる場合もあり、使いこなすのはなかなか大変です。ですが「リスト」というだけあって、項目を整然と並べるのにとても便利。覚えると強力な武器になります。

まずは「ulの中にliが入る」ということをしっかり覚えて、基本からやっていきましょう!

連絡先を明記して、完成!
最後に、メールアドレスを明記します。
連絡先を分かりやすい場所に書き、いつでも問い合わせを受け付けられるようにしておくのは非常に重要です。

連絡先を明記して、完成!

html上ではこのように表記します。
cssを使わず、adressタグを使用しています。これは住所や連絡先のためのタグで、IEなどのブラウザではイタリック(斜体)のフォントで表示されます。

テキストも打ち終えたら、最終チェックをして完成です。
altの入れ忘れや入力間違い、リンクのつけ間違いや、タグを消したつもりが残ってしまった「"」などに注意しましょう。

適当な場所に水平線を入れるなどして、まとまりのある見やすいページの作成を心がけて下さい。少しの工夫で、ページはぐっときれいになります。

今作り終えたindex.htmlと同じように色んなページを作り、どんどん自分のサイトを盛り上げていきましょう。

自分のホームページ制作にあたっては、文章・画像はじめ、色やレイアウトは自由に考えて、楽しみながら作成してください。
世の中のウェブ制作方法、制作ツールは様々にありますが、Dreamweaverは非常に優れた制作ツールです。たくさんのタグを打つほど、できることも増えて楽しさも増していきますよ。頑張って下さいね!

もどる すすむ

<< PAGE TOP >>


無料お問合せはこちらから TEL 075-257-4588 営業時間 AM10:00〜PM7:00
| ホーム |
| 無料講座 | Dreamweaver編 | トップページ作成 |


CSS
Ryuumu