このページでは実際にリンクを作成し、その作り方を見ていきます。
内部リンクやボタン形リンクも作成してみましょう。
Androidアプリを作成しました。
感情用のメモ帳です。
リンクの貼り方
リンクを貼るにはタグの<a>を使います。
またリンク先のパス（URL）が必要になります。記載する場所は属性のhrefです。
href属性 hypertext reference
<a>の内容部分が実際のリンクとなる文字列になります。
リンクの雛形
<a href="リンク先のパス">リンクとなる文字列</a>実際にひとつリンクを作ってみます。
「Yahoo! Japan」へのリンクを貼ってみましょう。
リンク先のURL（https://www.yahoo.co.jp/）をコピーし、「href=""」のダブルクォーテーションの中に貼り付けます。
リンクとなる文字は「Yahoo!へ飛びます」にしました。
<a href="https://www.yahoo.co.jp/">Yahoo!へ飛びます</a>実際のリンクが下です。
<a>はインライン要素なので、必要に応じてブロックレベルの要素のなかに入れます。
一例として、ブロックレベルの要素に入れると、CSSで中央寄せができるようになります。
親要素のtext-alignをcenterにします。
html
<p><a href="https://www.yahoo.co.jp/">Yahoo!へ飛びます</a></p>css
p {
text-align: center;
}
内部リンク
ページ内部へリンクを貼るには、飛びたいところに該当するタグに、idを付与します。
そのページのURLをコピーし、コピーしたURLの末尾にハッシュマーク（#）とid名をつけ加えます。
hrefの値に貼り付けます。
例として、このページの見出し「リンクの貼り方」に内部リンクを貼ってみます。
「リンクの貼り方」のタグは<h2>です。ここにidを付与します。
値は「link1」にしました。
<h2 id="link1">リンクの貼り方</h2>このページのURLをコピーします。
https://fuji-pocketbook.net/howto-link/
hrefの値に貼り付け、その末尾に「#link1」を加えます。
<a href="https://fuji-pocketbook.net/howto-link/#link1">リンクの貼り方 にジャンプ！</a>実際のリンクが下です。
上記のURLは絶対パスでしたが、リンク元とリンク先が同じページ内なら、相対パスで書くこともできます。
<a href="#link1">リンクの貼り方 にジャンプ！</a>
ボタン形のリンク
つぎはボタンの形にリンクを作成してみましょう。
背景色と文字色を設定します。また角を丸めることでそれらしく見せることができます。
CSSのプロパティで背景色は「background-color」、文字色は「color」、角を丸めるには「border-radius」が対応しています。
一例としてこのページトップへのリンクを作成します。
html
<a class="simple-button" href="#">ページトップ</a>hrefの値を"#"とすると、それぞれのページのトップを指定することになります。
css
.simple-button {
background-color: #ed6d35;
color: white;
border-radius: 10px;
}border-radiusの値は角の半径を指定します。値を大きくするほど角が丸くなります。
%で指定することも可能です。
いちど実際のリンクを表示します。
ボタンのなかの文字が窮屈ですね。
左右のスペースをpaddingで設定した方が良さそうです。
また文字に下線が表示されているのが気になります。
text-decorationをnoneにして消します。
追加css
.simple-button {
padding: 0px 30px;
text-decoration: none;
}まとめ
いくつかリンクを作成しながらその作り方を見てきました。
リンクの雛形は、
<a href="リンク先のパス">リンクとなる文字列</a>内部リンクを作るには、該当タグにidをつけ、hrefに「URL ＋ # + id名」を貼り付ける。
CSSで背景色、文字色などを変更することで、ボタン形のリンクを作成できる。
このページが少しでもお役に立てたのなら幸いです。
