Prev«  1  |  2  | All

display:noneは検索エンジンスパムであるという俗説があります。また、スタイルシートにdisplay:noneを記述したためにインデックスから削除されたという事実もあまり聞きません。

Yahooで当サイトのCSSを検索してみると結果に現れました。

ちなみにGoogleではインデックスされていないようです。
しかし、インデックスされてるから削除の対象になるというものでもなさそうです。

当サイトもGUIとナビゲーションを両立させるためにdisplay:noneを多用しているので、今後のYahooの動向には十分注意する必要がありそうです。

Posted

CSSの勉強にCSS Creatoをよく見に行く。

そのサイドバーに本日のブラウザ統計が表示されている。

Firefoxが好調とはいえ、IEの倍近く。
IEが90%以上のシェアを誇っているのに、この数字があらわすものは･･･

CSSでテンプレートを作る場合には、まずFirefoxで確認し、IEでちゃんと表示できるように修正。一時期のネットスケープとは逆転した状態です。

バグだらけのIEは使い物になりません。

Posted

CSSを使ってブログとウェブサイトにナビゲーションバーを作ろう！

bannerやheaderの後にナビゲーションのクラスやIDを作りリストで指定します。 たとえば私のところはこんな感じ・・・

<div class="none"><a href="#main">メニューを読み飛ばす</a></div>
<map id="Navigation" name="Navigation" title="Navigation">
        <ul>
                <li><a href="/" title="Web標準 Webサイト制作  アットスタイル ホーム">ホーム</a></li>
                <li><a href="service.php" title="Web制作">Web制作</a></li>
                <li><a href="blogtemptop.php" title="テンプレート">テンプレート</a></li>
                <li><a href="form.php" title="お問い合わせ">お問い合わせ</a></li>
                <li><a href="http://s36ph.s72.xrea.com/" title="ブログ">ブログ</a></li>
                <li><a href="http://style.jp.land.to/phpbb/index.php" title="フォーラム">フォーラム</a></li>
        </ul>
</map>
<div class="none">ナビゲーション閉じる</div>

スタイルシートで整形すればOK！

#navi  {
        float: left;
        margin: 0;
        padding: 0px;
        width: 100%;
}
#navi ul {
        font-size: 0.7em;
        margin: 0;
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: #333333;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #333333;
        padding: 0;
        width: 100%;
        float: left;
        list-style: none;
        background: #D2D2D2 url("webimg/background.png") 0% 40% repeat-x;
}
#navi ul li {
        float: left;
        margin: 0;
        padding: 0;
}
#navi a, #navi a:visited {
        display: block;
        padding: 2px 10px;
        margin: 0;
        color: #000;
        text-decoration: none;
        font-weight: normal;
        border: 0;
        border-top: 1px solid #EEEEEE;
        border-left: 1px solid #EEEEEE;
        border-right: 1px solid #333333;
}
#navi a:hover {
        background: url("webimg/over.png") 0% 40% repeat-x;
        border-top: 1px solid #FFFFFF;
        border-left: 1px solid #FFFFFF;
}

css.maxdesign.com.au - CSS resources and tutorials for web designers and web developersに迷ってしまうほどたくさんのリストナビゲーションが紹介されています。

お気に入りが見つかるかも・・・

Posted

Prev«  1  |  2  | All

Tags