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

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

サイドナビの構成スタイルを作成

サイドナビの内部スタイルを用意しよう

サイドナビの内部を構成するスタイルを作成しましょう。こちらも工数が多いので、スタイル作成とHTML作成を分けて説明しています。

サイドナビには補足情報やバナー、各ページへのリンクなどが表示されます。

[サイドナビの完成図]
サイドナビの完成図

作業の流れは、まずは必要なスタイルを作成し、その後HTMLファイルを編集しテキストや画像を挿入します。
最後に文書構造要素でマークアップします。

なお、上記の完成図にはリンクが設定されていますが、これらは後ほどまとめて設定します。

覚えておきたいポイント

サイドナビの役割

サイドナビには各ページへのリンクや補足情報、バナーなどが入ります。
サイドナビがあることで利用者は別ページに移動したり、ホームページ内のコンテンツを把握することができます。

HTMLとCSSで分けて説明

サイドナビも工数が多いので、スタイル作成ページとHTML作成ページで分けて説明しています。こまめに作業内容を保存しながら学習を進めましょう。

必要なスタイルを用意する

それではまず、必要なスタイルを用意しましょう。
サイドナビの構成に必要なスタイルは「#goannai」「.sidebox」の2つとなります。

サイドナビの大枠となる「#sidenavi」スタイルはすでに「sidenaviスタイルの作成」で作成しているので、それ以外のスタイルを作成しましょう。

#goannaiの作成

まずは「#goannai」を作成します。
「#goannai」は「ご案内」の部分に適用するスタイルです。
少し文字を大きくして、下線や色をつけて装飾します。

スタイルの適用図
[入力するコード]
#goannai {
font-size:1.2em;
border-bottom:solid 2px #C30;
margin:0px 0px 15px 0px;
color:#C30;
}

文字サイズを1.2emに指定し、2px・#C30の直線、下方向に領域間余白を15px、文字色を#C30にします。

[CSSの記述例]
CSSの入力例

入力が完了したら、間違いがないか確認して保存しましょう。

.sideboxの作成

次は「.sidebox」を作成しましょう。
「.sidebox」には画像や他ページへのリンクが入ります。

sideboxの表示例
[入力するコード]
.sidebox {
width:330px;
height:130px;
margin-bottom:15px;
}

横幅330px、縦幅130px、下方向に領域間余白を15px指定します。

なお、「.sidebox」は何度も使用するので「.(ドット)」を付ける必要があります。

[CSSの記述例]
sideboxのスタイル記述例

これでサイドナビ構成に必要なスタイルは全て完成です。
最後に入力ミスがないかよく確認し、「style.css」を保存しましょう。

次はHTMLファイルを編集して、サイドナビを完成させましょう!

覚えておきたいポイント

サイドナビの構成

sidenaviスタイルの作成」で作成した「#sidenavi」でサイドナビの大枠を作り、内部に今回作成する「#goannai」「.sidebox」を入れ、サイドナビを構築しています。

サイドナビの組み立てと確認
« 前のページへ メインコンテンツの組み立てと確認

コンテンツの一覧

学習ページの一覧ナビ

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

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

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

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

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

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

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

規約やお問い合わせなど

ご利用案内
ご利用案内

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

FAQ
FAQ

よくあるご質問など。

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

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

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

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

運営者情報
運営者情報

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

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

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