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

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

店舗案内ページのスタイルを用意する

新規スタイルを作成しよう

それでは、店舗情報を表示する表(table)に適用するスタイルを作成しましょう。
まずは「style.css」を開きます。

「.tablestyle」スタイルの作成

「.tablestyle」は横幅593px、テキストを左寄せにするスタイルです。
これを適用することにより、「table」の横幅が593pxに設定され、全てのテキストが左寄せとなります。

step.1

まずはセレクタを入力しましょう。
「style.css」ファイルに以下コードを入力します。

.tablestyle {
}

step.2

次に、横幅の指定とテキストの左寄せを入力します。

.tablestyle {
text-align:left;
width:593px;
}

これで「.tablestyle」の完成です。
入力内容に間違いがないか確認しましょう。

[CSSの記述例]
.tablestyleスタイルの完成図

「.tablestyle td」スタイルの作成

次は「.tablestyle td」を作成しましょう。
このスタイルはさきほど作成した「.tablestyle」の「td」に適用されるスタイルとなり、「td」の下方向に#CCC、1pxの破線を表示します。

step.1

まずはセレクタを入力しましょう。

.tablestyle td {
}

step.2

次にborder-bottomを入力します。

.tablestyle td {
border-bottom:dashed 1px #CCC;
}

これで「.tablestyle td」の完成です。
入力内容に間違いがないか確認しましょう。

[CSSの記述例]
「.tablestyle td」スタイルの完成図

「.tablestyle th」スタイルの作成

最後に「.tablestyle th」を作成しましょう。
このスタイルは「.tablestyle」の「th」に適用されるスタイルとなります。
「th」の背景画像を#630に指定し、テキストの色を#FFF、中央寄せにします。

step.1

まずはセレクタを入力しましょう。

.tablestyle th {
}

step.2

次に背景色の指定、テキストの色、テキストの中央寄せを指定します。

.tablestyle th {
background-color:#630;
color:#FFF;
text-align:center;
}

これで「.tablestyle th」の完成です。
入力内容に間違いがないか確認しましょう。

[CSSの記述例]
「.tablestyle th」スタイルの完成図

これで全てのスタイルの完成です。
次のページでは店舗案内ページを完成させましょう!

覚えておきたいポイント

表のスタイルの作成

ここで作成するスタイルは、全て表に適用されるスタイルとなります。
スタイルを適用しなくても表としての機能に問題はないのですが、見栄えは大きく劣ります。

店舗案内ページの組み立て
« 前のページへ 店舗案内ページの確認

コンテンツの一覧

学習ページの一覧ナビ

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

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

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

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

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

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

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

規約やお問い合わせなど

ご利用案内
ご利用案内

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

FAQ
FAQ

よくあるご質問など。

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

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

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

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

運営者情報
運営者情報

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

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

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