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

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

contentsスタイルの作成

contentsスタイルの役割

メインのコンテンツを表示する「contents」スタイルを作成しましょう。

「contents」にはホームページのメインとなる内容が表示されます。
例えばトップページであれば、ホームページやお店の紹介文、更新情報、各ページへの案内などが表示されます。

コンテンツスタイルの位置

トップページ以外でも、そのページのメインとなる内容が表示されるエリアです。

メニューページであればメニューの一覧、こだわりページではお店のこだわりやPRポイントについて、店舗案内では詳細な店舗情報などが表示されます。

覚えておきたいポイント

横並びに指定するスタイル

contentsスタイルは後ほど作成するsidenaviスタイルと一緒に横並びに指定するスタイルです。
必ず、floatを指定するのを忘れないようにしましょう。

contentsスタイルの作成

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

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

step.1

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

#contents {

}

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

step.2

次に、プロパティを入力します。
「contents」では表示幅が横幅615pxで固定されます。
なので、width:615px;と入力しましょう。

#contents {
width:615px;
}

step.3

最後に左方向に回りこみ処理をさせるためにfloat:left;を入力します。

#contents {
width:615px;
float:left;
}

これでcontentsスタイルの完成です。

[CSSの記述例]
スタイルの入力例

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

覚えておきたいポイント

横幅の値に注意

横幅の計算を間違わないように気をつけましょう。
例えば「さきちんカフェ」では横幅の最大が960pxとなります。
この範囲内にコンテンツが収まるよう計算して幅を指定しないと、レイアウトが崩れてしまいます。

全横幅960pxのうち、今回の「contents」で615pxを使用するので、残りの横幅は345pxとなります。

sidenaviスタイルの作成
« 前のページへ mainimgスタイルの作成

コンテンツの一覧

学習ページの一覧ナビ

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

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

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

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

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

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

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

規約やお問い合わせなど

ご利用案内
ご利用案内

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

FAQ
FAQ

よくあるご質問など。

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

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

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

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

運営者情報
運営者情報

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

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

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