かんたん作成【HTML CSS JavaScript PHP CGI Perl Ruby Python .htaccess】

ボタン風リンク

<html>
<head>
<title>ボタン風リンク</title>

<style type="text/css">
<!--
a    {
    padding:        3px 3px 3px 3px;
    color:            #000;
    width:            100px;
    text-align:        center;
    text-decoration:    none;
    background:        #ccc;
    border:            3px outset;
}
a:hover    {
    color:            #f00;
}
a:active    {
    border:            3px inset;
}
//-->
</style>

</head>
<body>
<a href="../../sample/sample1.html">ボタン</a>
</body>
</html>

〔実行する〕

スタイルシート(CSS)

●全体の背景色（background-color）	●全体の背景画像（background-image）
●全体の背景画像（固定　background-attachment）	●全体の背景画像（横のみ繰り返し　repeat-x）
●全体の背景画像（縦のみ繰り返し　repeat-y）	●全体の背景画像（位置指定　background-position）
●全体の背景一括指定（background）	●全体の文字色（color）
●リンク色（link, visited, hover, active）	●スクロールバーの色（scrollbar）
●フォント（font-family）	●文字サイズ（font-size）
●文字の太さ（font-weight）	●文字色（color）
●文字装飾（text-decoration）	●斜体（font-style）
●上付き文字・下付き文字（vertical-align）	●大文字変換・小文字変換（text-transform）
●行の高さ（line-height）	●文字間隔（letter-spacing）
●行揃え（text-align）	●１行目にインデント（text-indent）
●段落の１行目を装飾（first-line）	●段落の最初の１文字を装飾（first-letter）
●縦書き（writing-mode）	●自動改行しないで表示（white-space, nowrap）
●文字の背景色（background-color）	●文字の背景画像（background-image）
●枠（border-style）	●枠（太さ指定　border-width）
●枠（色指定　border-color）	●枠（一括指定　border）
●幅・高さ（width, height）	●マージン（外側の間隔　margin）
●パディング（内側の間隔　padding）	●リストスタイル（list-style-type,list-style-image,）
●番号つきリリスト（list-style-type,padding-left）	●画像サイズ（width）
●画像回り込み（float）	●画像にフィルター（透明度　filter, alpha）
●画像に枠（border）	●画像の重ね合わせ・重ねる順番指定（z-index）
●罫線の色・幅・高さ・枠	●フォームの色・サイズ
●IMEの入力モードの指定（ime-mode）	●カーソルの形を指定（cursor）
●ボタン風リンク	●画像ダウンロード対策（右クリックでの画像保存を禁止）

かんたん作成【HTML CSS JavaScript PHP CGI Perl Ruby Python .htaccess】