htmlのみでボタン作成・デザインする方法【CSSなし！】

ホームページにおいてリンクは非常に重要なものです。

そしてリンクを押してもらうために少し目立つデザインのボタンにしたいですよね？

「でもCSSは使いたくない！htmlだけでボタンって作れないの!?」

CSSを使わず、htmlのみでボタンを作る方法、そのデザインを任意に変更する方法を解説します。

htmlのみボタン完成形

<div align="center">
    <a href="#">
        <table border="1" bordercolor="#0812fd" cellspacing="0" width="150" cellpadding="10" bgcolor="#2f9800"><tr><td align="center"><font color="#FFF" size="+2">ボタン</font></td></tr></table>
    </a>
</div>

aタグでリンクを作ります。その中にtableを置き、ボタンの大きさや色を調整します。

属性値を変更することで大きさや色を変更できます。

上記をコピペしつつ、あなたの納得するデザインのボタンにしましょう。

「属性」がわからない人は下記記事で確認しましょう。

ボタンの位置

divのalign

centerを指定すると真ん中寄せです。

rightで右寄せです。

<div align="right">

左寄せにするには「align="center"」を消しましょう。

<div>

線の有無・太さ

border

数値を大きくすると太くすることができます。

<table border="3">

0にすると線を消すことができます。

<table border="0">

線の色

bordercolor

カラーコードを指定します。

線の太さが1以上のとき色をつけられます。

<table bordercolor="#fdbb08">

カラーコードについて詳しくはこちら↓

線のデザイン

cellspacing

0で一本線、1以上で二重線にできます。

<table cellspacing="2">

横幅

width

ボタンの横幅をpx（ピクセル）で指定しましょう。単位は不要で数値のみです。

<table width="300">

pxについて詳しくはこちら↓

高さ

cellpadding

ボタンテキストと枠との上下左右の隙間をpx（ピクセル）で指定しましょう。単位は不要で数値のみです。

横幅も数値分だけ広がります。

<table cellpadding="30">

背景色

bgcolor

ボタンの背景色を指定しましょう。カラーコードを指定します。

<table bgcolor="#0076cc">

文字色

color

ボタンテキストの色を指定しましょう。カラーコードを指定します。

<font color="#edf700">

文字の大きさ

size

ボタンテキストの文字の大きさを指定しましょう。-2～+4まで指定できます。

<font size="-1">

文字を太くする

bタグ

テキストをbタグで囲うと太字になります。

<font><b>ボタン</b></font>

ちゃんとCSSを使おう

ここまでhtmlのみのボタンの作り方を説明してきましたが、かなり強引な裏技的な作り方です。

まず、tableは表（ひょう）として使うべきであり、箱やワクとして使うものではありません。

また、bgcolorやcolorなどの属性、fontタグはhtml5では非推奨（廃止）されているので本当は使ってはいけません。今のところ機能するというだけです。

あと、クリック範囲がボタンの横にも広がってしまっています。

できればちゃんとCSSを勉強してCSSでデザインすることを強く勧めます。

CSSを使ったボタンの作り方はこちら↓

【まとめ】htmlのみでボタン作成

<div align="center">
    <a href="#">
        <table border="1" cellspacing="0" width="150" cellpadding="10" bgcolor="#2f9800"><tr><td align="center"><font color="#FFF" size="+2">ボタン</font></td></tr></table>
    </a>
</div>

下記でデザイン調節可能

・ボタンの位置	divのalign
・線の有無・太さ	border
・線のデザイン	cellspacing
・横幅	width
・高さ	cellpadding
・背景色	bgcolor
・文字色	color
・文字の大きさ	size
・字を太くする	bタグ

以上、htmlのみでボタン作成・デザインする方法でした。