初心者HTML：メニュー(目次)コピペで出来る｜記事内リンクの見本｜table｜タグ

初心者HTML：メニュー(目次)コピペで出来る｜記事内リンクの見本｜table｜タグ｜G

2025/03/14 2025/02/07

　記事が長くなると読むのが大変なので、探している情報に飛べる様に
ブログの記事メニューのリンクをつけようと編集していたのですが・・
cssとか分からないので困っております・・という初心者向けです。

問題になる点としては、指定の方法をあちこちで調べた記述を混ぜてしまっている事で、
原因がどれか分からないという・・。
気付いて、なるべく統一しましたが。
あと、cssファイルの不要なものを探しましたが、
結局は、このブログのテーマがCSSの影響が強いのかもしれません。なので、分からない。。。

１：　基本のテーブルタグ

実際にこの記事で使用している記事のメニューのテーブルは、以下の通りです。

<tbody>

<tr>

<td><p>widch、heightを入れると下の線がない</p>

<p>border=”0″ width=”100″ height=”100″</p>

<p>cellspacing=”50″ 　外枠の太さ</p>

<p>cellpadding=”30″　余白の大きさ</p>

</td></tr>

</tbody>

</table>

２：　メニュー項目の部分

一応、上手く表示されているものをコピペしましたが、

環境により必ずこのサイトのメニュー部分と同じになるとは断言できませんガ・・。

<tbody>

<tr>

<td>目次

<br><a href="#title2">２：　メニュー項目の部分</a>

<br><a href="#title3">３：　本文中のタイトルについて</a>

</td>

</tr>

</tbody>

</table>

３：　本文中のタイトルについて

タイトルの部分が「メニュー項目」と同じになります。

表示されている部分のみで言うと、

メニュー（目次）内で、「１．はじめに」だった場合は、

本文中でも同じく、「１．はじめに」になります。

これ（本文中のタイトル）をhtml形式で記述したものが、

<h3><a name="title1"></a></h3>
<h3 id="title1">１：　はじめに</h3>

・・と、なります。

４：　全文の例

通常は、タグの説明をしているサイト様で

コピペの出来る場合は、スライドの出来るウインドウを使うと思います。

・・なので、その方法も調べました。

今までにスマホで調べ物をしていてもwebページに対して

画面の枠が少し小さくて右側が切れてしまい

表示されないことも多々あったので、ついでに今後も使おうと思います。

<tbody> <tr> <td>目次

<br><a href="#title2">２：　メニュー項目の部分</a>

<br><a href="#title3">３：　本文中のタイトルについて</a>

</td> </tr> </tbody></table>

<br>

メニュー１の本文をここに入力します

<h3 id="title2">２：　メニュー項目の部分</h3>

メニュー２の本文をここに入力します

<h3 id="title3">３：　本文中のタイトルについて</h3>

メニュー３の本文をここに入力します

メニュー４の本文をここに入力します

メニュー５の本文をここに入力します

５：　裏ワザ・結論

　どうしても反映されない場合、タグでどうにかしようとせず、裏ワザを使ったら良いのだと思います。
前々からその方法は使っていましたが。。タグで反映されずムキになっていました。

管理画面の投稿編集の時にbloggerの場合で言いますと

htmlビュー（形式）
作成ビュー（見たままの編集）

のうち、作成ビュー（見た通りのテキスト編集）で編集してしまう事。。。

bloggerや無料ブログのサービス等を利用している場合、その方法が早いです。
CSSとかだと分からないので、随分と遠回りしてしまいました。

但し、後からhtmlで見ると意味不明なタグがびっしりになっている場合があります。

検索語：記事内に特定カテゴリの新着一覧を出すショートコード　スライド　ウインドウ　テーブル　タグ　スクロール　html形式

　取り敢えず、今のところは普通に表示されていますので・・上記の様に、
「＜div align=left＞」又は、「＜tr align=left＞」などの様に、左寄せ・右寄せの指定、
「height:100px; width:300px;」など枠の幅を指定しておくと良いと思います。
・・って、「そんなの当たり前」って言われそうですけど・・。

私はテーブルの大きさを指定すると文字に対して空白が大きくなるので

おおきさは指定しない方が良いと思っていました・・。

テーブルを使うと「引用」と「強調」を分けられて見やすい気がします。

６：　枝番号を付けたとき

　今回のメニューは６つですが、枝番号を付けたり数が多くなった場合の困った件

＜ｕｌ＞や＜ｏｌ＞を使うと整列が出来る（と思われる）のですが。。

その際に気を付けること、初心者・そんなタグ知らないという人への説明です。

（何なら、小学生でも読んで分かってもらえる様だと嬉しいです。）

ｕｌ－－－箇条書き
ｏｌ－－－番号付きリスト

となります。上記は箇条書きで、下記が番号付きリストです。

初心者向け
記事内リンク
テーブルタグ
ＨＴＭＬタグ
メニュー

枝番号がない場合、全てを＜ｏｌ＞と＜／ｏｌ＞ではさみ、

タイトルの先頭に＜ｌｉ＞を付けます。タイトルの最後の文字に＜／ｌｉ＞を付けると良いかもですが、

私は付けていなくても変わらない気がします。

ブログのサービスによっては自動でついています。

「かっこと、

」カッコ閉じる

で言うと、＜／ｌｉ＞がないとは「カッコ閉じ」がない感じなのですが、

付けなくてもエラーが出ていません。

この辺は、よく分からないので深く考えないことにします。

<ul>

<li>ｏｌ－－－番号付きリスト</li>

</ul>

上記のボックス内のコピペが

ｕｌ－－－箇条書き
ｏｌ－－－番号付きリスト

という表示になります。

そして、番号つきのリストの場合は以下のように記述すると、

<ol>

<li>初心者向け</li>

<li>記事内リンク</li>

<li>テーブルタグ</li>

<li>ＨＴＭＬタグ</li>

</ol>

初心者向け
記事内リンク
テーブルタグ
ＨＴＭＬタグ
メニュー

と、なります。

もっと細かいメニューの作り方は、また今度アップしたいと思います。

７：　過去記事｜終わり・参考：

　過去の話ですが、メニューが上手くいかなかったときのことです。
事例として参考になるかもしれません。

　テーブルの中に入れたメニューのテキストの位置が後で見るとズレていて、
メニュー項目の改行毎、交互に右寄せ・左寄せになったり
見辛いのと、見た目も格好悪くて恥ずかしいし、これは直さなくては。。

何が原因なんだろうと調べて上手くいきましたので、また次の機会に追記します。

そう言いつつ、この下のメニューも、１行目のみが１～２文字分飛び出て左に寄っていたので、
無理矢理「＆ｎｂｓｐ；」とかいうタグで右に動かしています。

ここまで読んでいただき、ありがとうございました。

いかがでしたでしょうか。
少しでも何かの参考になれば幸いです。

またの機会がありましたら、その時はよろしくお願い致します。

参考サイト：

HTMLでスクロールバーを表示・非表示する方法を現役エンジニアが解説【初心者向け】
https://magazine.techacademy.jp/magazine/25158

テーブルにスクロールバーをつける boo.jp http://kowaza.boo.jp › 03table › table-07-0scroll

ページレイアウトの例 fureai.or.jp http://www.fureai.or.jp › ~irie › html-tag › page

【html/CSS】table,tdのalign属性の使い方【効かないときの対処法】
https://csshtml.work/table-align/#tablemargin-rightauto

このブログを検索

gotaku memo