ステップごとに覚えよう!

ステップ1
まずはここ。ホームページとは何か?~SEOの意味について解説。


ステップ2
ホームページを作る上での準備について解説。


ステップ3
htmlとは?書き方や確認の仕方について解説。


ホームページ作成 メニューリンク スタイルシート(css)を使ってみよう

前回は、それぞれのページにメニューリンクを追加していく作業をお話しました。

本日は、そのメニューのリンクがしっかり貼られ設定されているかの確認と、それらのメニュー部分にちょっとした装飾を施すやり方をご紹介していきたいと思います。

1、リンク先をブラウザで確認してみよう

まず、前回のメニューリンクがしっかり貼られ、すべてのページにちゃんと行き来できるかを確認していきます。
文章や画像だけでは、表現が難しかったので、簡単ではありますが確認している模様を動画としてご用意しました。

※ファイルの開き方・保存方法、ブラウザでの確認方法などは省略しています。以前のページをご参考にして下さい。

※音声は出ません。

このようにしっかりとリンク設定ができ、それぞれのページに行き来できれば問題ありません。

2、スタイルシートを使って装飾?!

この「40代・50代からのホームページ作成」ウェブサイトでは、基本的な概要や基礎のhtmlを学ぶための初心者の方向けホームページとしてご紹介しております。

いきなり難しいことをお話してしまうと途中で挫折してしまう恐れがあるためです。

ですので、スタイルシート(CSS)はあえて触れないようにと考えておりましたが、
「基礎ばかりでも飽きてしまう」と言う方の為に、
ほんの一部ではありますが、スタイルシートを取り入れています。

まずは、こちらの動画をご覧ください。
indexファイル(トップページ)のみ、メニューの部分にスタイルシート(CSS)を使い簡単なデザインを施しています。

※音声は出ません。

こういった文字の色を変えたり、マウスをかさねたときに簡易的な動きを見せたりということが、スタイルシート(CSS)を使うことで実現できます。

3、スタイルシートを使ってみよう

実際に使ってみましょう。

※今回、こちらのウェブサイトでは詳しい解説はいたしませんが、初心者の方向けのスタイルシート講座(仮名)も訪問者さまのアクセス数やご意見などによって公開する予定ではおります。

header内に以下のように記述します。

<head>
<style type="text/css">
a{color:#000000;}
a:hover{color:#565656;text-decoration:none;}
</style>
</head>

●参考イメージもご覧ください。

このように記述した後、ファイルの保存を忘れずにしていただき、ローカルブラウザにてご覧ください。同じように文字の色が変わり、マウスオーバー時に下線が消えればスタイルシート(CSS)が正常に機能していることになります。

※参考イメージではindexファイルのみですが、他htmlファイルにも同じように記述していただくことで、他ページも対応できます。

他にもスタイルシートを使用することで、さまざまな装飾や表現が可能になります。
ただ、html基礎が必要となってきますので少しづつ身に付けて頂ければと思います。

4、事項について

次回はステップ8に入り、いよいよホームページ公開に向けての作業になります。
今まで参考にしていただいた中で、少しでも不安材料が残る部分などある場合は、再度そのページに戻り復習して頂ければと思います。