×

[PR]この広告は3ヶ月以上更新がないため表示されています。
ホームページを更新後24時間以内に表示されなくなります。

ホームページの作り方 >> ホームページ作成編 >> bodyの設定1

ホームページ作成編 07.bodyの設定1

スタイルシートは画面表示に関する色々な設定が出来ます。
又、その目的がHTMLとは異なるのでHTMLのタグとは違った書き方をします。
でも、難しいことはありません。
ゆっくりしっかり理解していきましょう!

CSSファイルで壁紙の設定をしよう!!

見た目の良さはまず全体の構成を考えることから始めましょう。
全体のバランスが整ってないと、それぞれの部品がどんなに綺麗でもなんかちぐはぐした感じになっちゃいますね!
「木を見て森を見ず」なんてことにならない為にも最初に森を見渡しましょう!!
内容(コンテンツ)はHTMLで、スタイルはCSSで・・・
でも、それを決めていくのはあなたです!!

1.CSSの書き方を理解しよう!

それでは、いよいよあなたのホームページに手を加えていきましょうか!
手始めにまず、壁紙を設定してみましょう。
壁紙は、前のページ で取得したあの素材です。
名前は「kabe03.gif」でしたよね。

1-1.壁紙を設定しよう!

「hommepage」フォルダの中の「style.css」ファイルをダブルクリック
出てきた「style.css - メモ帳」に下の通り打ち込んで上書き保存してください。
例よってコピーアンドペーストでも全然かまいません。
例によって赤い字のところは、書き換えてもいいところです。
(でも理解してからにしましょうね!)

body {
 background-image: url(./img/kabe03.gif);
}

するとあなたのホームページは、どうなっているでしょう?
変化がない人は、ブラウザの「更新」ボタンを押してみてね!
←IEで言うとこのぼたんですよ。上の方にあると思いますが・・

先ほどまで、真っ白だった画面一面にあの画像がちりばめられていますね。
ちょっと字が見にくくなっちゃたけど、あまり細かいことは気にしてはいけません!
(・・・ってあまり細かくないか)
それはさておき、これで、あなたのフォルダにもCSSファイルが出来ました。

そう CSSにはHTMLのようなhead部とかbody部もなく、いろんな宣言文もありません!
このような記述をどんどん増やしていくだけです。

・・・意外と簡単かも・・・
それでは、一体どういう規則に沿って書いていくのかを知っておきましょう!
CSSは下のように、

○○ { △△ : ××; }

という構造になっています。
(あなたのCSSファイルは見やすいように改行してあるだけです。)
あなたのCSSファイルに当てはめると

○○bodyセレクタ
△△background-imageプロパティ
××url(./img/kabe03.gif)

○○の部分を「セレクタ」
△△の部分を「プロパティ」
××の部分を「値」
といいます。

・・・この名前がとっつきにくいんですよねぇ
なので、このホームページでは、○○、△△、××と呼ぶことにします。
ホームページを作るうえでは、何の支障もないですから!
でも、一応こんな名前だってことは覚えておきましょう。
そして、

{  ・・・「の部分の、」
:  ・・・「は、」
;  ・・・「だよ」
}  ・・・「以上。」

と言い換えてみましょう。
○○(セレクタ)の及ぶ範囲を{ と }で囲みます。

○○ の部分の、△△ は、×× だよ 以上。 

「body」の部分の「background-image」は「url(./img/kabe03.gif)」だよ 以上。

なんとなく分かるような気がしませんか!
「body」これは、htmlファイルに書きましたよねっ!画面に表示する部分の最初から最後までを<body>〜</body>で囲むんでしたよね!

「background-image」は、背景画像という意味です。

「url(./img/kabe03.gif)」は、場所と名前はカッコの中のこれですよという意味です。


2.相対パスと絶対パスって!

2-1.相対パスについて

・・・はい、そうですよね。「./img/kabe03.gif」が分かりませんよね。

/   ・・・「フォルダの中の」
./   ・・・「自分がいるフォルダの」
../  ・・・「自分がいるフォルダの(「../」の数だけ)上のフォルダの中の」

と言い換えてみましょう。(言い換えるのがすきなんです、私・・・)

まずこの場合「自分」は、「style.css」です。だって「style.css」に「./img/kabe03.gif」は、書かれてあるんだから!

つまりこの例では
自分(style.css)がいるフォルダ「homepage」の中の「img」フォルダの中の「kabe03.gif」
という意味になります。

もし今後、複数スタイルシートを作ったり、後に出てきますが、HTMLで画像を表示する時も場所と名前の指定は同じ方法なのですが、その時は、その指定する文章(htmlではタグ、スタイルシートでは、値)が書かれているファイルが「自分」です。

今自分がいるところ・・・「パソコンの前」では、ないんですよ。

もし、「img」フォルダを作らず「homepage」フォルダに直接「kabe03.gif」を置いたとしたら、
「./kabe03.gif」ということになります。
(自分がいるフォルダ「homepage」の中の「kabe03.gif」)

又、「kabe03.gif」は「img」フォルダの中にあり、「style.css」も「img」フォルダの中に置いたとしても
「./kabe03.gif」ということになります。
(自分がいるフォルダ「img」の中の「kabe03.gif」)
書き方は、同じだけど意味が微妙に異なるんですんねぇ。

更に、「kabe03.gif」は「img」フォルダの中にあり、「stairu」というフォルダを「homepage」フォルダの中に作り「stairu」フォルダに「style.css」をおいた場合
「../img/kabe03.gif」となります。
(自分がいるフォルダ「stairu」の1つ上のフォルダ「homepage」の中の「img」フォルダの中の「kabe03.gif」)

更にフォルダを作った場合は「../」を付け足していきます。
例:「../../img/kabe.gif」(自分がいるフォルダの二つ上のフォルダの中の「img」フォルダの中の「kabe03.gif」)

このように、自分のいる位置に対して、対象がどの位置にあるのかを示しているのを相対パスといいます。

2-2.絶対パスについて

ちょっとというか、大分話がそれてますが、ついでに「絶対パス」のお話を・・・
絶対パスとは、自分がどこにいるかは関係なくて対象が、どこにあるかということです。
つまり

http://(近い将来決まるあなたのホームページアドレス)/img/kabe03.gif

という書き方になります。

あなたのホームページから他のホームページ(例えば、このホームページ)へリンクを張るときは「絶対パス」しか使えません。

あなたのホームページ内でのリンクや画像の表示の時は、両方使えますが、通常「相対パス」を使っています。

パスの話がだいぶ、長くなっちゃったので、続きは次のページってことで・・・

マグカップM ■トリさん■  ホワイト/ライトグレー

サイズ:約
 口径78o×高さ90o
重 量:約260g
全容量:約300t
材 質:陶器


<送料>
ゆうパック 一律500円
沖縄県1000円

本文中にも出てきていますが、今回目標とするホームページの画像ファイルは「img」というフォルダを作ってそれに入れています。
これは、別にフォルダを作る練習や、相対パス、絶対パスの話をしたかったからではなく、その方が「homepage」フォルダの中がすっきりするし分かりやすいからなのです。
画像の多いホームページや数十ページから百ページ超のホームページを作ろうとした時、HTMLファイルやCSSファイル、画像ファイル等を全て1つのフォルダに入れておくとフォルダの中がごちゃごちゃして、わけが分からなくなってしまいます。
例えば、1つの引き出しの中にノート、鉛筆、消しゴム、本、カッターナイフ、めがね、ボールペン、はさみ、小銭etc...机にありそうなもの全部入れておいても、いざそれを使おうとしても「どこにあるかわからない、あるかないかも分からない」 なんてことになっちゃいますよね!
ホームページの世界では、基本的に「index.html」は、トップのフォルダ(あなたのホームページでは、「homepage」フォルダ)に直接おかなくてはなりませんが、他のファイルは、自分で分かりやすい様にフォルダを色々作ってファイルを整理して置いておきましょう。
ちなみに画像をおくファイルだからといって必ずフォルダの名前を「img」とする必要はありませんし、ひとつにしなくちゃいけないってこともありません。別に「syasin」でもいいし「okiniiri」でもかまわないのです。
ラーメンの写真は「raamen」、うどんの写真は「udon」とそれぞれフォルダを分けて使っても全く問題ありません。HTMLファイルもグループ分けして、各フォルダに入れておいてもいいのです。
勿論、全くフォルダを使わなくてもいいんです。
ただその場合、プロバイダ(ホームページスペースを貸してくれる業者さん)によっては、1つのフォルダの重さ(そのフォルダにどれだけファイルやフォルダが詰まっているか)に制限を設けているところもあるので、注意してください。
まあ分かりやすいように適当にフォルダを作って分けておくのが賢明ですね。
本文中の「相対パス」の書き方さえ間違えなければ、大丈夫です。
ただ、全く関係のない名前を付けても後から自分で分からなくなっちゃうよってことだけです。


 
別窓で開く便利な検索窓です。どうぞご利用下さい!
カスタム検索