クールãªãƒŠãƒ“ゲーションメニューを作æˆã™ã‚‹CSS＆HTMLサンプル:phpspot開発日誌
woork: Pastel color menu with dynamic submenu using CSS クールãªãƒŠãƒ“ゲーションメニューを作æˆã™ã‚‹CSS＆HTMLサンプル 次ã®ã‚ˆã†ãªã€ã‚·ãƒ³ãƒ—ルã‹ã¤ã‚¯ãƒ¼ãƒ«ãªãƒ¡ãƒ‹ãƒ¥ãƒ¼ã‚’作æˆã™ã‚‹ã‚µãƒ³ãƒ—ルã§ã™ ソースコードもダウンãƒãƒ¼ãƒ‰ã§ãã‚‹ã®ã§ã‚«ã‚¹ã‚¿ãƒžã‚¤ã‚ºã‚‚容易。 メニュー作æˆãŒé¢å€’ã ãªãƒ¼ã€ã¨ã„ã†å ´åˆã«ä½¿ãˆã¾ã™ã。
JavaScriptを使ã‚ãšã«ã‚„ã‚‹imgè¦ç´ ã®ãƒãƒ¼ãƒ«ã‚ªãƒ¼ãƒãƒ¼ã‚µãƒ³ãƒ—ル
本題ã®å‰ã«ã€CSS Sprite ã‚’ã‚°ãƒãƒ¼ãƒãƒ«ãƒŠãƒ“ゲーションã§ä½¿ã†ã®ã¯ä½•ã‹ãŒé•ã†ã¨æ€ã†ã®ã¯ãƒœã‚¯ã ã‘ã‹ã—ら？（テã‚ストをtext-indentã§é£›ã°ã—ã¦ã€ãƒãƒ¼ãƒ«ã‚ªãƒ¼ãƒãƒ¼ã•ã›ã‚‹ã‚¿ã‚¤ãƒ—ã®äº‹ã‚’指ã—ã¦ã¾ã™ï¼‰ 昔作ã£ãŸã‚µãƒ³ãƒ—ルã§ãã‚“ãªã‚ˆã†ãªã®ãŒã‚ã‚Šã¾ã—ãŸã€‚ 横並ã³ãƒ¡ãƒ‹ãƒ¥ãƒ¼ã®ãƒãƒ¼ãƒ«ã‚ªãƒ¼ãƒãƒ¼ã‚’JavaScriptを使ã‚ãšCSSã§å®Ÿç¾ CSS Spriteを有効ã«æ´»ç”¨ã™ã‚‹å ´é¢ã¯ã€ã‚ãã¾ã§ã‚‚背景画åƒã¨ã—ã¦é…ç½®ã•ã‚Œã¦ã„ã‚‹ã‚‚ã®ã‚’一枚画åƒã«ã—ã¦ç®¡ç†ã™ã‚‹ç‚¹ã«ã‚ã‚‹ã¨æ€ã£ã¦ã¦ã€ä¾‹ãˆã°ä»¥ä¸‹ã®ã‚ˆã†ãªå ´åˆã€‚ ページタイトルã®èƒŒæ™¯ç”»åƒãŒãƒšãƒ¼ã‚¸æ¯Žã«å¤‰ã‚ã‚‹å ´åˆã«å…¨ãƒšãƒ¼ã‚¸ã®ãƒšãƒ¼ã‚¸ã‚¿ã‚¤ãƒˆãƒ«ç”¨ç”»åƒã‚’一枚ã§ã¾ã¨ã‚る。 アイコン＋テã‚ストã¨ã„ã†çµ„ã¿åˆã‚ã›ã®å ´åˆã«ã€ã‚¢ã‚¤ã‚³ãƒ³ã‚’背景ã¨ã—ã¦ä½¿ã†ã€‚ ãã®ä»–ã€æœ¬æ¥èƒŒæ™¯ã¨ã—ã¦ä½¿ã†äºˆå®šã ã£ãŸç”»åƒã‚’一枚ã«ã¾ã¨ã‚る。 ã¨ã‹ãŒã€ã±ã£ã¨æµ®ã‹ã³ã¾ã—ãŸã€‚ ã‚“ã§ã€ã‚°ãƒãƒ¼ãƒãƒ«ãƒŠãƒ“ゲーションã«é™ã£ã¦ã¯ã€imgè¦ç´ ã§é…ç½®ã™ã‚‹äº‹
CSSã§ã‚¤ãƒ¡ãƒ¼ã‚¸ã‚’オシャレã«ä¿®é£¾ã™ã‚‹ã‚µãƒ³ãƒ—ル集「CSS Decorative Galleryã€:phpspot開発日誌
CSS Decorative Gallery I’m using the same trick to show you how to decorate your images and photo galleries without editing the source images.CSSã§ã‚¤ãƒ¡ãƒ¼ã‚¸ã‚’オシャレã«ä¿®é£¾ã™ã‚‹ã‚µãƒ³ãƒ—ル集「CSS Decorative Galleryã€ã€‚ イメージã«ï¼£ï¼³ï¼³ã‚’ã‚ã¦ã‚‹ã“ã¨ã§ã€æ¬¡ã®ã‚ˆã†ã«ã€ã‚»ãƒãƒãƒ³ãƒ†ãƒ¼ãƒ—ã§è²¼ã‚Šä»˜ã‘ãŸã‚Šã€ç”»é‹²ã§ã¨ã‚ãŸã‚Šã¨ã„ã£ãŸåŠ¹æžœã‚’出ã™ã“ã¨ãŒã§ãã¾ã™ã€‚ デモページã¯ã“ã¡ã‚‰ã§ï¼©ï¼¥ï¼–ã§ã‚‚å•é¡Œãªã動作。 沢山種類ãŒã‚ã£ã¦ã€è‰²ã‚“ãªå ´é¢ã§ä½¿ãˆãã†ã§ã™ã€‚ ã“ã‚Œã¯ä¹…ã—ã¶ã‚Šã«æ„Ÿå‹•ã—ã¾ã—ãŸã€‚
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}