ＩＥ１０だってさ

皆さんはブラウザって、何を使っているのでしょうか？


僕はChromeとIEの二刀流ですが、


つい最近ＩＥを９にバージョンアップして


向上した表示速度にビックリしたり


相変わらず先進技術への対応の悪さにワサワサだったり


金魚鉢のデモやペイントボールのデモなどは


これからのＷＥＢ製作者へ色んな夢を見せてくれる


可能性を広めてくれたなぁと感じました。


（デモはこちらから。）



ところが、すでに4月12日に


ＩＥ１０の開発者向けプレビュー版が発表されてた様です

（IE9とIE10PPのダウンロードはこちらから）


html5にネイティブ対応し、


css3の機能の実装も増えて


より使いやすく、


より開発しやすい環境のブラウザになる予定みたいですね。


日曜にでもチェックしてみようかと考える


昼下がりでした。






にほんブログ村

ブログネタ『お風呂のあと』

ブログネタ：お風呂のあとってまずなにする？ 参加中

ビール！ゴキュゴキュ！！

がサイコーなんだけど

体には良くないんだろうね…

にほんブログ村

CSS３のグラデーションを使ってナビボタン作成(不完全)

僕はアメブロのCSSセレクタをよく知らないので、

今回『アメブロ向上企画書』さんの記事を

かなり引用させてもらってます。

是非そちらも参考にされて下さい。


----- 以下改造記録 -----

まずナビゲーションする項目を決めてリストにします。

僕はＴＯＰ、なう、ぺた、読者、メッセージ、にしました。


トップ 　　http://ameblo.jp/ユーザーID/
なう 　　　http://now.ameba.jp/ユーザーID/
ペタ 　　　http://peta.ameba.jp/p/addPeta.do?targetAmebaId =ユーザーID
読者 　　　http://blog.ameba.jp/reader.do?bnm=ユーザーID
メッセージ http://msg.ameba.jp/popupSendMessageInput.do?toAmebaId=ユーザーID


と、まとめたら

フリースペースにタグでメニューを作ります

<div id="topmenu">
<ul>
<li><a href="リンク先のURL/">トップ</a></li>
<li><a href="リンク先のURL">なう</a></li>
<li><a href="リンク先のURL">ぺた</a></li>
<li><a href="リンク先のURL">読者</a></li>
<li><a href="リンク先のURL">メッセージ</a></li>
</ul>
</div>

そのままだとエラーになるようなので

<div id="topmenu"><ul><li><a href="リンク先のURL/">トップ</a></li><li><a href="リンク先のURL">なう</a></li><li><a href="リンク先のURL">ぺた</a></li><li><a href="リンク先のURL">読者</a></li><li><a href="リンク先のURL">メッセージ</a></li></ul></div>

という様に改行を消して一行の文にします

これを保存してＣＳＳに移ります



/*ナビゲーションメニュー*/

#topmenu {
width: 800px;/*スキンの幅*/
font-size:14px;/*文字サイズ*/
font-weight:bold;/*太字*/
background-color:#c4c4c4;/*背景色*/
line-height:2;/*行の高さ*/
display: block;
z-index:100;
}
#topmenu ul{
margin:0;
padding:0;
}
#topmenu li {
width: 158px;/*ボタン1つの幅Ｂ*/
margin:0;
background:
text-align: center;/*中央寄せ*/
display:inline;/*IE6対策*/
list-style: none;
float: left;
}
#topmenu li a {
color: #ffffff;/*文字色*/
margin: 0;
text-decoration: none;
display: block;
}
#topmenu li a:hover {
background:
}



を分かりやすい様一番下に書き込んだら

青地のbackgroundにグラデーションの背景を

打ち込んでいきます



#topmenu li {
width: 158px;/*1つの幅Ｂ*/
margin: 0 0;/*メニューのスキマＣ*/
border-left:1px solid #c3c3c3;/*ボタンの左の仕切り*/
border-right:1px solid #c3c3c3;/*ボタンの右の仕切り*/
border-top: 1px solid #e8e8e8;/*ボタンの上の仕切り*/
background: -webkit-gradient(linear, left top, left bottom, from(#c5c5c5), to(#e3e3e3));/*Safari Chrome用グラデーション*/
background: -moz-linear-gradient(top, #c5c5c5, #e3e3e3);/*Firefox用グラデーション*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c5c5c5', endColorstr='#e3e3e3');/*InternetExplorer用グラデーション*/
text-shadow: 0 1px 1px rgba(0,0,0,.3);/*文字の影（ＩＥ以外に適用）*/
text-align: center;/*中央寄せ*/
display:inline;/*IE6対策*/
list-style: none;
float: left;
}

と、３つのブラウザに対応しながら

ここまでは出来たのですが、、、


この後a:hoverの背景にグラデーションをかけると

ChromeやFirefoxは良いんですがＩＥでチラつきが出てしまって、、、

どうやっても僕の力では直せなかったので


これ↓



hover後は画像を差し替える事に妥協しました。。。


#topmenu li a:hover {
color: #ca0000;
background-image:url(画像ＵＲＬ);
}



最後に、自分の環境に合わせて配置を


#wrap{
width:800px;
margin:40px 0 0 0;
}

で、ヘッダー下にスペース作って


#topmenu {
width: 800px;/*スキンの幅Ａ*/
height: 38px;
position: absolute;
margin:-40px 0 0 0;
font-size:14px;/*文字サイズ*/
font-weight:bold;/*太字*/
background-color:#c4c4c4;
line-height:2.5;
display: block;
z-index:100;
overflow:hidden;
]


出来上がり。


細かい説明とか端折ってる部分は

自分用メモって事で勘弁してくださいm(_ _)m




にほんブログ村