ゆうらり Happy Smile
「aタグ」って属性がまったく空でも問題ない?a要素のダミーリンクについて

「aタグ」って属性がまったく空でも問題ない?a要素のダミーリンクについて

FC2ブログ日記-カスタマイズの所感など
2019/12/02 0
胃がん_ブログ_ゆうらりHappySmile_管理人M_イラスト_アイコン_画像
M
#FC2ブログ #FC2ブログカスタマイズ #FC2ブログ日記 #a属性とは #ウェブデザイン #ブログカスタマイズ #空のaタグ #a要素ダミーリンク #ページネーション #ブログ運営

そうだ、空のaタグを使おう


FC2ブロガーのMです。前回の話しを続けます。


FC2ブログには、ひとつの記事を複数ページに分割する機能が存在しないため、仕方なく複数の記事をまるでページ分割したように関連性を持たせるページネーションを作りました。


ところが、よく考えないで作った結果、面倒な問題に気付きました。


現在表示中のページなどは「aタグ」が必要ないのに、a要素にcssを指定してしまった(汗)これにより、必要ないaタグを削除したいのに、それが出来なくなってしまったのです。


何とか良い案がないものか?そこでとりあえず、今一度「a要素」について勉強しなおしてみたのだけれど、思わぬことを発見!あらためてウェブ技術の奥深さを痛感しました。

スポンサードリンク

そもそも「a要素」とは?

僕もそうですが、FC2ブロガーさんがブログを書くなかで一番たくさん使っているのではないでしょうか?この「a要素」を。


今さら恥ずかしいのですが、a要素について今一度あらためて再確認してみました。


そもそも「a要素」とはhref属性を使ってurl指定した別のページにリンクさせたり、同じページ内の指定した場所へ移動させるために使用するもの。


これについては、ほとんどのブロガーさんが知っている話しだと思います。

a要素の中に何も書かない「空のaタグ」って大丈夫なの?

a要素について再確認したところで、僕の抱えている問題をあらためて考えてみました。


僕がやりたいのは、関係ないaタグを削除せずにそのままページネーションを実装すること。要するに、a要素のhref属性が邪魔なわけです。href属性を記述したままだと、値が何もないと変ですからね( ̄▽ ̄;)


そこで、a要素についてさらに掘り下げて調べてみることに。すると、意外なことが書かれているのを発見しました。


なんでも、a要素href属性を指定しない場合はリンク先が存在しない「ダミーリンク」として扱われるそうです。


えっ?ということは、中身が空のaタグを記述しても大丈夫ってこと?!


例:<a>こんにちは</a>


こんな感じでaタグを使うケースってあるのでしょうか?さらに調べてみると、リンクを張る予定だけど、まだurlが決まっていないようなときに、ダミーのa要素を作っておきたいことがあるのだそう。


さらに、HTML5ではa要素にhref属性が必須とされていないということも知りました。だから上のような書き方が出来るわけなんですね。

まとめ/a要素をダミーリンクにすることでページネーションのお悩み解決!

ということで、僕の抱えていた問題は解決しました(^^)


結論として、リンクを貼る必要のないa要素は、中身をすべて削除した空のaタグを記述しておけば良いということですね。


▼htmlの例

<ol class="pagenation"><li><a href="https://〇〇〇〇〇/blog-entry-【1つ前の記事番号】.html">< 前へ</a></li><li class="currentpage"><a>1</a></li><li><a href="https://〇〇〇〇〇/blog-entry-【2番目の記事番号】.html">2</a></li><li><a href="https://〇〇〇〇〇/blog-entry-【3番目の記事番号】.html">3</a></li><li><a href="https://〇〇〇〇〇/blog-entry-【次の記事番号】.html">次へ ></a></li></ol>

普段から何気に使っているa要素空のaタグが大丈夫だなんて皆さんはご存知でしたか?僕のブロガー人生もかなりの年月を重ねて来ましたが、こんな話しは初めて知りました。


何かの問題が生じて実際に調べてみないと、知らないことや分からないことって案外たくさんあるものなんですね( ̄O ̄;)


勉強になりました!!


  1. < 前へ
  2. 1
  3. 2
  4. 3
  5. 次へ >

この記事が気に入ったら
いいねとシェアしよう!

あわせて読みたい
data-matched-content-ui-type="image_card_stacked" data-matched-content-rows-num="6,2" data-matched-content-columns-num="1,5"
現在の人気記事はコチラ!

 0

There are no comments yet.
FC2ブログ日記-カスタマイズの所感など