ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心！
サイドナビを表示する「sidenavi」スタイルを作成しましょう。
サイドナビとはメインコンテンツの右側に表示されるエリアで、他のページへのリンクやバナー、補足情報などが表示されます。
なお、左方向に15pxのmarginを指定しています。これによりcontentesスタイルとの間に適切な余白が生まれ、視覚的に見やすくなります。
横幅330pxに左方向のmarginが15pxプラスされるので、サイドナビの実際のサイズは345pxとなります。
それではsidenaviスタイルを作成していきましょう。
まずはセレクタ名を入力します。
「sidenavi」というスタイルを作るので、セレクタ名は「sidenavi」とします。
}
なお、「sidenavi」は一度しか使わないので、「#」とします。呼び出す際には<div id="sidenavi">で呼び出す必要があるので注意しましょう。
次に、プロパティを入力します。
「sidenavi」は横幅が330pxとなります。
なので、width:330px;と入力しましょう。
marginを指定しましょう。
「sidenavi」は左方向に15px領域間余白を指定するので、margin-left:15px;と入力します。
これにより、contentsスタイルとの間に適切な余白が生まれます。
最後に、 左方向に回りこみ指定をしましょう。
float:left;を入力します。
入力が完了したら、「UTF-8N」で上書き保存しておきましょう。
これで「sidenavi」スタイルの完成です。
contentsスタイルは615px、sidenaviは横幅330px＋左方向への余白15px＝345pxとなります。
これらの値を合計すると、615＋345＝960となります。
960より大きくても小さくてもデザインが崩れてしまうので、合計サイズに間違いがないように気をつけましょう。
安心してホームページを運営するための心がけ。
よく使う、HTMLの特殊文字・記号の一覧表。
HTML・CSSで使えるカラーコードの一覧表。
当サイトをご利用になる前に、必ずご確認ください。
よくあるご質問など。
さきちんWEBについてのお問い合わせはこちらから。
個人情報管理とWeb広告配信について。
さきちんWEBの管理・運営者、さきちんについて。
さきちんWEBのサイトマップ。