jQueryで要素を挿入できるメソッドがたくさんあるので整理してみた – bl6.jp
jQueryでHTML要素を追加するメソッドが色々あるので整理するために、ちょっとまとめてみました。似たようなメソッドの名前なので混乱しそうです。大きく分けるとbefore,after,prepend,appendと、insertBefor,insertAfter,prependTo,appendToが似ているのでそれらの違いをまとめてみます。 before, after, prepend, append 挿入先の要素を基点にした場合、beforeとafterは外側に挿入されます。逆にprependとappendは挿入先要素の内側に挿入されるんですね。使い方は以下です。 JavaScript <script type="text/javascript"> $(function(){ $('#sample') .before('<div>before</div>') .after('<div
» imgに疑似要素のbefore,afterが使えないので、jQueryで対応してみた。｜今プラスブログ
CSSを使って文字を追加してみよう！擬似要素とcontentで一括反映も簡単に！の内容を使ってimgにbefore、afterとしてCSSで追加したかったのですが、なにやら出来ない様子。 閉じタグのないimg要素では疑似要素であるbefore,afterを指定してもCSSとしてどうやら追加されないのですって。 それならばCSSではなく、jQueryを使って対応すればいいか！と思ったので実装してみたケースをご紹介します。 jQueryにもbefore,afterがあるんです。 jQueryでのimgのbeforeやafterの追加方法については下記を参考にしました。 参考記事：jQueryで要素を挿入できるメソッドがたくさんあるので整理してみた | bl6.jp これにて無事CSSを使わずにjQueryでimg要素にbefore、afterを追加することができました。 最新投稿された記事はい
CSS の疑似要素に疑似クラスを付ける話 - debiruはてなメモ
経緯 https://sugamocss.slack.com/ で「::before:hover みたいなのが効かないんだけど仕様だっけ」という話が出たのでメモ。 sugamocss は2009年から2013年まで東京で定期的に開催されていた Web フロントエンドな人たちが集まる Sugamo.css という勉強会の名称です。 @sigwyg Sugamo の名前使った Slack チーム作りました！事後承諾で恐縮ですが、ご許可を＞＜ https://t.co/BtkKDoH9VV— neotag (@neotag) September 1, 2015 問題 「::before:hover という記述はできるか」（疑似要素に疑似クラスを指定できるか） a 要素じゃなくてもいいですが、とりあえず a 要素で試してみます。 <div class="mod-experiment"> <a cl
CSS3のセレクタ全42種 まとめておさらい使い方リファレンス | WP-E (仮)
こんにちわ。WP-Eイクラこと@ampersand_xyzです。 CSS3のセレクタ、ちゃんと覚えてる？ 普段使わなかったりするようなセレクタって、すっかり脳みそから抜け落ちてしまい、適用されているスタイルを確認したときに あれ？コレなんだったっけ？ というセリフを何度心のなかでつぶやいたか分かりません。 また、場面によって必要に応じたセレクタを使えてるかどうかというところも気になるところ。どんなセレクタがあるのかを覚えておけば、たとえばDOMの動的生成をするときに無駄な分岐処理をしてstyle適用とか、JSでゴリゴリスタイル付与とかしなくてよくなるはずです。 おさらい用チートシート作成を兼ねて、Selector Level3 のSelectorsについて、セレクタの記法と使い方のgistつけてまとめていきたいと思います。 なお、仕様書の日本語訳は以下のページをご参照ください http:/
意外と知らない！疑似要素と疑似クラスでできること | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのはるえです。 突然ですが、疑似要素と疑似クラスってありますよね。 私がCSSを覚えたてのときは「は？何これ」って感じで、得体の知れないものを見るような目で使ってました。 「この2つって何が違うの？」「どれが疑似要素で疑似クラス？」「どういうときに使うの？」と何かと敬遠しがちな人も多いと思います。 ですが、この2つを使うことでできることがぐんと広がるので、今では恐縮しながらありがたく使わせていただいております。 疑似要素とは 疑似要素とは、要素内の特定の文字や行に対してスタイルを指定したりするものです。 よく使われる疑似要素 :before{} :after{} :first-letter{} 疑似要素の中でも特に「:before」と「:after」を極めると、CSSだけのデザインの表現幅が一気に広がります。 例えば、LIGブログでも使用している「blockquote
【CSS】背景画像の複数設定と:before、:afterを使ったレスポンシブCSSテクニック｜Tips*Blog｜株式会社コプロシステム
こんにちは、UXデザイン室の松山です。 最近、クジラのトイレマットを衝動買いしました。 前回のTips*Blogでは「マウスホバーでアコーディオンさせた要素の中で動画を再生する方法」を説明しました。 今回は、アニメーションではなくレスポンシブサイトで使えるビギナー向けの簡単なCSSテクニックを紹介します。レスポンシブって何？という方は、UXデザイン室の石川室長が書いた大人気の過去記事「レスポンシブwebデザインとは？」をご覧ください。 レスポンシブサイトを構築する際に、デザイナーさんからあがってきたデザインを見てどのようにコーディングするか悩む事も多いかと思います。そんな時に知っていると便利なCSSテクニックを紹介します。 今回は下記のような黒板のデザインを実際にレスポンシブでコーディングしてみました。 ちなみにこちらのGIFアニメは、Chrome拡張機能Animated Gif Capt
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
