<a name>と、<details><summary>の基本と応用
@tuzura_ori
ページTOP
https://so-zou.jp/web-app/text/fullwidth-halfwidth/
※上記のサイトさんで、全角の＜＞を半角へ一括変換できます ※変換の際は、ASCII記号のみに✓
a nameの簡単な解説
a nameタグは、ページ（文章）内に於いて特定の場所へ移動する（させる）際に使用します。
※［pager］で改ページした先には移動できません。
a nameタグの基本
出発点・・・下記の【サンカヨウ】へジャンプ
【タグの書き方…＜＞を半角に変更】※クリックで開閉します
・出発点
＜a href="#a1"＞下記の【サンカヨウ】へジャンプ＜/a＞
・到達点
＜a name="a1"＞上記の【サンカヨウ】からの到達点＜/a＞
a nameタグの応用
titleタグを用いて、onマウスでリンク先の説明を表示させる。
サンカヨウとは？
【タグの書き方…＜＞を半角に変更】※クリックで開閉します
＜a href="#a2" title="サンカヨウの説明へジャンプ">サンカヨウとは？＜/a＞
＜a name="a2"＞サンカヨウとは？＜/a＞
・出発点と到達点に任意の文字色を指定
下記の【サンカヨウ】へジャンプ
【タグの書き方…＜＞を半角に変更】※クリックで開閉します
＜a href="#iro"＞＜span style="color:#333;"＞下記の【サンカヨウ】へジャンプ＜/span＞＜/a＞
＜a name="iro"＞＜span style="color:#333;"＞上記の【サンカヨウ】からの到達点＜/span＞＜/a＞
※文章内で使うなら、語句の説明などに利用すると便利かもしれません。
又、タグの書き方を変えれば、↓のような使い方もできます。
↑ページTOPへ戻る
【タグの書き方…＜＞を半角に変更】※クリックで開閉します
＜a href="#a3"＞↑ページTOPへ戻る＜/a＞
＜a name="a3"＞ページTOP＜/a＞
※a1、a2、a3、iroは、ご自分で任意の半角英数字に変更可能
detailsとsummaryの簡単な説明
detailsとsummaryを組み合わせ、折り畳み表示を作ります。
※お使いのブラウザによって、表示が変わる場合があります。
detailsとsummaryの基本
※タグの書き方で表示が変化する為、２例挙げておきます（クリックで開閉）例1 内容の冒頭を改行させずに書いた場合を見る
時は春
日は朝（あした）
朝は七時（ななとき）
片岡に露みちて
揚雲雀（あげひばり）なのりいで
蝸牛（かたつむり）枝に這ひ
神、そらに知ろしめす。
すべて世は事も無し。【タグの書き方…＜＞を半角に変更】※クリックで開閉します
＜details＞＜summary＞例1 内容の冒頭を改行させずに書いた場合を見る＜/summary＞時は春
日は朝（あした）
朝は七時（ななとき）
片岡に露みちて
揚雲雀（あげひばり）なのりいで
蝸牛（かたつむり）枝に這ひ
神、そらに知ろしめす。
すべて世は事も無し。＜/details＞
例2 内容の冒頭を改行させて書いた場合を見る
時は春
日は朝（あした）
朝は七時（ななとき）
片岡に露みちて
揚雲雀（あげひばり）なのりいで
蝸牛（かたつむり）枝に這ひ
神、そらに知ろしめす。
すべて世は事も無し。【タグの書き方…＜＞を半角に変更】※クリックで開閉します
＜details＞＜summary＞例2 内容の冒頭を改行させて書いた場合を見る＜/summary＞
時は春
日は朝（あした）
朝は七時（ななとき）
片岡に露みちて
揚雲雀（あげひばり）なのりいで
蝸牛（かたつむり）枝に這ひ
神、そらに知ろしめす。
すべて世は事も無し。＜/details＞
detailsとsummaryの応用
click↓ここの部分の文字色を指定
時は春
日は朝（あした）
朝は七時（ななとき）
片岡に露みちて【タグの書き方…＜＞を半角に変更】※クリックで開閉します
＜details＞＜summary＞＜span style="color:#AC7080;"＞この部分の文字色を指定＜/span＞＜/summary＞時は春
日は朝（あした）
朝は七時（ななとき）
片岡に露みちて＜/details＞
click↓内容の文字色を指定
時は春
日は朝（あした）
朝は七時（ななとき）
片岡に露みちて【タグの書き方…＜＞を半角に変更】※クリックで開閉します
＜span style="color:#AC7080;"＞＜details＞＜summary>内容の文字色を指定＜/summary＞時は春
日は朝（あした）
朝は七時（ななとき）
片岡に露み＜/details＞＜/span＞
click↓両方の組み合わせ
時は春
日は朝（あした）
朝は七時（ななとき）
片岡に露みちて【タグの書き方…＜＞を半角に変更】※クリックで開閉します
＜span style="color:#AC7080;"＞＜details＞＜summary＞＜span style="color:#333;"＞両方の組み合わせ＜/span＞＜/summary＞時は春
日は朝（あした）
朝は七時（ななとき）
片岡に露みちて＜/details＞＜/span＞
【UPした画像と文章を、併せて表示せる事もできます】
click↓私の推し、シウミンをちらっとご紹介※クリックで開閉します
・生年月日 1990年3月26日
・血液型 B型
・所属グループ EXO EXO－CBX（グループ内ユニット ）
☆とにかく可愛くて、美人で、艶やかで、カッコ良いんです☆
※画像は1頁に、複数枚UPしたものを使用
尚、＜a＞タグを使用しているため、画像ページはhttpをimgに変更してあります。
【タグの書き方…＜＞を半角に変更】※クリックで開閉します
＜details＞＜summary＞＜span style="color:#333;">私の推し、シウミンをちらっとご紹介＜/span＞＜span style="color:#AC7080;"＞※クリックで開閉します＜/span＞＜/summary＞
・生年月日 1990年3月26日
・血液型 B型
・所属グループ EXO EXO－CBX（グループ内ユニット ）
＜span style="color:#AC7080;"＞☆とにかく可愛くて、美人で、艶やかで、カッコ良いんです☆＜/span＞
img://画像URL
※画像は1頁に、複数枚UPしたものを使用
尚、＜a＞タグを使用しているため、画像ページはhttpをimgに変更してあります。＜/details＞
※caution 1※
通常でしたらdetails・summaryの各々にcssを使用し
枠で囲んだり、背景色をつける事もできます。
又、ぷらいべったーでしたら、details style＝"〇〇〇"等で同じような事が出来ますが
タグが多少、煩雑になるのでこのページでは割愛します。
（時間があれば、改めてご紹介します）
※caution 2※
時々、タグが反応しないとのご質問を頂くことがあります。
その場合は、以下の点を確認してみて下さい。
・タグの書き間違いや、タグの書き忘れ（ "" ; : ←特に多いです）
・半角英数字でなく、全角英数字を使用している。
・余計なスペース（特に全角）が混ざっている。
・タグの途中で不要な改行（タグの中には改行で、無効化されてしまうものがあります）
・タグの閉じ忘れや、囲み忘れ ＜〇〇＞＜/〇〇＞←これらが抜けている
ぷらいべったーは管理者さんのご厚意により、無料サービスにも関わらず
ユーザーにとても使いやすい仕様ですし、又、できる事も日々増えています。
ただタグを汎用し過ぎると、結果として閲覧者さんが見づらくなったり
ご自身も、タグの使用ミスを犯しやすくなります。
なので効果的な使用方法を推奨すると共に、その一助になれば幸いです。
これより下には、a nameの到達点ないし出発点が表記されてます
・到達点・・・上記の【サンカヨウ】からの到達点 ↑ページTOPへ戻る
・到達点・・・上記の【サンカヨウ】からの到達点 ↑ページTOPへ戻る
サンカヨウとは？
濡れると花弁が透き通ったようになる、不思議な花。 ↑ページTOPへ戻る