またに使うCSS の :not() の使い方をまとめました。 基本的な使い方 基本的な使い方はこのタグ以外適用したい場合に使います。カッコの中に除外したいタグを指定するだけで使用できます。CSS3が使えるようになり使う機会が増えてきました。 指定タグを除外 /* Pタグ以外適用 */ :not(p) { color:#FFF; } /* divタグ以外適用 */ :not(div) { color:#FFF; } /* h1タグ以外適用 */ :not(h1) { color:#FFF; } 指定IDのみ除外 /* #id以外適用 */ :not(#id) { color:#FFF; } 指定クラスのみ除外 /* Pタグの.class以外適用 */ p:not(.class) { color:#FFF; } 指定擬似クラスのみ除外 /* 擬似クラスhover以外適用 */ a:not(:h
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱い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
ホバーしたときにだけ出現する要素の CSS を DevTools で調べる方法がわかりますか？（2 問あります） | DevelopersIO
ホバーをしたときに現れる要素、ここでは例として Material Design でいう Tooltips のようなものを想定します。これらの要素に当てられている CSS を Chrome DevTools を使って、コードに直接変更を加えることなく調べる方法を考えていきます。 2 つの問題を以下のページに用意してみたので、是非問いてみてください。 https://how-to-debug-hovered-element.pages.dev/ 出題のサイトのコードも以下に公開しています。 https://github.com/hbsnow-sandbox/how-to-debug-hovered-element 問題 1 の解説 問題 1 では Tooltip の表示に CSS の :hover 擬似クラスを使用しています。このような場合には特に苦労することはありません。 Devtool の
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
新しい擬似クラス :is() / :has() / :where() の仕様を調べてみた - Qiita
Selectors Level 4 (W3C Working Draft, 21 November 2018) の 4. Logical Combinations に載っている新しい疑似クラス :is() / :has() / :where() について調べてみました。 以前の仕様では :matches() や :any() という名称でしたが、最新のドラフトでは :is() に変更されています。新しい疑似クラスといってもこの仕様自体は2011年ごろから草案に上がっていたようですね。なげー…。 （※ 試しに Gecko のソースコードをちょっと覗いてみたらちゃんとリネームしてましたね。→ https://github.com/mozilla/gecko-dev/commit/fbf94105b88ce3e809467b98958878327e6deac0 ） 特長 :is() のカッコ内に
RailsのMinitestを用いてViewのテストをする場合に使用するassert_selectを極めるために試したことの備忘録です。 その中でも基本的な使い方の部分について今回まとめてみました。 Minitestを使ってViewテストをしたい人の参考になればと思います。 書式 assert_select "条件となる要素(セレクタ)", "[{条件}]", "[メッセージ]" assert_select "対象となる要素", "条件となる要素", "[{条件}]", "[メッセージ]" assert_selectは上記の書式で利用可能です。[]の内容に関しては省略可能です。 メッセージはエラー時に表示する文章を指定できます。エラーの内容を指定した文章で明示的に示すことができますが、今回は使用しておりません。 使い方 要素の存在チェック assert_selectでは単に指定した要素が存
本日はWEB業界未経験の筆者がHTMLについて触れていきます！ WEB制作会社への就職を決意してからの自己学習時間「100時間」をアウトプットしていきたいと思います。 【C S Sの基本知識】 C S Sの基本文法 一つのセレクタに複数のスタイル宣言をする 複数のセレクタに同じスタイル宣言をする 特定の場所にあるセレクタだけに別の指定をする テキストを装飾するプロパティ 文字サイズを指定する font-size 文字の太さを指定する font-weight 行と行の間隔を指定する line-height 行の揃えを指定する text-align 文字の色を指定する color 要素の外側の余白サイズを指定する margin 要素の内側のサイズを指定する padding 要素の高さと幅のサイズを指定する height/width C S Sを記述する場所 タグのstyle属性に直接記述する
JSer.info #509 - Chrome 86がリリースされました。 New in Chrome 86 | Web | Google Developers https://www.chromestatus.com/features#milestone%3D86 Chromium Blog: Chrome 86: Improved Focus Highlighting, WebHID, and More File System Access API、CSS 擬似クラスの:focus-visible、Document-Policyヘッダなどのサポートなどが行われています。 Origin TrialとしてWebHID API、Multi-Screen Window Placement APIなどのサポートが追加されています。 また、Web Components v0の削除、FTPサ
こんにちは森田です。 前回、HTMLのみでモーダルが作れる popover 属性の概要についての記事を書きました。 2024年はHTMLのみでモーダルが作れそう。popover属性を試してみる。 前回の記事内では軽い動作しかしていなかったので、今回は実際に案件でどこまで使うことができるか確認したいと思います。 popover 属性を試してみる ではさっそく popover 属性を色々試してみましょう。 まずは動作確認として超シンプルなモーダルを作ってみます。 動作確認用超シンプルなモーダル まずは前回の記事のおさらいで、動作確認用の超シンプルなモーダルです。 モーダルになる要素に popover 属性と任意の id を。表示するボタンにpopovertarget属性を指定し、モーダル要素の id を指定します。 <button type="button" popovertarget="po
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
CSS だけでコンテンツをフィルタリング CSS のみを使ってコンテンツをフィルタリングする例です。 以下のようにラジオボタンを選択すると、ラベルに表示された内容と一致するコンテンツを表示します。 以下の例では表示するコンテンツは単に div 要素にスタイルを設定したものですが、同様の方法で画像ギャラリーやカードなどをフィルタリングすることができます。 サンプル（別ページで開く） 以下が上記の例の HTML のマークアップです。 フィルタのラジオボタンを１つのグループとして認識させるため name 属性に共通の名前（categories）を各 input 要素に指定します。 ラベルをクリックしてもラジオボタンが選択されるように（明示的なラベル付け）するため、label 要素の for 属性にラジオボタンの id 属性と同じ値を指定します。 初期状態で「全て（All）」のラジオボタンが選択さ
【HTML・CSS】class属性を複数指定するには？CSSセレクタを並べる方法もサンプルコードで解説 - WEBCAMP MEDIA
HTMLでclass属性の値を複数指定 HTMLの要素にclass属性を指定すると、CSSで個別にスタイルを指定することができるようになります。 このclass属性には、複数の値を指定することができます。 <div class="sample bluebg"> <p>複数のスタイルが適用される。</p> </div> class属性を複数指定するには、上記のように、半角スペースを空けて別々のclass名を記述します。 「,（コロン）」や「.（カンマ）」では、うまく機能しないので、必ず半角スペースを利用してくださいね。 これにより、1つの要素に対して、複数のスタイルを適用することができるようになります。 非公開: 【 CSS 】classを指定して効率的にコーディングする方法を解説 複数のclass属性を指定するメリット 複数のclass名を指定することで、どのようなメリットが生まれるのでし
フォームのCSSって結構手間がかかったり、効いてくれなかったりで苦心しますね。TwitterでTAK（@tak_dcxi）さんがフォーム用のリセットCSSをツイートしていたので、実際に試してみました。それでは行きましょう！ 【目次】 フォーム用のリセット設定 デフォルトCSS ノーマライズCSS リセットCSS form用のリセット設定 リセット後にCSSスタイルを当てる 最後に フォーム用のリセット設定 TAKさんのツイートはこちら。スレッドになっているので是非ご覧いただきたい！ 【おしゃれなformを作るためのTips①】 ＜デフォルトスタイルのリセット編＞ 長文ツイートするのは結構時間掛かるんで小出しにしていきたい😂 今回はフォームの部品に掛かっているデフォルトのCSSをリセットする方法です。 ここらへんは好みがありますが、僕が普段利用している方法は以下の通り— TAK (@tak
Rails: Action Viewのdom_idヘルパーは実は有能（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: The most underrated Rails helper: dom_id | Boring Rails: Skip the bullshit and ship fast 原文公開日: 2022/06/28 原著者: Matt Swanson サイト: Boring Rails 日本語タイトルは内容に即したものにしました。 Railsのdom_idヘルパーは10年以上の歴史がありますが、Hotwireにおいてこの概念が貴重であることが明らかになりました。 参考: Rails API dom_id -- ActionView::RecordIdentifier この縁の下の力持ちは、RailsのあらゆるHTML関連の振る舞いを強化します。dom_idの重要な機能は、アプリケーションのデータを手軽にDOM要素と関連付けることです
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
ブレークポイントを設定する ブレークポイントは、ブレークポイントを設定した箇所でプログラムの進行を止めます。 そのためプログラムの動きを見ながら確認していくことができます。 手順 １．JavaScriptのファイルをChromeブラウザで開きます。 ２．F12キーを押してChrome DevToolsを開きます。 ３．Chrome DevToolsの「sources」をクリックします。 ４．行番号をクリックすると、ブレークポイントを設定できます。 以下では、3行目と13行目に設定しました。 ５．ブラウザを再読込してJavaScriptを実行するとブレークポイントで処理が止まります。 以下は、使用したサンプルコードです。 <script> const a = 2; const b = test1(a); function test1(a){ const c = a + 3; return c
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
前回のスライドショー実装記事で、画像の下にボタンを用意して手動で切り替えるようにしましたが、アフィリエイト広告などを差し込みたい場合は自動で切り替わった方が望ましいですよね。 そこで、前回のソースを流用して自動で広告を切り替える仕組みを検討してみました。備忘録も兼ねて記事にまとめておきます。 実装例 カスタマイズ HTML CSS JavaScript まとめ スポンサーリンク 実装例 例として、A8.net からレイコップ社のアフィリエイト広告を複数枚用意し、10秒ごとに広告を切り替えるというスライドショーを実装してみました。 サイトに動きも出るし、広告へのインパクトもあって誘導方法としては面白いアプローチになるのではないかと思います。 カスタマイズ HTML <div class="slider"> <ul class="slider-inner"> <li id="0" class=
この記事はLIFULL Advent Calendar 2022の14日目です。 フロントエンドエンジニアのえびです。好きな寿司ネタはえんがわです🍣 普段は LIFULL HOME'S の賃貸領域の開発を行っています。 最近、実業務で tailwindcss を使うことが増えました。 命名やCSSファイルとの往復もせずに HTML にガリガリスタイルを当てていけるので非常に効率が良いのですが、状態に応じたスタイルを当てるのにやや苦労していました。 しかし、 アクセシビリティ（a11y） を意識すると快適なスタイリング・堅牢なマークアップが両立できます。 この記事では状態に応じたスタイリング手法を紹介しつつ、アクセシビリティを意識した tailwind modifier をご紹介できればと思います。 状態に応じたスタイリング(modifier) コーディングを進める上で、インタラクティブな
色温度←このようなパターンをすると小窓が出現します。小窓の中には，何か入っています。 で出現したものは，で閉じます。 サムネイル見本用の小さい画像をクリックすると画像が大きくなり，大きくなった画像をクリックするとサムネイルに戻る部品（テクニック）を紹介します。HTMLとCSSだけを使用した方法ですが，動作は安定していて，コードの記述も簡単です。 もくじ 概要 長所と短所 サンプル 概要 小さい画像をクリックすると画像が大きくなり，大きくなった画像をクリックすると小さい画像に戻ります。この機能は，基本的に，モバイル機器では使用しません。 小さい画像用の画像ファイルは使用しません。ここで使用した画像ファイルは長辺1200ピクセル，短辺800ピクセルです。小さい画像は長辺300ピクセル，大きい画像は長辺900ピクセルで表示させています。 入力フォームで使用する〔input要素 type属性="c
デザインシステムとは、「あるべきデザインを一貫性を持ってユーザーに提供するための仕組み」である。（デジタル庁デザインシステムより引用） デザインシステムには、Figma等で描かれたスタイルガイドやコンポーネントだけでなく、ソースコードも含まれる。むしろ、デザインの一貫性を担保するにはソースコードの中身が重要なのは言うまでもない。 今回は、tailwindcss（以下tailwind)を採用したプロジェクトで美しいデザインシステムを構築することができたので、その際に意識したことを紹介する。 1. tailwindでプリミティブなスタイルを提供する プリミティブ＝原始的。これ以上細かい単位でCSSを当てることはできない。 marginやwidthなど、全てのCSSに制約を設定するのは現実的ではないが、tailwindのデフォルトの制約が丁度よかった。 color, fontSizeなどはデザイ
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
個人的に使用頻度の低い擬似クラスたち
MDNのデザインが新しくなりましたね。 私としては以前よりも見やすくなっている印象で、大変ありがたく思います。 せっかくのリニューアル記念（？）ということで、サイト内を適当に巡回していたところ、たまたまCSSの擬似クラス一覧にたどり着きました。 どうせならと思い、個人的に使用頻度の低い（もしくは使用したことのない）擬似クラスについてまとめてみました。 擬似クラスとは そもそも擬似クラスとはなんですかという話です。 ざっくりいうと要素の状態を指定できる便利なやつです。 たとえば:hoverなんかは頻繁に使われる擬似クラスですね。 以下はマウスポインターが（対象の）要素上にある状態の時に、背景色を変化させるコードです。
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
accent-color でフォーム要素の色を変える - Goodpatch Tech Blog
css accent-color Design Div 所属のフロントエンドエンジニア 上垣 です。 チェックボックスやラジオボタンなどのフォーム要素を、ブラウザのデフォルトスタイルをリセットしてゼロから作るのは、やってみると意外と考慮することが多くてなかなか大変ですよね。 できればデフォルトのフォーム要素を使いたいけど、ブラウザのデフォルト要素ではサイトのトンマナに合わないんだよな〜、というケースもあると思います。 この記事では、そんな場合に accent-color を使って、フォーム要素の色を変更する方法をご紹介します。 accent-color が対応しているフォーム要素 シンタックス 実装結果 画像(macOS Chrome101, dark モードで表示) コードペン 対応ブラウザ 仕様書 accent-color が対応しているフォーム要素 対応しているフォーム要素は、今のと
【スマホのリンクボタンはこれ】タップした感を向上させるアニメーション | SISTER WEB LAB | WEBの問題解決屋
リンクボタンのホバーアニメーションは基本的にPCでしか適用しません。 なぜならスマートフォンではリンクボタンをホバーというよりタップの操作になるのでPCと同じアニメーションを適用していても、 タップすると中途半端にアニメーションをしてリンク先のページに遷移してしまうからです。 中途半端なアニメーションが動くなら、最初から無しにしてしまうことが多いのですが、タップしたかどうかがわかりずらいので、 UXの向上の為に「タップした感」を少しでも出す事を考えました。 結論 以下が答えです。 解説 ミソとしては:activeという擬似クラスです。 簡単に言うとボタンを押して離すまでという範囲に適用されます。 詳しくはMDNにて https://developer.mozilla.org/ja/docs/Web/CSS/:active :active状態でtransformのscaleで僅かに小さくしま
脱入門！わかりやすさ、パフォーマンスにこだわった CSS の書き方 研修コースに参加してみた | SEプラス 研修 Topics
今回参加したコースは 脱入門 わかりやすい、パフォーマンスを落とさない CSS の書き方 です。 Web サイトは、主に HTML でコンテンツを書き、 CSS でスタイルを指定して作ります。 CSS そのものは Web ブラウザで手軽に始められるため敷居は低いのですが、入門レベルを脱しようとすると、どんな順番でレイアウトが決まって表示されるのか、どうすると !important 地獄にならないのか、どう名前や構造をつくるとわかりやすいのか、書き方や設計を知る必要がでてきます。 このコースでは、そもそも Web のパフォーマンスとはなにか、その中でパフォーマンスを落とさない書き方、また、チームでメンテンスするときに、どうルールを作るとわかりやすいのか、 CSS の設計手法のこれまでとこれからを学びました。 では、コースの内容をレポートします！ HTML などのコースでは過去に、「 モダンコ
フォーカスを外す(blur)と消える要素をデバッグする（ひとりDevTools Advent Calendar 2020 – 07日目） | Ginpen.com
7 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 window の blur イベントや document の visibilitychange イベントなどを用いた制御をしている場合、通常のデバッグ作業の邪魔になってしまうことがあります。 DevTools を使ってこれを無効化することができます。 フォーカスが外れると消えちゃう系のUIをデバッグするには DevTools の Rendering → Emulate a focused page 使うと便利です pic.twitter.com/XCqzyRCW1J — 高梨ギンペイ (@ginpei_jp) December 7, 2020 常時フォーカス状態にする Rendering パネルに設定があります。まずはパネルを表示して、その中から探してください。 Rendering
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
今回はヘッダーのCSS（スタイルシート）を書いていきます。 この記事のポイント ヘッダーをデザイン案と同じ表示になるように整える floatプロパティを使ってレイアウトを調整する ヘッダーのCSSをコーディングする 前回はリセットCSS「reset.css」と、フォントの指定を「style.css」に書いてきました。 ここまではCSSをコーディングする前準備でした。 今回はヘッダー部分のCSSを作成していきます。 ヘッダーとフッターはトップページ以外のページでも表示するため、1度コーディングしたら全てのページで使うことができます。 もしCSSについての基礎を復習したい方は「CSS（スタイルシート）の基礎」をご覧ください。 ヘッダーの幅と左右の余白を設定する まずはヘッダーの横幅と余白、そして背景色を指定していきます。 ヘッダーの横幅と左右の余白 左右の余白を自動で均一にするために、ここで新
イメージマップ（クリッカブルマップ）の実装案件、今から12年前に作成して以来、久しぶりにありました。地図とかイラストマップみたいなナビゲーションは今でも、ケースバイケースで必要とされますね。 でも、レスポンシブなフルードイメージだと、area で指定したリンク領域の座標が画像サイズの変化に対応しないので、ずれていってしまいます。 こんなときは javascript でどうにかするしかないよね、と思ったら、やっぱりjQuery のプラグインがありました。 今回は、面倒なイメージマップの座標指定が簡単にできるWebサービスと、hover 時の効果を簡単に加える方法を併せてご紹介します。 HTML Imagemap Generator でイメージマップを作成する イメージマップの作成は難しくありませんが、リンク領域の座標指定がとにかく面倒！ 12年前は Fireworks で作業した記憶があり
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
はじめてのアクセシビリティ改善活動
はじめに この記事は YAMAP エンジニア Advent Calender 2023 8 日目の記事です。 こんにちは。今年の 9 月に YAMAP のフロントエンドエンジニアとして入社した Izumi です！ 新規サービスの開発に携わっています。 入社してから、フロントエンドチームを中心に「アクセシビリティやっていき会」という勉強会が１年以上継続して行われていることを知りました。 それまで、アクセシビリティという言葉や、なぜ必要なのかはなんとなく知っていましたが、実際に何から手をつけたらいいか分からない状態でした。 そこで、アクセシビリティ初心者向けのウェビナーに出たり、「アクセシビリティやっていき会」で質問会を設けたりして、私の携わるサービスでどこから改善できそうかを探っていきました。（入社時には初期リリースに必要な画面や機能がほぼ出来上がっている状態で、私が引き継ぐ形でした。） 本
はじめに 便利なCSSカスタムプロパティ。実はJavaScriptから取得/設定ができます。今回はCSSカスタムプロパティとJavaScriptを使ってモード切替（配色変更）を実装する方法を解説します。 CSSカスタムプロパティ CSSカスタムプロパティとはCSS内で使用できる変数のことです。 Webデザインの配色を考えるとき、たくさんの色を使うことは滅多にありません。大抵は白色＋黒色＋テーマカラー（1〜2色）に落ち着くことと思います。 テーマカラーはWeb全体のあちこちに配色されることになります。見出しの文字色だったり、ボックスの背景色だったり、表の罫線だったり、というように。 // テーマカラーが #417ece の場合 h1 { color: #417ece; } .box { background-color: #417ece; } .cell { border-bottom: 1
はじめに こんにちは。CX事業本部 Delivery部 フロントエンドチームの加藤です。 今回はCSSでiOSのUISwitchライクなReactコンポーネントを作ってみたいと思います。 開発環境 macOS Monterey 12.6 CodeSandbox（React Typescriptテンプレートを使用） 作ったコンポーネント iOSのUISwitchのようにクリックするたびにON/OFFが切り替わります。 コード Switch.tsx SwitchのReactコンポーネントです。 現在のON/OFF状態とON/OFFを切り替えた時の処理をpropsで受け取ります。 以下がポイントです。 ON/OFF状態を持たせるため、type="checkbox"のinput要素を使う input要素自体はON/OFFの状態を持つだけで、外観のカスタマイズはlabel要素を使う label要素ク
![[React] CSSでiOSのUISwitchライクなSwitchを作る | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/406d924d7d4c6327201a8281e75820982243f551/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F01%2Freact.jpg)
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
はじめに CSSヤクザ is 何 こういうCSSの使い方をする人を言います。 臆病な魔女 CSSAnimationを使った2Dアニメーションまとめ / Twitter 嗚呼、恐ろしいですね。 この記事について CSS & CSSアニメーション初心者がCSSヤクザになろうと奮闘したけど現実は難しいよねっていう話です。 yui540さんとCSSアニメーションを知ったのは最近ですが、完全に魅せられてしまいました。要はただのファンです。 追記 いい記事でした?? — yui540 (@yui540) May 12, 2020 お目に留めて頂いたようです！ありがとうございます！！ アニメーションって何をすればいいのか 何をすればいいのか。何を作ればいいのか。アイディアが存在しません。なのでまずは「まねぶ」ことから始めようと思います。 お手本を見て、真似る。 「動き」のあるWebサイトを支えるCSSア
【初心者向け】CSSの属性セレクタを活用しよう！種類や指定方法を解説！ | ビジネスとIT活用に役立つ情報（株式会社アーティス）
前回の記事【初心者向け】CSSの擬似要素と擬似クラスを理解しよう！ではCSSを使った擬似的な要素の指定方法をまとめました。 今回は属性を使った指定方法を解説していきます。 属性セレクタとは HTMLタグは種類に応じて様々な属性を持つことができます。 （HTMLタグに関しては以前の記事【初心者向け】CSSセレクタとは？セレクタの種類や指定方法を解説！（基礎編）を参照ください。） 例えばリンクを挿入する際に使用するaタグの場合、href属性で「遷移するURLの情報」、target属性で「リンクを開くタブ・ウインドウ情報」といった情報を持たせることができます。
:nth-child と :nth-of-type から DOM について思いを馳せた - マンガ〜ノ伊藤ノ〜ト
最近まで :nth-child と :nth-of-type の違いについて知らなかった． というか，:nth-of-type はどこかで見たことある〜程度で使ったことがなかった． 知らなくても CSS なんとなく大丈夫でしょ！ みたいな気分で生きてきた． だけど この間，動的に追加されたスタイルの :nth-child が自分の想像した感じで要素にあたってなくて， なぜだろうってなったので調査する必要が出てきたところから， 昔読んだ DOM についての記事につながりだした． 表があったとして: <table class="container"> <tr id="some-tr"> <th>A</th> <td>B</td> <td>C</td> <td>D</td> <th> <table> <tr> <td>E</td> </tr> </table> </th> </tr> </tab
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
一部だけ除外したい CSS の :not() の使用方法
JavaScript オブジェクトの基本 - ウェブ開発を学ぶ | MDN
テキストの扱い — JavaScript での文字列 - ウェブ開発を学ぶ | MDN
クライアントサイド Web API - ウェブ開発を学ぶ | MDN
assert_selectを極めたい（基本編）【Rails】【minitest】 - Qiita
未経験からweb制作【基礎学習とCSS】 - 未経験WEBディレクターのススメ
2020-10-13のJS: Chrome 86、webpack 5、Browserify 17
実践 popover 属性 〜HTMLのみのモーダルで実案件に使えるのか確認〜
CSS レイアウト - ウェブ開発を学ぶ | MDN
CSS でフィルタリング（絞り込み） JavaScript でも
【CSS】form用のリセット設定（ノーマライズCSS、リセットCSSとの比較） - クモのようにコツコツと
擬似クラスと擬似要素 - ウェブ開発を学ぶ | MDN
JavaScript Chromeブラウザでデバッグする方法 | ITSakura
サードパーティ API - ウェブ開発を学ぶ | MDN
JavaScript｜はてなブログにスライドショー（自動切替）を実装する方法 - くろネコのんびりブログ
アクセシビリティを意識した tailwind modifier のすすめ - Qiita
画像クリックで拡大⇔縮小 | HTMLの部品 | 情報・デジタルの部屋 | こひつじの家
tailwindcssで美しいデザインシステムを構築した話
CSS の構成要素 - ウェブ開発を学ぶ | MDN
レスポンシブデザイン - ウェブ開発を学ぶ | MDN
CSS の整理 - ウェブ開発を学ぶ | MDN
ヘッダーのCSSを書く | GRAYCODE HTML&CSS
レスポンシブなイメージマップの作り方 : hover 時の効果も加えるよ | UNICO LABO
グラフィックの描画 - ウェブ開発を学ぶ | MDN
【CSS】CSSカスタムプロパティとJavaScriptを使ってモード切替（配色変更）を実装
[React] CSSでiOSのUISwitchライクなSwitchを作る | DevelopersIO
Django の紹介 - ウェブ開発を学ぶ | MDN
CSSヤクザになりたい人生だった - A03ki's tech blog