ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心！
メインのコンテンツを表示する「contents」スタイルを作成しましょう。
「contents」にはホームページのメインとなる内容が表示されます。
例えばトップページであれば、ホームページやお店の紹介文、更新情報、各ページへの案内などが表示されます。
トップページ以外でも、そのページのメインとなる内容が表示されるエリアです。
メニューページであればメニューの一覧、こだわりページではお店のこだわりやPRポイントについて、店舗案内では詳細な店舗情報などが表示されます。
contentsスタイルは後ほど作成するsidenaviスタイルと一緒に横並びに指定するスタイルです。
必ず、floatを指定するのを忘れないようにしましょう。
それではcontentsスタイルを作成していきましょう。
まずはセレクタ名を入力します。
「contents」というスタイルを作るので、セレクタ名は「contents」とします。
}
なお、「contents」は一度しか使わないので、「#」とします。呼び出す際には<div id="contents">で呼び出す必要があるので注意しましょう。
次に、プロパティを入力します。
「contents」では表示幅が横幅615pxで固定されます。
なので、width:615px;と入力しましょう。
最後に左方向に回りこみ処理をさせるためにfloat:left;を入力します。
これでcontentsスタイルの完成です。
[CSSの記述例]
入力が完了したら、「UTF-8N」で上書き保存しておきましょう。
これで「contents」スタイルの完成です。
横幅の計算を間違わないように気をつけましょう。
例えば「さきちんカフェ」では横幅の最大が960pxとなります。
この範囲内にコンテンツが収まるよう計算して幅を指定しないと、レイアウトが崩れてしまいます。
全横幅960pxのうち、今回の「contents」で615pxを使用するので、残りの横幅は345pxとなります。
安心してホームページを運営するための心がけ。
よく使う、HTMLの特殊文字・記号の一覧表。
HTML・CSSで使えるカラーコードの一覧表。
当サイトをご利用になる前に、必ずご確認ください。
よくあるご質問など。
さきちんWEBについてのお問い合わせはこちらから。
個人情報管理とWeb広告配信について。
さきちんWEBの管理・運営者、さきちんについて。
さきちんWEBのサイトマップ。