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

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

sidenaviスタイルの作成

sidenaviスタイルの役割

サイドナビを表示する「sidenavi」スタイルを作成しましょう。

サイドナビとはメインコンテンツの右側に表示されるエリアで、他のページへのリンクやバナー、補足情報などが表示されます。

サイドナビのスタイル説明図

なお、左方向に15pxのmarginを指定しています。これによりcontentesスタイルとの間に適切な余白が生まれ、視覚的に見やすくなります。

覚えておきたいポイント

横幅+marginがサイドナビのサイズ

横幅330pxに左方向のmarginが15pxプラスされるので、サイドナビの実際のサイズは345pxとなります。

sidenaviスタイルの作成

それではsidenaviスタイルを作成していきましょう。

sidenaviスタイルの作成方法と手順

step.1

まずはセレクタ名を入力します。
「sidenavi」というスタイルを作るので、セレクタ名は「sidenavi」とします。

#sidenavi {

}

なお、「sidenavi」は一度しか使わないので、「#」とします。呼び出す際には<div id="sidenavi">で呼び出す必要があるので注意しましょう。

step.2

次に、プロパティを入力します。
「sidenavi」は横幅が330pxとなります。
なので、width:330px;と入力しましょう。

#sidenavi {
width:330px;
}

step.3

marginを指定しましょう。
「sidenavi」は左方向に15px領域間余白を指定するので、margin-left:15px;と入力します。

#sidenavi {
width:330px;
margin-left:15px;
}

これにより、contentsスタイルとの間に適切な余白が生まれます。

step.4

最後に、 左方向に回りこみ指定をしましょう。
float:left;を入力します。

#sidenavi {
width:330px;
margin-left:15px;
float:left;
}
[CSSの記述例]
画像タイトル

入力が完了したら、「UTF-8N」で上書き保存しておきましょう。
これで「sidenavi」スタイルの完成です。

覚えておきたいポイント

合計サイズに注意しよう

contentsスタイルは615px、sidenaviは横幅330px+左方向への余白15px=345pxとなります。
これらの値を合計すると、615+345=960となります。
960より大きくても小さくてもデザインが崩れてしまうので、合計サイズに間違いがないように気をつけましょう。

footerスタイルの作成
« 前のページへ contentsスタイルの作成

コンテンツの一覧

学習ページの一覧ナビ

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

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

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

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

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

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

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

規約やお問い合わせなど

ご利用案内
ご利用案内

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

FAQ
FAQ

よくあるご質問など。

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

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

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

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

運営者情報
運営者情報

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

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

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