ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心！
「さきちんカフェ」の基本枠となる「wrap」スタイルを作成しましょう。
「wrap」スタイルは、ホームページの縦幅・横幅・位置を決めるためのスタイルです。
横幅を960pxに指定し、左右の幅を自動的に調整してコンテンツが画面中央になるよう整えてくれます。
まずはテキストエディタを起動し、さきほど「cafe」フォルダ内に保存した「style.css」を読み込みましょう。
ファイルメニューから、「開く」をクリックします。
次に「ファイルの種類」から「CSSファイル」を選択します。
CSSファイルが表示されますので、選択して「開く」をクリックします。
これでCSSファイルの読み込みは完了です。
[開かれたstyle.cssの画面]
wrapに横幅960pxを指定し、margin:0 auto;を指定しています。
margin:0 auto;と入力することにより自動的に左右の余白が調整され、中央寄せで表示されます。
それでは、基本枠となるwrapスタイルを作成していきましょう。
まずはセレクタ名を入力しましょう。
「wrap」というスタイルを作るので、セレクタ名は「wrap」とします。
}
なお、「wrap」は一度しか使わないので、「#」とします。呼び出す際には<div id="wrap">で呼び出す必要があるので注意しましょう。
次に、プロパティを入力します。
「wrap」では自動的にコンテンツを画面中央に調整させるので、margin:0 auto;を入力します。
margin:0 auto;を入力することにより、中央揃えにすることができます。
横幅を960pxに指定するので、width:960px;も入力しましょう。
入力が完了したら、「style.css」ファイルは「UTF-8N」で保存しておきましょう。
これで「wrap」スタイルの完成です。
保存する際には「UTF-8N」で保存するのを忘れないようにしましょう。
また、入力中はこまめに保存するように心がけましょう。
突然の停電やパソコンの故障などでデータが壊れてしまうと、はじめから作り直しになってしまいます…。
安心してホームページを運営するための心がけ。
よく使う、HTMLの特殊文字・記号の一覧表。
HTML・CSSで使えるカラーコードの一覧表。
当サイトをご利用になる前に、必ずご確認ください。
よくあるご質問など。
さきちんWEBについてのお問い合わせはこちらから。
個人情報管理とWeb広告配信について。
さきちんWEBの管理・運営者、さきちんについて。
さきちんWEBのサイトマップ。