ケータイ版 ミニタコ
HTMLタグ > フォーム：ボタン
ボタンにはいろんな働きをするものが作れますが、装飾のしかたはだいたい同じです。
ここでは、装飾をメインに紹介します。
フォームは、入力するもの、それを送信するものやクリアするものなどを1セットとして、 <form>と</form>で囲みます。
<form>の前と</form>の後ろは改行2つ分が自動で入ります。
改行しないようにする方法は、
こちら
へどうぞ。
基本のボタン
リンクの機能のボタンを例にします。
<input type=button value=
【ボタンに表示される文字】
onclick="window.location.href='
【リンク先】
'">
ボタンを装飾するには、<input〜>の < > 内に、以下のタグを追加します。
ボタンの文字を変える
style="font:
【サイズ】
pt
【フォント】
;color:
【色】
;"
サイズだけなら「font:○pt」で、フォントだけなら「font-family:○」でも可。
フォントは2種類以上指定する場合は「,」で区切ります。
それ以外に、太字にする「font-weight:bold」が使えますが、斜体にできそうな「font-weight:italic」は使えないようです。
ボタンの背景色を変える
指定のないときは薄いグレーになります。
色を入れず、「none」と入れると背景がなくなり、 こんな感じで下の色や壁紙が透ける状態になります。
style="background:
【色】
;"
ボタンの枠を変える
style="border:
【太さ】
【色】
【スタイル】
;"
枠は「border」の代わりに以下のタグを使って、上辺、下辺、左辺、右辺を別々に装飾することもできます。
上辺
border-top
左辺
border-left
下辺
border-bottom
右辺
border-right
または、太さを「border-width」、色を「border-color」、スタイルを「border-style」として単独での指定もできます。
これを使うとき、半角スペースをあけて4つ並べると、「【上辺】 【右辺】 【下辺】 【左辺】」の順に指定できます。
ボタンの背景に画像を使う
style="background-image:url(
【画像】
)"
ボタンのサイズを変える
style="width:
【幅】
; height:
【高さ】
";
ボタンの大きさを変える場合は、枠を装飾しないと汚くなります(´・ω・｀)
ボタンにマウスカーソルをのせると、ボタンの背景色が変わる
style="background:
【マウスがのる前の色】
"
onmouseover="this.style.backgroundColor='
【マウスがのった後の色】
'"
onmouseout="this.style.backgroundColor='
【マウスが離れた後の色】
'"
「backgroundColor」の「C」は大文字でないとだめのようです。
ボタンに文字を流す
トップページへとびまーす。
普通のボタンと少し形式が違います。
マーキーを使うと「value=○」は無効になります。
文字や背景、枠を装飾する場合は、装飾のタグを<button〜>の < > 内に入れます。
リンクボタン以外の場合は、<input type=button〜>に入っているタグを<button〜> の < > 内に入れてこの形式にすればいいのかな。
時間見付けて、追加しておきますm(_ _)m
報告下さる方いらっしゃれば感激(ノ_<。)
マーキーを使うと、幅が長めになる仕様のようです。
<button onclick="window.location.href='
【リンク先】
'">
<marquee>
【流す文字】
</marquee>
</button>
「HTMLタグ」のトップに戻る
サイト案内
メニューはこちらから♪
イラスト
WEB素材
CGIスクリプト
HTMLタグ
デスクトップアクセサリ
スナップ写真
クローゼット
コスプレ写真
オークション用テンプレート
ナース勉強会
ナチュラルライフ
節約レシピ
リンク集
日記
アルバム
エッセイ
サークル活動・通信販売
お薦めグッズ・お薦めショップ
トップページ
タコ缶メルマガ
毎週日曜日22時頃発行。
ｻｲﾄの更新情報やその裏話、Q&Aなどをお届けします♪
English(Yahoo! Babel Fish)
お気に入りショップ
■総合
楽天市場
Yahoo!ショッピング
amazon.co.jp
ぽちっとアスクル
ムトウ On-line Shop
セシール
無印良品
ベルメゾン
FELISSIMO
HIRAKI
■レディスファッション
and it_
PENNSNECK
イーザッカマニアストアーズ
なでしこ
armoire
JJmode
TIROL SHOP
narue
■メンズファッション
Midas
Ever Green
Jiggy’s shop
GIGI
■ファッション小物
ジェイウェルドットコム
an-ten-na
ABCマート.net
Swatch
■医療・介護
007速配コンタクト
ヴィーナス
聴診器のパネシアン
■美容
コスメ・コム
コスメデネット
ぴのあ
化粧品原料通販センケン
■ウェディング
ウエディングアイテムドットネット
Stylful shopping
ペーパーガーデン
■ベビー・キッズ・マタニティ
CUSE BERRY
わくわくネンネ
あぴたきっず
姫様NENE
京都瑠璃雛菊
キャサリンコテージ
BABY BABY
布絵本のふかふか絵本
■パソコン
マウスコンピューター
EC・POWERS
Vintage Computer LLC
五州貿易
Vis-a-Vis
JTT Online Shop
Vector
■家電・インテリア
ウエストハウスギャラリー
クレッシェンド
薔薇とレースと天使のお店
フジパーツ
■キッチン
贈り物の和心屋
M' home style
■スイーツ
花のようなケーキ
アルパジョン
ちた屋特産市場
田園ぽてと
エコール・クリオロ
宇治茶 伊藤久右衛門
横浜夢本舗
ROYCE
■音楽ダウンロード
iTunes Store
リッスンジャパン
■ホビー・キャラクターグッズ
夢のあるラジコンホビーショップ
キャラアニ.com
アニメイトWEB
お宝アイドルテレカ鑑定団
■雑貨
zacca
Princess Rose
雑貨店ブルーデージー
携帯グッズ専門店ストラップヤ.com
携帯電話アクセサリーの飾り屋
デコ電パーツPrincess Rose
■花
e87.com
アニヴェルセル表参道
■金券・図書カード
カード屋さん
■ギフト
楽天ぬいぐるみカード
■その他
ホットペッパー
楽天トラベル
イーバンク銀行
ジャパンネット銀行
楽天カード
Skype
＠電子チケットぴあ
がくぶん
イーブックオフ（買取）
CHINTAI Net
QRコード
カウンタ
Total：
Today：
Yesterday：
