実用的ãªã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã®ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯ã®ã¾ã¨ã‚ | コリス
パãƒãƒ«ã‚„ボタンã€ã‚¿ãƒ–ã€ãƒ¡ãƒ‹ãƒ¥ãƒ¼ãªã©ã®UIエレメントã®ç¾Žã—ã„スタイルをã¯ã˜ã‚ã€ãƒ›ãƒãƒ¼æ™‚ã®ã‚¨ãƒ•ã‚§ã‚¯ãƒˆã€ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆãªã©ã€CSS3を使ã£ãŸã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã®ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯ã‚’紹介ã—ã¾ã™ã€‚ ※CSS3を使ã£ã¦ã„ã‚‹ãŸã‚ã€å¯¾å¿œãƒ–ラウザã¯IEã§ã¯9ãらã„ã®ã‚‚ã®ãŒå¤šã„ã§ã™ã€‚7対応もã‚ã‚Šã¾ã™ã€‚
ã€CSS】覚ãˆã¦ãŠã„ã¦æã¯ãªã„ CSS ã®å®šç•ªãƒ†ã‚¯ãƒ‹ãƒƒã‚¯ BEST 5 | ãƒã‚·ãƒ£ãƒã‚°ã€‚
ãƒãƒƒãƒˆã§æ¤œç´¢ã‚’ã™ã‚‹ã¨ CSS ã®ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯ãŒå±±ã»ã©å…¬é–‹ã•ã‚Œã¦ã„ã¾ã™ãŒã€å®Ÿéš›ã«å•†ç”¨ã‚µã‚¤ãƒˆã®åˆ¶ä½œã‚’ã—ã¦ã„ã¦å€‹äººçš„ã«åˆ©ç”¨ã™ã‚‹é »åº¦ãŒé«˜ã„テクニック㮠BEST 5 ã‚’ã”紹介ã—ã¾ã™ã€‚ ã¡ã‚‡ã£ã¨å‡ã£ãŸãƒ‡ã‚¶ã‚¤ãƒ³ã®ã‚µã‚¤ãƒˆã‚’コーディングã™ã‚‹æ™‚ã«ã€ã“れらã®ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯ã«åŠ©ã‘られるã“ã¨ãŒå¤šã„ã§ã™ã€‚ã©ã‚Œã‚‚覚ãˆã¦ãŠã„ã¦æã¯ãªã„ã‚‚ã®ã°ã‹ã‚Šã§ã™ï¼ IE6 ã§ã‚‚ min-height を使ㆠ例ãˆã°ã€ç•°ãªã‚‹é«˜ã•ã®ãƒ–ãƒãƒƒã‚¯ã‚’ float ã—ã¤ã¤åº•è¾ºã®ãƒ©ã‚¤ãƒ³ã‚’æƒãˆãŸã„時ãªã©ã«ã€ã€ŒIE6 ㌠min-height ã«å¯¾å¿œã—ã¦ã„ãŸã‚‰æ¥½ãªã®ã«ï¼ã€ã¨æ€ã†ã“ã¨ãŒã‚ã‚Šã¾ã™ãŒã€ä»¥ä¸‹ã®ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯ã‚’使ãˆã° IE6 ã§ã‚‚ min-height（相当）ã®é©ç”¨ãŒå¯èƒ½ã«ãªã‚Šã¾ã™ã€‚ [CREAMU]CSSã§min-heightをクãƒã‚¹ãƒ–ラウザã«ã™ã‚‹æœ€ã‚‚ç°¡å˜ãªæ–¹æ³•ã€ŽEasiest cross-browser CSS min-height〠IE6 ã« mi
タイトルã¨æ—¥ä»˜ï¼ˆãƒªã‚¹ãƒˆï¼‰ãŒä¸€è¡Œãªã‚µãƒ³ãƒ—ル
ã©ã“ã¨ãªã良ãã‚ã‚Šãã†ãªãƒªã‚¹ãƒˆã®ã‚µãƒ³ãƒ—ルã§ã™ã€‚ ã¡ã‚‡ã£ã¨å‰ã«ã“ã‚“ãªæ„Ÿã˜ã®ãƒ‡ã‚¶ã‚¤ãƒ³ã®ã‚’組んã ã®ã§ã€ãƒ¡ãƒ¢ãŒã¦ã‚‰è‰²ã‚“ãªãƒãƒ¼ã‚¸ãƒ§ãƒ³ã‚‚作ã£ã¦ã¿ã¾ã—ãŸã€‚ sample04辺りãŒè‰¯ã„ã‹ã‚‚ã—ã‚Œãªã„ã™ã€‚ サンプルページ ダウンãƒãƒ¼ãƒ‰ ulè¦ç´ ã®ã‚µãƒ³ãƒ—ル Sample 03ã¾ã§ã¯ulè¦ç´ ã§ã‚„ã£ã¦ã¿ã¾ã—ãŸã€‚ XHTMLã¯â†“ã“ã‚“ãªæ„Ÿã˜ã€‚spanè¦ç´ ç„¡ãã¦ã‚‚ã„ã‘ãã†ãªæ°—ã‚‚ã—ãŸã‘ã©ã€ã‚ã‚“ã©ï½’ï½™ <ul class="sample01"> <li> <a href="#">タイトル</a> <span>1983å¹´03月24æ—¥</span> </li> </ul> Sample 01 positionプãƒãƒ‘ティ使ã£ã¦è‰²ã€…ã‚„ã£ã¦ã‚‹æ„Ÿã˜ã§ã™ã€‚ ul.sample01 { width: 500px; margin-bottom: 30px; padding: 10px; border: 1px solid #999; } ul
æ–°è¦ã§ã‚µã‚¤ãƒˆã‚’作るã®ã«ä½¿ãˆãã†ãªã®ä¸€å¼ã€‚Ver 3
éšåˆ†å‰ã«ã€Ver2ã®è¦‹ç›´ã—ã‚’ã—ã¦3ã«ãªã£ã¦ãŸã‚“ã§ã™ã‘ã©ã€å…¬é–‹ã—ã¦ãªã‹ã£ãŸã®ã§ä»Šæ›´ãªãŒã‚‰å…¬é–‹ã§ã™ã€‚ ä¸èº«ã¯2を使ã£ã¦ã¿ã¦ã€ç¤¾å†…ã®ãƒžãƒ¼ã‚¯ã‚¢ãƒƒãƒ—エンジニアã‹ã‚‰ãƒ•ã‚£ãƒ¼ãƒ‰ãƒãƒƒã‚¯ã‚‚らã£ãŸã‚Šã€è‡ªåˆ†ã§ã‚‚é•å’Œæ„ŸãŒæœ‰ã£ãŸéƒ¨åˆ†ã‚’調整ã—ã¦ã¾ã™ã€‚ ãã‚Œãªã‚Šã®æœŸé–“使ã£ã¦ã¿ã¦ã€å•é¡Œã‚’ã‚ã‚“ã¾ã‚Šæ„Ÿã˜ã¦ã„ãªã„ã®ã§ã€å®Œæˆåº¦ã¨ã—ã¦ã¯å¤§åˆ†è‰¯ããªã£ãŸã‹ãªãã£ã¦æ€ã„ã¾ã™ã€‚ æ–°è¦ã§ã‚µã‚¤ãƒˆã‚’作るã®ã«ä½¿ãˆãã†ãªä¸€å¼ã€‚Ver 3ã‚’DL（zip：40kb） Ver 3を見る Ver.3ã®ä¸èº«ã”説明 主ãªå¤‰æ›´ç‚¹ã‚’。 style.cssã®widthãªã©ã®ãƒ—ãƒãƒ‘ティをã¾ã¨ã‚ã¦ã„ãŸã®ã‚’Ver1ã¨åŒã˜ã«ã€‚ default.cssã«æ›¸ã‹ã‚Œã¦ã„ãŸã€pè¦ç´ ã®margin-bottomã®æŒ‡å®šã‚’style.cssã«ç§»å‹•ã€‚ default.cssã®font-familyã®æŒ‡å®šã‚’若干変更。 index.htmlã«Googleカスタムサーãƒç”¨ã«ä½¿ãˆã‚‹ã‚½ãƒ¼ã‚¹ã‚’記入。 Ja
JavaScriptを使ã‚ãšã«ã‚„ã‚‹imgè¦ç´ ã®ãƒãƒ¼ãƒ«ã‚ªãƒ¼ãƒãƒ¼ã‚µãƒ³ãƒ—ル
本題ã®å‰ã«ã€CSS Sprite ã‚’ã‚°ãƒãƒ¼ãƒãƒ«ãƒŠãƒ“ゲーションã§ä½¿ã†ã®ã¯ä½•ã‹ãŒé•ã†ã¨æ€ã†ã®ã¯ãƒœã‚¯ã ã‘ã‹ã—ら？（テã‚ストをtext-indentã§é£›ã°ã—ã¦ã€ãƒãƒ¼ãƒ«ã‚ªãƒ¼ãƒãƒ¼ã•ã›ã‚‹ã‚¿ã‚¤ãƒ—ã®äº‹ã‚’指ã—ã¦ã¾ã™ï¼‰ 昔作ã£ãŸã‚µãƒ³ãƒ—ルã§ãã‚“ãªã‚ˆã†ãªã®ãŒã‚ã‚Šã¾ã—ãŸã€‚ 横並ã³ãƒ¡ãƒ‹ãƒ¥ãƒ¼ã®ãƒãƒ¼ãƒ«ã‚ªãƒ¼ãƒãƒ¼ã‚’JavaScriptを使ã‚ãšCSSã§å®Ÿç¾ CSS Spriteを有効ã«æ´»ç”¨ã™ã‚‹å ´é¢ã¯ã€ã‚ãã¾ã§ã‚‚背景画åƒã¨ã—ã¦é…ç½®ã•ã‚Œã¦ã„ã‚‹ã‚‚ã®ã‚’一枚画åƒã«ã—ã¦ç®¡ç†ã™ã‚‹ç‚¹ã«ã‚ã‚‹ã¨æ€ã£ã¦ã¦ã€ä¾‹ãˆã°ä»¥ä¸‹ã®ã‚ˆã†ãªå ´åˆã€‚ ページタイトルã®èƒŒæ™¯ç”»åƒãŒãƒšãƒ¼ã‚¸æ¯Žã«å¤‰ã‚ã‚‹å ´åˆã«å…¨ãƒšãƒ¼ã‚¸ã®ãƒšãƒ¼ã‚¸ã‚¿ã‚¤ãƒˆãƒ«ç”¨ç”»åƒã‚’一枚ã§ã¾ã¨ã‚る。 アイコン＋テã‚ストã¨ã„ã†çµ„ã¿åˆã‚ã›ã®å ´åˆã«ã€ã‚¢ã‚¤ã‚³ãƒ³ã‚’背景ã¨ã—ã¦ä½¿ã†ã€‚ ãã®ä»–ã€æœ¬æ¥èƒŒæ™¯ã¨ã—ã¦ä½¿ã†äºˆå®šã ã£ãŸç”»åƒã‚’一枚ã«ã¾ã¨ã‚る。 ã¨ã‹ãŒã€ã±ã£ã¨æµ®ã‹ã³ã¾ã—ãŸã€‚ ã‚“ã§ã€ã‚°ãƒãƒ¼ãƒãƒ«ãƒŠãƒ“ゲーションã«é™ã£ã¦ã¯ã€imgè¦ç´ ã§é…ç½®ã™ã‚‹äº‹
jQueryã‚„CSSを使ã£ãŸãƒŠãƒ“ゲーションメニュー300é¸ â€“ creamu
ã‹ã£ã“ã„ã„ナビゲーションメニューをã•ãã£ã¨å®Ÿè£…ã—ãŸã„。 ãã‚“ãªã‚ãªãŸã«ãŠã™ã™ã‚ãªã®ãŒã€ã€Ž300+ Jquery, CSS, MooTools and JS navigation menusã€ã€‚jQueryã‚„CSSを使ã£ãŸãƒŠãƒ“ゲーションメニュー300é¸ã 。 以下ã«ã„ãã¤ã‹ã”紹介。 » Fancy menu ã‹ã£ã“ã„ã„ナビゲーションメニュー » Amazing apple style navigation menu Appleã®ã‚µã‚¤ãƒˆã®ã‚ˆã†ãªãƒŠãƒ“ゲーションメニューã®ä½œã‚Šæ–¹ã€‚↑ã®ã‚ャプãƒãƒ£ã¯ã“ã¡ã‚‰ » jQuery idTabs 8ã¤ã®ã‚¯ãƒ¼ãƒ«ãªjQueryメニュー » navigation-3 プルダウンメニューãªã©4ã¤ã®ä¾‹ » block-navigation CSSデザインã®ãƒ¡ãƒ‹ãƒ¥ãƒ¼9é¸ ãã®ä»–ã®ãƒªã‚¹ãƒˆã¯ä»¥ä¸‹ã‹ã‚‰ã€‚ » 300+ Jquery, CSS, MooTools and JS na
1
ランã‚ング
ランã‚ング
ランã‚ング
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
CSSã®çŸ¥è˜ã‚’ã‚‚ã£ã¨æ·±ã‚ã‚‹30+2ã®å°æŠ€ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯é›†ï½œWebpark
jQueryサンプル集 | DesignWalker
http://www.designwalker.com/2009/08/wp-jquery.html
http://e0166nt.com/blog-entry-415.html
CSS Spriteを活用ã—よㆠ- DesignWalker
ナビゲーションメニューã®ãƒ‡ã‚¶ã‚¤ãƒ³ç·ã¾ã¨ã‚ - DesignWalker
{{#tags}}- {{label}}
{{/tags}}