Photoshopを使い、角丸のナビゲーションボタンを作ります。作り方 750*80pxで新規ファイル。 角丸長方形ツールで左上をクリックして、750*40pxの長方形を作る。 スタイルから、好きなスタイルを選択する。 新規レイヤーを作る。 鉛筆ツールを使い、Shiftキー…

【CSS】 CSS Spritesでナビゲーションを作る - PCゲーマーのWebデザイン備忘録 上記でやったのと同じように、横並びのナビゲーションを作っていきます。 ブラウザプレビュー： 使用したソース用意した画像：HTML <div id="nav"> <ul> <li id="home"><a href="#">ホーム</a></li> <li id="food"><a href="#">カフェフード</a></li> <li id="drink"><a href="#">カフェドリンク</a></li> <li id="info"><a href="#">イン</a></li></ul></div>…

150*40pxの横並びのボタンを5個作ります。作り方 環境設定で「プレビューの境界」にチェックを入れる。 表示から「ピクセルプレビュー」にチェックを入れる。 長方形ツールを使い、750px*40pxのオブジェクトを作る。 グラデーションツールでグラデーションを…

CSS Spritesを利用して、1枚の画像からたくさんの画像（例：ナビゲーション）などを表示する。ブラウザがWebサーバーに要求する画像の量が減り、Webページ表示高速化に繋がる利点がある。ブラウザプレビュー： ポイント：CSS Sprites等でテキストを隠す場合…