リンクは宣伝や紹介をするときに役立ちます。なるべくリンクと分かるようにするのが効果的！

さて、今回はリンクタグです。

<a href="リンクしたいURL">リンク文章</a>

基本はこのように記述します。

href属性で、リンク先のURLを指定します。

<a></a>で囲んだ部分をクリック/タップすることでリンク先に飛ばすことができます。

hタグと同じようにaタグにもCSSが設定されています。

PC版

a {

text-decoration: none;

color: #3366aa;

}

a:visited {

color: #885577;

}

スマホ版

a {

text-decoration: none;

color: #00aa77;

}

a:visited {

color: #885577;

}

text-decoration: none;は下線をなくす設定です。通常のリンクだと、下線が引いてありますが、なろうの割烹では消すように設定されています。

またリンク色も決められています。a:visitedはリンク先ページを表示したことがある場合に適用されるスタイルです。

PC版

スマホ版

これが基本のレイアウトになります。

- - - ✂切り取り✂ - - -

さて、aにもスタイルを適用することができます。

<a style="font-size:20px;color:#333333;" href="リンクしたいURL">リンク文章</a>

<a style="font-size:20px;background:#333333;color:#ffffff;" href="リンクしたいURL">リンク文章</a>

<a style="font-size:20px;border-bottom:1px solid;" href="リンクしたいURL">リンク文章</a>

こんな風に装飾することも可能です。

spanと同じインライン要素になります。

これまで使ってきた装飾CSSを使って彩ることが可能です。

- - - ✂切り取り✂ - - -

画像へリンクさせる場合はimgタグを囲んで実現します。

<a href="リンクしたいURL"><img src="画像URL"></a>

こんな感じですね。詳しくは画像の項目の時に説明します。

- - - ✂切り取り✂ - - -

では、次にですが、リンク範囲を広げるためにブロック全体にリンクをかけたいときはどうするのでしょうか。

画像と同じように<div>を囲めばいいのでしょうか？

ダメです。

前にも言った通りインライン要素の中にブロック要素を入れることは文法違反となります。

文法違反したらどうなるの？　って気になる方も多いかと思います。そういう方は、

<a href="#"><div>インラインの中にブロックを入れる</div></a>

を活動報告に入れてみてください。

さてどうなるでしょう。

こんな風になります。

<a href="#"></a><div><a href="#">インラインの中にブロックを入れる</a></div><a href="#"></a>

あれ？ もともとのタグより増えているような。

そうです。増えます。増えるというか、文法違反しないように、インラインを閉じるように増殖します。

結局、ブロック全体を囲むことはできないようになっています。

これはaタグだけでなく、bやstrong, spanなどのインライン要素の中にブロック要素を入れると発生します。仕様です。まぁ普通の人はインライン要素の中にブロックを入れることはないので知らない人も多いかもしれませんね。

- - - ✂切り取り✂ - - -

ではどうするか？

通常はインラインをブロック化させます。

display: block;

で要素をブロック化させます。

逆にインライン要素にしたい場合は

display: inline;

にします。

ただ、なろうの活動報告では使えないので、別の方法を考える必要があります。

Classを使います。

なろうのCSSに指定している部分で、aをブロック化させている部分を抜き出し、それを当てはめられるようにしてみます。さて、該当したのは、こちらになります。

#PC版

ul.nav a {

padding-left: 10px;

color: #006699;

display: block;

background: #f9f9f9;

}

#スマホ版

a.more {

display:block;

}

相変わらずPCとスマホで適用されるCSSが違うので両方有効になるようなClassを探すのは大変でしたが、一応見つかりました。

PCではnavクラスのul要素のaがブロック化されます。ナビメニューでよく使われるパターンですね。

スマホの方はmoreクラスでaがブロック化されます。これも、続きを見るとかそんなときによく使われるリンクブロックですね。

ということで基本形はこうなります。

<div><ul class="nav"><li>

<a class="more" href="#">ボタン</a>

</li></ul></div>

うん、ひどい形だ。

あとはこれにかかっている装飾を打ち消しながらボタンブロックのようになるよう装飾していきます。

ということで完成形。

<div style="margin:0 auto;width:120px;text-align:center;"><ul class="nav" style="margin: 0;padding: 0;"><li style="border:0;margin: 0;padding: 0;"><a class="more koukoku_text" style="font-size:16px;color:#ffffff;text-align:center;background:#1cb7cd;border:2px solid #1cb7cd;margin:0;padding:0.5em;line-height:1.2;" href="https://syosetu.com/">ボタン</a></li></ul></div>

わーお、ですね。

最初のdivのwidthで長さを指定、また、中のaタグで文字サイズと色、背景色、枠線を指定しています。

全体に広げたい場合はwidth:100%;にすればOKです。

文字サイズと色、背景色、枠線の組み合わせでボタンにすることができます。

href=でリンクさせたい場所を指定するのを忘れずに。

なお、このタグを一つのブロックとして見出しにすることもできます。

スキン、見出しの項目でやったような装飾にすればOKです。

ただ、作者ページでは該当するCSSがないので、インライン要素のままになります。見た目が崩れるので、それだけ知っておいてください。検証しにくいのが難点ですね……。

なお、class="koukoku_text"を指定すると、スマホ版限定ですが、角が丸くなります。

.koukoku_text{

margin: 10px 5px;

padding: 5px;

border-radius:5px / 5px;

border:1px solid #bbdddd;

}

ちょっとやわらかめのボタンを作るときに重宝します。

PC版ではborder-radiusを使っているCSSがなかったので諦めました。

- - - ✂切り取り✂ - - -

ということで、リンクは以上です。

正直、基本的な使い方だけでもいいかと思います。

リンクボタンはハック度が高すぎてなかなかいじれないかなって思います。