タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
Chrome 106, Safari 16でサポートされたコンテナクエリは、親要素（コンテナ）のサイズに応じて子要素のスタイルを設定できる新機能です。しかし、これは機能の一部です。親要素のスタイルに応じて子要素のスタイルを設定できるスタイルクエリを紹介します。 たとえば、下記は右のカードの親要素に特定のスタイルが設定されており、それに応じて子要素のスタイルが適用されています。 Container Queries: Style Queries by Bramus 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに コンテナクエリとスタイルクエリの違い スタイルクエリの基礎知識 スタイルクエリの使い方 スタイルクエリのブラウザサポート スタイルクエリのリソース はじめに CSSのコンテナクエリは「コンテナのサイズ」だけではない
子要素を親要素からはみ出して画面いっぱいにするは、今までであれば親要素から出してコーディングし直すというのが一般的でした。 ただし、今ではcalcとvwとい新たなCSSの概念があるので、子要素を親要素からはみ出して画面いっぱいにするということが簡単にできるようになっています。 この記事は、その具体的なCSSの実装方法について紹介していきます！（結論から言うと、以下のとおりですが…） 📝 inner幅からはみ出して横幅いっぱいにするCSS わざわざコンテナーを作り直す必要がなくて、自然なHTMLのままでコーディングできます！ — .hoge { margin: 0 calc(50% – 50vw); width: 100vw; } — ピンクのエリアがインナーで、そこからはみ出して画面いっぱいになる pic.twitter.com/8wBUiw7Nzd — はにわまん (@haniwa00
【JavaScript】イベントオブジェクトの子要素【調査用】 - Little Strange Software
どうも！LSSです！！ 最近、JavaScriptのマウスイベント・タッチイベントに反応する仕掛けを作る事が増えてきました。 【ツール？】いろは歌作成補助ツール - Little Strange Software 【ツール】簡易お絵描きアプリ【試作品＋】 - Little Strange Software 「どこがイベントの発火地点（マウスカーソル位置・タッチ位置）なのか」を知るだけなら、「e」をイベントオブジェクトとした場合、「e.pageX」「e.pageY」（タッチの場合は「e.changedTouches[0].pageX」「e.changedTouches[0].pageY」）で事足りる話ですが、それでもやはり、それ以外のものを扱う必要が出てくる時があります。 そんな時に「どんな値が取り出せるんだっけ」「どんなスペルだっけ」となり、本で調べたりWebで検索したりするのですが、ちょ
ヘッダーやフッター部分、またボタン要素など、 横幅を画面いっぱいに広げたい時ってありますよね。 先日そんなのを作っていたら、思いのほかやり方が色々あったり、 レスポンシブを考えた時にCSSが崩れてしまったりと、 意外と大変だったので、やり方をまとめてみました。 最初に作ったもの まず最初に作ったものはこんな感じです。 See the Pen oNvbmoX by masashi kurashima (@masashikurashima) on CodePen.0 これの「送信する」の部分の横幅を画面いっぱいに広げたいと思います。 方法１：「left: 50%;」と「transform: translateX(-50%);」 See the Pen KKPzYOW by masashi kurashima (@masashikurashima) on CodePen.0 submitクラスに
タイトル画像のようなものです。海外もののクールなデザインのブログテーマで結構見かけますね。 この記事はスマホサイズでは調整しておりません。 その1: marginとwidthで指定する 左右に50pxずつはみ出して配置する 親要素をdiv.parent01、子要素をdiv.child-test01とします。 ここでは子要素を親要素より左右に50pxずつはみ出させてみます。 <div class="parent01"> 親要素ここから <div class="child-test01">子要素</div> 親要素ここまで </div> HTMLはclassの違いはありますが、基本的にこの形です。 この投稿記事内でデモもやるため、実際にはpタグが無駄に混じっていますがお見逃しください。WordPressでpタグを自動挿入させないテクもあるようですが。。 div.parent01 { backg
CSSのvisibilityプロパティを使って非表示の親要素の中で子要素だけ表示する方法を紹介しています。 See the Pen CSS | visibility by yochans (@yochans) on CodePen. 非表示の親要素の中で子要素だけ表示するCSSで要素を非表示にする方法は「display: none;」「opacity: 0;」などもありますが、これらは親要素で指定した場合は子要素で非表示を解除できません。 「display: none;」「opacity: 0;」は、親要素のプロパティであり、親要素が非表示になっている以上は子要素では解除できないからです。 親要素で非表示にして特定の子要素だけ表示したい場合は、visibilityプロパティを利用します。 visibilityプロパティも要素を非表示にすると、子要素も非表示になりますが、プロパティのスタイル
Result かなり世間から遅れていて今更感ありますが目を惹かれたサンプルを見かけたので:has()を試してみようと思います。 What’s Missing From CSS?でも結果として出ていましたが、:has()はずっとCSSに求められていた機能でしたのでやっと来たかという思いの方も多そうですね。 タイトル通り、上記サンプルは親要素内に存在する子要素を数え、それに応じてスタイルを変更するサンプルです。 表示されるテキストの変化はdata属性で実装されています。数字のカウンターはcounter-incrementとcontent: counter(count);が使われています。 css.list { --color: black; color: var(--color); } ul { border: 3px solid var(--color); padding: 0; color
【CSS】Grid・Flexの子要素にContainer Queriesを使ったら、子要素の幅がなくなる!? - Qiita
【CSS】Grid・Flexの子要素にContainer Queriesを使ったら、子要素の幅がなくなる!?HTMLCSSUIDesignフロントエンド はじめに みなさんは、Container Queriesを使いこなせていますか？ Container Queriesを色々試していた時に、「CSS Grid と Flex Boxの子要素にContainer Queriesを使ったら、子要素の幅がなくなるバグ」に出会ったのでバグの原因と解決策を紹介します。 Container Queries とは？ Container Queriesとは、親・祖先要素のスタイルに合わせて、子要素のスタイルを変更することができるアットルールです。 Container Queriesには、「Container size Queries」と「Container style Queries」の2種類あります。 ○
JavaScriptでHTMLの親要素から子要素を取得するのサンプルコードのパターン集です。 このページではquerySelectorAll()を利用した方法を紹介しています。 See the Pen JavaScript | get child elements by yochans (@yochans) on CodePen. 共通HTMLと簡単な説明サンプルコードで利用している共通のHTMLです。 親要素のdivタグの中に、2つのdivタグ、2つのpタグを作成しています。 <div id="parent"> <div id="child_01"></div> <div id="child_02"></div> <p id="child_03" class="abc"></p> <p id="child_04" class="abc"></p> </div>サンプルにて取得する結果は全
こんにちは、Ryohei（@ityryohei）です！ 本記事では、JavaScriptで親要素を取得後、何番目（n番目）に存在する子要素を取得する方法をご紹介しています。 検証に使用する要素 本記事では下記のリストを検証に使用しています。idにparentを持つ要素を取得し、parentが持ちリストアイテムの中から何番目に存在する子要素を取得しながら解説していきたいと思います。 <ul id="parent"> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> <li>Item5</li> </ul> では、解説していきます。 最初の子要素を取得する「element.firstElementChild」 最初の子要素の取得は、elementプロパティの「firstElementChildを使用します。「firstEle
CSSで特定の子要素を持つ親要素にスタイルを適用する方法！
CSSで特定の子要素を持つ親要素にスタイルを適用する方法！CSSで特定の子要素を持つ親要素にスタイルを適用させる方法についてサンプルコード付きで解説します。現状各ブラウザでは:has()の擬似クラスは使えないため、代替となる方法の紹介です。 CSSで例えばa要素を子要素に持つ親要素、.sampleというクラスの子要素を持つ親要素など特定の条件の子要素を持つ親要素に対してスタイルを適用したいケースを考えます。 この場合は実はCSS3では上記にドンピシャで使えるセレクタはありません。ただCSS4では:has()という擬似クラスが登場する予定で:has()を使うことで特定の条件の子要素を持つ親要素という指定が簡単に可能になります。
あるdivがあって、子要素は残しつつそのdivだけを削除したいというとき、生のjavascriptでどうやるのか意外と情報が見当たらなかったのでメモします。 jQueryのunwrap と同じことを生のjavascriptでやろうという目的です。 準備 前提としてこういうHTMLがあるとして、ボタンをクリックすると div タグは消すけど p タグは残すという処理を、 jQuery の場合と生の javascript の場合とで実装してみます。 <!-- jQueryの実験用 --> <button id="button1">ボタン</button> <div id="parent1"> <p>child</p> </div> <!-- 生のjavascriptの実験用 --> <button id="button2">ボタン</button> <div id="parent2"> <p>
display:flexで子要素を縦横中央揃えをする方法See the Pen CSS Vertical and horizontal center (display:flex) by yochans (@yochans) on CodePen. flexbox（display:flex）xを使った子要素の縦横中央揃えをする方法は簡単で、display:flexを指定した親要素に「align-items: center;（縦の中央揃え）」と「justify-content: center;（横の中央揃え）」を追記するだけです。 <div class="container"> <div>縦横中央揃え</div> </div>.container{ display:flex; width:100%; height:300px; background:#0D47A1; color:#FFF; f
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のデザイン要素に子要素や疑似要素を含めた場合には注意が必要です。 親要素
おしゃれなサイトにはコンテンツにマウスホバーで背景画像が切り替わるものがありますが、調べてみると子要素から親要素へCSSでの指定は出来ないようです… さらに調べたところ、jQueryを使えば実装出来るのでは…！？と思いやってみました。 今回は、実際に実装出来た形の紹介とその骨組みのコードを紹介していきます！ まだまだ勉強中の為、もっと効率的なコードがあるかもしれません… 実際に実装した形 実際に実装した形を動画でお見せします。 上の動画のようにコンテンツの背景画像に対して、各パーツをマウスホバーすることで背景画像が変わるようにしています。 今回は、HTML・CSS・jQueryで実装しているので、それぞれ紹介していきます。 コード紹介 See the Pen Untitled by Az (@azdesigne) on CodePen. 全体を囲んだ親要素があり、その中の子要素がそれぞれマ
Safari で HTML を閲覧した際に、親要素に overflow: hidden と border-radius を設定してあるのに子要素が border-radius の範囲をはみ出して表示されてしまう問題についてです。 追記: 親要素に overflow: hidden を設定している前提の説明が抜けてしまっていたのでタイトルと本文を修正しました（コメントいただいた方ありがとうございました）。 問題 子要素に角丸スタイルを適用するために親要素で overflow: hidden と border-radius を設定しても、子要素が border-radius の範囲外でも表示されてしまいます。 デスクトップ版の Safari や iOS 上の Chrome 等で発生します。 たとえば次のように <img> を <div> で囲って overflow: hidden と bord
:has()の登場以前 :has()が利用できるようになり、CSSでの表現力は飛躍的に上がっている（:has()は最近のモダンブラウザならどれでも利用できるような状態である）。 Chrome Edge Safari Firefox Safari on iOS
![[CSS] 子要素がないときに親要素を消す際は:has()を利用すると良い](https://cdn-ak-scissors.b.st-hatena.com/image/square/7a99f7e730531c7fbccbd936bff8adc72738d865/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--QnM47JF2--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BCSS%25255D%252520%2525E5%2525AD%252590%2525E8%2525A6%252581%2525E7%2525B4%2525A0%2525E3%252581%25258C%2525E3%252581%2525AA%2525E3%252581%252584%2525E3%252581%2525A8%2525E3%252581%25258D%2525E3%252581%2525AB%2525E8%2525A6%2525AA%2525E8%2525A6%252581%2525E7%2525B4%2525A0%2525E3%252582%252592%2525E6%2525B6%252588%2525E3%252581%252599%2525E9%25259A%25259B%2525E3%252581%2525AF%25253Ahas%252528%252529%2525E3%252582%252592%2525E5%252588%2525A9%2525E7%252594%2525A8%2525E3%252581%252599%2525E3%252582%25258B%2525E3%252581%2525A8%2525E8%252589%2525AF%2525E3%252581%252584%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3Ahiro%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzY0ZmQ2ZmJhZjQuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3A%2525E6%2525A0%2525AA%2525E5%2525BC%25258F%2525E4%2525BC%25259A%2525E7%2525A4%2525BEZOZO%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2M2MzA3N2E1OTAuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
Vue3.2のdefineCustomElementで子要素のSFCのstyleも含めてWebComponents化する
何この記事？ Vue3.2 で Vue Component を Web Components にする defineCustomElement が提供された。 <style>を持つ SFC を子要素以下にもつ SFC を Web Components 化する場合、現行(v3.2.1)の機能では追加で作業が必要。 defineCustomElement ref. Vue and Web Components - Building Custom Elements with Vue Vue v3.2.0 の新機能として defineCustomElement が提供されました。 これは Vue component から Web Components (正確には customElements#define するための CustomElement) を作成するためのメソッドです。 const MyVu
問題 ・子要素にマウスが乗ったら、親要素の色を変えたい。 ・buttonの中の子要素がクリックされたときに、buttonがクリックされたことにしてほしい（ボタンの特定の位置だけクリック可能にしたい）。 やっぱりJavaScriptがいりますか？ 答え CSSでできます。 pointer-eventsプロパティでできます。 pointer-eventsは、要素に対するホバーやクリックなどのマウスイベントをキャンセルできるプロパティです。 pointer-events: auto; /* 初期値。通常通りホバーやクリックのイベントを受け取る */ pointer-events: none; /* イベントを受け取りません */ pointer-eventsプロパティは一般的なブラウザではほぼ使用可能。IEは11以降で使用可能です。 例1）親要素:hover を特定の子要素にマウスが乗った時に適
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSのスタイルクエリの基礎知識と使い方を解説、親要素の「スタイル」に応じて子要素のスタイルを適用
子要素を親要素（インナー幅）からはみ出して画面いっぱいにするCSS | HPcode（えいちぴーこーど）
【CSS】親要素を無視して子要素の幅をいっぱいに広げる方法
CSSで子要素の幅を親要素より大きくしてはみ出させよう！ | yanagi's memo
CSS | visibilityで非表示の親要素の中にある子要素だけ表示する | 1 NOTES
:has()を使って親要素内に存在する子要素を数えるCSSのサンプル
JavaScript | querySelectorAll()で子要素を取得するパターン集 | 1 NOTES
【JavaScript】何番目の子要素を取得する方法
生のjavascriptで親要素は削除するけど子要素は残す（jQueryのunwrapっぽく） - Qiita
CSS | display:flexで子要素を縦横中央揃えをする方法 | 1 NOTES
CSS | filterプロパティは子要素、疑似要素で解除はできない | 1 NOTES
【コピペ可】jQueryで子要素にマウスホバーで親要素の背景を変更する方法 - A'z DesignLife
Safari や iOS 上のブラウザで border-radius で子要素をマスクできない問題
[CSS] 子要素がないときに親要素を消す際は:has()を利用すると良い
子要素にhoverやclickがあったときに親要素に反応させたい at softelメモ
mellow-info.com
www.buzzfeed.com
asology.org
nursingjob.hatenablog.com
jp.reuters.com
mixi.jp