mina-majorana
かしわざきみなの制作日記

ボタンをつくる

photoshopで材料を作ります



いいなぁと思うサイトコピーして真似して作ってみましょう。

今回はこんなデザイン

btnimg



まだphotoshopで描いただけの画像です。



それでは、photoshopのスライスで材料を切りましょう

toppagetoppage2page1page1_2page2page2_2page3page3_2page4page4_2page5page5_2page6page6_2underberbtn_bottom.jpg



こんな感じ。。







dreamweaverでリストをつくります。

<ul><li></li></ul>タグ


divでくくります

今回は  <div id="mainnav">にしました。


1、それではまずボタンの部分から、

 ・liとulの準備

css

#mainnav li {

 float: left;

 width: 161px;

 height: 42px;

 list-style-type: none;

 margin: 0px;

}


フロートレフトにして横幅縦幅をボタンサイズにします。

あとマーカーなし。


#mainnav ul {

 margin-right: auto;

 margin-left: auto;

 width: 1127px;

}


ulは幅を指定して、autoにして真ん中に持ってきますね。




 ・li部分

liの部分はリンク<a href="#">にしてspanでくくりました。

#mainnav ul li a span {

    position: relative;

    z-index: -1;

}

これは見本を真似しました。相対配置にして。。。

お、でましたz-indexこうすれば画像の下に配置されるんですね。


#mainnav ul li a {

 display: block;

    height: 42px;

    text-decoration: none;

    width: 161px;}


aの部分はdisplay: block;にして幅と高さを設定しましょう。


 ・ボタン画像

ボタンそれぞれをclassでくくって…


それぞれのクラスのリンク時訪問済み時の画像と…

#mainnav  .navhome li a:link,

#mainnav  .navhome li a:visited{

background: url(images/toppage.jpg);

}




それぞれのクラスのロールオーバー時、クリック時の画像を入れる

#mainnav  .navhome li a:hover,

#mainnav  .navhome li a:active{

background: url(images/toppage2.jpg);

}


2、背景

 #mainnav {

 height: 42px;

 width: 1345px;

 background-image: url(images/underber.jpg);

 background-repeat: repeat-x;

 background-position: left bottom;

 margin-right: auto;

 margin-left: auto;

}

ボタン全体の幅と高さ指定。

画像を入れてっと、今回はボタンの下にラインを引きたいので、background-position: left bottom;

でbackground-repeat: repeat-x;

最後に画面中央に持ってきました。


3、+デザイン

ボタンの下にもう少しデザインをつけたしたいです。

#mainnavを#btnでくくってimgと付け足しました。


#btn  {

 width: 1345px;

 margin-right: auto;

 margin-left: auto;

}


できました。

http://minakashiwazaki.com/btn/index.html

xhtml+css

まず色決めよう。
会社のロゴとかお店や商品の雰囲気とかにあった色選び

配色辞典
http://gihyo.jp/assets/files/book/2001/haishoku/

カラー配色
http://fkm.sakura.ne.jp/

colorschemedesigner
http://colorschemedesigner.com/


レイアウト

960gs
http://960.gs/

layoutgala
http://blog.html.it/layoutgala/

こんなの参考にしたらいいもの作れるのではないでしょうか( ̄ー ̄)ニヤ


あと、先日知った、ネガティブマージン

z-index
も使いたい!!

z-indexは早速自分のブログに使いました☆☆
こないだまで、風鈴がヘッダーの下に隠れていたのですが、
z-indexでレイヤーの重なり順を変えて、やっと風鈴を一番前に持ってくることができましたヾ(≧∇≦*)/やったー

おいおい詳しくまとめます

style.css

※こちら一つの例であって必ずではありませんのであしからず


/*--------------------------
 メイン部分
---------------------------*/
#main {
float: right;
width: ●●●px;
}
h1 {
background-color:#●●●;
border-top: 5px solid #●●●;
color: #●●●;
font-size:0.8en;
margin-bottom:10px;
padding:5px 10px;
}
h2 {
background: url("●●●.gif") no-repeat scroll left top transparent;
height: ●●●px;
width: ●●●px;
margin-bottom: 15程度●●●px;
text-indent: -9999px;

}
/*--------------------------
text-indent: -9999px;
画像内にタイトルがあるとき使うから覚えた方がいい
---------------------------*/

h3 {
background: url("●●●.gif") no-repeat scroll left top transparent;
height: ●●●px;
width: ●●●px;
margin-bottom: 10程度px;
padding-left: 20程度●●●px;
padding-top: 8程度●●●px;

}
#main p {
margin-bottom: 15程度●●●px;
}
#main p.icon{
text-align: right;
}


#main p.icon a {
padding-left: 10程度●●●px;
}
a:link {
color: #●●●;
text-decoration: none;
}
a:visited {
color: #●●●;
text-decoration: none;
}
a:hover {
color: #●●●;
text-decoration: none;
font-weight: bold;
}
a:active {
color: #●●●;
text-decoration: none;
font-weight: bold;
}

/*--------------------------
 ヘッダー部分
---------------------------*/

#header {
background-color:#●●●;
width: 800程度●●●px;
margin-bottom: 25程度●●●px;
}
#header p {
float: left;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 8程度●●●px;
padding-left: 8程度●●●px;
}
#header li {
float: right;
padding-right: 8程度●●●px;
}
/*--------------------------
 改行部分でクリア両方
---------------------------*/
.clear {
clear: both;
}
/*--------------------------
 サイドバー部分
---------------------------*/
#sidemenu {
float: left;
width: 200程度●●●px;
}

#menu {
margin-bottom: 15程度●●●px;
}
#menu a {
color: #●●●;
padding: 10程度●●●px;
text-decoration: none;
width: ●●●px;
display: block;

}
#menu a:link,
#menu a:visited{
background: url("●●.gif") repeat-x scroll left top #●●●;
border-bottom:2px sold #●●●;}

#menu a:hover,
#menu a:active {
background: url("●●.gif") repeat-x scroll left bottom #●●●;
border-bottom: 2px solid #●●●;
font-weight: bold;
}
/*--------------------------
 フッター部分
---------------------------*/
#footer {
clear: both;
width: 800程度●●●px;
}
#footer li {
display: inline;
padding: ●●● ●●●px;

}
#footer p {
font-size: 0.8程度●●●em;
text-align: right;
}
#wrap #footer ul {
background-color: #●●●;
}

#footer li a:link
#footer li a:visited {
color:#●●●;
text-decoration: none;
}
#footer li a:hover
#footer li a:active {
color:#●●●;
text-decoration: underline;
}




わたしが練習したものの基本のcssだけまとめました。
これみれば、できるでしょ??

あとは自分の力信じるしかないですね。
忘れないようにちょこちょこまとめましょう。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。