XHTML/CSSの知識ゼロからの100点のWEB標準ページ!

  • ¥0

    無料

「もう!!CSSなんて全っ然意味分かんないよ!!」そんな現役WEBクリエーター、またはそれを目指すあなたへ贈る、CSSの知識ゼロからお金をほとんどかけずに100点ホームページの作り方+α(XHTML+CSSによるWEB標準製作)。

   
 

このメルマガは現在休刊中です

 
メルマガ名
XHTML/CSSの知識ゼロからの100点のWEB標準ページ!
発行周期
不定期
最終発行日
2007年04月13日
 
発行部数
0部
メルマガID
0000196820
形式
PC・携帯向け/テキスト形式
カテゴリ
インターネット・パソコン > ホームページ作成 > HTML

まぐまぐ!メールマガジンの用語集です。
下記の用語以外の不明な点はこちらをご覧ください。

 
発行周期
週1回、月1回などの発行頻度です。
部数
メルマガの配信数を記しています。
カテゴリ
まぐまぐ!に登録されているカテゴリです。
形式
メルマガには以下の配信形式があります。下部「メルマガ形式」をご参照下さい。
 
最終発行日
最後にメルマガが配信された日付です。
メルマガID
メルマガを特定するIDです。
RSSフィード
RSSを登録すると、更新情報を受け取ることができます。

― メルマガ形式 ―

  • PC向け
    パソコンでの閲覧に最適化したメルマガ
  • 携帯向け
    スマートフォンやフィーチャーフォンでの
  • PC・携帯向け
    PC・携帯どちらでも快適にご購読いただけます。
  • テキスト形式
    文書だけで構成された、一般的なメールです。
  • HTML形式
    ホームページのように文字や画像が装飾されたメールです。
  • テキスト・HTML形式
    号によって形式が変更する場合があります。

閉じる

メールマガジン最新号

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

第12回 【知識ゼロからの100点WEB標準】
                           2007年4月12日
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

【このメルマガの内容】

「もう!!CSSなんて全っ然意味分かんないよ!!!!」

そんな現役WEBクリエーター、またはそれを目指すあなたへ贈る
CSSの知識ゼロからお金をほとんどかけずに100点ホームページの作り方+α

ただし、著者の独学による知識です(笑)


よくわからん!という方は、
まずメルマガに掲載しているソースをそのままコピペして、
実際に見てみていろいろ試してみて下さい。


-----------------------------------------------------------

【目次】

■ 2カラム

-----------------------------------------------------------


■ 2カラム


さぁ前回に引き続き2カラムを作っていきます。



前回は右と左に分けましたね。
では次はヘッダーとフッターをつけましょう。
上下のメニュー部分ですね。



--↓----------ここから-------------

<html>

<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>


<div id="HEADER">
ヘッダー<br />
</div>


<div id="MAIN">
メインコンテンツ<br />
メインコンテンツ<br />
</div>


<div id="SIDE">
サイドメニュー<br />
サイドメニュー<br />
</div>


<div id="HEADER">
フッター<br />
</div>


</body>
</html>

--↑----------ここまで-------------

続いてCSSです。

--↓----------ここから-------------

#HEADER{
width:500px;
float:left;
background:#55aaef;
}
#SIDE{
width:200px;
float:left;
background:#aaff00;
}
#MAIN{
width:300px;
float:left;
background:#ddd000;
}
#FOOTER{
width:500px;
float:left;
background:#55aaef;
}

--↑----------ここまで-------------


コピペしたら、また保存しましょう。
そしてブラウザで開いてみてください。

すっごい細いですけど、イメージはつかめますでしょうか?
考え方はブロックを積んでいく要領です。



ちなみに縦の長さを決めるには、
CSSをこのように変更してみましょう↓

例:

#FOOTER{
width:600px;
height:300px;
float:left;
background:#55aaef;
}






ところでブラウザを最大まで広げてみてください。

ブロックがずれませんか?



もうずれている方も居るかもしれませんが、
このままだとブラウザの大きさに左右されてしまいます。



これではマズイ!




ということで、大きなボックスで全部囲んでしまいましょう。




--↓----------ここから-------------

<html>

<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>

<div id="WRAPPER">

<div id="HEADER">
ヘッダー<br />
</div>


<div id="MAIN">
メインコンテンツ<br />
メインコンテンツ<br />
</div>


<div id="SIDE">
サイドメニュー<br />
サイドメニュー<br />
</div>


<div id="HEADER">
フッター<br />
</div>

</div><!-- WRAPPERの閉じタグ -->


</body>
</html>

--↑----------ここまで-------------

続いてCSSです。

--↓----------ここから-------------

#WRAPPER{
width500px;
}
#HEADER{
width:500px;
float:left;
background:#55aaef;
}
#SIDE{
width:200px;
float:left;
background:#aaff00;
}
#MAIN{
width:300px;
float:left;
background:#ddd000;
}
#FOOTER{
width:500px;
float:left;
background:#55aaef;
}

--↑----------ここまで-------------



これでずれませんね。
ちなみに大外の枠は一般的に「wrapper」とすることが多いです。


ラッパーと呼びますが、ラッピングといったらわかりやすいでしょうか?
「包む」、とかかな。



今回はこの辺で!


========================================================================



※ここで公開する手法はあくまで私個人が
独学により習得したモノなので、一般的ではない方法があるかもしれません。
もしくは正しくないものの場合があるかもしれません。

その場合は、


「おいおい、ここ違うよ!こうだろ〜しょうがね〜な〜」


といってやっていただけると非常にありがたく思います。
私が得た技術を少しでもみなさんに・・という信念の元に配信してはおりますが、
それと同時に、

「一緒に勉強させて頂く」つもりでもあります。

そのため、間違った情報がありましたら
どうぞご勘弁&ご報告いただけると幸いですm(_ _)m
内容を確認の上、メルマガ上で紹介させていただくかもしれません。
(もちろん承諾を得た上ですよ)
フォームはコチラです↓
http://www.exeweb.net/melmaga/form/form.php


それ以外でもご質問などがあればお気軽にどうぞ!!!


※このメールマガジンに掲載している情報に関しては
一切の責任を負いかねますので、ご了承下さい。



────────────────────────────────
◎発行:不定期
◎ご意見・ご感想・ご質問などはこちらまで
 → http://www.exeweb.net/melmaga/form/form.php

◎マガジン登録・解除
 → http://www.exeweb.net/melmaga/submit.htm

発行者:石澤
────────────────────────────────
メルマガ全文を読む
 

▲ページトップへ

▲ページトップへ