HTMLでルビをふりたい | 質問掲示板 | 独学!未経験からWebデザイナーになる!!

Web制作や付随することを何でも質問できるコーナーです。

未経験からWebデザイナーになる!! > 質問掲示板 > カテゴリ: HTML/CSS > HTMLでルビをふりたい

HTMLでルビをふりたい

当サイトのリニューアル作業に時間をあてるため、掲示板の投稿は当分停止させていただきます。
HTMLの勉強としてサイトの模写を始めたものです。

「PAS-POL」にパスポルというルビをふりたくてコードを調べ、その通りに入力したのですがウェブ上で確認したところ表示されていませんでした。
ディベロッパーツールで確認したところ、書いたコードも表示されていませんでした。(Google chromeで開いています。)
どこか間違えているところがあれば教えてください。


コードは以下ようになっています。


<!DOCTYPE html>
<html lang="ja">
<head>
<title>PAS-POL-旅のモノづくりブランド-</title>
</head>
<body>
<h1>PAS-POL</h1>
<h6>旅のモノづくりブランド</h6>

<h1>旅に出よう。</h1>

<p>僕たちが作りたいのは<br>持っているだけで旅に出たくなるモノ。<br>持っているだけでわくわくするモノ。</p>
<p>それは新しい時代の “パスポート”<br>僕たちが作るものは、<br>そんな、存在でありたい。</p>
<p>そして、人と人が繋がる<br>こんな時代だからこそ、<br>僕たちは、みんなでひとつのモノを<br>作ることを追求したい。</p>

<ruby>
<rb>「PAS-POL」<rb>
<rp>(</rp>
<rt>パスポル</rt>
<rp>)</rp>
</ruby>

</body>
</html>
HALさん、こんにちは。

挙げられたコードをコピペして確認してみたところ、無事ルビが表示されていました。
デベロッパーツールで該当コードも表示されており、該当箇所の文法的にも問題は無いようです。

デベロッパーツールで該当コードが表示されていない=修正がブラウザ(Chrome)に反映されていないことを意味しますので、そのあたりを再確認されると良いと思います。


いただいた文章のみで原因を特定することはできませんが、可能性として考えられるのは以下でしょうか。

1. 何らかの原因で違うファイルを開いてしまった
2. コード修正後の保存のし忘れ
3. コード修正&保存後のブラウザ再読み込みのし忘れ
4. キャッシュファイル(最新でない古いファイル)を開いてしまった

HTML単体なので最後のキャッシュ関連の可能性は低いと思いますが、念のためキャッシュの削除方法は以下です。

(環境)設定 > (最下部の)詳細設定 > 閲覧履歴データを消去する > 「キャッシュされた画像とファイル」にチェックを入れて「データを消去」 →その上で再読み込み(F5キー押下)でキャッシュ削除可能です。


あとは1~4共通で言えることですが、ブラウザやエディタを閉じて(もしくはPCを再起動して)改めて確認し直すと、直っていることも多いと思います。
ありがとうございます、すごく助かりました。
丁寧な解説だったのでわかりやすかったです。

この質問をした後に新しくファイルを作ってすべてのコードをコピーし貼り付け、それをGoogle chromeで開いたところ、何の問題もなく表示することができました!

作業を進めたいと思います、どうもありがとうございました。