comments trackbacks you may also like

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

2019年12月02日
#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. 次へ >
この記事、おもしろかったわ。
気に入ったらどしどしシェアしてね♪
\Thanks/

【ランキングに挑戦中】

いつも応援クリック↓
ありがとうございます

にほんブログ村

関連記事
M
この記事を書いた人: M
ブロガー/FC2公式おすすめブログ認定/企業家/投資家/Fashion研究家/不動産コンサルタント/会社経営/将棋六段/おうちごはん男子部/料理を悪戦苦闘修行中/ヘッドスパとスイーツをこよなく愛する46歳/人生なんて気持ち次第‼︎きっと何くるないさ〜(´ー`)
FC2ブログオフィシャルおすすめブログ認定バナー日本ブログ村 プロフィール
iconiconiconicon

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

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.
未分類 (0)
シン・胃がん闘病記 (45)
┣  AVANT:癌の余命宣告~共存 (32)
┗  セントラルドグマ:父親の胃癌 (13)
胃がん闘病記録まとめ (85)
┣  ステージ3B-多発性高度リンパ節転移胃癌 (57)
┗  胃がん再発「転移性肝がん」で余命宣告 (27)
胃がん-Stomach_cancer (5949)
┣  胃がんブログ (285)
┣  よりぬき胃がんブログ (16)
┣  胃がん闘病記-日記 (5586)
┣  酒場放浪記 (10)
┣  胃がん手術後の食事記録 (6)
┣  胃切除後の料理など (36)
┗  がん治療のクラウドファンディング (10)
がんのこと-ガン情報全般-cancer (560)
┣  がんブログ (325)
┗  がんニュース (235)
胃がん障害年金ブログ (71)
┣  障害年金-準備編 (23)
┣  障害年金-審査から年金受給まで (12)
┣  障害年金-審査請求-不服申立 (26)
┗  障害年金-再審査請求 (10)
Amazon (157)
┣  Amazonセール (3)
┗  Kindleセール (153)
おもしろグッズ (11)
今日のエッセイ (141)
ニュース-芸能-話題 (859)
┗  転職-キャリアアップ (21)
占い-心理テスト (6)
恋愛-人間関係 (30)
終活ブログ (12)
グルメ (111)
┣  低糖質レシピ (31)
┗  お酒の飲み方 (2)
胃切除後の食事レシピ (672)
┣  ご飯-おかゆ-和食 (174)
┣  おかず (140)
┣  味噌汁-スープ (75)
┣  カレー関係 (66)
┣  パン-洋食 (63)
┣  麺類 (112)
┗  その他-簡単レシピなど (39)
ブログ (258)
┣  FC2ブログ-便利ワザ-アイテム-HTML-SEO対策など (188)
┣  FC2ブログ日記-カスタマイズの所感など (23)
┣  GoogleAdsense-アドセンス (8)
┣  趣味や将棋のこと (31)
┗  ファッション (8)
iPhoneの使い方-アプリなど (34)
司法書士 (1)
┣  仕事-実務や登記のこと (1)
┗  事件ファイル (0)
COLLECTION (28)
┣  家電 (11)
┣  ホーム&キッチン (5)
┣  ビューティー&ヘルスケア (5)
┣  QOL改善&ヘルスケア (2)
┗  お酒 (5)