月別: 2013年9月

webサイトのメニュー作成

webサイトのメニュー作成

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

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

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

1
2
#menu ul>li{
}

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

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

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

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

float:left は横並びにする

width:100px で幅固定

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

1
text-align:center:

で中央揃えにする

1
padding:4px

で余白を４px

1
background:#ccc

で背景色を灰色にする

1
margin-right:10px

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

1
border-radius:4pxv

で角を丸くする

1
text-shadow:0 1px 0 #fff

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

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

#menuへ

1
overflow:hidden;

を追加する

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

1
2
#menu ul >li.hover{
}

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

1
background:#ddd;

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

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

1
text-decoration: none;

を指定すればOK

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

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

となる

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

1
display:block;

を追加する

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

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

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

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

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

のところに書く

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

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

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

とする

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

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

へコードを追記する

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

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

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

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

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

1
2
3
4
5
<ul>
<li><a href="">ホーム</a></li>
<li><a href="">製品情報</a></li>
<li><a href="">企業情報</a></li>
</ul>

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

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

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

1
font-size:14px;

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

1
2
3
#footer{
font-size:12px;
}

とする

また、色を変えるため

1
color:#ccc;

として

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

1
border-top:1px solid #ccc;

として線を引く

1
padding:10px 0 20px;

で余白設定

背景画像と conteiner の設定

背景画像と conteiner の設定

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

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

これは

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

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

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

1
background-color:#fff;

として背景色を白にして

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

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

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

これは
html{
}
の中に

1
height :100%;

#container の中へ

1
2
min-height:100%;
height:100%;

を追記

さらに、CSSファイルへ

1
2
3
4
5
6
7
body{
height:100%;
}
 
body > #container {
height:auto;
}

を追記する

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

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

この設定は
#container で行う

1
padding: 0 10px;

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

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

1
font-family: Verdana,Arial;

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

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文書構造作成

HTML文書構造作成

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

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

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

まず、HTML部分を作成する

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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 -->

とする

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

は左側部分

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

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

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* 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;
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#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入れるなら

1
2
3
margin-left:10px;
margin-right:10px;
width:280px;

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

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

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

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

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

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

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

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

最初にHTMLを編集しておく

1
<div id="main">

の中で

1
<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
だとレイアウトが崩れるので注意

vagrant マシン接続のため hosts 編集

vagrant マシン接続のため hosts 編集
#06 hostsを編集してみよう
http://dotinstall.com/lessons/basic_local_development_v2/24806
を参考に
hosts の編集
IPではなく、ドメインのようなものでアクセスできるように設定する
動画と同じようにしたいのなら
dev.dotinstall.com
ドットインストールでは Mac
私の環境は ubuntu とちょっと違うのでメモ
hosts を編集するには
sudo vim /etc/hosts
でファイルを開き
192.168.33.56 dev.dotinstall.com
というように追記
これで、ブラウザで
dev.dotinstall.com
とすると
192.168.33.56
と同じ意味になる
今後、自分でドメインをとって開発するときに
テスト環境として使えるので
もし、変更したいのなら
dev.dotinstall.com
を自分のドメインに書き換えればOK

vagrant マシンでHTML表示

vagrant マシンでHTML表示
#05 htmlファイルを表示してみよう
http://dotinstall.com/lessons/basic_local_development_v2/24805
を参考に
HTMLファイルを表示してみる
まず、 ユーザ vagrant がアクセスできるように権限変更
sudo chown -R vagrant:vagrant /var/www/html
次に、ファイル転送をするので
ホストマシン、私の場合は Ubuntu で
FileZilla を起動して転送
ホスト名には
192.168.33.56
Protocol は
SFTP
を設定
ログオンの種類は
通常を選択して
ユーザ名 vagrant
パスワード vagrant
で接続
接続できたら
リモートサイトを
/var/www/html
にして
ファイルを作成しようとしたけど
ubuntu の filezilla の場合ファイルを作成する項目が見当たらないので
cd /var/www/html/
touch index.html
でファイル作成
そしてそのまま編集
hello と書いて保存し
再度
192.168.33.56
をリロードして
hello
と表示されれば成功

vagrant マシンにweb サーバー導入

vagrant マシンにweb サーバー導入
#04 Webサーバーを導入しよう
http://dotinstall.com/lessons/basic_local_development_v2/24804
を参考に web サーバーインストール
まず現在インストールされているものを調べるには
yum list installed
で確認できる
確認だけなら sudo なしでもみれる
より細かく調べるなら grep と合わせるとよい
もし httpd がインストールされているか
調べるなら
yum list installed | grep httpd
これで何も表示されないのなら
インストールされていないということ
今回はインストールされていないので
sudo yum install -y httpd
でインストール
ちなみに、この httpd が web サーバで
apache というものになる
sudo service httpd start
sudo chkconfig httpd on
で httpd を起動
chkconfig は次回、自動起動するか設定する
on なら次回から自動起動する
webサーバー起動確認するには
ブラウザを開いて
http://192.168.33.56/
というように
Vagrantfile で設定したIPを打ち込めばOK