これ知ってた？ base要素にtarget=”_blank”を加えると、ページ内のすべてのリンクに適用できる | コリス

2019/05/14 118 users blank コリス target 新しいタブ リンク

リンクを新しいタブで開くには、a要素に「target="_blank"」を加えます。 実はこの「target="_blank"」はbase要素にも使用でき、ページ内のすべてのリンクに「target="_blank"」を適...記事の続きを読む 続きを読む

[CSS]クリック可能な範囲を広げるスタイルシートのテクニック、a要素はボタンだけでもカード全体をクリック可能に | コリス

2018/09/11 153 users コリス jQuery block CSS テクニック

a要素はボタンだけ、でもクリック可能なエリアはカード全体にしたい、と思う時は少なくないと思います。a要素にdisplay: block;を加えてもボタンだけだし、あとはjQueryのプラグインなどJavaScriptでク...記事の続きを読む 続きを読む

[JS]a要素にclassを加えるだけで別窓や印刷、ページ内アンカーへのスクロールなどの機能を加えるスクリプト -jQuery A+ | コリス

2014/03/18 155 users コリス jQuery XHTML モーダルウインドウ 印刷

HTML5でもXHTMLのどちらでもvalidなHTMLで、a要素にclassを加えるだけでリンクを別窓で開いたり、モーダルウインドウを表示したり、通知パネルを表示したり、ページ内アンカーへアニメーションでスクロールさせたり、ページの印刷ボタンとして機能したりなど、a要素にさまざまな機能を加えるjQueryのプラグインを紹介します。 jQuery A+ jQuery A+ -GitHub jQue... 続きを読む

CSS3で実現するアローアイコン - to-R

2013/06/25 310 users to-R Arrow CSS3 かんじ 矢印

スマートフォンなどでリンク領域を示すことなどで使われることが多いアローアイコン。これをCSS3を使って表現する方法を紹介します。 ちなみにアローアイコンとはこんなかんじのリストの右にある矢印。(アローアイコンの正式名称とかあるのかしら) まず、HTMLは次のようにします。今回は便宜的にアローアイコンを付けるa要素にclass属性「arrow」を付加しています。 <ul> <li><a href="... 続きを読む

[CSS]ナビゲーションやリストなど、inline-block要素の間にできる隙間を解決する方法 | コリス

2012/04/23 118 users コリス NAV Three CSS float

ナビゲーションを実装する時など、ul要素を使って水平に並べると意図しない隙間ができてしまうのを解決する方法を紹介します。 デモ 解決方法 floatでいいんじゃないの デモ まずは、元となるコードから。 HTML nav要素を使い、a要素で各アイテムを実装します。 <nav> <a href="#">One</a> <a href="#">Two</a> <a href="#">Three</a>... 続きを読む

[CSS]ボタンのクリックを楽しくするCSS3アニメーションのテクニックいろいろ | コリス

2011/11/10 363 users ポパー コリス span要素 img要素 CSS

ボタンをCSS3で美しくスタイルするだけでなく、ホバー・アクティブ時にもかっこいいCSS3アニメーションを使った7種類のテクニックを紹介します。 ちょっと前まではこういったアニメーションはFlashかJavaScriptを使用しないとでしたが、今ではもうCSS3でとなってきましたね。 Demo 1 ボタン内のテキストや画像は、span要素やimg要素で配置されており、それらをa要素で内包して実装し... 続きを読む

ホバー時に素敵なエフェクトでパネルを変更するスタイルシート

2011/06/19 146 users エフェクト ホバー時 パネル アニメーション スタイルシート

デモではパネルにマウスホバーすると、背景を変更しアニメーションのエフェクトを適用します。 実装方法 HTML HTMLはシンプルです。 ポイントとなるのは、h3やpなどのブロック要素をa要素で内包している点です。これはHTML5を使用する限りvalidです。 続きを読む

[CSS]かわいいストライプ柄を作成するスタイルシートのチュートリアル | コリス

2011/05/16 149 users マウスホバー エフェクト コリス ストライプ柄 HTML

画像を使用しないで、ストライプ柄のボタンを作成するスタイルシートのチュートリアルを紹介します。 ストライプ柄はボタン以外にも適用が可能です。 かわいいストライプ柄のボタンは、マウスホバーのエフェクトも実装されています。 HTML ボタンはテキストを使ったa要素で作成されています。 Blue button 続きを読む

Re:href="#" onclick の悪習[to-R]

2007/08/01 239 users onclick 悪習 onclick属性 href to-R

Re:href="#" onclick の悪習 【PR】初心者でも安心なレンタルサーバー。２６３円から使えます。 【PR】HP登録でSEO対策！アクセスアップにコチラ！ ネタ元：某日記：href="#" onclick の悪習 <a href="#" onclick="...">検索</a> なんて書き方やめようぜ！というお話 a要素のhref属性に値が入ってるとonclick属性の内容を実行後に... 続きを読む