ReactコンポーネントでレンダリングされるHTML要素の種類を変更可能にするためのパターン

2023/06/04 19 users Reactコンポーネント UIコンポーネントライブラリ

ReactのUIコンポーネントライブラリを使っていると、あるコンポーネントによってレンダリングされるHTML要素の種類を変更したくなる場面がある。たとえば、通常はbutton要素としてレンダリングされるButtonコンポーネントを使うときに、代わりにa要素を使ってレンダリングしたいというケース。 as prop そのような場合、... 続きを読む

CSSで複数行に対応したアニメーション付きアンダーライン（下線）を実装する方法 | NxWorld

2019/08/30 42 users NxWorld CSS class 複数行 実装

実装方法 実際の動きは以下デモのようになり、リンク箇所（文字色が濃い部分）にホバーすると1行・複数行関係なく左から右へ下線が伸びていくのを確認できると思います。 ※動きはPCで確認してください。 実装にはCSSを下記のように記述し、ここでは.hover-underlineというclassを適用したいa要素に指定する想定になりま... 続きを読む

これ知ってた？ 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でク...記事の続きを読む 続きを読む

Google Chrome ver60からa要素のdownload属性が同一オリジンポリシーに厳密になった - Qiita

2017/08/10 18 users Qiita example.com ハイパーリンク リソース

開発しているGoogle Chrome拡張機能で、この仕様変更により困ったのでメモ。 HTML a 要素の仕様 上記のクリックが発火すると、 example.com/abc.jpg を 123.jpg というファイル名で保存しようとする仕様。 W3C 1 download属性が存在する場合、著者はリソースをダウンロードするために使用されるハイパーリンクを意図することを示す。属性は値を持ってもよい。... 続きを読む

[CSS]画像のキャプションをいい感じのアニメーションで表示するシンプルなホバーエフェクト | コリス

2015/06/10 69 users コリス しぐさ div要素 キャプション ホバーエフェクト

シンプルな実装で、画像のキャプションを美しいグラデーションのパネルにアニメーションで表示するシンプルなホバーエフェクトを紹介します。 イラストは、以前紹介した「Girls Design Materials」です。 生き生きとした表情やしぐさが魅力たっぷりなガーリー素材 実装 Step 1: HTML 画像とキャプション（見出しとテキスト）をセットに、a要素で括り、全体をdiv要素で内包します。 <... 続きを読む

<input type="file">を装飾する時の注意 | バシャログ。

2014/10/15 19 users File input バシャログ input type 装飾

どうもfujiharaです。ここ最近の台風ラッシュには困りました。 通勤電車が見合わせてまったく動かない経験を久々にしました。 本日は<input type="file">の装飾を行っていきます。 方法は実在する<input type="file"> を見えないようにして、 装飾可能な a要素がクリックされたタイミングで見えない input要素を クリックしてあげます。 失敗例 $('input:... 続きを読む

[CSS]ボタンにぷるるんとかわいいアニメーションを与えるスタイルシート -Galatin effect | コリス

2014/05/21 91 users アニメーションgif アニメーション ゼリー デモ HTML

a要素にテキストを配置して実装したシンプルなボタンに、ゼリーのようにぷるるんとさせるアニメーションを与えるスタイルシートを紹介します。 ↓は、デモをアニメーションgifにしてみました。 実際の動作は、下記ページで楽しめます。 Gelatin over button effect with Sass HTML HTMLは非常にシンプルです。 [html] Click Here Click Here ... 続きを読む

[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... 続きを読む

[CSS]アイデアが面白い、ボタンに次々とメッセージを表示するスタイルシート -Story Button | コリス

2013/08/27 70 users コリス ボタンクリック ビジター CSS トリック

ボタンをホバーすると、表示メッセージを次々に変更するスタイルシートのデモを紹介します。 Story Button こういうボーナス的なトリックって、面白いですよね。 気がついたビジターだけが楽しめたり、ボタンクリックへの背中を一押しするようなメッセージを入れるのもいいかもしれません。 実装は、簡単です。 HTML a要素で実装したボタンに、メッセージの数分のa要素を量産します。 デモでは、10のメ... 続きを読む

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

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

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

jQueryのイベントハンドラでreturn falseするとイベントのバブリングが止まる - Webtech Walker

2012/09/20 76 users イベントハンドラ jQuery functio return

例えばjQueryでスムーズスクロール的なのを実装したとして、a要素のデフォルトの機能を止めるために以下のようにreturn falseってするとイベントのバブリングまでとまるよという話。 $(function() { $('a[href*=#]').click(function() { // スムーズスクロースの処理 ... return false; }); }); つまり $(functio... 続きを読む

[CSS]画像にかっこいいアニメーションでオーバーレイのメッセージを表示するスタイルシート | コリス

2012/06/27 79 users コリス パラグラフ slider CSS スライダー

CSSで作成したイメージスライダーに、ホバー時にメッセージを半透明のパネルに表示するチュートリアルを紹介します。 実装 実装のポイントだけピックアップ。 HTML メッセージの見出しとパラグラフをdiv要素で内包し、さらにa要素で内包したものを1コンテンツとして、スライダーを実装します。 画像はそれぞれの背景として配置します。 <div class="slider"> <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>... 続きを読む

jQueryでマウスオーバーした時に要素を全体的に拡大するやつを作ってみる | bl6.jp

2012/03/03 51 users 素人 サンプル 拡大 おかしい部分 jQuery

すごくどうでもいい内容なんですが、ちょっとやってみたかったので素人ながら作ってみます。ある要素、例えばa要素なんかにマウスオーバーした時にちょっとだけ拡大して強調させたいなどといった時に使えるかもしれません。分かりづらそうなのでサンプルも作ってみました。おかしい部分やもっとこうした方がいいみたいなことがあれば是非教えていただけるとうれしいです。 要素を全体的に拡大 ということで、今回作りたかったサ... 続きを読む

[CSS]あらゆる背景上で美しく機能する半透明なエレメントを実装するスタイルシート | コリス

2012/01/22 64 users コリス shelf エレメント 半透明 CSS

まるでガラスで作られた棚のように、美しい半透明な3Dのエレメントを実装するCSS3のテクニックを紹介します。 デモページ：Firefoxのキャプチャ 実装 HTML HTMLはシンプルで、各アイコンはa要素、ガラス棚はdiv要素で実装されています。 <div id="shelf"> <!-- Add icons here --> <a class="icon" href="#"></a> <a c... 続きを読む

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

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

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

[CSS]CSS3の美しいエフェクトを備えたナビゲーション -Circle Navigation Effect | コリス

2011/10/10 75 users コリス jQuery アロー 半透明 CSS

デモページ 写真画像の下の半透明のパネルには画像の説明文とナビゲーション（アローとテキスト）が配置されており、ホバーするとサークル状にアニメーションで拡大しながらサムネイル画像に変わります。 実装 画像ギャラリー自体はjQueryをベースに作られており、ここではナビゲーションのエフェクトの実装方法を紹介します。 HTML ナビゲーション箇所はテキストと画像をa要素で内包します。 <div clas... 続きを読む

[JS]a要素を内包するdiv要素全体をクリッカブルにするスクリプト -Div Linker | コリス

2011/10/05 67 users Libs クリッカブル Ajax jQuery コリス

テキストリンクなどのa要素を内包するdiv要素の全部をクリック可能にするjQueryのプラグインを紹介します。 Div Linkerの実装 実装は非常にシンプルです。 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min... 続きを読む

これは簡単！ a要素にクラスを追加するだけでiPhone UIボタン | CSS-EBLOG

2011/08/29 58 users CSS-EBLOG iPhone WebKit デモ クラス

これは簡単！ a要素にクラスを追加するだけでiPhone UIボタン カテゴリ：iPhone関連 2011年8月29日 09:05 ↓実際に動いているデモはこちら(iPhone向けに作っているため、iPhone / WebKitでしか最適化されていません) これは簡単！ a要素ひとつでiPhone UIボタン - jsdo.it - share JavaScript, HTML5 and CSS ... 続きを読む

クリック可能な箇所でa要素を使用しない時に気をつけたい3つのポイント | コリス

2011/08/25 72 users コリス セマンティック 箇所 定義 アンカーリンク

リンクではない、例えばJavaScriptを埋め込むなどのクリッカブルな箇所でアンカーリンクを使用しない時に気をつけたい3つのポイントを紹介します。 下記は各ポイントを意訳したものです。 a要素は、いつ使うべきでしょうか。 私はそれがクリック可能である時に、a要素を気前よく使用していました。しかし、a要素の定義を考えてみると、セマンティックではない使い方をしている場合があるのではないかと思いました... 続きを読む

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

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

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

Androidと-webkit-tap-highlight-color[to-R]

2011/06/09 71 users iPhone to-R 結論 Android スマートフォン

Androidと-webkit-tap-highlight-color Check Tweet Androidと-webkit-tap-highlight-colorの関係がよくわからず色々と悩んでいたのですが、ひと通りの結論が出たので紹介します。 そもそも-webkit-tap-highlight-colorってなによ iPhoneなどのスマートフォンでa要素をタップしたときにハイライトさせるプ... 続きを読む

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

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

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

firegoby » Blog Archive » 自作WordPressプラグインやテーマ内でメディアアップローダーを使用する

2011/05/16 15 users firegoby input要素 HTML 手順 とおり

いま開発しているプラグインで、テキストフィールドに画像のURLを入力する必要があって、メディアアップローダーからファイルを選択できるようにしました。 以下は、そのための手順です。 HTMLの準備 自作プラグインの管理画面に以下のようなHTMLを記述してください。 ポイントは以下のとおりです。 ファイル名を挿入するinput要素とメディアアップローダーを開くためのa要素を用意する。 a要素のrel属... 続きを読む