BlazorでのWebアプリケーション開発手法１【C#】A12_pタグ

続いて、HTMLの p タグについて解説します。

p タグは、HTMLでは「段落」を表すタグです。次のCounter.razorの13行目、role=”status” の後ろに続く <p> タグが、このレクチャーで扱う部分です。

図1　p タグ部分

たとえば、次のような文章があったとします（Counter.razorの現在のコード）。

図2　変更前のCounter.razor

この文章をコピーして、p タグ p タグで囲って、そのままペタッと貼り付けたとします。

図3　文章を1つの p タグで囲んで貼り付けたコード

<p>
このテクニックは、status ロールを使用する方法を示し、ブラウザーと支援技術に及ぼす影響について説明します。

status ロールは、ライブリージョンの一種であり、内容は alert を正当化するほど重要ではないユーザーのためのアドバイザリ情報であり、多くの場合ステータスバーとして表示されます。 ロールが要素に追加されると、ブラウザーは、支援技術製品にアクセス可能なステータスイベントを送信し、ユーザーに通知することができます。
</p>

これで実行すると、こんな感じになるんですけど、この段落が空いていないのがわかりますよね。

図4　実行結果（段落が空いていない）

そこで、これをここまで1回 p タグを切って、2個目の段落は次の p タグに入れますと、というふうにします。

図5　1つ目の p タグを閉じ、段落を分割している様子

<p>
このテクニックは、status ロールを使用する方法を示し、ブラウザーと支援技術に及ぼす影響について説明します。
</p>

<p>status ロールは、ライブリージョンの一種であり、内容は alert を正当化するほど重要ではないユーザーのためのアドバイザリ情報であり、多くの場合ステータスバーとして表示されます。 ロールが要素に追加されると、ブラウザーは、支援技術製品にアクセス可能なステータスイベントを送信し、ユーザーに通知することができます。</p>

こういう感じにすると、このページと同じような表示になりますね。こういう感じで、段落＝ひとかたまりの文章を表す時に p タグは使う、ということですね。

図6　実行結果（段落間にスペースが空いている）

なので、これは p タグで表示されている文字がここなんですけど、Current count: というのがここに出てますね。

図7　「Current count: 」の部分がハイライトされたコード

図8　ブラウザでの表示（Current count: 0）

なので、Current count BBB とかいう感じにしたら、Current count BBB になってますね。ここはそういうことです。

図9　テキストを「Current countBBB: 」に変更したコード

<p role="status">Current countBBB: @currentCount</p>

その前の role=”status” って書いてますけど、role っていうのは、その役割はこういう役割ですよ、みたいなのを定義してるんですけど、これは読み上げ機能とかに影響の出る、読み上げ機能とかのためにあるので、こんな感じでなくても、ブラウザ上で何か違いが出るかというと、出ないので、別になきゃなくてもいいという感じですね。

図10　role=”status” を外したコード

サンプルでこういう感じでつけてくれてると、ちなみに status っていうのは、変化する値ですよ、みたいな感じの時につける属性ですね。というのが p タグで、最後にここ @currentCount っていうのが付いてますけど、これに関しては次のレクチャーで解説したいと思います。

図11　role=”status” を戻し、@currentCount を確認している様子