できただよ~、ｃｓｓ！
背景は画像で、文字はテキストでっていうから、その方がメンテナンスしやすいみたいでね。
作成してみました。
ｈｔｍｌ部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
<html xmlns="http://www.w3.org/1999/xhtml
">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/tab_css.css" />
<title>無題ドキュメント</title>
</head>
<body>
<div class="box1">
<ul>
<li class="tab1on">
<a href="リンク先">サービス概要(必読）</a>
</li>
<li class="tab2off">
<a href="リンク先">引取修理</a>
</li>
<li class="tab3off">
<a href="リンク先">出張修理</a>
</li>
<li class="tab4off">
<a href="リンク先">引取修理</a>
</li>
<li class="tab5off">
<a href="リンク先">持込修理</a>
</li>
<li class="tab6off">
<a href="リンク先">修理進捗確認</a>
</li>
<li class="tab7off">
<a href="リンク先">お電話でのお問い合わせ</a>
</li>
</ul>
</div>
</body>
</html>
css部
..box1 {
width:720px;
height:31px;}
li {float:left;
display:block;
font-weight:bold;
font-size:12px;
list-style:none;
}
ul {margin:0px;padding:0px 19px;}
.tab1on,
.tab1off{
display:block;
width:120px;
height:31px;
float:left;
text-align:center;
background-repeat:no-repeat;
background-position:center top;
line-height:31px;
}
.tab2on,
.tab2off,
.tab3on,
.tab3off,
.tab4on,
.tab4off,
.tab5on,
.tab5off{
display:block;
width:80px;
height:31px;
float:left;
text-align:center;
background-repeat:no-repeat;
background-position:center top;
line-height:31px;
}
.tab7on,
.tab7off
{
display:block;
width:140px;
height:31px;
float:left;
text-align:center;
background-repeat:no-repeat;
background-position:center top;
line-height:31px;
}
.tab6on,
.tab6off
{
display:block;
width:100px;
height:31px;
float:left;
text-align:center;
background-repeat:no-repeat;
background-position:center top;
line-height:31px;
}
.tab1on {background-image:url(画像);}
.tab1off {background-image:url(画像);}
.tab2on {background-image:url(画像);}
.tab2off {background-image:url(画像);}
.tab3on {background-image:url(画像);}
.tab3off {background-image:url(画像);}
.tab4on {background-image:url(画像);}
.tab4off {background-image:url(画像);}
.tab5on {background-image:url(画像);}
.tab5off {background-image:url(画像);}
.tab6on {background-image:url(画像);}
.tab6off {background-image:url(画像);}
.tab3on a, .tab2on a, .tab2off a, .tab3off a, .tab4off a, .tab4on a, .tab5on a, .tab5off a{
display:block;
width:80px;
height:31px;
font-weight::bold;
font-size:12px;
text-decoration:none;
}
.tab1on a, .tab1off a
{
display:block;
width:120px;
height:31px;
font-weight::bold;
font-size:12px;
text-decoration:none;
}
.tab7on a,
.tab7off a{
display:block;
width:150px;
height:31px;
font-weight::bold;
font-size:12px;
text-decoration:none;
}
.tab6on a,
.tab6off a
{
display:block;
width:100px;
height:31px;
font-weight::bold;
font-size:12px;
text-decoration:none;
}
なんとか、ひと段落？
無事とはまだ言えないけど、
なんとか、ＯＫが出そうなでなそうな。
ボタン1つ作るのに、
数学の問題を解くように
回答は一個なのに、
色んな方法があって、
思考錯誤しながら、やってたら、
あっという間に月末よ。
けど、すっごく勉強になって。
今回作ったボタンの形は、
四画のボタンなんですが、
上の両すみが角丸
で、
下の両すみはストレートの角。
で、これを画像で作るか、画像で作るにしても、
ｐｈｏｔｏｓｈｏｐでつくるか
ファイヤーワークスで作るか
悩んで、
ｐｈｏｔｏｓｈｏｐでつくると、
1ｐｘ小さくＷＥＢにアップするときにはサイズをかかなくてはならず、
ファイヤーワークスで作ると、
2ｐｘ小さくしてとか
ｃｓｓで作ると、
ＩＥには対応しないとか、
色々と勉強になりました。
けど、コーポレートサイトだから、
ｈ1～ｈ4とか、
色々と
すでにそろってて、
自分のオリジナリティを出すことは
コーディングやボタンしかなく・・・
ま、しょうがないね。
ページが出来てないのにもかかわらず、
今日は現実逃避に、回数券の期限切れになりそうなので、
朝からピラティスへ！
ピラティスを朝にやると良いなと思ったことは、
お部屋に日の日差しが入って
一緒にやっている方たちもなんだか、フレンドリー・・・のようだった。
ま、この思いは、違うかもしれないとしても、
なんだか、良かった。
あぁ～、これで解放されて、
ウーマンズランに専念したいのよ！
それと、３月は、丸の内朝大学というのの説明会に行くので、
大学といっても早朝からやる学校で、
フレックスとか使えるサラリーウーマンとかサラリーマンには良いかもしれないね。
お金もかかるから、期間を通して、だから、行く回数が少ないと
もったいないしね・・・。
あぁ、今日は少し早く眠れそう。嬉。
だけど、睡眠を妨害する人達が！
私の前の道路を舗装工事している業者さん。
今日も４時ごろまでやっていましたもんね。
もう、爆睡したい！
不思議な事に、
どんだけ辛くとも、イライラしても、いつもなら、体調に異変が起きたりするんだけど、
それが無いってことは、
今、やっている作業がつらくなくて、面白いって事かしらね。
去年も同じ思いをしたんだけど、なんだか、去年ほど辛くないんです。
不思議です。
これって、成長？それとも、今の会社での免疫が出来たとか？
なんだろ。