月別: 2013年9月

webサイトのメニュー作成

#11 メニューを作ってみよう
http://dotinstall.com/lessons/website_html/9011
を参考に
ウェブサイトのメニュー項目の設定を学習

HTMLではメニューはリストで表現される

このため、スタイルを決めるには
ul
li
この２つをCSS対象にする

#menu ul>li{
}

という項目を作り設定していく

#menu は
id=”menu” という意味で
CSSで＃は id という意味

ul > li は ul の中の li という意味

そして、以下が設定とその意味

float:left は横並びにする

width:100px で幅固定

font-size:13pxでフォントサイズ指定

text-align:center:

で中央揃えにする

padding:4px

で余白を４px

background:#ccc

で背景色を灰色にする

margin-right:10px

で右側との余白を10pxに指定

border-radius:4pxv

で角を丸くする

text-shadow:0 1px 0 #fff

で白い影がテキストにつくようになる

このままだと
#menu に対して
#contents
#sidebar
が回り込んでしまうため

#menuへ

overflow:hidden;

を追加する

さらにメニューの上にマウスオーバー
つまりマウスをのっけたときに色を変えるようにする

#menu ul >li.hover{
}

.hover でマウスオーバーしたときの処理になる
色を変えるには

background:#ddd;

とすることで、マウスオーバーしたときに
背景の色が変わるようになる

またリンクを aタグで作成すると下線がつくけど
これを消すことができる
これは

text-decoration: none;

を指定すればOK

今回は #menu の 中にあるので

#menu ul >li >a{
text-decoration:none;
}

となる

また、文字の上だけじゃなく
枠でもマウスオーバーで色が変わるようにするには

display:block;

を追加する

ヘッダーとフッターの作成

#10 ヘッダーとフッターを作ろう
http://dotinstall.com/lessons/website_html/9010
を参考に
ウェブサイトのヘッダーとフッターの作成を学習

まずはヘッダーの作成
これは

<div id="header"></div>

のところに書く

ほとんどの場合 h1 で見出しをつける

今回は、画像を入れるので

<h1>
<img src="dummy.png" height="100" width="600"></h1>

とする

フッター部分を作成するには

<div id="footer"></div>

へコードを追記する

これも、ほとんどの場合は copyright となるので

<div id="footer">
Copyright 2013 wp.developapp.net
</div>

というように
Copyright とドメインやサイト名を書く

<div id="menu"></div>

ここはメニューをつくる部分
メニューの作り方はリスト形式なので
ul と li でメニューを作成

<ul>
<li><a href="">ホーム</a></li>
<li><a href="">製品情報</a></li>
<li><a href="">企業情報</a></li>
</ul>

aタグで囲んでおけば、それぞれのリンクになる

ここまでできたらCSSでレイアウトを変えていく

まず、body 部分で文字の標準の大きさを指定

font-size:14px;

次に
footer の文字サイズも変更するので

#footer{
font-size:12px;
}

とする

また、色を変えるため

color:#ccc;

として

文字を中央寄せにするために
text-align:center;
を指定

border-top:1px solid #ccc;

として線を引く

padding:10px 0 20px;

で余白設定

背景画像と conteiner の設定

#09 背景を設定しよう
http://dotinstall.com/lessons/website_html/9009
を参考に
背景画像と conteiner を設定していく

まず背景画像の設定について

これは

html{
background-image: url(‘画像ファイル名’);
}

とすることで
画像ファイルを表示できる

ただしわかりにくいため
#container のところへ

background-color:#fff;

として背景色を白にして

box-shadow: 0 0 3px rgba(0,0,0,0.5);

で影をつける
横、縦、ぼかし具合、色
の順番の引数となっている

これだけだと
footer あたりでとまっているので
もうすこし見栄えをよくする

これは
html{
}
の中に

height :100%;

#container の中へ

min-height:100%;
height:100%;

を追記

さらに、CSSファイルへ

body{
height:100%;
}

body > #container {
height:auto;
}

を追記する

これで、画面いっぱいまで
#container の領域が増えているのが確認できる

ここまでできたら
menu
contens
などが左によりすぎなのでpadding で余白をつける

この設定は
#container で行う

padding: 0 10px;

として
縦ではなく横に１０px設定する

そして body に対してフォントを指定しておく

font-family: Verdana,Arial;

2カラムレイアウトの作成

#08 2カラムレイアウトを作ろう
http://dotinstall.com/lessons/website_html/9008
を参考に
CSSでレイアウトの設定をして2カラムにする

このため、mycss.css を作成し編集

まず、
#container のところで横幅を指定

width:600px;
で固定
さらに、中央寄せにしたいので
margin: 0 auto;
としておく

#header
で margin-bottom:15px;
として余白設定

#menu
で margin-botton:15px;
でこちらも余白設定

#contents は
float:left;
で左よせにして記事を書く
width:400px;
と固定にしておく

#sidebar は
float:right で右によせてサイドバーにする
width:180px;
とこちらも固定

footer 部分の割り込み防止のため
#mainで
overflow:hidden;
そして、余白をいれたいので
margin-bottom:15px;
としておく

HTML文書構造作成

#07 文書の構造を作っていこう
http://dotinstall.com/lessons/website_html/9007
を参考に
文書構造を作成していく

この文書構造の作成とカラム作成を合わせて
テンプレなどが作成できる

今回、作成するのは２カラムのサイトになる

まず、HTML部分を作成する

作成するのは body 部分への追加

<div id="container">

<div id="header">header</header>

<div id="menu">menu</div>

<div id="main">

<div id="contents">
contents
</div><!-- contents -->

<div id="sidebar">
sidebar
</div><!-- sidebar -->

</div><!-- main -->

<div id="footer">footer</div>

</div><!-- #container -->

とする

<div id="contents">contents</div>

は左側部分

<div id="sidebar">sidebar</div>

でサイドバーで右側部分にする

固定幅での３カラムレイアウト

#06 3カラムのレイアウト (固定幅)
http://dotinstall.com/lessons/website_html/9006
を参考に
固定幅での3カラムレイアウトを作成

CSSファイルを編集して配置を設定

初期状態のCSSが
ソースになかったので
メモ
とりあえず、これを base.css
としておいて、今後の練習に使うことに

/* mycss.css */

#container {
    width: 500px;
    margin: 0 auto;
}

#header {
    background-color: red;
}
#main {
    background-color: blue;
}
#footer {
    background-color: green;
}

#left {
    background-color: pink;
}
#center {
    background-color: orange;
}
#right {
    background-color: purple;
}

まずは、レイアウトを変えるため

#left{
background-color:pink;
float:left;
width:100px;
}

#center{
background-color:orange;
float:left;
width:300px;
}

#right{
background-color:purple;
float:left;
width:100px;
}

というようにする

width は

幅の指定

float は回りこみの指定

また、footer 部分が割り込んでこないように
overflow:hidden;
を
#main のところに追加しておく

このレイアウトを変更せずに
#center 部分に余白を１０px入れるなら

margin-left:10px;
margin-right:10px;
width:280px;

というように、幅を全体の３００から引いて合わせる

また、上下に余白設定も可能だけど
注意点あり

もし、 #header と #main の間に余白をいれたいなら
#header のほうへ
margin-bottom:20px;
というように指定する

これを #main のほうでも
margin-top:50px;
で指定してしまうと
マージンの相殺が発生する

これはお互いに打ち消しあって
大きいほうの設定だけが有効になる
つまり
margin-top:50px だけ有効になる

3カラムレイアウトの作成

#05 3カラムのレイアウト (可変幅)
http://dotinstall.com/lessons/website_html/9005
を参考に
可変の3カラムレイアウトを作成

最初にHTMLを編集しておく

<div id="main"> 

の中で

<div id="center">center</div>

を追記

CSSのファイルは
最初の画面にでているような状態にするなら

#container{
width:70%;
margin:0 auto;
}

#header{
background-color:red;
}

#main{
background-color:blue;
overflow:hidden;
}

#footer{
background-color:green;
}

#left{
background-color:pink;
}

#center{
background-color:orange;
}

#right{
background-color:purple;
}

となる

これをカスタマイズしていく

ここから、まず left を編集
#left{
background-color:pink;
float:left;
width:30%;
}

とすることで
float:left;
で左に回りこみ
width:30% で大きさを４０％に設定

#center{
background-color:orange;
float:left;
width:40%;
}
これで
float:left;
で左に回りこみ
width:40% で大きさを４０％に設定

#right{
background-color:purple;
float:left;
width:30%;
}

ここでの注意点は
footer がまわりこまないように
#container
で
overflow: hidden;
を設定しておくこと

とりあえず、これで3カラムができる

この使い道は、CSSの設定とHTMLで
テンプレが作成できるということ

これは wordpress テンプレとかでも
MT4 とかでも同じ

現状は可変だけど、固定幅にすることも可能
例えば
left を固定で100px
right も固定で１００px
そして、center は left ぶんだけ開けるとするなら

#left と #right では
width=100px
として

#center では
margin-left:100px;
とする

こうすれば、left のぶんだけあけることが可能

ちなみに、HTMLで
left
right
center
の順番だとOKだけど

left
center
right
だとレイアウトが崩れるので注意