[CSS] 美ã—ã„パンããšã‚’実装ã™ã‚‹4ã¤ã®ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆ | コリス
ç”»åƒã‚’使用ã›ãšã«ã€ã‚·ãƒ³ãƒ—ルãªHTMLã§ç¾Žã—ã„パンããšã‚’実装ã™ã‚‹ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã®ãƒãƒ¥ãƒ¼ãƒˆãƒªã‚¢ãƒ«ã‚’紹介ã—ã¾ã™ã€‚ CSS3 breadcrumbs [ad#ad-2] デモ 実装 デモ デモã¯CSS3ã€ç–‘ä¼¼è¦ç´ を使用ã—ã¦ã„ã‚‹ãŸã‚ã€IE9+, Firefox, Chrome, Safari, Operaã§ã”覧ãã ã•ã„。 4ã¤ãƒ‡ãƒ¢ã¯ã€å…¨ã¦ç”»åƒã‚’使用ã—ã¦ã„ã¾ã›ã‚“。 デモページ：ホãƒãƒ¼æ™‚ 実装 HTML HTMLã¯éžå¸¸ã«ã‚·ãƒ³ãƒ—ルã§ã€ãƒªã‚¹ãƒˆè¦ç´ を使用ã—ã¾ã™ã€‚ ulè¦ç´ ã«idã€ç¾åœ¨ä½ç½®ã«classを記述ã—ã¾ã™ã€‚ <ul id="breadcrumbs-one"> <li><a href="">Lorem ipsum</a></li> <li><a href="">Vivamus nisi eros</a></li> <li><a href="">Nulla sed lorem risus</a></li>
パン屑リストã«ã¤ã„ã¦ã‚‚ã†ä¸€åº¦è€ƒãˆã¦ã¿ã‚‹
様々ãªãƒ‘ン屑リスト 利用者ãŒè¾¿ã£ã¦ããŸé“ç‹ã‚’示ã—ã€ã„ã¤ã§ã‚‚å…ˆã«æˆ»ã‚Œã‚‹ã‚ˆã†ãªé…æ…®ã¨ã—ã¦ãƒ‘ン屑リストãŒã‚ã‚Šã¾ã™ã€‚IA ã®å°‚門家 Keith Instone ã«ã‚ˆã‚‹ã¨ã€ãƒ‘ン屑リストã«ã¯ä»¥ä¸‹ã®ã‚¿ã‚¤ãƒ—ãŒã‚ã‚‹ã¨è¨€ã‚ã‚Œã¦ã„ã¾ã™ã€‚ å ´æ‰€ã®ç¤ºã™ Webサイトをツリー状ã¨ã—ã¦æ‰ãˆãŸã¨ãã®åˆ©ç”¨è€…ã®ç¾åœ¨åœ°ã‚’表示ã™ã‚‹ 経路を示㙠利用者ãŒç¾åœ¨åœ°ã¾ã§è¾¿ã‚Šç€ã„ãŸé“ç‹ã‚’表示ã™ã‚‹ 属性を示㙠æ–é¢çš„ãªæ¤œç´¢ã‚’ã—ã¦çµžã‚Šè¾¼ã‚€éš›ã€é¸æŠžæ¸ˆã¿ã®å±žæ€§ã‚’表示ã™ã‚‹ 進行状æ³ã‚’示㙠アプリケーションã®åˆ©ç”¨ã®éš›ã€ã‚¿ã‚¹ã‚¯ã®é€²è¡ŒçŠ¶æ³ã‚’表示ã™ã‚‹ ãã‚Œãžã‚Œã®ãƒ‘ン屑リストã«ã¯ç‰¹æœ‰ã®æ©Ÿèƒ½ãŒã‚り役割を果ãŸã—ã¦æ¥ãŸã‚ã‘ã§ã™ãŒã€æœ¬å½“ã«å¿…è¦ã‹ã©ã†ã‹ã‚’å†è€ƒã™ã‚‹ã¹ãタイプもã‚ã‚Šã¾ã™ã€‚例ãˆã°çµŒè·¯ã‚’示ã™ãƒ‘ン屑ã®å ´åˆã€ãƒ–ラウザã§æ—¢ã«å®Ÿè£…ã—ã¦ã„る「戻る / å±¥æ´ã€ã¨é‡è¤‡ã—ã¦ã„ã¾ã™ã€‚ã¾ãŸã€åˆ©ç”¨è€…ãŒå¹¾ã¤ã‹ã®ãƒšãƒ¼ã‚¸ã‚’ブラウジングã—ã¦ã„ã‚‹ã ã‘ã®å ´åˆãªã©çµŒè·¯ã‚’残ã™ã¹ãã‹åˆ¤æ–ã—ã«ãã„å ´åˆ
[CSS]パンããšã®å®Ÿè£…ã¯ã©ã®ã‚ˆã†ã«ã™ã‚‹ã®ãŒã‚ˆã„ã‹ã®è€ƒå¯Ÿ
パンããšã¯ä½•è¦ç´ ã§å®Ÿè£…ã—ã¦ã„ã¾ã™ã‹ï¼Ÿã€€ulè¦ç´ ？　olè¦ç´ ？　pè¦ç´ ？ パンããšã‚’ã©ã®ã‚ˆã†ã«å®Ÿè£…ã™ã‚‹ã®ãŒã‚ˆã„ã‹ã®è€ƒå¯Ÿã‚’紹介ã—ã¾ã™ã€‚ Exploring Markup for Breadcrumbs [ad#ad-2] 先日紹介ã—ãŸCSS-Tricksã®ã€Œç”»åƒã‚’使用ã—ãªã„ã§Apple風ã®ãƒ‘ンããšã‚’作æˆã™ã‚‹ãƒãƒ¥ãƒ¼ãƒˆãƒªã‚¢ãƒ«ã€ã«å¯„ã›ã‚‰ã‚ŒãŸã‚³ãƒ¡ãƒ³ãƒˆã‹ã‚‰è€ƒå¯Ÿã•ã‚ŒãŸã‚‚ã®ã§ã€å„ãƒã‚¤ãƒ³ãƒˆã‚’æ„訳ã—ãŸã‚‚ã®ã§ã™ã€‚ パンããšã®ãƒžãƒ¼ã‚¯ã‚¢ãƒƒãƒ—ã®è€ƒå¯Ÿã®ãã£ã‹ã‘ -ulè¦ç´ ã§åŒåˆ—é…ç½® パンããšã®ãƒžãƒ¼ã‚¯ã‚¢ãƒƒãƒ—ã®è€ƒå¯Ÿ -ulè¦ç´ ã§è¦ªå パンããšã®ãƒžãƒ¼ã‚¯ã‚¢ãƒƒãƒ—ã®è€ƒå¯Ÿ -olè¦ç´ ã§é †åºã¥ã‘ パンããšã®ãƒžãƒ¼ã‚¯ã‚¢ãƒƒãƒ—ã®è€ƒå¯Ÿ -セパレーターã®ä½¿ç”¨ パンããšã®ãƒžãƒ¼ã‚¯ã‚¢ãƒƒãƒ—ã®è€ƒå¯Ÿ -Googleã‚’å‚考㫠パンããšã®ãƒžãƒ¼ã‚¯ã‚¢ãƒƒãƒ—ã®è€ƒå¯Ÿ -HTML5ã®ä½¿ç”¨ パンããšã®ãƒžãƒ¼ã‚¯ã‚¢ãƒƒãƒ—ã®è€ƒå¯Ÿ -ãŠã‚り㫠パンããšã®ãƒžãƒ¼ã‚¯ã‚¢ãƒƒãƒ—ã®è€ƒå¯Ÿã®ãã£ã‹ã‘ -ul
[CSS]ç”»åƒã‚’使用ã—ãªã„ã§Apple風ã®ãƒ‘ンããšã‚’作æˆã™ã‚‹ãƒãƒ¥ãƒ¼ãƒˆãƒªã‚¢ãƒ«
階層を区切る三角ã®ãƒ‡ã‚¶ã‚¤ãƒ³ãŒç‰¹å¾´çš„ãªApple風ã®ãƒ‘ンããšã‚’åŒä¸€ã®è‰²ç›¸ã§ã‚«ãƒ©ãƒ¼ãƒªãƒ³ã‚°ã—ãŸã‚‚ã®ã‚’実装ã™ã‚‹ãƒãƒ¥ãƒ¼ãƒˆãƒªã‚¢ãƒ«ã‚’紹介ã—ã¾ã™ã€‚ 三角ã®ç®‡æ‰€ã¯ç”»åƒã‚’使用ã—ãªã„ã§ã€CSSã§å®Ÿè£…ã•ã‚Œã¦ã„ã¾ã™ã€‚ Breadcrumb Navigation with CSS Triangles デモページ [ad#ad-2] HTML -マークアップ パンããšã¯ãƒªã‚¹ãƒˆè¦ç´ ã§å®Ÿè£…ã—ã¾ã™ã€‚ シンプルã§ã‚¯ãƒªãƒ¼ãƒ³ã«å®Ÿè£…ã™ã‚‹ãŸã‚ã«ã€å„アイテムã«ã¯classを使用ã—ã¾ã›ã‚“。 HTML <ul class="breadcrumb"> <li><a href="#">トップページ</a></li> <li><a href="#">第二階層</a></li> <li><a href="#">第三階層</a></li> <li><a href="#">第四階層</a></li> <li><a href="#">ç¾åœ¨ä½ç½®</a></
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
Movable Typeã§ãƒ‘ンããšã‚’カテゴリ階層ã§å®Ÿè£…ã™ã‚‹ | helog - スマートフォンやhtml5+CSS3ãªã©æ–°æŠ€è¡“ã«å››è‹¦å…«è‹¦ã€‚jQueryã€Ajaxãªã©JavaScriptも難ã—ã„ã§ã™ã。ãã‚“ãªWebã«æ‚©ã‚€äººã®ãƒã‚¿å¸³ã§ã™ã€‚
{{#tags}}- {{label}}
{{/tags}}