CSS 3ã®ã‚»ãƒ¬ã‚¯ã‚¿ã€Œ:targetã€ã§ã‚¿ãƒ–メニューをã¤ãã‚‹ - builder by ZDNet JapanCSS 3ã®ã‚»ãƒ¬ã‚¯ã‚¿ã€Œ:targetã€ã‚’利用ã™ã‚Œã°ã€ãƒªãƒ³ã‚¯ã‚’タブメニューã®å½¢ã§è¡¨ç¤ºã—ã¦ã€1ページ内ã«è¨˜è¿°ã—ãŸã‚³ãƒ³ãƒ†ãƒ³ãƒ„を切り替ãˆã¦è¡¨ç¤ºã™ã‚‹ã‚ˆã†ã«æŒ‡å®šã™ã‚‹ã“ã¨ãŒå¯èƒ½ã 。HTMLã¨CSSã ã‘ã§ã‚¿ãƒ–メニューを作æˆã™ã‚‹å ´åˆã€ã“ã‚Œã¾ã§ã¯ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ã”ã¨ã«ãƒšãƒ¼ã‚¸ã‚’ã‚ã‘ã¦ä½œæˆã™ã‚‹å¿…è¦ãŒã‚ã£ãŸãŸã‚ã€1ページã§å®Ÿç¾ã§ãるメリットã¯å¤§ãã„ã¨è¨€ãˆã‚‹ã€‚ ã“ã“ã§ã¯ã€positionプãƒãƒ‘ティを指定ã—ã¦ã€Œãƒ†ã‚スト1ã€ã‹ã‚‰ã€Œãƒ†ã‚スト5ã€ã‚’åŒã˜ä½ç½®ã«é‡ãã¦è¡¨ç¤ºã—ã¦ã„る。ãã®ä¸Šã§ã€ãƒªãƒ³ã‚¯ã‚’クリックã—ã¦ã‚¿ãƒ¼ã‚²ãƒƒãƒˆã¨ã—ã¦è¡¨ç¤ºã•ã‚ŒãŸã¨ãã«ã ã‘z-indexプãƒãƒ‘ティをé©ç”¨ã—ã¦ã€æ‰‹å‰ã«è¡¨ç¤ºã™ã‚‹ã‚ˆã†ã«è¨å®šã—ãŸã€‚ div{ position: absolute; top: 17px; left: 20px; } #text1:target{ z-index: 2; } #text2:target{ z-index: 2; } #text
フォトショã„らãšï¼šCSSã§ç”»åƒã®ä¸Šã«æ–œã‚ã®å¸¯ã¨æ–‡å—を表示ã—ã¦ã¿ã‚‹ - builder by ZDNet Japan
{{#tags}}- {{label}}
{{/tags}}