リンクテンプレート

リンクはリストタグなどと組み合わせると色々なが出来ます。マウスオーバー時に色を変えたり、ボタンが凹んだように見える効果を与えたり出来るのも、CSSならではです。

リストのサンプルソース

▼マウスオーバーで色が変わるリンクサンプル

• リンクサンプル1
• リンクサンプル1
• リンクサンプル1

/***** サンプル1 *****/ #link001 ul { list-style-type : none; padding : 0; margin: 0; } #link001 li { display : inline; padding : 0; margin: 0; } #link001 a { display: block; color: #000066; font-size: medium; text-align: center; text-decoration: none; width: 8em; height: 1.5em; border: 1px solid #003399; background-color: #ccccff; padding: 0; margin: 1px 0px; } #link001 a:hover { display: block; color: #ccccff; font-size: medium; text-align: center; text-decoration: none; height: 1.5em; border: 1px solid #003399; background-color: #000066; padding: 0; margin: 1px 0px; } /***** サンプル1 *****/

▼マウスオーバーで凹むリンクサンプル

• リンクサンプル2
• リンクサンプル2
• リンクサンプル2

/***** サンプル2 *****/ #link002 ul { list-style-type : none; padding : 0; margin: 0; } #link002 li { display : inline; padding : 0; margin: 0; } #link002 a { display: block; color: #ffffff; font-size: medium; text-align: center; text-decoration: none; width: 8em; height: 1.5em; border-top: 2px solid #cccccc; border-right: 2px solid #000000; border-bottom: 2px solid #000000; border-left: 2px solid #999999; background-color: #333333; padding: 0; margin: 1px 0px; } #link002 a:hover { display: block; color: #cccccc; font-size: medium; text-align: center; text-decoration: none; height: 1.5em; border-top: 2px solid #000000; border-right: 2px solid #cccccc; border-bottom: 2px solid #cccccc; border-left: 2px solid #000000; background-color: #333333; padding: 0; margin: 1px 0px; } /***** サンプル2 *****/

▼出っ張ったボタン状のリンクサンプル

• リンクサンプル3
• リンクサンプル3
• リンクサンプル3

/***** サンプル3 *****/ #link003 ul { list-style-type : none; padding : 0; margin: 0; } #link003 li { display : inline; padding : 0; margin: 0; } #link003 a { display: block; color: #aa0000; font-size: medium; text-align: center; text-decoration: none; width: 8em; height: 1.5em; border: 4px outset #ff9999; background-color: #ffcccc; padding: 0; margin: 1px 0px; } #link003 a:hover { display: block; color: #aa0000; font-size: medium; text-align: center; text-decoration: none; height: 1.5em; border: 4px inset #ff9999; background-color: #ffcccc; padding: 0; margin: 1px 0px; } /***** サンプル3 *****/

▼横に並んだリンクサンプル 1

• リンクサンプル4
• リンクサンプル4
• リンクサンプル4

/***** サンプル4 *****/ #link004 ul { list-style-type : none; padding : 0; margin: 0; } #link004 li { float: left; display : inline; padding : 0; margin: 0; } #link004 a { display: block; color: #cc3300; font-size: medium; text-align: center; text-decoration: none; width: 8em; height: 1.5em; border: 1px solid #cccc33; background-color: #ffff99; padding: 0; margin: 0px 1px; } #link004 a:hover { display: block; color: #660000; font-size: medium; text-align: center; text-decoration: none; height: 1.5em; border: 1px solid #cccc33; background-color: #ffff99; padding: 0; margin: 0px 1px; } /***** サンプル4 *****/

▼横に並んだリンクサンプル 2

• リンクサンプル5
• リンクサンプル5
• リンクサンプル5

/***** サンプル5 *****/ #link005 ul { list-style-type : none; padding : 0; margin: 0; } #link005 li { float: left; display : inline; padding : 0; margin: 0; } #link005 a { display: block; color: #33cc00; font-size: medium; text-align: center; text-decoration: none; width: 8em; height: 1.5em; border: 2px dotted #006600; background-color: #ffffff; padding: 0; margin: 0px 2px; } #link005 a:hover { display: block; color: #006600; font-size: medium; text-align: center; text-decoration: none; height: 1.5em; border: 2px dotted #33cc00; background-color: #ffffff; padding: 0; margin: 0px 2px; } /***** サンプル5 *****/

戻る

TOP

Copyright © digilog. All Rights Reserved.