10月
1

ã“れã¯ä½¿ãˆã‚‹ï¼ãƒžã‚¦ã‚¹ã‚’ç”»åƒã®ä¸Šã«æŒã£ã¦ãã‚‹ã¨æ˜Žã‚‹ããªã‚‹å‡¦ç†ã‚’CSSã ã‘ã§å®Ÿè£…。

By admin  //  ケーススタディ, デザイン, 便利  //  コメントã¯å—ã‘付ã‘ã¦ã„ã¾ã›ã‚“。
ç”»åƒã®ä¸Šã«ãƒœã‚¿ãƒ³ã‚’æŒã£ã¦ãã‚‹ã¨ç”»åƒã®è‰²ãŒå¤‰ã‚るよã†ãªãƒšãƒ¼ã‚¸ãŒã‚りã¾ã™ã€‚
マウスãŒãƒ•ォーカスã—ã¦ã„ã‚‹ç”»åƒãŒæ˜Žã‚‹ããªã‚‹ã¨ã€ä»Šã©ã“ã‚’é¸ã‚“ã§ã„ã‚‹ã®ã‹ãŒã‚ã‹ã‚Šã‚„ã™ããªã£ã¦ãƒ¦ãƒ¼ã‚¶ãƒ¼ã«ã¨ã¦ã‚‚親切ã§ã™ã€‚
デザイン的ã«ã‚‚マウスã«ã‚ã‚ã›ã¦ç”»åƒãŒæ˜Žã‚‹ããªã‚‹ã¨ã‹ã£ã“ã„ã„ã§ã™ã­ã€‚
ãã‚“ãªãƒžã‚¦ã‚¹ã‚ªãƒ¼ãƒãƒ¼ã®å‡¦ç†ã‚’CSS(スタイルシート)ã ã‘ã§ç°¡å˜ã«ã‚„ã£ã¦ã—ã¾ã†æ–¹æ³•を紹介ã—ã¾ã™ã€‚

CSS(スタイルシート)ã ã‘ã§ãƒžã‚¦ã‚¹ã‚ªãƒ¼ãƒãƒ¼æ™‚ã«ç”»åƒã‚’明るãã™ã‚‹æ–¹æ³•

普通ã€ç”»åƒã«ãƒžã‚¦ã‚¹ã‚’åˆã‚ã›ã¦æ˜Žã‚‹ã目立ãŸã›ã‚‹å ´åˆã¯ã€
通常状態ã®ç”»åƒã¨ãƒžã‚¦ã‚¹ã‚’åˆã‚ã›ãŸã¨ãã®ç”»åƒã®ï¼’種類を用æ„ã—ã¦åˆ‡ã‚Šæ›¿ãˆã‚‹ã®ã§ã™ãŒã€
ãれãŒé¢å€’ãã•ã„ã“ã¨ã‚‚ã‚りã¾ã™ã‚ˆã­ã€‚
å˜ç´”ã«æ˜Žã‚‹ãã—ãŸã„ã ã‘ã§ã‚れã°ä»Šå›žã®æ–¹æ³•ãŒç°¡å˜ã§ä¾¿åˆ©ã§ã™ã€‚

CSS(スタイルシート)ã«ã¯é€æ˜Žåº¦ã‚’指定ã™ã‚‹æ–¹æ³•ãŒã‚りã¾ã™ã€‚
背景ãŒç™½ã„å ´åˆã¯ã€ç”»åƒã‚’å°‘ã—é€éŽã™ã‚‹ã ã‘ã§èƒŒæ™¯ã®ç™½ã„è‰²ãŒæµ®ã‹ã‚“ã§æ˜Žã‚‹ããªã‚Šã¾ã™ã€‚
ã“ã“ã§ã¯aã‚¿ã‚°ã«æ‹¬ã‚‰ã‚ŒãŸimgã‚¿ã‚°ã«å¯¾ã—ã¦é©ç”¨ã—ã¦ã¿ã¾ã™ã€‚
a img
{
        filter:alpha(opacity=80);
        -moz-opacity:0.8;
        -khtml-opacity: 0.8;
        opacity: 0.8;
}
※2010/12/10追記
 filter:alphaã¯IE対応。-moz-opacityã¯NetscapeNavigator対応。-khtml-opacityã¯Safariã®å¤ã„ãƒãƒ¼ã‚¸ãƒ§ãƒ³ã«å¯¾å¿œã™ã‚‹ãŸã‚ã§ã™ã€‚

マウスオーãƒãƒ¼ã®ä¾‹
例ãˆã°åƒ•ã®å¤§é˜ªã§çµŒå–¶ã—ã¦ã„るホームページ制作会社ã®ã‚µã‚¤ãƒˆã®
コンテンツページã®å·¦å´ã«ã‚ã‚‹twitterã®ãƒãƒŠãƒ¼ã¯ã“ã®ã‚³ãƒ¼ãƒ‰ã‚’使ã£ã¦ã„ã¾ã™ã€‚
スタイルシートを使ã£ãŸãƒžã‚¦ã‚¹ãƒ›ãƒãƒ¼å‡¦ç†
実際ã®ãƒ›ãƒ¼ãƒ ãƒšãƒ¼ã‚¸ã¯ã“ã¡ã‚‰

ã§ã‚‚ã€ã“ã®ã¾ã¾ã§ã¯èƒŒæ™¯ãŒæš—ã„サイトã§ã¯ãƒžã‚¦ã‚¹ã‚’åˆã‚ã›ã‚‹ã¨æš—ããªã‚‹ã¨ã„ã†ç¾è±¡ã«ãªã£ã¦ã—ã¾ã†ã®ã§ã€‚
èƒŒæ™¯ãŒæš—ã„サイトã§ã¯ã€imgè¦ç´ ã®èƒŒæ™¯ã«ã‚ãŸã‚‹aè¦ç´ ã®èƒŒæ™¯ã‚’白ãã—ã¦ã„ã¾ã™ã€‚
※width, heightã®ã‚µã‚¤ã‚ºã¯å„自設定ã—ã¦ãã ã•ã„
a{
background-color:#FFFFFF;
display:block;
height:125px;
width:125px;
}
ç”»åƒã®èƒŒæ™¯ã‚’白ãã™ã‚‹
例ãˆã°ãŠå®¢ã•ã‚“ã®ãƒ›ãƒ¼ãƒ ãƒšãƒ¼ã‚¸ã§ã“ã®ã‚³ãƒ¼ãƒ‰ã‚’使ã£ã¦ã„ã¾ã™ã€‚
åƒæž—ã®ã‚¢ãƒ¡ãƒªã‚«ãƒ³ã‚«ã‚¸ãƒ¥ã‚¢ãƒ«ã‚·ãƒ§ãƒƒãƒ—JAMN

ç”»åƒã‚’2枚用æ„ã—ãªãã¦ã„ã„ã®ã§ã¨ã¦ã‚‚便利ã§é‡å®ã—ã¦ã„ã¾ã™ã€‚
ãœã²ã€ã¿ãªã•んも使ã£ã¦ã¿ã¦ãã ã•ã„。

Comments are closed.

↓サーãƒãƒ¼ã‚’借りるãªã‚‰â†“
サーãƒãƒ¼ã«ã¤ã„ã¦ã¯ã“ã¡ã‚‰


↓ドメインをã¨ã‚‹ãªã‚‰â†“
ドメインã«ã¤ã„ã¦ã¯ã“ã¡ã‚‰

↓ãƒãƒƒãƒˆã‚·ãƒ§ãƒƒãƒ—ã‚’å§‹ã‚ã‚‹ãªã‚‰â†“

人気ã®è¨˜äº‹