webデザイナー学習記録帳

webデザインやwebに関する学んだことの学習記録帳です

schooターミナルwebデザイナー4

HTML入門 -アンカーリンクの指定法

講師:田中 晶子先生

HTML入門 -アンカーリンクの指定法- 田中 晶子 先生

アジェンダ

 

href属性エイチレフ

target属性ターゲット

_blank 新規ウィンド

_self これがデフォルト 自分自身とウィンドに表示

_top ウィンドウがフレームに分割されていれば、分割を全て解除して、そこに表示

_parentペアレント ウィンドウがフレームに分割されていれば、1段だけ分割を解除して、その親フレームに表示します。

_blank属性の例

<header>
 <h1><a href="test.html" target="_blank">test</a></h1>
</header>

既にnewという名前を持ったウィンドウ(フレーム)があればそこに、表示し無ければ新しいウィンドウを開いて表示する

<a href="xxx.html" target="new">xxx</a>

 

相対パス

サイトのコンテンツが置かれているディレクトリ内を拠点としたパス

<a href="test2.html">ページに飛びます</a>

 

絶対パス

URLを指定する

<a href="http://">ページに飛びます</a>

 

内部リンク

ページの中で遷移する

外部リンク

 

ゴーストボタン

最初透明でホバーすると表示されるボタン

 

【先生からの問いかけ】

<a>タグに内包できるタグはなんでしょうか?

【回答】

HTML4やXHTMLではaタグはインライン要素とされており、インライン要素の中にはブロックレベル要素と言われているタグを含める事が出来ませんでした

html5ではインライン要素やブロックレベル要素などのカテゴリー分けは廃止になった

<a>タグの中に何でも入れていい事になった

(見た目の話なのでcssでの振る舞いのみを指すようになった)

 リトスとやテーブルタグでも包んでいい

 

質疑応答

【質問1】

Google推奨のインデントは、2スペではなかったでしょうか?

【回答】

4スペです

javascriptなど4スペを推奨されているのでその流れだと思います。

 

【質問2】

ページ内リンクの際にスティッキーヘッダー(ついてくるヘッダー)が遷移後のテキストと若干かぶってしまう場合があるかと思うのですが、上でとまるようにできるか?

【回答】

指定したタグにきてしまうので、コンテンツをつくってしまう、その技術はcss

水平線をおいておく、それに到達するようにする

その水平線がいらなければcssで消す

【質問3】

httpsのページは絶対パスにしますが、httpの場合、相対と絶対パスではどちらでも良いのでしょうか?SEOの観点ではどちらでも違いはないでしょうか?

【回答】

ページ名が意味のあるページにしてあれば、どちらでもよい

head内にそのディレクトリの直下のurlをベースタグを指定して書いておけばSEOに強いページになる

ページ名を01や02にしないで意味のあるページ名にする

 

【質問】

aタグにブロック要素を入れた場合は、{display:block}は不要でしょうか?

【回答】

見た目としては、インラインの振る舞いをするので知識がある人は、css側でブロックレベル要素の指定をする

【質問】

相対パスで階層が深いときの書き方を教えて下さい

【回答】

2階層上の書き方の実演

1階層上がるたびに

../(ドットドットスラ)をつける

【質問】

相対パスがセキュリティで今後非推奨になってくると聞いたのですが

【回答】

WordPressなどは絶対パスで書くようになっている

まだ、大丈夫だがhead内にベースというタグをかいて、絶対パスを指定しておく、そこの中から出られないとなるので安全になってくると思う

【質問】

headerやarticleの中にhタグを入れないといけないという事ですがデザインの問題でナビゲーションの下に見出しやスライドの下に見出しがきても問題ないか?

【回答】

問題ないです、正しい構文に書く理由はプログラミング上の問題やGoogleなどにわかってもらうようにするため