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

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

ソースコードの確認

ソースコードを見てみよう

ページの確認が終わったら、次はソースコードを見てみましょう。
「さきちんカフェ」のHTML記述がどうなっているのかを確認します。

ソースコードの確認方法

ソースコードを確認するには、「右クリック」メニューから「ソースの表示」をクリックします。

ソースコードの確認方法

トップページやメニューページ、こだわりページ、店舗案内ページのソースコードを確認してみましょう。

トップページのソースコード

以下はトップページのソースコードの全体図です。

ソースコードの全体図

このままでは小さくて見づらいので、1つ1つ拡大して確認して見てみましょう。

宣言文からHeadセクション

宣言文とHeadセクションのソースコード

宣言文からHeadセクションには「文字コード」「ページのタイトル」「HTMLファイルとCSSファイルの紐付け」「未対応ブラウザ用スタイル」が入力されています。

ヘッダー

ヘッダーのソースコード

ヘッダーには<header></header>が入り、その中に<h1>要素、ロゴマークの画像が入っています。

メニュー

メニューのソースコード

メニューには<nav>要素が入り、各ページへのリンクが配置されています。

メインビジュアル

メインビジュアルのソースコード

メインビジュアルには、その名の通りメインとなる画像が配置されています。
他のページではこのメインビジュアルのソースコードを削除しています。

メインコンテンツ

メインコンテンツのソースコード

メインコンテンツにはホームページの更新情報、「こだわり」ページの紹介とリンク、「店舗案内」ページの紹介とリンクが配置されています。

なお、他のページはこの「メインコンテンツ」を書き換えているだけです。

サイドナビ

サイドナビのソースコード

サイドナビには画像が配置され、それぞれのページへリンクされています。
また、<aside>要素が入り、予約やテイクアウトの情報が記載されています。

フッター

フッターのソースコード

フッターにはコピーライトが入ります。

覚えておきたいポイント

個別にソースコードを見てみよう

ソースコードを確認するには、さきちんカフェにアクセスし何もない箇所で右クリックし、「ソースの表示」をクリックします。

一見、長くて複雑なソースコードに思えるかもしれませんが、1つ1つ分解して確認してみましょう。
それぞれはとても単純な構成をしています。

その他のページのソースコード

その他のページのソースコードも、基本的にはトップページのソースコードと共通です。

宣言文からHeadセクション、ヘッダー、メニュー、サイドナビ、フッターはすべて共通しており、「メインビジュアル」と「メインコンテンツ」が異なるだけです。

なので、メインビジュアルのソースコードを削除しメインコンテンツさえ書き換えてしまえば、他のページの出来上がりです。

書き変えるのみでOK

覚えておきたいポイント

他のページはトップページの流用でOK

メインビジュアル、メインコンテンツ以外は全て共通なので、メインビジュアルのソースコードを削除しメインコンテンツを書き換えてしまえば、他のページの出来上がりです。

【STEP.2】制作前の準備
« 前のページへ ホームページの確認

コンテンツの一覧

学習ページの一覧ナビ

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

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

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

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

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

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

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

規約やお問い合わせなど

ご利用案内
ご利用案内

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

FAQ
FAQ

よくあるご質問など。

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

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

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

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

運営者情報
運営者情報

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

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

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