株式会社アテンド0biggerlink.jsでクリックできる領域を拡大させるホームページを作っていて、a要素でリンクを設定します。その時にa要素で囲んだ範囲しか、リンクができません。問題が無いように思えますが、実際にWebページを操作すると「この枠全体がリンクしたらいいのに」「テキストしかリンクしないから押しにくい」なんてことがありませんか?そんな時に活躍するのが「biggerlink.js」です。必要となるファイルWebサイトに必要となるデータの他に・biggerlink.js(ダウンロード:http://www.ollicle.com/projects/jquery/biggerlink/)・jquery.js(ダウンロード:https://jquery.com/)この2つが必要となります。公式に配布しているWebサイトへのリンクを設置したので、そちらからダウンロードしてご利用ください。scriptの記述biggerlink.jsとjquery.jsを設置して、script要素内に下記を書き込みます。$(function(){$(‘.bigger‘).biggerlink();});太字で書いた.biggerは、どの要素をリンクエリアにするのかを指定しています。続いてコンテンツの記述です。href=””>リンクテキスト</a></p></li></ul>このように書き込めば完成です。a要素はli要素の一部にしか書いてありません。実は先ほどの記述では「target=”_blank”」による別ウィンドウでの表示には対応できません。対応するにはこのように記述を変更します。false;});$(‘.bigger’).biggerlink();HTML5からはインライン要素とブロック要素の分類は廃止されているHTML4.01ではa要素はインライン要素でした。ブロック要素全体をリンクで指定する事ができなかったんですね。HTML5ではインライン要素とブロック要素の分類が廃止されているので、段落・リストなどの要素に対しても全体をa要素で囲んでリンクを指定できるようになっています。その中に他のリンクやフォームボタンなどが含まれる場合にはリンクを指定することはできません。実はbiggerlink.jsを使わずとも要素全体をリンクに指定する事ができちゃうんです!JavaScriptを使っていましたが、例えばこのようにすることもできます。src=””><p>リンクテキスト</p></a></li></ul>CSSa{display:block;}JavaScriptが不要になるので、かなりスッキリしますよね。読み込むファイルも減るので、閲覧速度にも若干の差が出るはずです。HTML5で作られたページの場合はこの方法が使えますが、HTML4.01などのバージョンで作られたページの場合、この方法を使うとHTMLエラーとなったり表示が崩れたりと、良くないことが起こる事が予想されます。状況によってbiggerlink.jsを使うのか、HTMLとCSSだけで対応するのかを判断するようにしてください。弊社は、新潟県長岡市を中心に新潟県内全域に対応しております。コンセプト制作プランCONTACTお問い合わせホームページ制作に関するご質問などございましたら、お気軽にお問い合わせください。※ブログ記事に関するご質問はお答えしかねます。お問い合わせはこちらTEL:0258-31-5005FAX:0258-37-7301ホームページ制作のアテンド|新潟・長岡|SEO・WEBデザインホームページ制作・Webデザインを始めとしたITソリューションでお客様のお手伝いをいたします。株式会社アテンドまで。会社案内リクルートFAQお見積り・ご相談お問い合わせリモートサポートソーシャルメディアFacebookFeedlyイイ感じの情報が集まる、アテンドパークシリーズ。ホームページ制作のアテンド|新潟・長岡|SEO・WEBデザイン。