フォームのチェックボックス（input要素のtype="checkbox"）について選択されているチェックボックスのみを取得する方法について解説します。 この記事のポイント 選択状態のチェックボックスを取得する方法は擬似クラス「:checked」とcheckedプロパティを使う2種類 擬似クラスを使って選択状態のチェックボックスを取得する方法は手軽で便利 選択したチェックボックスだけ取得する 複数選択できるチェックボックスから、選択した項目だけを取得するときは次の2つの方法があります。 querySelectorAllメソッドと擬似クラス「:checked」を組み合わせる checkedプロパティの値を確認する どちらの方法でもチェックが付いたチェックボックスのみ取得できる点では同じです。 手軽な方法は1つ目ですが、2つ目の方法は同じname属性を持つ全てのチェックボックスを確認するため、
はじめに 新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay24です！ 昨日は「Ruby 後置whileの挙動をみる」と言う記事でした。 Ruby 後置whileの挙動をみる 本記事では、CSSの「:not」という否定擬似クラスの使い方とできることについて書いていきます。 :not否定擬似クラスの基本 :not否定擬似クラスとは？ :notとは、CSS上で特定の要素やクラス以外のものを指定したい時に使う擬似クラスです。 特定の要素やクラス以外のものを取得するため、「否定擬似クラス」とも呼ばれています。 :notの基本的な構文 :not(hogehoge) { プロパティ: 値; } これが基本的な、:notの構文です。 hogehogeの中身が今回取得しない対象を表します。 :notの例文1 <ul> <li>apple</li> <li class="sample">o
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
Shiki’s weblog
Shiki’s Weblog プロフィール 2024/04 ニュー スティックニーかな配列(はいれつ)の設計(せっけい) あたらしいかな配列(はいれつ)として、2016年(ねん)から「ニュー スティックニーかな配列」を開発(かいはつ)しています。ニュー スティックニーかな配列は、新(しん)JISかな配列(はいれつ)と同(どう)程度(ていど)の入力(にゅうりょく)能率(のうりつ)をもった、おぼえやすい配列(はいれつ)をつくることを目標(もくひょう)としています。 2023/07 「ふりがなパッド」をつかって文章(ぶんしょう)をかく 文章をわかりやすく、かきなおすのにべんりな機能がテキスト エディターの「ふりがなパッド」にはあります。森鴎外の『妄想』を題材に、かきなおしていくようすをまとめています。 2022/06 梅棹(うめさお)忠夫(ただお)さんの表記法(ひょうきほう)と日本語(にほんご)
こんにちは、Baseconnectのエンジニアインターンの大島です。 この記事では私が主に開発を行っているMusubuのフロントエンドの技術スタック、特にCSSフレームワークに注目して紹介したいと思います。 Musubuのスタイリング Musubuの開発ではCSSフレームワークに、styled-componentsとxstyledを用いて開発を行っています。 今回は聞き馴染みがない方が多いであろうxstyledについて注目し、Baseconnectでの使われ方も合わせて紹介したいと思います。 xstyledとは xstyledはReact開発におけるpropsベースのCSS in JSフレームワークです。 styled-componentsやemotionに互換性があり、すでにこれらのCSS in JSを用いて開発を行っているプロダクトには簡単に導入ができます。 コンポーネント例 impo
目次 条件分岐とは 一般的なプログラミングで使われるif文について CSSで条件分岐を実装するには 条件分岐を実装してみよう まとめ 条件分岐とは 条件分岐とはプログラミング言語の制御構文の１種で、なんらかの条件に基づいて処理を切り分けるものです。 [PR] Webデザインで副業する学習方法を動画で公開中 一般的なプログラミングで使われるif文について 例えばJavaScriptでは条件分岐はif文で記述します。 const i=0; if(i==0){ console.log('iは0です'); } else { console.log('iは0ではありません'); } 上記の場合、変数iの値が0の場合とそうではない場合で条件分岐を行っています。上記の場合は変数の値は0であるため「iは0です」と出力されます。 CSSで条件分岐を実装するには CSSで条件分岐を実装するにはCSSセレクタや
この記事は「アクセシビリティ Advent Calendar 2023」22日めの記事です。 HTMLの語彙力では事足りない、ちょっと凝ったUIを、どんな環境でも同じように閲覧できるようにするためのチェックポイントまとめ。ここでは、Webサイトで割とよく見る「ナビゲーションUI」のWebアクセシビリティを確保する術（すべ）を見てゆきます:)。 Webアクセシビリティ Webサイトは、インターネットとブラウザがあれば、何時（いつ）でも、何処（どこ）でも、誰（だれ）でも、どんな環境でも見ることができるものです。なので、Webサイトは「何時でも何処でも誰でもどんな環境でも（以下、すべての人にという）」見れるように作っておかないといけません。 そう、Webサイトはアクセシブルでないと意味がないんですね。:D アクセシブル アクセシブルは「アクセスしやすい」という意味。 Webサイトのアクセシブル具
みなさん、こんにちは。絵文字ジェネレーターでは、昨年中盤に多言語対応を行い、日本語の他にも韓国語、中国語 (簡体・繁體)、英語での利用ができるようになりました。 絵文字ジェネレーターは、フロントエンドが Vue.js で作られており、多言語対応のために Vue I18n というプラグインを利用しています。 一部は Vue I18n では対応できない所もありますが、そこは適宜工夫して対応しています。 サーバーサイド側で対応している箇所も、いくつかあります。 この記事では、絵文字ジェネレーターをどのような手法で多言語対応したのかを説明します。 また、多言語対応をしてどうなったのか、その後の経過もお伝えしていきます。 なぜ多言語化対応したのか? 絵文字ジェネレーター は 2016 年にリリースされてからしばらく、ずっと日本語版のみを提供してきました。 そのため、日本の方々に多く利用されています。
Chrome 105 から使えるようになった :has() で CSS を書いてみよう｜jig.jp engineers
こんにちは。主にウェブ開発を担当しているKです。今回の記事では、最近になって使える環境が増えてきた CSS の擬似クラス :has() を紹介します。 擬似クラスというとちょっと難しい言葉ですが、a:hover や a:focus といった書き方はよく目にするんじゃないかと思います。そういった :hover や :focus が擬似クラスです。:hover は要素の上にマウスカーソルがあるときに CSS を適用するときの書き方ですが、今回紹介する :has() を使うと、今まで使えなかった子孫要素などの情報をもとに CSS を適用することができます。 :has() は、8月30日にリリースされた Chrome 105 から使えるようになりました。ちなみに Safari ではひと足お先に 15.4 から使えていました。Firefox ではバージョン 105 の時点でまだ現時点で使えません。詳
今回はお問い合わせページのCSS（スタイルシート）を書いていきます。 この記事のポイント お問い合わせページが完成する 今回で全3ページがほぼ完成 お問い合わせページのCSSをコーディングする 前回はお問い合わせページのHTMLファイル「contact.html」を作成して、HTMLのみコーディングしてきました。 まだCSSを書いていない状態でブラウザに表示してみると、以下のような表示になります。 ブラウザの表示例 お知らせページを作ったときと同様に、ヘッダーとフッターは全てのページで共通になるためすでにCSSまで出来ている状態です。 そして今回はその間になるコンテンツ部分に対してCSSを書いていきます。 CSSをコーディングするエリア CSSは今までと同じ「style.css」の中に書いていきます。 アウトラインのCSSをコーディング まずはコンテンツの横幅と左右余白を指定して、アウトラ
年末だからといって、特に毎日が変わるわけではないChappy Tabbyです。 敢えて言えば、開業届をオンラインで提出しようとしたら、提出先の国税庁が完全年末年始休暇に入っていてオンラインでも受け付けず、ちゃぶ台返しをしたくなったくらいです。 カーソルを乗せたら画像が拡大するアニメーションの実装。 昨今のサイトでよく見かけるので、自力で実装しようとしました。 （注意）この記事に記載されているコードをコーディングの参考にする際、画像のURL・クラス名等は適宜書き換えてください。【悪い例】hover疑似要素にbackground-sizeを使う（背景画像使用のHTMLマークアップ） <div class="content"> <div class="image-block"></div> </div>（imgタグ使用のHTMLマークアップ） <div class="content"> <img
属性セレクタは直感的でよく使うのですが、否定の構文がないので困っていました。調べると否定擬似クラスがあることが分かりました。属性セレクタと組み合わせて使う方法が難しかったのでメモしておきます。 HTML link要素が２つあります。media属性が存在しないlinkだけ取得する方法の紹介です。 <head> <link href="a.css" rel="stylesheet" media="only screen and (max-width: 320px)" > <link href="b.css" rel="stylesheet"> </head>
TechCommitのお年玉企画で当たったTechpitの教材「Tinder風マッチングアプリを作ってみよう！」を終えて - Qiita
TechCommitのお年玉企画で当たったTechpitの教材「Tinder風マッチングアプリを作ってみよう！」を終えてJavaScriptRails初心者ActionCable TechpitのTinder風マッチングアプリを作ってみよう！を完了しました Qiita初投稿です。 TechCommitのお年玉企画で当選したこちらの教材を無事終わらせることが出来たので、感想と学んだことのメモを残しておきます。 学んだこと content_tagは動的にHTMLを生成出来る便利なコード。erbとhtmlが混ざってしまう時にすっきり書ける。 content_tag(:i, "", class: "fas fa-cog fa-2x") → <i class="fas fa-cog fa-2x></i>が生成される。 これは自分がInstacloneを作ってた時、font-awesomeを使う際にど
HTMLとCSSだけで（JavaScriptを使わずに）ポップアップを実装する方法を解説します。 JavaScriptを使わないため最低限の仕様にはなりますが、HTMLとCSSだけでかなりシンプルなコードで作れます。 コピペOKなので、お役立ていただけると幸いです。 記事の著者牧野健人 株式会社リラクス 代表取締役。CRO・SEOを専門とし、デザイン・実装のスキルも活かしながら、クライアントの成果向上のための取組に尽力。 慶應義塾大学卒業後、行政機関を経て、デジタルマーケティングエージェンシーのアイレップにて運用型広告のクリエイティブプランニングに従事。2019年にリラクスを創業。 お問い合わせはフォームよりお願いいたします。 <input type="checkbox" id="popup"> <label class="popup-open" for="popup">ポップアップを表示
コピペだけ！CSSの見出しデザイン31選【サンプルコード】
背景色 【CSSコード】 h2{ padding:0.5em; /*上下左右の余白*/ background:#DEEBF7; /*背景色*/ } 「background」プロパティで背景色を指定できます。 背景色（柄） 【CSSコード】 h2{ padding:0.5em; /*上下左右の余白*/ background:#DEEBF7; /*背景色*/ } h2{ padding:1rem; /*上下左右の余白*/ color:#fff; /*文字色*/ background:#888; /*背景色*/ background-image:radial-gradient(#999 35%,transparent 35%), radial-gradient(#999 35%, transparent 35%); /*背景画像*/ background-size:50px 50px; /*背景
WEB業界未経験の筆者がWebサイトの作成について触れていきます！ WEB制作会社への就職を決意してからの自己学習時間「100時間」をアウトプットしていきたいと思います。今回はグリッドレイアウト！ Follow @nonnpnp 【グリッドレイアウトの作成 】 グリッドレイアウトを使うメリット コンテンツエリアの作成 コンテンツエリアを２つにわける サイドバーを作成する メインコンテンツを作成する 見出しとリード文を入力する 一つ目のセクションと見出しを作成する 一つ目のセクションの画像ギャラリーを作成する alt属性で画像の内容を記述する ２つ目のセクションを作成する ３つ目のセクションを作成する メインビジュアルを設定する 背景画像を設定する 画像ギャラリーを作成する 画像を左寄せレイアウトする 画像に余白を設定する 擬似クラスで右の画像の余白をなくす 【ソースコードHTML】 【ソー
滋賀県大津市の個人レッスンのスマホ・パソコン教室。ちいラボ（ちいらぼ）は「機械はニガテ…」という方に寄り添う、のびのび学べる教室です♪
![「:not()」で複数のclassを指定するには 〜 擬似クラス[CSS]](https://cdn-ak-scissors.b.st-hatena.com/image/square/b9b89d9e22ac09f4cbb5acf5b0d2c8a8c865cb12/height=288;version=1;width=512/https%3A%2F%2Fchiilabo.co.jp%2Fwp-content%2Fuploads%2F2020%2F09%2FScreenShot-2020-09-17-12.42.27-1.png)
CSSのflexboxを使ってボックスをタイル状に並べる | b.
flexboxでよくあるタイル状にボックスが並んだレイアウトを作る方法と考え方まとめ💡 ベーシックなタイル状のレイアウト 同じボックスをきれいに整列させていく一番ベーシックなレイアウト。ショッピングサイトのアイテム一覧や、ブログ記事のアーカイブページなどでもおなじみ。 HTMLはなんだってよいのですが、今回はリスト形式です。 <ul> <li>box</li> <li>box</li> <li>box</li> <li>box</li> <li>box</li> <li>box</li> <li>box</li> <li>box</li> <li>box</li> <li>box</li> <li>box</li> <li>box</li> </ul> ブラウザや親要素の横幅に依存させる場合は、widthなどの値は全て%にします。今回は、どんなブラウザサイズで見たときにも、ボックスを横に
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 前回の投稿から約１ヶ月が経過し、現在は主にPHPに関するカリキュラムを受講しています。すると、１ヶ月前に比べてできることはかなり増えましたが、CSSに関しては忘れている事項も多いことに気がつきました。 そこで今回、カリキュラムの一環として、「半田惇志(2020) 『CSS設計完全ガイド 詳細解説＋実践的モジュール集』 技術評論社」を読んでみました。 CSSに関して忘れていたことだけでなく、過去のモヤッとした知識がクリアになったように思えたので、以下にその内容と感想を、抜粋してまとめました。 エンジニア歴1週間→１ヶ月の成長が書かれている
<style> .sample { overflow: hidden; } .sample img { width: 100%; height: 100%; transform: translateY(-100%); transition: transform .2s; transition-delay: 3s; } .sample:hover img { transform: translateY(0); transition-delay: 0s; } </style> <div class="sample"> <img src="https://placehold.jp/100x100.png"> </div> codepen See the Pen test25-1 by yambe jp (@yambejp) on CodePen. 1-2.課題 一瞬だけ画面にマウスを乗せ、外すと
![[test25] :hoverに設定したtransitionを止めない - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/4759013a3201fb286979ce72ac51551e798812d1/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCdGVzdDI1JTVEJTIwJTNBaG92ZXIlRTMlODElQUIlRTglQTglQUQlRTUlQUUlOUElRTMlODElOTclRTMlODElOUZ0cmFuc2l0aW9uJUUzJTgyJTkyJUU2JUFEJUEyJUUzJTgyJTgxJUUzJTgxJUFBJUUzJTgxJTg0JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1kZGRhNzIwYzk5M2MzZmE4M2VjOTA3YWUwZWNmMTE4YQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB5YW1iZWpwJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1hYzNiZThhMWRjY2QyZjUzNzU5ZWE5NWMyMTY4MmJmYQ%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3De5a638f8e0df399bc2d8ed383f7531f5)
2022年に注目したいCSSの新機能8選
コンテナクエリ - @container 「コンテナクエリ」という新たなレスポンシブ対応の手法です。 メディアクエリは「画面サイズ」でスタイルを変えますが、コンテナクエリは「要素の幅（width）」でスタイルを出し分けます。 コンテナクエリを使うには2つの準備が必要です。 基準にする要素にcontainerプロパティを定義する @containerの中に、基準の要素のwidthに応じたスタイルを定義する .grid-wrapper { container: inline-size / grid_wrapper; } @container grid_wrapper size(max-width: 700px) { .grid { /* .grid-wrapperのwidthが700px以下になった時のスタイル */ } } 上記サンプルコードの「基準にする要素」は.grid-wrapperで
はじめに あなたは "擬似クラス" 何個言えますか？ 擬似クラスには、:hover や :active、:focusといったよく使うものから、 :is()や:where()、:has()といったこれからサポートされていくものまで たくさん種類があるのは、ご存知ではないでしょうか？ でも、"擬似クラス" 何個言えますか？と聞かれると数個くらいしか思い出せないと言う方は多いのではないでしょうか？ もしかしたら、15個以上言えたら、CSS玄人と言えるかも知れません。 この記事では、たくさん種類があるのは知っているけど、詳しくはわからない "擬似クラス" が、 何種類あるか、どんな擬似クラスがあるかをまとめました。 知らなかった "擬似クラス" の数を数えながら、読んでいただけると嬉しいです。 擬似クラス 擬似クラスとは？ 擬似クラスとは、セレクタのあとにつけることで、 指定した要素の状態に応じて
開発環境にChromeを選ぶなら知っておきたい12のテクニック Photo by Morning Brew on Unsplash さて、何らかの理由で、開発ブラウザとしてChromeを選んだとします。次は、デベロッパーツールを開き、コードのデバッグを開始します。 Consoleパネルを開いてプログラムの出力を確認したり、Elementsパネルを開いてDOM要素のCSSコードを確認したりします。 でも、Chromeデベロッパーツールを本当に理解していますか？実は、パワフルだけど知られていない機能がたくさん用意されていて、開発効率を大幅に改善できるのです。 ここでは、最も便利な機能を紹介します。お役に立てたら嬉しいです。 ChromeのCommandメニューから始めましょう。ChromeのCommandメニューは、LinuxのShellのようなものです。コマンドを入力してChromeを操作で
:user-valid、:user-invalid 擬似クラスでユーザーの操作の後に検証を行う 2023.10.13 ユーザーの操作の後にフォームの検証に基づき有効か無効かを示すために使用できる :user-valid、:user-invalid 擬似クラスを紹介します。従来の :valid、:invalid 擬似クラスと異なり、ユーザーがフォームに入力するまではスタイルを適用されません。 :user-valid、:user-invalid 擬似クラスは、ユーザーの操作の後フォームの検証に基づき有効か無効かを示すために使用できます。フォームの検証として、以下のような例があげられます。 required 属性を指定した要素に値が入力されているか pattern 属性を指定した要素に指定した正規表現にマッチしているか min や max 属性を指定した要素に指定した範囲内の値が入力されているか
EvoLab.のブログでは初めての登場になります、エンジニアのタケモトです。 今回は、近年各種ブラウザでサポートされはじめた疑似クラスについて、いくつかご紹介します。 まだ全てのブラウザで完全にサポートされていませんが悪しからず。 :has():has()は特定の要素を持つ要素を指定する擬似クラスです。 具体的には、:has()のカッコ内にあるセレクタに該当する子要素を持つ親要素にスタイルを当てることができます。 現段階では、親要素を変化させるときはJavaScript(jQuery)を使用する必要があるので、:has()が使用できるようになると便利な世の中になります。 HTML・css(一部抜粋)は以下になります。 HTML<div> <ul class="list"> <li class="item"> <h2>Lorem ipsum dolor sit amet, consectet
こんにちは！最近はまったくケイジャン(Cajon、打楽器カホンのこと)に触れていない、 ゴリラ転生組のフロンドエンドエンジニア、ケイジャニストやまだです！ 「早く人間になりたい！」 というわけで今回はホームページを「おしゃれ」にするエフェクトの導入方法と、その注意点を、【ホームページ制作初心者向け】にご紹介していこうと思います(といってもたくさんありすぎるので時短意識でプラグイン実装でのご紹介です)！ 企業様や個人事業主様、また、その他趣味でホームページを運営されている方など、 いまや業種や形態を問わず、何らかの形でホームページ(webサイト)をすでにお持ちの方はたくさんいらっしゃるかと思います。 俗に言うホームページ制作(web制作、webサイト制作など)と呼ばれるジャンルでは、技術の変遷がとにかく早いです。「日進月歩」という言葉が示しているというか「秒進分歩」だろ！と叫びたくなるくらい
【基礎】CSSが効かない？詳細度が原因かも 適用ルール解説
CSSを勉強し始めた人が良く悩むのが、CSSが効かない理由を特定出来ない事です。CSSが効かない時の理由は幾つかありますが、大きな理由の1つに優先順位があり「詳細度」と言います。 ただ単純にclassやid、セレクターなどを正しく使ったからといって上手く適用されるとは限りません。 「詳細度」はCSSの適用ルールの1つで重み付けをするもの。 この重み付けを理解する事で、効率的にスタイルを掛ける事が出来るうえ、CSSが効かない時の原因も特定出来る様になります。 CSSのスタイル適用ルールの1つとして「詳細度」があります。 そもそもCSSにはスタイルの適用順があり、知らないと気付かすに全く別の所を上書きしてしまっていたなんて事が起きてしまいます。 CSSの詳細度とは？ 詳細度は CSSの宣言が適用される際の重みづけの事。セレクターの種類と数で決まります。同じ詳細度であれば通常通り最後に宣言された
【CSS3】特定のclass等を除外する擬似クラス『:not()』 - 株式会社ネディア │ネットワークの明日を創る│群馬
HTML側にclassを追加したりCSSを直書きすることは出来ない環境においてCSSの擬似クラスを利用してコーディングする際、『特定のclassを除外する』CSSを用いてスマートなコーディングが出来ます。 特にWordPress環境では、bodyタグにclassがたくさん記述されるので、その記述のなかのclassを拾い出して除外する手法でコーディングを行ってみました。 CSS3の擬似クラス『:not()』 bodyタグに記述される『.home』に対して、トップページ「以外」に適用したいCSS（トップページだけは除外するCSS）を記述します。 都合良くサブページにはサブページ用のクラスが記述されていれば良いのですが、CMS等によりページが新規追加された際に任意のページ名がclassとして記述される事が多々あります。 HTMLを変更することが出来ない、どんなclass名になるかわからない今後追
はじめに 先日、Chrome119がベータ版としてリリースされ、CSSに新たに4つアップデートがされました。 アップデートされた4つは以下の通りです。 擬似クラス :user-valid ・ :user-invalid 相対カラー構文 clip-pathプロパティの値 <geometry-box> clip-pathプロパティの値 xywh() と rect() この記事では、これらのChrome119としてリリースされた4つのCSSアップデートについて紹介します。 擬似クラス :user-valid ・ :user-invalid ⚪︎ :user-valid :user-valid は、ユーザーがFormに入力した値が有効な値であった場合、スタイルを変更することができる擬似クラスです。 :valid は、ユーザーがフォームに入力している時にも値が有効かを判定しているのに対し、 :use
classやidなどの属性が付いていないHTMLタグを、セレクターで選択したい時に使うのが、nth-of-typeです。 順番で選択する以外にも、何番毎という繰り返しの選択もできるし、○番以降や以前の様な選択もできます。 要するに、色々と柔軟な選択ができてしまうのが、"nth-of-type"という機能です。 ちなみに、解説ページでは、次のように書かれています。 :nth-of-type() CSS の擬似クラスで、兄弟要素のグループの中で指定された型 (タグ名) の要素を、位置に基づいて選択します。 参考 : https://developer.mozilla.org/ja/docs/Web/CSS/:nth-of-type 実際に、サンプルを見て、できる事を理解して、実際に自分でcssを書いて使ってみましょう。 使い方サンプル ３番目の子要素を選択
開発環境にChromeを選ぶなら知っておきたい12のテクニック Photo by Morning Brew on Unsplash さて、何らかの理由で、開発ブラウザとしてChromeを選んだとします。次は、デベロッパーツールを開き、コードのデバッグを開始します。 Consoleパネルを開いてプログラムの出力を確認したり、Elementsパネルを開いてDOM要素のCSSコードを確認したりします。 でも、Chromeデベロッパーツールを本当に理解していますか？実は、パワフルだけど知られていない機能がたくさん用意されていて、開発効率を大幅に改善できるのです。 ここでは、最も便利な機能を紹介します。お役に立てたら嬉しいです。 ChromeのCommandメニューから始めましょう。ChromeのCommandメニューは、LinuxのShellのようなものです。コマンドを入力してChromeを操作で
HTMLのフォームコントロールをカスタマイズ可能にするプロポーザル(Enabling Custom Control UI) - dackdive's blog
Edge の PM (Program Manager) やってる方のツイートが目に留まったので内容をざっくり読んでみた、という話です。 If you’ve ever had to re-write an entire control because the native HTML element couldn’t do *quite* what you needed, this “Enabling Custom Control UI” proposal is for you: https://t.co/gwab9WVk5I Have feedback? Please do file an issue; we’re eager to know your thoughts!— Melanie Richards (@soMelanieSaid) 2020年7月21日 該当のプロポーザルが置かれて
概要 ChromeのDevTools（F12）の機能の中で私が日常的に使うテクニックを7つ紹介したいと思います。 フロントエンドの開発・デバッグ以外にも、他人が作成したWEBページの内容を確認したり、デザイナーが画面UIの検討などに役立ちます。 起動方法 「F12キー」または「ブラウザ上で右クリックし検証」で下記のような画面が開きます。これがDevToolsです。 よく使うテクニック 1. HTMLを変更 DevToolsの要素タブを利用し、「開いたWEBページのHTMLが構成内容を確認」や「画面表示しているHTMLを操作」が可能です。 Qiitaのヘッダーの「投稿する」ボタンをもとに「更新する」と「削除する」のボタンに変えてみました。（一時的な変更なので画面をリロード（F5）すると元に戻ります） 一時的に修正してスクショをしたり、UIの検討などに役立ちます。 2. スタイルの変更 画面の
ReactのCSS設定方法について調べたこと（className属性、style属性、CSS Modules、CSS in JS、CSSフレームワーク） - クモのようにコツコツと
Reactの続きです。前回はReduxの状態管理を行いました。今回からは、ReactでのCSS設定をいくつか試してみたく思います。初回はCSS設定方法について調べたことをまとめます。className属性、style属性、CSS Modules、CSS in JS、CSSフレームワークを比較します。それではいきましょう！ 【目次】 前回のおさらい ReactのCSS設定 className属性 style属性 CSS Modules（css-loader） CSS in JS（styled-components） UIフレームワーク（Material UI） ユーティリティーファーストCSSフレームワーク（Tailwind CSS） 最後に ※参考：前回記事 【React】Reduxを事始める（インストール〜ストア、レデューサー、プロバイダー設定） - クモのようにコツコツと ※参考：Re
フロントエンドの2023年を振り返る（後編） この記事はyamanoku Advent Calendar 2023の24日目の記事になります。 yamanokuがウォッチしてきたフロントエンドにまつわる動向やニュースを振り返ります。今回は7月から12月までの後半を振り返ってみます。 7月 Prettier 3.0リリース Prettier 3.0: Hello, ECMAScript Modules! · Prettier Prettierの3.0がリリースされました。すべてのソースコードをESMに対応したこと、ラテン文字と中国語または日本語の文字の間に半角スペースが挿入されなくなったこと、trailingCommaがallでデフォルトになりました。今回のアップデートに伴いNode.jsサポートポリシーも決めたそうです。 Kuma UIのリリース kuma-ui/kuma-ui:
こちらの記事は【2/13in梅田】Ateam Design MeetUp_Vol.08 フロントエンド特集！の登壇資料です。 今回は"Utility-First"なCSSフレームワークであるTailwind CSSについてお話しします。 今回のゴール ・Tailwind CSSの利点がなんとなく伝わる ・Tailwind CSS使ってみたいと思ってもらう Tailwind CSSとは Refactoring UIのAdam WathanとSteve Schogerが作ったPostCSSフレームワークで、特徴として"ユーティリティーファースト"なことが挙げられます。Bootstrapのように、classの組み合わせでCSSを書いていきます。擬似クラスやメディアクエリもclassで指定できるので、CSSを一切書かずに完結できるのがメリットです。 Tailwindができた背景はこちらの記事が分か
Focus visibleの導入: Snow Monkeyでドロワーメニューのフォーカスの枠線を表示させない方法 - Photosynthesic blog
こんにちは、みみです。 Snow Monkeyのドロワーメニュー、便利ですよね。でもモバイルでみた時にアレ？と思う人が多いと思います。ドロワーメニューの一番上のメニューにふわっとした枠線が付くやつ。アレを取りたいなーと思う人は結構居ると思います。 2020/12/13 18:25追記: Snow Monkey ver.12 より改善されて、フォーカスがでなくなっています！なので一番手っ取り早いのはSnow Monkeyをアップデートすることです！ というわけで、以下は、諸事情で今スグアップデート出来ない方や、:focus-visibleそのものに興味が有る方へのコンテンツとなります… でもあれって実はとても大事な線なのです。キーボード操作で画面を操作する人には命綱と言っても良いものです。いわゆるアクセシビリティに関わる処ですが、Snow Monkeyはアクセシビリティ対応も素晴らしく、キー
Vue.js: SFCでscoped cssしつつslotを使って挿入した要素にStyleを当てる方法MEMO - Madogiwa Blog
Vue.js SFCでscoped cssを利用しているとdefaultでは以下の通りslotで挿入した要素にスタイルを当てることができません。 デフォルトでは、スコープ付きスタイルは親コンポーネントが所有するコンテンツとみなされ、でレンダリングされるコンテンツに影響を与えません。 SFC スタイルの機能 | Vue.js こういう場合にどういう方法があるのかメモ📝 SFCでscoped cssしつつslotを使って挿入した要素にStyleを当てる方法 ディープセレクタを使う :deepを使うとscoped cssで定義したスタイルを子要素にも伝搬させることができます。これはslotで挿入した要素にも反映されます。 scoped スタイルのセレクタを「深く」したい場合、例えば子コンポーネントに影響を与えたい場合は、:deep() 擬似クラスを使用できます。 <style scoped>
グリッドレイアウトを使って子要素を任意の個数ごとに折り返す方法を紹介します。 通常、以下のようなCSSを適用すると、子要素はコンテナに収まるように列方向（上から下、左から右）に流れて配置されますが、場合によっては特定の個数ごとに折り返したいことがあるかと思います。 .container { display: grid; grid-template-columns: repeat(2, 1fr); /* 最大2列 */ grid-template-rows: repeat(6, 1fr); /* 最大6行 */ grid-auto-flow: column; /* 列方向に要素を流す */ } 元のCSSを適用すると、子要素の並び順は次のようになります。 1 7 2 8 3 9 4 10 5 11 6 12 See the Pen Grid-normal-order by hachi8833
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
選択状態のチェックボックスだけを取得する | GRAYCODE JavaScript
【CSS】:not否定擬似クラスの使い方とできること - bagelee（ベーグリー）
要素のはみ出し（オーバーフロー） - ウェブ開発を学ぶ | MDN
クライアント側ストレージ - ウェブ開発を学ぶ | MDN
CSSフレームワーク「xstyled」について - Baseconnect Tech blog
CSSだけでif文のような条件分岐を実装する方法を現役エンジニアが解説【初心者向け】
できる限りのアリア。
Vue I18n による絵文字ジェネレーターの多言語対応 - 絵文字ジェネレーター 開発者ブログ
お問い合わせページのCSSを書く | GRAYCODE HTML&CSS
【CSS Tips】coverの罠：ズームインアニメーション編｜Chappy Tabby
CSSの属性セレクタと否定擬似クラスを同時に使用するサンプル - Qiita
【超シンプル】ポップアップをHTMLとCSSだけで実装する | 株式会社リラクス
自己学習70時間目【グリッドレイアウト】作成レビュー!! - 未経験WEBディレクターのススメ
「:not()」で複数のclassを指定するには 〜 擬似クラス[CSS]
エンジニア歴１ヶ月の人間がCSS設計完全ガイドを読んでみた - Qiita
[test25] :hoverに設定したtransitionを止めない - Qiita
【CSS】きみは "擬似クラス" 何個言えるかな？？ - Qiita
シニアフロントエンド開発者みたいにChromeデベロッパーツールを使おう - Qiita
:user-valid、:user-invalid 擬似クラスでユーザーの操作の後に検証を行う
新しい疑似クラス:has() :modal :is() :where()を使ってみた！ | EvoLab.
ホームページを「おしゃれ」に！エフェクトを導入する方法＜ホームページ制作初心者向け＞ | GrowGroup
【CSS】Chrome119でリリースされるCSSプロパティ - Qiita
Webエンジニア学習日記 CSS編 #10 「nth-of-type」
シニアフロントエンド開発者みたいにChromeデベロッパーツールを使おう - Qiita
ChromeのDevTools（F12）で日常的に使うテクニック7選 - Qiita
フロントエンドの2023年を振り返る（後編） | yamanoku Advent Calendar 2023
Tailwind CSSでCSSをアップデートしよう｜ウエダ カズキ
グリッドレイアウトで任意の個数ごとに折り返す方法｜TechRacho by BPS株式会社