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

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

入力の確認とまとめ

これまでの入力内容の確認とまとめ

さてこれで「さきちんカフェ」の土台となる2カラムレイアウトが完成しました!
あとはそれぞれのスタイルに、画像やテキストをはめ込んでいく作業となります。

ここで一度、完成した2カラムレイアウトをブラウザで確認してみましょう。

ブラウザで確認してみよう

さきほどの「index.html」をブラウザで確認すると、以下画像のように表示されます。

ブラウザで確認した画像

茶色の横棒があるだけで、パッと見た感じとても土台となる2カラムレイアウトに見えませんね。

※もし上記画像と違うように表示されていたら、どこか間違っている箇所があります。もう一度見なおしてみましょう。

なぜこのように表示されるかというと、CSSは「border」や「background-color」などの視覚的に確認できる要素を指定しない限り、ブラウザ上に表示されないのです。
これまでに作成したスタイルは視覚的に確認できる要素を指定していないので、データは存在はしているのですが、目に見えて表示はされません。

「footer」は「background-image」を指定しているので、指定した画像が表示されています。(茶色い横棒)

ソースコードの確認

視覚的に確認できないため、キチンと入力できているかソースコードを表示して確認してみましょう。

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

ソースコードの確認

ソースコードが表示されたら、問題なく入力できているか確認しましょう。
ここで間違えていると、このあとの作業が進まずホームページを完成させることができません。

少し面倒かと思いますが、もう一度見なおしてみてください。

[HTMLの記述例]
HTMLファイルの完成例
[CSSの記述例]
CSSファイルの完成例

確認のテクニック

ちなみに、作成したスタイルに「border」や「background-color」などを追加すると、ブラウザで見る際に視覚的に確認できて便利です。

これまでの2カラムレイアウトを視覚化すると、以下のような表示になります。

視覚化のテクニック

【mainimg】【contents】【sidenavi】に「background-color:#CCC;」を追加し、【contents】【sidenavi】に<p>タグを入れてみました。

こうすることで、パッとみただけで構造がわかりやすくなります。
余裕があったら、少し試してみてください。
※試した後は、追加したプロパティを消すのを忘れないようにしましょう。

これはプロの制作現場などでも利用されるテクニックなので、覚えておくと便利です。

覚えておきたいポイント

確認と見直しはこまめに

どんな時にでも、必ず見直し・確認するクセをつけておきましょう。
誰だってミスや見落としがあります。1つ1つ、作業が完了するたびにソースコードの見直しやブラウザでの確認を行うようにしましょう。

ソースコードが多くなってくると、どこにミスがあるのかわからなくなり原因を探すのに非常に時間がかかってしまいます。
そうならないためにも、こまめに保存&見直しをおすすめします。

【STEP.4】トップページの制作
« 前のページへ レイアウトを組み立てる

コンテンツの一覧

学習ページの一覧ナビ

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

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

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

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

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

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

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

規約やお問い合わせなど

ご利用案内
ご利用案内

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

FAQ
FAQ

よくあるご質問など。

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

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

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

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

運営者情報
運営者情報

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

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

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