CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS画像スプライト（Image Sprite）を使ったナビゲーションメニューの作成方法

Webサイトの表示速度を向上させるテクニックのひとつに「CSS画像スプライト（Image Sprite）」があります。画像スプライトとは、複数の小さな画像を1枚の大きな画像ファイルにまとめておき、CSSのbackground-positionプロパティで必要な部分だけを表示する手法です。

通常、ページ内の画像1枚ごとにHTTPリクエストが発生しますが、スプライト化することでリクエスト数を大幅に削減でき、その結果としてサイトの読み込み時間を短縮できます。特にアイコンなど小さな画像を多数使うナビゲーションメニューと相性の良い技術です。

CSS画像スプライトでナビゲーションメニューを作成する

以下は、CSS画像スプライトを使用してナビゲーションメニューを作成するコード例です。ホーム・電話・ユーザー・検索の4つのアイコンを、1枚のスプライト画像「css_sprites.png」から表示しています。

コード例

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    margin: 0px;
}
span {
    width: 200px;
    height: 300px;
    background-color: black;
}
nav {
    background-color: black;
    height: 50px;
    padding-top: 15px;
    padding-left: 10px;
}
nav a {
    font-size: 20px;
    color: white;
    text-decoration: none;
    margin-right: 10px;
}
.home {
    width: 32px;
    height: 32px;
    background: url("css_sprites.png") -62px -62px;
}
.search {
    width: 32px;
    height: 32px;
    background: url("css_sprites.png") -10px -62px;
}
.phone {
    width: 32px;
    height: 32px;
    background: url("css_sprites.png") -62px -10px;
}
.user {
    width: 32px;
    height: 32px;
    background: url("css_sprites.png") -10px -10px;
}
</style>
</head>
<body>
<nav>
<img class="home" />
<a href="">HOME</a>
<img class="phone" />
<a href="">Call Us</a>
<img class="user" />
<a href="">Our Team</a>
<img class="search" />
<a href="">Search</a>
</nav>
<h1>
Main content here
</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, non! Numquam
reprehenderit alias, nisi eos corrupti repudiandae deleniti illo officiis!</p>
</body>
</html>

コードのポイント

  • 各アイコンクラス（.home、.search、.phone、.user）では、共通して同じ画像ファイル「css_sprites.png」を背景に指定しています。
  • widthとheightを32pxに固定し、スプライト画像の中から32×32ピクセルの領域だけを切り出して表示しています。
  • background-positionの値（例：-62px -62px）をずらすことで、1枚の画像から目的のアイコン部分だけを表示できます。
  • ナビゲーションバー（nav）は黒背景に白文字のリンクを並べ、アイコンとテキストラベルを組み合わせたシンプルなデザインになっています。

実行結果

上記のコードを実行すると、黒いナビゲーションバーに4つのアイコンとリンク（HOME／Call Us／Our Team／Search）が横並びで表示されます。

CSS画像スプライト（Image Sprite）を使ったナビゲーションメニューの作成方法

このように画像スプライトを活用すれば、画像ファイルの読み込みは1回だけで済むため、ナビゲーションメニューの表示も高速になります。アイコンが多いサイトほど効果を実感できるので、ぜひ試してみてください。

  1. CSSを使って画像スプライト（Image Sprite）からアイコンを表示する方法

    画像スプライト（Image Sprite）とは 画像スプライトとは、複数の小さな画像を1枚の大きな画像ファイルにまとめたものです。最大のメリットは、HTTPリクエストの回数を減らせることにあります。ブラウザがサーバーへ送るリクエスト数が減るほど、サイトの読み込み時間が短縮され、ページの表示速度が向上します。 CSSでスプライト画像からアイコンを表示する仕組み CSSでは、background-positionプロパティを調整することで、1枚のスプライト画像の中から目的のアイコン部分だけを切り出して表示できます。基本的な流れは以下の通りです。 backgroundプロパティでスプライト画像

  2. Python Tkinterでドロップダウンメニューを作成する方法

    ナビゲーションは、あらゆるアプリケーションにおいて最も重要な要素の一つです。洗練されたナビゲーションは、ユーザー体験を視覚的にも操作的にも大きく向上させます。Tkinterを使えば、メニューやサブメニューを非常に効率的に作成できます。Tkinterには、メニューを作成するための組み込み機能が用意されており、他のウィジェットやウィンドウから呼び出して利用できます。tkinter.Menuモジュールは、メニューアイテムに対してさまざまなプロパティを提供しています。これらのプロパティを使うことで、ボタンへのラベル付け、ボタンの状態切り替え、cascadeプロパティによるサブメニューの追加などが可能に