初心者向け
ホームページの
作り方講座

cssファイルを少し編集

ちょっとhtmlから離れてしまったので思い出して下さい。
index.htmlファイルに<div id="container">~の追加をしたのに画面に変化が現れなかったので、デザイン用のcssファイルを作ったのでしたよね。
では、containerのお弁当箱にスタイルを設定してみる事にしましょう。

cssファイルにスタイル用のタグを追加してみる

先ほど作ったばかりのcssフォルダ内のstyle.cssをTeraPadアイコンに重ねて開きます。
>> 開き方を忘れた人はこちら

開いたら、container用のタグを追加します。

↓手打ちに自信がない人は以下のタグをコピペ。

containerの頭に「#」というマークが入っていますが、これはhtml側の「id」の文字を示すものです。htmlにidがある場合はcssでは#に置き換えるものと単純に考えておいてOKです。
今回はhtml側が<div id="container">だったので、css側で#containerになりました。
その後のカッコ{ }中にcontainerに対するスタイルを記入していく事になります。
補足ですが、div#containerの書き方でもいいのですが、divタグは沢山存在するので当サイトではカットして表記しています。

スタイルには様々な種類があるのですが、まずは背景色をつけてみましょう。

containerに背景色をつけてみる

どの部分がお弁当箱なのか見る為、containerに背景色をつけてみましょう。
背景色の指定方法は、
background: (色); という設定方法になります。

()はblackやredなどでも入力できますが、一般的に使われるのは頭に「#」がついたWEB用のカラーコードです。 「WEB カラーコード表」や「html カラーコード」などで検索すると色の見本を置いた専門サイトが検索できると思いますので探してみて下さい。

今回は、淡いグレー色(#d2d2d2)をつけてみる事にします。タグに置き換えてみると、
background: #d2d2d2; です。半角文字で入力して下さい。

↓手打ちに自信がない人は以下のタグをコピペ。

貼り付けたらindex.htmlをクリック又はダブルクリックしてプレビューしてみましょう。以下のように、文字の背景に薄いグレー色が出ていたら成功です。

しばらくこのindex.htmlのプレビューを続けるので、ウィンドウは開いたままにしておきます。

containerの幅を設定してみる

上記のサンプルだと、ウィンドウ幅に対してほぼ100%で表示されてしまっていますね。
これを固定サイズで設定してみるようにします。
幅の指定は、
width: (幅); となります。 幅の単位にcmなどありますが、パソコン上で大きさが変わってしまうので、今回はpxという単位を使う事にします。

今回はひとまず990pxぐらいにしてみましょう。タグに置き換えてみると、
width: 990px; です。半角文字で入力して下さい。

↓手打ちに自信がない人は以下のタグをコピペ。

改めてindex.htmlを見てみますが、再読み込みする必要がありますので、以下画面を参考に更新してみましょう。ご利用のパソコンによってボタンマークや位置が異なりますが、画面上部のバーの近くに矢印のついたマークがあると思いますので探してみてクリックしてみて下さい。

以下のように、背景のグレー色部分の幅が先ほどより狭くなっているのが確認できればOKです。

containerを画面の中央に配置させる

現在、containerは画面の左側によってしまっていますので、これを左右中央に配置させる設定をします。
使うタグは、
margin: 0px auto; です。「0px auto」と設定すると左右中央に表示されるので覚えておきましょう。
このタグをcssファイルに貼り付けて下さい。

↓手打ちに自信がない人は以下のタグをコピペ。

改めてindex.htmlを更新して見てみましょう。
以下のように、画面中央に配置されていればOKです。

containerに枠線を入れてみる

枠線のタグは、
border: (幅) (線種) (色); という設定方法になります。(幅)(線種)(色)の間には半角スペースを入れます。
()は例えば1pxなど。
(線種)は、直線(solid)や点線(dotted)や破線(dashed)など色々あります。
今回は1pxの細い直線を黒(#000)で入れてみる事にします。タグに置き換えてみると、
border: 1px solid #000; となります。それぞれ半角スペースで区切るのをお忘れなく。

↓手打ちに自信がない人は以下のタグをコピペ。

改めてindex.htmlを更新して見てみましょう。以下のように枠線が入っていれば成功です。

一応これでホームページ用のお弁当箱の存在を見れるようになりましたね。
次はhtmlに戻って中身を詰め込んでいきます。

次のステップは…

「トップページの編集の続き」です。頑張りましょう!