タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
CSSの疑似要素は非常に便利です。疑似要素:beforeと:afterを使用したUI要素を実装する便利なテクニックを紹介します。 Webページやスマホアプリで使えるUI要素をはじめ、クリック・タップ可能領域を広げたり、:afterと:beforeのどちらを使うべきかなど、知っておくと役立つ疑似要素のテクニックです。 Uncommon Use Cases For Pseudo Elements by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 疑似要素で、親子のホバーエフェクト 一覧のリスト 疑似要素で、クリック可能領域のサイズを広くする 疑似要素を使用したオーバーレイ 疑似要素で、シャドウエフェクト :afterと:beforeのどちらを使うべきか ファイル拡張子を元にリンクのスタイル設定 疑似要
CSSの疑似クラスと疑似要素、:と::の違い
CSSで疑似クラス、または疑似要素を使用する時に、:と::のどっちだっけ？ と迷ったことはありませんか？ :beforeと::beforeのどっちだっけ？ :notと::notのどっち？ :と::のどっちが疑似クラスだっけ？ ※CSS3では::beforeですが、CSS2では:beforeでした。 たまに迷ってしまうことがある人に、CSSの疑似クラスと疑似要素、:と::の違いについて紹介します。 What's the difference between : and :: in CSS? by Salma Alam-Naylor(@whitep4nth3r) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの「疑似」とはどういう意味か 疑似クラスとは 疑似要素とは はじめに 「CSS :と::の違い」をGoogl
ここのことです*1。 真ん中のカラムがコードの表示 (開発者ツールで見ると textarea にコードが入っている 目次 目次 シンタックスハイライトはどうしているのか？ 上に表示されている div ならその文字もマウスカーソルで選択できるはずでは？ なぜこうしたのか？ 困ることはないのか？ たしかこないだまでは普通に div ？ で、テキストをマウスカーソルでドラッグアンドドロップで選択したりするような感じだったはずだけど、最近？になって、選択できる部分は textarea になっていて、点滅するカーソルが出るので、キーボードでエディタのように移動・選択することができる (もちろん編集はできない *2 )。 選択範囲の一番右に白く点滅するカーソルが登場している シンタックスハイライトはどうしているのか？ textarea は部分的に色を変えるとかはできないはずだし、スタイルの様子を見ると
ダイアログやモーダルを表示する時に、コンテンツの上にオーバーレイを使用します。このオーバーレイはコンテンツの上に表示されるように::backdrop疑似要素で最上位レイヤーにするのが簡単です。 先日アップデートされたChrome 122でこの::backdrop疑似要素の値の継承ルールが変更されました。 Changes to CSS ::backdrop inheritance by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 これまでの::backdrop疑似要素 アップデートされた::backdrop疑似要素 これまでの::backdrop疑似要素 フルスクリーンに表示する要素用のAPIを定義するFullscreen APIでは、最上位レイヤーや::backdrop疑
テキストやリストに添えるアイコンやサムネイルとして「画像」を表示させるなら「疑似要素」がおすすめです。 今回はCSSの疑似要素::before・::afterを使って、要素の前後に画像を挿入する方法を紹介します。 １．疑似要素のcontentで画像を指定する方法 ::before・::afterのcontentプロパティと言えば、要素の前後にテキストを入れる場合などに使われるのが一般的です。 あるいは、要素の前後にボックスを配置したい時などcontentの値を空のまま指定したり…なんてテクニックもあります。 そんなcontentプロパティですが、実は値として画像パスを入力することができます。 例えば、文章の横にちょっとしたアイコンを挿入したい場合、以下のように記述します。
before, after といった疑似要素は単一の HTML タグに装飾を加える場合非常に便利。 ところが全てのタグに対して疑似要素が使えるわけではないので、例えば img タグに疑似要素を使おうとすると途端に思った描画がされず、驚いた人も少なくないかと。 本記事ではこれについてまとめておきます。 疑似要素が効かない HTML タグ まず HMTL5 のタグで疑似要素が効かないものは以下の通り brwbrcanvasembedobjectaudioiframeimgvideoinputtextareaselectlegendbuttondetailsfieldset 2021年8月17日加筆：button タグのコードに閉じタグが無かったため CodePen で正しい表記が出来ていませんでした。legend, button, details, fieldset には疑似要素が有効です。
【CSS】実は br や img に ::before, ::after 疑似要素が入れられる（場合がある）【置換要素】
この記事で紹介するのはお遊びのようなものであり、実用を目的としていません。 後に説明する通り、ブラウザによって表示が異なるなど、動作が保証されませんのでご注意ください。 はじめに結論から br や img には通常、::before, ::after 疑似要素を追加できません。 しかし、以下の Codepen にサンプルを示した通り、br や img 自体のコンテンツを置き換えることで、疑似要素を適用できます。
Vue.js で疑似要素に動的なスタイルを適用する - Mobile Factory Tech Blog
ブロックチェーンチームのソフトウェアエンジニアの id:odan3240 です。 Vue.js で、input タグの ::placeholder 疑似要素に動的なスタイルを当てたい場面がありました。 この記事では、その際の問題と解決方法について紹介します。 この記事のゴール Vue.js では HTML クラスのバインディング や インラインスタイルのバインディング を用いて、動的にクラスやインラインスタイルを割り当てることで CSS を動的に変更ができます。 例えば、<input :style="{ paddingLeft: myPadding }">で、input タグの padding-left は myPadding を更新することで動的に変更されます。 しかし、これらの構文では ::placeholder の疑似要素だけを指定できず、結果スタイルを変更できません。 CSS カス
ul要素で箇条書きリストを書くと、自動的に黒ポチがつきますよね。この点の色を変えて、「リストをちょっと華やかにしたい！」なんて時もあるはずです。 しかし、ul要素やli要素に文字色を指定すると、リストのテキストも色が変わってしまうので、困っている人もいるのではないでしょうか。 もちろん、点だけ色を変える方法はあります。 そのやり方を紹介しますね。 ul要素の黒ポチだけ色を変える一番かんたんな方法 一番手っ取り早い方法は、liの中のテキストをspan要素でかこんでしまうことです。 HTML <ul> <li><span>牛乳</span></li> <li><span>小麦粉</span></li> <li><span>塩</span></li> </ul> CSS li{ color: #4dd2ff; } li span { color: #222222; } li要素に黒ポチにつけたい
はじめに 見出しの頭に縦棒をつけたいけど、縦棒の長さを文字よりも短くしたい・・・ こんなときってありますよね。 そういったときにbefore!を使いましょう！ 使い方 もともとの見出しがこいつだとすると。  .midasi::before{ } こんな感じで指定します。 :（コロン）を2つつけるのはcss3の記法です。1つでもブラウザ対応してますが、2つのほうがかっこいいです（ぉ） 注意点 beforeにはcontentプロパティが絶対必要です。 文字を入れてみます。 .midasi::before{ content: "ビフォアだよん"; } 
See the Pen css sample item-list by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. 以上のサンプルはhover時の表示に擬似要素（:after）を使っています。このCSSについて分解して紹介します。 コードのサンプルというよりCSS装飾の考え方の参考になれば。 概要 CSSでやることを言葉でざっと分解すると以下になります。 a:after を半透明フィルムのように a 全体を覆うようにする a:after に Fontawesome のアイコンを出す a:after は平時は透明にする （opacity:0） a:hover で a:after を表示させる （opacity:1） ※完成像が頭の中に（or絵として）あったうえで、こんな風にすれば出来るやろ！という手順をイメージします。
CSS疑似要素にSVGを指定する方法
CSS 疑似要素の ::before や ::after は文字だけでなく，SVG を指定することもできます． クラスを指定するだけでデザインが適用できるので，毎回 HTML ソースに追加するような手間なく SVG を使用できるようになるので超楽です． 大きさ指定不要の場合最も簡単なのは content に直接 URL を指定してしまうことです． url() を使用することで，SVG ファイルを相対パスで呼ぶことができます．
var property = window.getComputedStyle($('.pseudo')[0], '::after').getPropertyValue('content'); var sheets = document.styleSheets, sheet = sheets[sheets.length - 1]; $('.pseudo').hover(function() { if (sheet.insertRule) { // Webkit sheet.insertRule('.pseudo::after { content:' + property + '"変更完了" }', sheet.cssRules.length); } else if (sheet.addRule) { // IE sheet.addRule('.pseudo::after', 'content
質問をすることでしか得られない、回答やアドバイスがある。15分調べてもわからないことは、質問しよう！新規登録して質問してみよう
CSSのfilterプロパティは、CSS要素だけでなく画像やSVG、その透過部分を反映してフィルター効果を付けることができる優れものです。 用途の多いフィルターとして「drop-shadow」があります。 filter: drop-shadow(水平方向の距離 垂直方向の距離 影をぼかす大きさ 色);記述例 filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 1));CSSで円を作成した要素にfilterプロパティの「drop-shadow」を追加すると以下のようになります。 See the Pen CSS filter: drop-shadow() by yochans (@yochans) on CodePen. filterプロパティは子要素、疑似要素で解除はできないCSSのデザイン要素に子要素や疑似要素を含めた場合には注意が必要です。 親要素
疑似要素（::before, ::after)のCSSをJavaScriptで制御する - Qiita
JSで疑似要素（::before, ::after)の操作をしたかったので調べたところ、こちらの記事を見かけたので備忘録として記録する。 「スタイルルールの追加」の概念で制御する 厳密に言うと疑似要素はJSで直接制御できない。 疑似要素にはHTML属性が無いのでstyle属性によるインラインCSSの制御もできない。 ではどうするかと言うと、スタイルルールの追加の概念で疑似要素を操作する。 JSで .class::before {width:100px} みたいな記述をドキュメントに追加してしまうという考え方になる。 スタイルルールの挿入 //ドキュメントスタイルの取得 var sheets = document.styleSheets var sheet = sheets[sheets.length - 1]; //スタイルルールの追加 sheet.insertRule( '.class:
🛠JavaScriptでブラウザが疑似要素・疑似クラス・メディアクエリ特性・プロパティに対応しているか判定する｜たかもそ／Web Creator.
ブラウザが特定のCSSに対応しているかどうかをJavaScriptで判定する方法です。最近ではCSSの@supportsクエリが実装されているのであまり使うことはないかもしれませんが、CSSの対応状況を調べたいときなどに使えます。 疑似要素と疑似クラスの判定document.querySelector()関数に疑似要素や疑似クラスを指定すると、ブラウザが対応していない場合にエラーとなります。そこで、try-catch文を使い、エラーの際は非対応と判定しています。document.querySelector()関数に対応していない場合はnullを返します。 const support = pseudo => { try { if (!document.querySelector) return null document.querySelector(pseudo) } catch { ret
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの疑似要素:beforeと:afterでUI要素を実装するテクニックのまとめ
GitHubのコード表示部分はtextareaとbefore疑似要素でできている - hogashi.*
CSSでオーバーレイのスタイルが期待通りに表示されない、::backdrop疑似要素の変更された使い方
CSS疑似要素のcontentで画像を表示する方法！サイズを調整するには？ ｜ 向壁虚造
疑似要素が適用できない HTML タグについて ｜https://wp.yat-net.com/name
【CSS】箇条書きリスト(ul要素)の点の色を変える【疑似要素を使った方法がおすすめ】
beforeとafter（cssの疑似要素）を使い倒す！ その1 contentを使おう編
疑似要素を使ったhover表示のCSSを分解する - Qiita
疑似要素のCSSの値（content）をJavaScriptで制御する4パターン | HPcode（えいちぴーこーど）
疑似要素で指定したコンテンツにiPhoneでのみ枠線がついてしまうので消去したい
CSS | filterプロパティは子要素、疑似要素で解除はできない | 1 NOTES
erodouga.cyou
support.ocn.ne.jp
news.yahoo.co.jp
matomedane.jp
nordot.app
www.orangepage.net