My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

同一ページ 別タブ内アンカーリンクへの移動実現方法

f:id:sntkk3:20171009123027p:plain

同一ページ内の異なるタブ内アンカーリンクに移動するには


通常、アンカーリンク(同一ページ内)への移動は、以下の方法(アンカーリンク先要素に付けたID名をhrefに設定するだけ)で可能です。

<li><a href="#ID名">リンクテキスト</a></li> 


しかし、アンカーリンク先が他のタブ内だったりすると機能せず、目的の場所に移動できないという問題が。

これを解決し、何とか目的のアンカーリンク先に移動できないものか、
今日はその方法を確認してみました。

[前提]
ここで対象とするタブは、先日の以下記事内でご紹介したタブであることを前提とします。
times-diary.hatenablog.com


【解決方法】

JavaScriptで目的のタブ移動する処理を追加することで、この希望動作が実現できることを確認しました。

[手順]
1. JavaScriptで以下OnLinkClick関数を追記(bodyタグ終了直前)
2. a タグ内に上記OnLinkClick関数を呼び出すコードを追記


1. JavaScriptで以下OnLinkClick関数を追記(bodyタグ終了直前)
[コード例]

<script language="javascript" type="text/javascript"> 
  function OnLinkClick(a_name) { 
    var elements = document.getElementsByName( "tab-radios" ) ; 
     elements[1].checked = true ; 
  } 
</script> 


2. a タグ内に上記OnLinkClick関数を呼び出すコードを追記
[コード例]

<li><a href="#ID名" onClick="OnLinkClick();">リンクテキスト</a></li> 

[解説]

今回のように、リンク元とリンク先が別のタブに存在する場合、
通常の方法では目的地のタブが選択された状態にならず、目的の場所にフォーカスが移りません。

タブを超えてアンカーリンク先への移動を可能にするためには、その前に目的のタブを選択した状態を作る必要があります。
そこで、この動作をJavaScriptを使って実現します。

タブの各要素(タブA~タブC)の識別について
今回ここではタブをラジオボタンで作っているため、
タブA~タブCを表すラジオボタンの要素には、
「tab-radios」
というクラスを指定しています。

上記JavaScriptコードでは、
「tab-radios」の結果がelements に代入されることになるので、elementsの各要素、
elements[0] ⇒ タブA
elements[1] ⇒ タブB
elements[2] ⇒ タブC
となります。

今回の場合、アンカーリンク先がタブB内にあるものとすると、
タブB = elements[1]
となり、
elements[1].checked = true ;
とすることで、タブBを選択した状態を実現します。

a タグに onClick="OnLinkClick(); を追記することで、
JavaScriptで別途記述した OnLinkClick関数の処理を呼び出します。
これにより、aタグのリンク箇所クリック時、
目的のタブが選択され、該当箇所にフォーカス移動が実現します。

Demo

※上記Demoで使用したBootstrapテンプレートは、以下となります。
Nitro Free Website Template Using Bootstrap 3 - FreeHTML5.co



以上、別のタブ内アンカーリンク先への移動実現方法でした。
ご参考まで。



【参考記事】

リンクのクリック時にJavaScriptを実行する - リンクのonClickの実装 - JavaScript プログラミング

lab.syncer.jp

リファラ (REFERRER) 制御方法を確認しました

f:id:sntkk3:20170912170403j:plain

リファラ (REFERRER) 制御方法を確認しました

こちらについてご説明する前に、「リファラって何?」という方のために、以下ご説明いたします。

リファラ (REFERRER) とは?

どこから現在のページに来ているか、ユーザーのアクセス元を示す情報のことです。
リファラ情報取得のため、リンク先ページでも取得用の設定が必要です(後述にて別途説明)


【参考サイト】

e-words.jp


そのため、サイト運営者にとっては、
「自サイトに訪れているユーザーはどんな人たちか?」
需要、傾向を知るのに役立つ情報となります。

しかし、その一方で、リンク元サイトとしては、
「セキュリティ上の理由などにより、リファラを制御(リンク先で非表示に)したい」
という場合も生じてきます。

今回の私もそういった理由により、リファラ制御の実現方法を調べてみました。

後述にてその種類、確認結果をシェアさせていただきますが、まずはその前にリファラの取得方法について

参照先(リンク先)ページにてリファラ情報を取得する方法としては、以下となります。

リファラ取得方法

参照先ページでのリファラ取得方法について、

ページ headタグ内に以下スクリプトを記述することで、リファラ情報を取得・表示することができます。

<SCRIPT LANGUAGE="JavaScript">
<!--
  document.write('URL:' + document.referrer);
//-->
</SCRIPT>


では、次に、リファラ制御に有効と言われていた各種方法と、実際の確認結果をご報告いたします。

リファラ制御方法の種類・確認結果

各種方法

1. a要素にtarget="_blank"を設定 (参照元WordPressの時のみ有効)
記述例:

<a href="http:test/index.html" target="_blank">



2. a要素にrel=noreferrerを設定
記述例:

<a href="http:test/index.html" rel=noreferrer>



3. a要素にreferrerpolicy="no-referrer"を設定
記述例:

<a href="http:test/index.html" referrerpolicy="no-referrer">




4. 中間ページからのリダイレクト(HTMLでリダイレクト)


5. 中間ページからのリダイレクト(JavaScriptでリダイレクト)


6. 短縮URLでリンク先を指定


7. meta name="referrer" content="no-referrer"をheadタグ内に記述
記述例:

<meta name="referrer" content="no-referrer">



確認結果

[前提] 確認時のブラウザにはChromeを使用

a. 通常のHTMLページの場合

No 方法 リンク リファラ表示結果
1 target_blank 次のページにジャンプ 表示される
2 no refferer 次のページにジャンプ 表示されない
3 referrerpolicy 次のページにジャンプ 表示されない
4 HTMLでリダイレクト 次のページにジャンプ 中間ページURLが表示される
5 JavaScriptでリダイレクト 次のページにジャンプ 中間ページURLが表示される
6 短縮URL 次のページにジャンプ 表示される
7 meta name="referrer"※ 次のページからご確認ください 表示されない

※以下をheadタグ内に記述する方法です。

<meta name="referrer" content="no-referrer">

b. WordPressページの場合

No 方法 リファラ表示結果
1 target_blank ※2 表示されない
2 no refferer 表示されない
3 referrerpolicy 表示されない
4 HTMLでリダイレクト 中間ページURLが表示される
5 JavaScriptでリダイレクト 中間ページURLが表示される
6 短縮URL 表示される

※2 WordPressの場合、セキュリティ上の機能により、
外部リンクに「target=”_blank”(リンクを新しいタブで開く)」を設定すると、そのリンクには「rel=”noopener noreferrer”」属性が自動的に付加されるという性質があるようです。そのため、参照元WordPress内記事の場合、外部リンクを新しいタブで開く設定をするだけで、リファラ情報を制御することができます。


【参考記事】
nelog.jp


WordPressページからのリファラ制御確認用デモはこちらです。



以上、各種リファラ制御方法と確認結果のご報告でした。
上記によりすべての制御方法を網羅しているわけではありませんが、ご参考いただけたら幸いです。


【参考サイト】
qiita.com

CSSで実装する タブ機能

f:id:sntkk3:20171003212857p:plain

[jQuery不要] ラジオボタン + CSSで出来る タブ機能

以下記事を参考に、Webページにタブ機能を設置してみました。

【参考記事】
qiita.com

上記にてご紹介いただいたコードで、
おかげさまで思った通りのタブができました。

と喜んだのも束の間、一つ問題が発覚。
バリデーション(HTMLの構文チェックのことです※)をしてみたところ、
以下のような構文エラーが。

The element main must not appear as a descendant of the article element.

A document must not include more than one visible main element.

※バリデーションには以下サイトを利用しました
validator.w3.org


原因は、ソースコードにて複数のmainタグがarticleタグの子要素になっていたこと(mainタグって1つのページ内に1回しか使用できないんですよね)。

ということで、mainタグの部分を新たなclassに置き換えて以下のように修正しました。


[html] サンプルコード

            <!-- TAB CONTROLLERS --> 
            <input id="panel-1-ctrl" class="panel-radios" type="radio" name="tab-radios" checked> 
            <input id="panel-2-ctrl" class="panel-radios" type="radio" name="tab-radios"> 
            <input id="panel-3-ctrl" class="panel-radios" type="radio" name="tab-radios"> 
            <!-- TABS LIST --> 
            <ul id="tabs-list"> 
              <!-- MENU TOGGLE --> 
              <li id="li-for-panel-1"> 
                <label class="panel-label" for="panel-1-ctrl">タブA</label> 
              </li> 
              <!--INLINE-BLOCK FIX--> 
              <li id="li-for-panel-2"> 
                <label class="panel-label" for="panel-2-ctrl">タブB</label> 
              </li> 
              <!--INLINE-BLOCK FIX--> 
              <li id="li-for-panel-3"> 
                <label class="panel-label" for="panel-3-ctrl">タブCについて</label> 
              </li> 
              <!--INLINE-BLOCK FIX--> 
            </ul> 
            <!-- THE PANELS --> 
            <article id="panels"> 
              <div class="container"> 
                <section id="panel-1"> 
                  <div class="panel_group"> 
                    <div class="tbl_box"> 
                      <table class="tb" cellpadding="0" cellspacing="0" border="1">  
                    <tr valign="top"> 
                <th valign="top">項目1</th> 
                <td valign="top"> 
                  <ul> 
                    <li><a href="#p_sales" onClick="OnLinkClick(p_sales);">リスト1</a></li> 
                    <li><a href="#sales" onClick="OnLinkClick(sales);">リスト2</a></li> 
                    <li><a href="#clerk" onClick="OnLinkClick(clerk);">リスト3</a></li> 
                    <li><a href="#w_designer" onClick="OnLinkClick(w_designer);">リスト4</a></li> 
                  </ul> 
                </td> 
              </tr> 


[css]

/*********************/ 
/*タブメニュー 
/*********************/ 
 
label.panel-label { 
  -webkit-user-select: none; 
  -moz-user-select: none; 
  -ms-user-select: none; 
  user-select: none; 
  display: block; 
  width: 100%; 
  color: #bdc3c7; 
  cursor: pointer; 
  background-color: #ecf0f1; 
  -webkit-transition-property: background-color, color; 
  transition-property: background-color, color; 
  -webkit-transition-duration: 200ms; 
  transition-duration: 200ms; 
} 
label.panel-label:hover { 
  color: #003399; 
} 
 
#panels { 
  background-color: white; 
} 
#panels .container { 
  margin: 0 auto; 
  width: 90%; 
} 
#panels section header label.panel-label { 
  padding: 12px 24px; 
  box-sizing: border-box; 
} 
#panels section > div { 
  box-sizing: border-box; 
  max-height: 0; 
  opacity: 0; 
  -webkit-transition: opacity 600ms; 
  transition: opacity 600ms; 
  overflow-y: hidden; 
} 
 
#panel-1-ctrl:checked ~ #panels #panel-1 > div { 
  max-height: initial; 
  opacity: 1; 
  padding: 20px 24px;  
} 
 
#panel-2-ctrl:checked ~ #panels #panel-2 div { 
  max-height: initial; 
  opacity: 1; 
  padding: 20px 24px; 
} 
 
#panel-3-ctrl:checked ~ #panels #panel-3 div { 
  max-height: initial; 
  opacity: 1; 
  padding: 48px 24px; 
} 
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 { 
  pointer-events: none; 
  cursor: default; 
  -webkit-transform: translate3d(0, 1px, 0); 
  transform: translate3d(0, 1px, 0); 
  box-shadow: none; 
  border-right: none; 
} 
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1.last { 
  border-right: 1px solid transparent; 
} 
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 + li { 
  border-left: 1px solid #dfdfdf; 
} 
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label { 
  background-color: white; 
  color: #003399; 
  padding-top: 12px; 
  /*padding-top: 24px;*/ 
} 
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label::after { 
  height: 6px; 
} 
 
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 { 
  pointer-events: none; 
  cursor: default; 
  -webkit-transform: translate3d(0, 1px, 0); 
  transform: translate3d(0, 1px, 0); 
  box-shadow: none; 
  border-right: none; 
} 
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2.last { 
  border-right: 1px solid transparent; 
} 
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 + li { 
  border-left: 1px solid #dfdfdf; 
} 
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label { 
  background-color: white; 
  color: #003399; 
  padding-top: 12px; 
} 
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label::after { 
  height: 6px; 
} 
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 { 
  pointer-events: none; 
  cursor: default; 
  -webkit-transform: translate3d(0, 1px, 0); 
  transform: translate3d(0, 1px, 0); 
  box-shadow: none; 
  border-right: none; 
} 
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3.last { 
  border-right: 1px solid transparent; 
} 
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 + li { 
  border-left: 1px solid #dfdfdf; 
} 
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label { 
  background-color: white; 
  color: #003399; 
  padding-top: 12px; 
} 
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label::after { 
  height: 6px; 
}  
ul#tabs-list { 
  display: flex; 
  list-style: none; 
  text-align: center; 
  border-bottom: 1px solid #dfdfdf; 
  margin: 0; 
  padding: 0; 
} 
ul#tabs-list li { 
  text-align: center; 
  font-size: 0.875em; 
  width: 25%; 
  box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.05); 
  border-right: 1px solid #dfdfdf; 
  position: relative; 
} 
ul#tabs-list li:hover { 
  -webkit-transition: none; 
  transition: none; 
  border-right: none; 
} 
ul#tabs-list li:hover.last { 
  border-right: 1px solid transparent; 
} 
ul#tabs-list li:hover + li { 
  border-left: 1px solid #dfdfdf; 
} 
ul#tabs-list li label.panel-label { 
  position: relative; 
  padding: 12px 0; 
  font-size: 1.4em; 
} 
ul#tabs-list li label.panel-label::after { 
  content: ""; 
  position: absolute; 
  width: 100%; 
  left: 0; 
  bottom: 100%; 
  background-color: #003399; 
  height: 0; 
  -webkit-transition-property: height; 
  transition-property: height; 
  -webkit-transition-duration: 200ms; 
  transition-duration: 200ms; 
} 
ul#tabs-list li label.panel-label:hover { 
  padding-top: 12px; 
} 
ul#tabs-list li label.panel-label:hover::after { 
  height: 6px; 
} 
 
.panel_group { 
    margin: 0 auto; 
} 
.panel-radios { 
  display: none; 
} 
 
.panel_group p { 
  line-height: 1.8; 
} 
 
#li-for-panel-3, #li-for-panel-2, #li-for-panel-3 { 
  padding-bottom: 0; 
} 
 


以上で晴れてエラーも解決、
思い通りのタブができました。



【参考記事】

uxmilk.jp

dekiru.net