ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

ソースコードの貼り付けと編集

トップページのソースコードをコピーしよう

それでは、完成したトップページのソースコードを他のページへコピーしましょう。
その前に、コピーの手順と注意点を説明します。

ソースコードをコピーしよう

コピー作業の流れ

まずは「index.html」のソースコードを「menu.html」へコピーします。その後、リンクや画像の参照先の修正を行い、さらにその他のページへソースコードをコピーします。

なぜ参照先の修正が必要になるのかというと、「index.html」と「menu.html」は「階層」が異なるからです。

フォルダの階層

同じ階層にあるファイルを参照する(リンクを貼る、紐付けする)場合はそのままでOKなのですが、階層が異なる場合は「../」を付ける必要があります。

例えば、「index.html」に「img」フォルダ内の「gazou.jpg」というファイルを貼るとします。
この場合、「index.html」と「img」フォルダは同じ階層にあるので、以下のように記述すればOKです。

[index.htmlにリンク設定する場合]
<img src="img/gazou.jpg">

しかし、「menu.html」に「gazou.jpg」を貼る場合、「img」フォルダは1つ上の階層にあるので、「../」を付ける必要があります。

[menu.htmlにリンク設定する場合]
<img src="../img/gazou.jpg">

「../」を付けることにより、1つ上の階層を参照することができます。

階層の説明図

つまり、「page」フォルダ内にある「menu.html」「kodawari.html」「tenpoannai.html」はすべて参照先に「../」を付ける必要があります。

階層に注意して、コピー作業を進めていきましょう。

覚えておきたいポイント

参照先について

異なる階層を参照する場合のみ「../」を付ける必要があります。
例えば「menu.html」から「kodawari.html」にリンクを設定する場合には同じ階層なので「../」は必要ありません。

参照先の指定について

「../」で1つ上の階層、「../../」で2つ上の階層、「../../../」で3つ上の階層へ…といった具合になります。「../」の数を増やすことにより、参照する階層を指定することができます。

コピーして貼り付けよう

「index.html」の内容をコピーして貼り付けていきましょう。

step.1

まずは「index.html」をテキストエディタで開きます。

step.2

開いたらマウスで全てを選択、もしくは「Ctrl+A」を押しましょう。
その後、右クリックメニューのコピーもしくは「Ctrl+C」でコピーします。

コピーの手順

step.3

コピーしたら「index.html」を閉じ、「menu.html」を開きましょう。

開いたら右クリックメニューから「貼り付け」もしくは「Ctrl+V」でソースコードを貼り付けます。

貼り付けの手順

貼り付けが完了したら、一度「menu.html」を保存しましょう。
もちろん、保存する際には文字コードを「UTF-8N」で保存します。

これでソースコードのコピーは完了です。

覚えておきたいポイント

ページを間違えないようにしよう

コピーして貼り付けるページを間違えないように気をつけましょう。「index.html」のソースコードを「menu.html」へ貼り付けます。

不要な箇所の削除

次は不要となる箇所のソースコードの削除を行いましょう。

ヘッダー、メニュー、サイドナビ、フッターは全ページ共通ですが、トップページ以外にメインビジュアルは表示させません。
また、メインコンテンツの内容も異なるのでメインコンテンツのソースコードも削除しましょう。

メインビジュアルの削除

まずはメインビジュアルのソースコードを削除しましょう。
メインビジュアルはトップページにのみ表示するので、他ページでは必要ありません。

[削除するコード]
削除するメインビジュアルのコード

メインビジュアルの範囲を選択して、右クリックメニューの「削除」もしくは「Delete」キーで削除しましょう。

[削除後のソースコード]
削除後のメインビジュアル

メインコンテンツの削除

続いてメインコンテンツが記述されている範囲を削除します。
<section>から</section>までがメインコンテンツの中身です。

[削除するソースコード]
削除するソースコード

選択したら、該当のソースコードを削除しましょう。
右クリックメニューの「削除」もしくは「Delete」キーで削除することができます。

[削除後のソースコード]
削除後のソースコード

これでメインコンテンツのソースコードの削除は完了です。
「menu.html」を保存し、ブラウザで確認を行いましょう。

ブラウザで確認

ここまで作業したら、ブラウザで確認を行なってみましょう。
間違いがなければ、下図のように表示されるはずです。

ブラウザで表示した図

デザインがグチャグチャですね・・・。
なぜこのようになるかというと、不明な場所を参照しているからです。

「menu.html」と同じ階層に「style.css」や画像は存在しません。
また、「kodawari.html」や「tenpoannai.html」などの他ページは同じ階層にあるので、<a href="~~に「page」を付ける必要がありません。

不明な参照先

存在しないデータを読み込むことは出来ないので、CSSも適用されず、画像やリンク先も表示されません。

面倒ですが1つ1つ、参照先を修正してあげましょう。
こうすることで、適切にデータを参照することができます。

覚えておきたいポイント

正しい場所を指定しよう

参照先をキチンと指定しないと、CSSや画像、リンク先などを読み込むことができません。
「menu.html」などの他ページの場合、「style.css」は1つ上の階層にあるので「../」を付けて指定します。
画像も同じように1つ上の「img」フォルダ内にあるので「../」を付ける必要があります。

修正が必要な箇所の確認
« 前のページへ スタイルの追加と確認

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。