×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
●実際に作ってみる
例えば，以下のようなページ．自分HPにおいてるサンプルですが（笑
http://planet.yukishigure.com/
緑基調のシンプルな構成です．
これを目指しましょう．
●HTML
これはほとんど一緒です．
上のようにdivで割ります．
<div id="wrapper">
<div id="header">
へっだー部分
</div>
<div id="contents">
<div id="main">
メインコンテンツ部分
</div>
<div id="sidenavi">
メニュー部分
</div>
</div>
<div id="footer">フッター（コピーライト）</div>
</div>
4回目はヘッダー（画像部分）を作ってみます．画像は↓です．
その前に，全体的なスタイルを定義だー
●CSS（全体的な部分）
* {
line-height: 150%;
font-weight: normal;
margin: 0px;
padding: 0px;
}
body {
font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", sans-serif;
font-size: 0.96em;
text-align: center;
color: #333333;
}
a {
color: #669900;
}
a:hover {
color: #006600;
text-decoration: none;
}
初登場「*セレクタ」です．
* は正規表現の1種で，任意の記号（0回以上の繰り返し）をあらわします．
俗にうワイルドカード，何でもあり．
CSSでこのように書くと，全部のスタイルに適用されます．
line-height: 150%;
font-weight: normal;
margin: 0px;
padding: 0px;
line-heightは行間をあらわします．150％，つまり行間を通常より1.5倍とります．文字が見やすくなりますよね．
font-weightは文字の太さや斜体とかを指定します．
マージンとパディングは0にして，詰めて書くようにします．
body：
font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", sans-serif;
font-size: 11px;
text-align: center;
color: #333333;
フォントファミリは文字種です．dreamweaverで指定すると，上みたいになります．
フォントサイズは11px
テキストアラインで中央にしているのは，wrapperを中央に持ってくるためです（4回目参照）
a {
color: #669900;
}
a:hover {
color: #006600;
text-decoration: none;
}
この2つは，リンク色と，リンクにカーソルを合わせたとき（マウスオーバー）の状態を定義しています．
この色を変えると，ホムペっぽくなります．テキストデコレーションでは，noneを指定しており，リンクの下線を表示しません．
ではラッパーとヘッダーです．
#wrapper {
width: 800px;
margin-right: auto;
margin-left: auto;
text-align: left;
}
#header {
background-image: url(images/header_bg.gif);
background-repeat: no-repeat;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCCCFF;
}
ラッパーは以前に紹介したように，幅800pxで作って，左右のマージンをautoにすることでwrapperを中央表示します．
文字まで中央揃えになると格好悪いので，左寄せにしておきます．
ヘッダーではバックグラウンドイメージで背景画像を指定することで，画像を背景として表示できます．
リピートは繰り返しなしのno-repeat
画像はヘッダ中のHTMLに<img>タグで設定します！
ボーダーは下側にちょこっと付けてみます．
とりあえず，ここまで．
※このままでは，#headerに高さを指定していないので，背景画像が途中で切れちゃいます．
これは後から直すので大丈夫．
ちなみに幅はwrapperの幅を引き継ぐので指定しなくてもOK．
例えば，以下のようなページ．自分HPにおいてるサンプルですが（笑
http://planet.yukishigure.com/
緑基調のシンプルな構成です．
これを目指しましょう．
●HTML
これはほとんど一緒です．
上のようにdivで割ります．
<div id="wrapper">
<div id="header">
へっだー部分
</div>
<div id="contents">
<div id="main">
メインコンテンツ部分
</div>
<div id="sidenavi">
メニュー部分
</div>
</div>
<div id="footer">フッター（コピーライト）</div>
</div>
4回目はヘッダー（画像部分）を作ってみます．画像は↓です．
その前に，全体的なスタイルを定義だー
●CSS（全体的な部分）
* {
line-height: 150%;
font-weight: normal;
margin: 0px;
padding: 0px;
}
body {
font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", sans-serif;
font-size: 0.96em;
text-align: center;
color: #333333;
}
a {
color: #669900;
}
a:hover {
color: #006600;
text-decoration: none;
}
初登場「*セレクタ」です．
* は正規表現の1種で，任意の記号（0回以上の繰り返し）をあらわします．
俗にうワイルドカード，何でもあり．
CSSでこのように書くと，全部のスタイルに適用されます．
line-height: 150%;
font-weight: normal;
margin: 0px;
padding: 0px;
line-heightは行間をあらわします．150％，つまり行間を通常より1.5倍とります．文字が見やすくなりますよね．
font-weightは文字の太さや斜体とかを指定します．
マージンとパディングは0にして，詰めて書くようにします．
body：
font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", sans-serif;
font-size: 11px;
text-align: center;
color: #333333;
フォントファミリは文字種です．dreamweaverで指定すると，上みたいになります．
フォントサイズは11px
テキストアラインで中央にしているのは，wrapperを中央に持ってくるためです（4回目参照）
a {
color: #669900;
}
a:hover {
color: #006600;
text-decoration: none;
}
この2つは，リンク色と，リンクにカーソルを合わせたとき（マウスオーバー）の状態を定義しています．
この色を変えると，ホムペっぽくなります．テキストデコレーションでは，noneを指定しており，リンクの下線を表示しません．
ではラッパーとヘッダーです．
#wrapper {
width: 800px;
margin-right: auto;
margin-left: auto;
text-align: left;
}
#header {
background-repeat: no-repeat;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCCCFF;
}
ラッパーは以前に紹介したように，幅800pxで作って，左右のマージンをautoにすることでwrapperを中央表示します．
文字まで中央揃えになると格好悪いので，左寄せにしておきます．
ヘッダーではバックグラウンドイメージで背景画像を指定することで，画像を背景として表示できます．
リピートは繰り返しなしのno-repeat
画像はヘッダ中のHTMLに<img>タグで設定します！
ボーダーは下側にちょこっと付けてみます．
とりあえず，ここまで．
これは後から直すので大丈夫．
ちなみに幅はwrapperの幅を引き継ぐので指定しなくてもOK．
PR
●回り込み
いわゆる段組．
図のようにブロックを左右に分割するとメインコンテンツを載せる部分とメニュー部分を分けることができます．
回り込ませるためには，2つのブロックに対してfloatを指定します．
float:left; とすると，左に回りこみ，
float:right; とすると，右へ回り込みます．
●HTML
<body>
<div id="contents">
<div id="main">ここにメインコンテンツを書く</div>
<div id="menu">ここにメニューを書く</div>
<div id="footer">copyrightとか書く</div>
</div>
</body>
●CSS
#contents {
background: #FFCC66;
width: 800px;
padding: 10px;
}
#main {
background: #FFFF66;
width: 600px;
float: left;
}
#menu {
background: #FF9900;
float: right;
width: 200px;
}
#footer {
clear: both;
background: #FFFFCC;
}
contentsは全体をくくる枠です．
幅を800pxでつくり，この中に幅600pxのメインコンテンツ部分と幅200pxのメニュー部分を用意．
mainにはfloat:leftで左へ回りこませ，menuにはfloat:rightで右へ．
！！回り込みを指定した場合は，それを解除する必要があります．
ここでは，footerに解除させます．それが clear:both の部分．
解除しないと，表示がおかしくなります．
よく使う手は
.clear {
clear: both;
}
のように，floatを解除するクラスを作って，回り込みをやめる部分に
<br class="clear">とかやる．
上のコードをコピペして作ればわかると思いますよ．
HTMLはbody内しかないけど（ぇ
linkかインポートしてください．
いわゆる段組．
図のようにブロックを左右に分割するとメインコンテンツを載せる部分とメニュー部分を分けることができます．
回り込ませるためには，2つのブロックに対してfloatを指定します．
float:left; とすると，左に回りこみ，
float:right; とすると，右へ回り込みます．
●HTML
<body>
<div id="contents">
<div id="main">ここにメインコンテンツを書く</div>
<div id="menu">ここにメニューを書く</div>
<div id="footer">copyrightとか書く</div>
</div>
</body>
●CSS
#contents {
background: #FFCC66;
width: 800px;
padding: 10px;
}
#main {
background: #FFFF66;
width: 600px;
float: left;
}
#menu {
background: #FF9900;
float: right;
width: 200px;
}
#footer {
clear: both;
background: #FFFFCC;
}
contentsは全体をくくる枠です．
幅を800pxでつくり，この中に幅600pxのメインコンテンツ部分と幅200pxのメニュー部分を用意．
mainにはfloat:leftで左へ回りこませ，menuにはfloat:rightで右へ．
！！回り込みを指定した場合は，それを解除する必要があります．
ここでは，footerに解除させます．それが clear:both の部分．
解除しないと，表示がおかしくなります．
よく使う手は
.clear {
clear: both;
}
のように，floatを解除するクラスを作って，回り込みをやめる部分に
<br class="clear">とかやる．
上のコードをコピペして作ればわかると思いますよ．
HTMLはbody内しかないけど（ぇ
linkかインポートしてください．
パソコンは使ってるほどゴミがたまっていきます．
ゴミ･･･不要なファイルやショートカット，レジストリなどイラナイ子
たまには掃除してあげないとね．
ということで，オススメお掃除ソフト，なんと無料！
「Advanced WindowsCare」
上のリンクから「Advanced WindowsCare」を選びます．
もうひとつProfessionalがありますが，そっちはシェアなので無視．
早速ダウンロード！ちなみに英語だけど，操作は簡単！のはず（ぁ
・DOWNLOADをクリックして，次のページ下部AWCSetup.exeをクリック ⇒ ダウンロード
・実行したらNext押しまくりでインストール
・言語はEnglishで起動
・バックアップしますか？と聞かれるので「はい」を選択
あとは「scan」して，終われば「repair」します．
いろいろ問題が見つかります；；
これで少しはキレイになるんではないでしょうか～
ゴミ･･･不要なファイルやショートカット，レジストリなどイラナイ子
たまには掃除してあげないとね．
ということで，オススメお掃除ソフト，なんと無料！
「Advanced WindowsCare」
上のリンクから「Advanced WindowsCare」を選びます．
もうひとつProfessionalがありますが，そっちはシェアなので無視．
早速ダウンロード！ちなみに英語だけど，操作は簡単！のはず（ぁ
・DOWNLOADをクリックして，次のページ下部AWCSetup.exeをクリック ⇒ ダウンロード
・実行したらNext押しまくりでインストール
・言語はEnglishで起動
・バックアップしますか？と聞かれるので「はい」を選択
あとは「scan」して，終われば「repair」します．
いろいろ問題が見つかります；；
これで少しはキレイになるんではないでしょうか～
一般的なWEBレイアウトについてです．
私は大体，以下のようにブロックを区切って作ります．
まず，大枠となるラッパー（wrapper）を作成し，ヘッダ（header），コンテンツ（contents），フッタ（footer）ブロックを作成．
ヘッダにはHPタイトルやメニューを載せ，コンテンツに記事を，フッタにコピーライトなどを記載します．ブログタイプのように左右にメニューが来る場合は，コンテンツをさらに分割します（後日）．今回は上にメニューがくるようなレイアウトを考えます．
--------------------------------------------------------------------------------
●HTMLコード（body以下）
<div id="wrapper">
<div id="header">ここにヘッダーの内容を書きます．</div>
<div id="contents">ここにコンテンツの内容を書きます．</div>
<div id="footer">ここにフッターの内容を書きます．</div>
</div>
●CSSコード
body {
text-align: center;
margin: 0px;
padding: 0px;
}
#wrapper {
text-align: left;
width: 800px;
margin-right: auto;
margin-left: auto;
}
#header {}
#contents {}
#footer {}
-------------------------------------------------------------------------------------
このレイアウトは固定（どのページを作るときも，このレイアウトで統一）ですので，idを指定して作ります．
body要素：
テキストアラインで中央寄せにします．これでbody以下の要素が中央ぞろえになります．
次の，マージンとパディングはそれぞれ下図の関係になります．
マージンとパディングは上下左右に設定できます．
p要素を例にすると，パディングを上下左右5pxとったとすれば，p要素の内側に5px分の空間が作られます．マージンを5pxとったとすると，今度はp要素同士が5pxの空間をとります．
この辺は作っていけばわかってきますが，注意すべきはボーダーです．
IE7およびFirefox，Operaなどのモダンブラウザはwidthやheightにボーダーの厚さを含みません．
しかし！！IE7より低いIE系ブラウザはボーダーの厚さを含めてwidht，heightを計算します．
IEが嫌われる理由ですね（ぇ 規格に準拠してねーOTL
IE6とFirefoxで確認すれば大体おKでしょう．
話は戻りますが，bodyでこのマージンとパディングを0にしています．（詰めて書きますよ，的な）
wrapper：
テキストアラインを左にし，マージンの左右をautoにします．これはよく使われる手法で，bodyで指定した中央揃えがwrapperに適用され，このwrapperが中央にきます．wrapper内の行揃えを左にしておくことで，ブラウザの中央にwrapper枠が表示され，行は左からというよくある形に！
マージンの左右autoはIE系で中央に表示させるためです．
とりあえずココまで．
私は大体，以下のようにブロックを区切って作ります．
まず，大枠となるラッパー（wrapper）を作成し，ヘッダ（header），コンテンツ（contents），フッタ（footer）ブロックを作成．
ヘッダにはHPタイトルやメニューを載せ，コンテンツに記事を，フッタにコピーライトなどを記載します．ブログタイプのように左右にメニューが来る場合は，コンテンツをさらに分割します（後日）．今回は上にメニューがくるようなレイアウトを考えます．
--------------------------------------------------------------------------------
●HTMLコード（body以下）
<div id="wrapper">
<div id="header">ここにヘッダーの内容を書きます．</div>
<div id="contents">ここにコンテンツの内容を書きます．</div>
<div id="footer">ここにフッターの内容を書きます．</div>
</div>
●CSSコード
body {
text-align: center;
margin: 0px;
padding: 0px;
}
#wrapper {
text-align: left;
width: 800px;
margin-right: auto;
margin-left: auto;
}
#header {}
#contents {}
#footer {}
-------------------------------------------------------------------------------------
このレイアウトは固定（どのページを作るときも，このレイアウトで統一）ですので，idを指定して作ります．
body要素：
テキストアラインで中央寄せにします．これでbody以下の要素が中央ぞろえになります．
次の，マージンとパディングはそれぞれ下図の関係になります．
マージンとパディングは上下左右に設定できます．
p要素を例にすると，パディングを上下左右5pxとったとすれば，p要素の内側に5px分の空間が作られます．マージンを5pxとったとすると，今度はp要素同士が5pxの空間をとります．
この辺は作っていけばわかってきますが，注意すべきはボーダーです．
IE7およびFirefox，Operaなどのモダンブラウザはwidthやheightにボーダーの厚さを含みません．
しかし！！IE7より低いIE系ブラウザはボーダーの厚さを含めてwidht，heightを計算します．
IEが嫌われる理由ですね（ぇ 規格に準拠してねーOTL
IE6とFirefoxで確認すれば大体おKでしょう．
話は戻りますが，bodyでこのマージンとパディングを0にしています．（詰めて書きますよ，的な）
wrapper：
テキストアラインを左にし，マージンの左右をautoにします．これはよく使われる手法で，bodyで指定した中央揃えがwrapperに適用され，このwrapperが中央にきます．wrapper内の行揃えを左にしておくことで，ブラウザの中央にwrapper枠が表示され，行は左からというよくある形に！
マージンの左右autoはIE系で中央に表示させるためです．
とりあえずココまで．
大神さんをiP○d風に
まさにiGod（笑