縦メニューを画像1枚、ロールオーバー実装するCSS | ネットショップ立ち上げ備忘録
上記のような画像を作成してCSSのみで縦メニューを一枚画像で作成する場合のメモ。 横メニューが一般化している昨今ですが、左メニューレイアウトを採用する場合もまだあると思います。 今回の利点は ・text-indentを使用しない ・htmlのソース上で<img>タグを使用しない ・画像一枚で実装するため、複数画像で実装するより読み込みが早くなる という感じかなと思います。 実験していないので勝手な予想ですがSEOで考えるとtext-indent:-9999px多用はあまりよろしくないかもと思っているのでもしかしたらSEOにも良いかもしれないのかな！？ ・実際のサンプル（1枚画像のサイズは横200px 縦150pxでメニュー1項目のサイズはw100px h50pxです） Top About Service ・html <div id="navitest"> <ul> <li id="top"
cssの情報・まとめ
cssの情報まとめです。ローカル 環境にストックしていた情報を 開放してみますのでシェアして 頂ければ幸いです。内容は 結構偏っていると思いますので 参考程度になさってください。 全てのcss情報が有るわけではありません。主観でストックしていたリンク集です。ツールとかメニュー関連とかハックとかいろいろ188の情報です。 ツールオンラインのcssツール。 CSS Validation Service / W3C検証サービス日本語版RoundedCornr / 角丸のHTML・CSSコードを生成してくれるCSS Type Set / ファミリー、色、単語間、行間等をプレビューで確認CSS Text Wrapper / 様々な形のテキストの回りこみを簡単に実現できるCSS Builder / オンラインでスタイルを生成可能Spiffy Box / cssによる角丸を簡単に生成The Box Of
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
