ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心！
サイドナビの内部を構成するスタイルを作成しましょう。こちらも工数が多いので、スタイル作成とHTML作成を分けて説明しています。
サイドナビには補足情報やバナー、各ページへのリンクなどが表示されます。
[サイドナビの完成図]
作業の流れは、まずは必要なスタイルを作成し、その後HTMLファイルを編集しテキストや画像を挿入します。
最後に文書構造要素でマークアップします。
なお、上記の完成図にはリンクが設定されていますが、これらは後ほどまとめて設定します。
サイドナビには各ページへのリンクや補足情報、バナーなどが入ります。
サイドナビがあることで利用者は別ページに移動したり、ホームページ内のコンテンツを把握することができます。
サイドナビも工数が多いので、スタイル作成ページとHTML作成ページで分けて説明しています。こまめに作業内容を保存しながら学習を進めましょう。
それではまず、必要なスタイルを用意しましょう。
サイドナビの構成に必要なスタイルは「#goannai」「.sidebox」の2つとなります。
サイドナビの大枠となる「#sidenavi」スタイルはすでに「sidenaviスタイルの作成」で作成しているので、それ以外のスタイルを作成しましょう。
まずは「#goannai」を作成します。
「#goannai」は「ご案内」の部分に適用するスタイルです。
少し文字を大きくして、下線や色をつけて装飾します。
文字サイズを1.2emに指定し、2px・#C30の直線、下方向に領域間余白を15px、文字色を#C30にします。
[CSSの記述例]
入力が完了したら、間違いがないか確認して保存しましょう。
次は「.sidebox」を作成しましょう。
「.sidebox」には画像や他ページへのリンクが入ります。
横幅330px、縦幅130px、下方向に領域間余白を15px指定します。
なお、「.sidebox」は何度も使用するので「.（ドット）」を付ける必要があります。
[CSSの記述例]
これでサイドナビ構成に必要なスタイルは全て完成です。
最後に入力ミスがないかよく確認し、「style.css」を保存しましょう。
次はHTMLファイルを編集して、サイドナビを完成させましょう！
「sidenaviスタイルの作成」で作成した「#sidenavi」でサイドナビの大枠を作り、内部に今回作成する「#goannai」「.sidebox」を入れ、サイドナビを構築しています。
安心してホームページを運営するための心がけ。
よく使う、HTMLの特殊文字・記号の一覧表。
HTML・CSSで使えるカラーコードの一覧表。
当サイトをご利用になる前に、必ずご確認ください。
よくあるご質問など。
さきちんWEBについてのお問い合わせはこちらから。
個人情報管理とWeb広告配信について。
さきちんWEBの管理・運営者、さきちんについて。
さきちんWEBのサイトマップ。