HTMLのみで4個のボタンを横並びのデザイン・HTMLコード
みなさん、こんにちは。今日はHTMLのみを使用して4つのボタンを横並びにし、それぞれをページ内の異なるセクションにリンクする方法をご紹介します。さらに、各ボタンに異なる背景色を設定して、視覚的に区別しやすくします。それでは、早速見てみましょう。
デザイン
| Button 1 | Button 2 | Button 3 | Button 4 |
HTMLコード
<table width="100%">
<tr>
<td align="center">
<a href="#section1" style="display: inline-block; padding: 10px; background: #add8e6; color: black; text-decoration: none;">
<font size="5"><b>Button 1</b></font>
</a>
</td>
<td align="center">
<a href="#section2" style="display: inline-block; padding: 10px; background: #F4F1D1; color: black; text-decoration: none;">
<font size="5"><b>Button 2</b></font>
</a>
</td>
<td align="center">
<a href="#section3" style="display: inline-block; padding: 10px; background: #E2EFDC; color: black; text-decoration: none;">
<font size="5"><b>Button 3</b></font>
</a>
</td>
<td align="center">
<a href="#section4" style="display: inline-block; padding: 10px; background: #F9E4E2; color: black; text-decoration: none;">
<font size="5"><b>Button 4</b></font>
</a>
</td>
</tr>
</table>
<h2 id="section1">Section 1</h2>
<!-- Section 1の内容 -->
<h2 id="section2">Section 2</h2>
<!-- Section 2の内容 -->
<h2 id="section3">Section 3</h2>
<!-- Section 3の内容 -->
<h2 id="section4">Section 4</h2>
<!-- Section 4の内容 -->
このコードをコピー&ペーストしてご自身のウェブページに貼り付けてみてください。4つのボタンが横並びに表示され、それぞれがページ内の異なるセクションにリンクするはずです。
それでは、次にこのコードがどのように作られたのか、その過程を見ていきましょう。
初めに！このブログの趣旨
今回はユーザー様から依頼がと要望があり、「HTMLでの横並びで4つのボタン作成」をすることになりました。
ただ、ユーザー様に理解できるようにという流れになり、他の皆様に参考になればということで、ユーザー様の許可を得て公開しております。何かの気づきになればと願うばかりです。
また、そんなことはいらない人に為に、今回異例ですが最初に結論ありきの記事にさせていただきました。
この後も新しい試みですので、少し読みづらいかもしれませんがその点はお許しください。でもこのような記事本当にニーズあるのかは疑問ですが・・・
では、本題に入らせていただきます。
HTMLでのボタン作成とは？
ボタンは、ウェブサイトにおいて重要なインタラクションの一つです。HTMLでは、通常は<button>タグを使って簡単にボタンを作成することができます。これはセマンティック（意味的）に適切な方法です。
しかし、特定のプラットフォームでは、<button>タグが禁止コードとされていることもあります。例えば、アメーバブログでは、<button>タグが禁止されています。このような場合、代替手段として<a> (アンカー) タグを使ってリンクを作成し、それをボタンのように見せることが可能です。
HTMLコード
<table>
<tr>
<td><button>Button 1</button></td>
<td><button>Button 2</button></td>
<td><button>Button 3</button></td>
<td><button>Button 4</button></td>
</tr>
</table>
しかし、特定のプラットフォームでは、<button>タグやCSSなど一部の機能が制限されていることもあります。例えば、アメーバブログでは、<button>タグが禁止コードとされており、またCSSを用いた装飾がスマートフォンの表示に反映されないという問題が存在します。
これらの制約に対処するために、他のHTML要素を使用してボタンのように見せる方法を探ります。具体的には、<a> (アンカー) タグを使ってリンクを作成し、それをボタンのように見せます。さらに、HTMLのテーブル機能を利用して、4つのボタンを横並びに配置します。
具体的には、<a> (アンカー) タグを使ってリンクを作成し、それをボタンのように見せます。さらに、HTMLのテーブル機能を利用して、4つのボタンを横並びに配置します。
以下のHTMLコードは、このアプローチを実装したものです：
デザイン
| Button 1 | Button 2 | Button 3 | Button 4 |
HTMLコード
<table>
<tr>
<td><a href="#">Button 1</a></td>
<td><a href="#">Button 2</a></td>
<td><a href="#">Button 3</a></td>
<td><a href="#">Button 4</a></td>
</tr>
</table>
このコードについて説明します：
<table>：テーブルを開始します。<tr>：テーブル行を開始します。<td>：テーブルのデータセルを開始します。ボタンを含む各セルは、テーブルの新しい列を作成します。<a href="#">：ボタンとして機能するリンクを作成します。ここに任意のテキストを入れることができます。
この方法では、4つのボタンが同じ行に横並びに配置されます。ただし、CSSを使用しないため、ボタンのスタイルや配置を微調整することはできません。この方法は非常に基本的で、より洗練されたデザインを実現するにはCSSやJavaScriptのような他の技術が必要となります。
その分、素人でも理解しやすい点と設置しやすいという点で理解を得ました。
ページ内リンクの作成
次に、ページ内リンクの作成方法について解説します。ページ内リンクは、同一ページ内の異なるセクション間を移動するためのリンクです。HTMLでは、<a>タグのhref属性に#とセクションのIDを指定することで、ページ内リンクを作成することができます。
具体的には
<table>
<tr>
<td><a href="#">Button 1</a></td>
<td><a href="#">Button 2</a></td>
<td><a href="#">Button 3</a></td>
<td><a href="#">Button 4</a></td>
</tr>
</table>
ユーザーとデザイナーの対話: ページ内リンクのコードを書き換える過程
私（デザイナー）は最初、以下のようなコードを提案しました。
<a href="#section1">Go to Section 1</a>
しかし、ユーザーはアメーバブログのモバイル版でページ内リンクがうまく動作しないという問題を持っていました。この問題に対する直接的な解決策は私には分からなかったため、公式サポートやユーザーコミュニティに問い合わせることを提案しました。
問合せの結果、アメーバブログのモバイル版でページ内リンクがうまく動作しないという問題はシステム側の問題ではなく、ユーザーのスマホの問題があるとわかりました。
・スマホの仕様の問題？ ・スマホのメモリーやキャッシュの問題
他にもあるかもしれませんが、ユーザーのスマホでは動作しなかったことも、他のスマホでは動作したので、その点は一安心です。
CSSを使用できないでデザイン不足の解消
CSSなしにボタンらしく装飾デザイン
CSSを使用できないでデザイン不足の問題を解決するために、少しだけ工夫しました。（あまりコードが増えない程度）
具体的には以下の提案です。
デザイン
| Button 1 | Button 2 | Button 3 | Button 4 |
HTMLコード
<table>
<tr>
<td><a href="#" style="display: inline-block; padding: 10px; background: #ddd; color: black; text-decoration: none;">Button 1</a></td>
<td><a href="#" style="display: inline-block; padding: 10px; background: #ddd; color: black; text-decoration: none;">Button 2</a></td>
<td><a href="#" style="display: inline-block; padding: 10px; background: #ddd; color: black; text-decoration: none;">Button 3</a></td>
<td><a href="#" style="display: inline-block; padding: 10px; background: #ddd; color: black; text-decoration: none;">Button 4</a></td>
</tr>
</table>
これだと、文字の囲いができてボタンらしくなります。
スタイル属性を使用していますが、これは基本的にはインラインCSSと同じです。この方法は非常に制限があり、管理も大変です。CSSが使える場合は、CSSを利用することを強く推奨します。
なお、"CSSが使えない"という状況は非常に稀で、特殊な環境または制限がある場合にのみ発生します。通常のウェブ開発においてはCSSを用いることで、より柔軟で美しいデザインを作成することが可能です。
CSSが使えない理由の詳細な説明
HTMLにCSSを適用することで、ウェブページの見た目やレイアウトを大きく変えることができます。しかし、一部のプラットフォームでは、CSSの使用が制限される場合があります。
例えば、アメーバブログでは、ユーザーが自由にCSSを適用することはできません。CSSは使えるのですが、その中にも規制が存在します。そのため、HTMLのみを使ってボタンの見た目を調整する必要があります。
さらなるデザイン改善
この、コードだとボタン同士ががくっつきすぎてみづらいと指摘され、センタリングして、横幅いっぱいに広げてみました。
そのデザインとコードが以下になりなります。
デザイン
| Button 1 | Button 2 | Button 3 | Button 4 |
HTMLコード
<table width="100%">
<tr>
<td align="center"><a href="#" style="display: inline-block; padding: 10px; background: #ddd; color: black; text-decoration: none;">Button 1</a></td>
<td align="center"><a href="#" style="display: inline-block; padding: 10px; background: #ddd; color: black; text-decoration: none;">Button 2</a></td>
<td align="center"><a href="#" style="display: inline-block; padding: 10px; background: #ddd; color: black; text-decoration: none;">Button 3</a></td>
<td align="center"><a href="#" style="display: inline-block; padding: 10px; background: #ddd; color: black; text-decoration: none;">Button 4</a></td>
</tr>
</table>
このコードでは、<table> タグの width 属性を 100% に設定してテーブルを横幅いっぱいに広げ、<td> タグの align 属性を center に設定してセルの内容をセンタリングしています。
しかし、現代のウェブデザインではHTMLのみでのスタイル設定は非推奨とされており、スタイルはCSSで設定することが一般的です。特にスマホ対応については、CSSのメディアクエリを用いることがほとんどです。
内部リンクの追加
このコードへのリンクコードを追加していきます。
HTMLのアンカータグ(<a>)は、ページ内リンク（ページ内の特定の位置にジャンプするリンク）を作成するためにも使用できます。ページ内リンクを作成するには、リンク先の要素に一意のIDを設定し、アンカータグのhref属性にそのIDを#とともに設定します。
例えば、同じページ内の4つ<h2>タグに各ボタンをリンクさせるには、以下のようにします：
<!-- ボタン -->
<table width="100%">
<tr>
<td align="center"><a href="#section1" style="display: inline-block; padding: 10px; background: #ddd; color: black; text-decoration: none;">Button 1</a></td>
<td align="center"><a href="#section2" style="display: inline-block; padding: 10px; background: #ddd; color: black; text-decoration: none;">Button 2</a></td>
<td align="center"><a href="#section3" style="display: inline-block; padding: 10px; background: #ddd; color: black; text-decoration: none;">Button 3</a></td>
<td align="center"><a href="#section4" style="display: inline-block; padding: 10px; background: #ddd; color: black; text-decoration: none;">Button 4</a></td>
</tr>
</table>
<!-- ページ内リンク先 -->
<h2 id="section1">Section 1</h2>
<!-- Section 1の内容 -->
<h2 id="section2">Section 2</h2>
<!-- Section 2の内容 -->
<h2 id="section3">Section 3</h2>
<!-- Section 3の内容 -->
<h2 id="section4">Section 4</h2>
<!-
この例では、各ボタンのhref属性は#section1、#section2、#section3、#section4となっています。これは、同じページ内のIDがsection1、section2、section3、section4の要素（この場合、<h2>タグ）にリンクすることを意味します。
リンク文字の大きさと太さの変更
ここで、ボタンの文字を通常の1.5倍くらいで、太字してみました。ただし、HTML5では <font> タグと <b> タグの使用は非推奨とされています。
現代のウェブ開発ではCSSを使用してスタイルを設定することが一般的です。CSSを使用すれば、より詳細なスタイルの制御が可能で、メンテナンスも容易です。しかし、特定のプラットフォームでCSSが使用できない場合は、以下のようにHTMLのみを使った実装も可能です。
HTMLコード
| Button 1 | Button 2 | Button 3 | Button 4 |
HTMLコード
<table width="100%">
<tr>
<td align="center">
<a href="#section1" style="display: inline-block; padding: 10px; background: #ddd; color: black; text-decoration: none;">
<font size="5"><b>Button 1</b></font>
</a>
</td>
<td align="center">
<a href="#section2" style="display: inline-block; padding: 10px; background: #ddd; color: black; text-decoration: none;">
<font size="5"><b>Button 2</b></font>
</a>
</td>
<td align="center">
<a href="#section3" style="display: inline-block; padding: 10px; background: #ddd; color: black; text-decoration: none;">
<font size="5"><b>Button 3</b></font>
</a>
</td>
<td align="center">
<a href="#section4" style="display: inline-block; padding: 10px; background: #ddd; color: black; text-decoration: none;">
<font size="5"><b>Button 4</b></font>
</a>
</td>
</tr>
</table>
ここでは、ボタンのテキストを<font>タグで囲み、そのsize属性に5を設定しています。これにより、テキストのサイズが通常の1.5倍程度になります（ブラウザによって異なる場合があります）。また、<b>タグを使用してテキストを太字にしています。
ボタンの色の変更
こちらは簡単です。
background: #ddd;の「#ddd」部分を好きな色に変更するだけです。 結果、冒頭にお知らせしたコードになります。
-色見本は以下のサイトを活用してください。
アメーバブログでの制限と対策
以上のように、HTMLのみでウェブサイトの基本的な機能を実装することは可能です。しかし、特定のプラットフォーム（この場合、アメーバブログ）では、一部の機能が制限されていることもあります。
例えば、アメーバブログのモバイル版では、PCでは装飾されているCSSが、スマホでは取り消されることです。折角PCで綺麗に装飾しても、スマホのことを考えていなければ、読者にそっぽを向かれる可能性もあります。
これは日本で大きな問題です。一般ユーザーはPC使用率より、スマホ利用率の方が圧倒的に多いからです。その点も見過ごせない問題なのです。
また、ページ内リンクが正常に動作しないという問題が一部のユーザーから報告されています。これは、プラットフォームの制限やモバイルブラウザの制限によるものかもしれません。この問題に対する具体的な解決策は、プラットフォームの公式サポートやユーザーコミュニティから情報を得ることをお勧めします。
制限を避けるための一つの選択肢として、制限のないプラットフォームに移行することも考えられます。しかし、それにはブログの移行に伴う時間と労力が必要となるため、注意が必要です。
まとめ
HTMLのみを使用しても、ウェブサイトに必要な基本的な機能を実装することは可能です。しかし、特定のプラットフォームでは一部の機能が制限されていることもあります。そのような問題に対処するためには、問題の原因を理解し、可能な対策を検討することが重要です。
私はWEB戦略、WEBライティングが専門で、WEBデザインについては素人に毛が生えた程度だと思っています。今回のことは、熟練WEBデザイナーにとっては当たりまえのことなのだと思います。
しかし、HTMLやCSSについて詳しくない人にとっては、かなりのハードルです。私もそんな経験をしてきた一人です。理解していないと前に進めない。好奇心を知識に変えて前進する。
そのようなことは、面倒だと思うかもしれませんが、私はそんな方とのコミュニケーションの充実と熟練WEBデザイナーとの橋渡しになればと思って、今回のブログを書きました。
WEBデザインは基本、熟練WEBデザイナーにおまかせするのが良いと思ってはいまます。しかし、あまりWEBデザインが詳しくない人にとっても重要なこともあるので、コミュニケーションを充実することで、解決する問題があるのではないでしょうか？
今回、新しい試みに最後までお付き合いいただいた読者の方には大変感謝して、ブログを終わらせたいと思います。
参考リンク
このブログではAIに関する情報やビジネスに役立つ情報をいち早くお届けする予定ですので、
このブログの読者登録お願いします。
