完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱い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】CSS Togglesを使えば、Check BoxでON/OFFを表現しなくてもよくなくなるらしい - Qiita
【CSS】CSS Togglesを使えば、Check BoxでON/OFFを表現しなくてもよくなくなるらしいHTMLCSSDesignフロントエンドToggle 概要 みなさんは、HTMLとCSSでON/OFFを表現する際、どのように実装しているでしょうか？ 多くの方は、HTMLで<input type=checkbox>とCSSの擬似クラス:checkedを使って、 実装しているのではないでしょうか？ 実は、2022年4月28日に Tab Atkins Jr. (Google)とMiriam E. Suzanne (Invited Expert)によって、 CSS Togglesという、CSSだけでON/OFFの値を定義して、変更をできるようにするための草案が提出されました。 この記事では、CSS Togglesの具体的な内容の紹介と実装方法の解説を行います。 CSS Togglesとは
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
Web Sessions at Google I/O 2023の気になった発表のまとめ - console.lealog();
まとめプレイリストが公開されてたので、その中から気になったやつを流し見した。 https://www.youtube.com/playlist?list=PLOU2XLYxmsIJGxIV8Lt8gF_79Z334LQ6h What's new in Web https://www.youtube.com/watch?v=x9rh0Du4Czg ブラウザで使える最新機能のご紹介 `dialog`要素はいいぞ `showModal()`のほう フォーカスやタブ管理までブラウザがやってくれるし、スタッキングコンテキストも安心 CSS transform `transform: scale(1)`を`scale: 1`って書けるように 複数の組み合わせでもコードがごちゃつかない 新しいCSSの単位 `lv(h|w|min|max)`、`sv(h|w|min|max)`、`dv(h|w|min|m
Nuxt.js + Netlifyで社内向けPodcastを作った話 - タンバリン開発ブログ
タンバリン大阪オフィスでエンジニアアルバイトをしている平井です。 こちらはJAMstackアドベントカレンダー19日目の記事です qiita.com 内容 開発経緯 Podcastについて 技術的な話 所感 開発経緯 タンバリン大阪オフィスでは tambourine radio という名前で不定期に社内向けのラジオを収録しています。 何回か収録を重ねるにつれて社員の方から「ラジオのアーカイブを聞けるpodcastサイトを作ろう」 と提案を頂いたので、インターン生(僕を含めて3人)でチーム開発をしました。 大まかな技術選定やチケットの作成は3人で行ったのですが、コーディングの段階に入って諸事情(他の方のインターン終了など)があり、僕がほぼ個人で制作する形になりました Podcastについて 社内限定公開なので実際に見ていただくことはできないんですが、ざっくりとしたアプリの仕様等を画面のキャプ
ドロップダウンメニューって？ メニューをクリックしたりマウスを上に載せたりすることでそのメニューの下に出てくるようなメニューのことです。 ドロップダウンメニューの例 ドロップダウンメニューの実装方法はググると結構出てきます。 ただjQueryプラグインとかをこのためだけに読み込ませたりするのはなんか違う気がするし、「CSSだけでできる！」とかいうのもありますが、実際は動いてもデザインが思い通りにならなかったり、タブレットで全然使い物にならなかったり、なんてことがありますね。 僕なんかは特にそうですが、ほぼ「コーディング専業」の人は依頼されたデザインに合わせて自由自在に変えられるように、このくらいのUIはササっと書ける知識を持っておく必要があります。 今回はそういう時に使えるメモです。 言うて自分もけっこう忘れるので。w まずはデザインをhtml・cssで実装 基本的にはデザイナーから依頼さ
「CSSで使われる記号の意味が知りたい」 「#や>、$以外にも使われる記号はある？」 こんな疑問、要望に答えるべく、CSSで利用される記号の意味について解説します。 よく利用される記号はもちろん、普段目にすることがあまり多くない記号まで含めた9つの記号の意味を解説します。 あわせて、記号の意味を知るためにCSSセレクタの基本も覚えておいたほうがよいでしょう。 記号以外のCSSセレクタで使われる擬似クラスや疑似要素も紹介していますので、ぜひご覧ください。 HTML・CSSを確実に身につけて、IT企業への転職、フリーランス、海外就職を目指す方は、英語でプログラミングを学ぶことをおすすめします。 記号やコードの意味、エラーの理由を理解しやすくなり、学習速度が早まります。 記号の意味の前にCSSセレクタの基本を知る CSSで使われる記号の意味を解説する前に、CSSセレクタの基本をおさらいしましょう
JSer.info #539 - CSSフレームワークであるBootstrap 5 がリリースされました。 Bootstrap 5 | Bootstrap Blog Bootstrap 5では、IEのサポート終了し、jQueryに依存しないように書き換えられています。 offcanvasコンポーネント、cardの代替えとなるaccordionコンポーネントが追加されています。 また、FormとLayoutの変更、RTLのサポート、SassのUtility APIの追加なども行われています。 v4からのマイグレーション方法については次のドキュメントにまとめられています。 Migrating to v5 · Bootstrap v5.0 Underscore.js 1.13がリリースされています。 Underscore.js 1.13.0 Underscore.js 1.13では、packag
「Google Chrome 111」安定版リリース、View Transitions APIで洗練されたトランジションが作成可能に
ウェブブラウザ「Google Chrome」の最新安定版であるバージョン111.0.5563.64 (Linux版/Mac版)・111.0.5563.64/.65(Windows版)がリリースされました。View Transitions APIによって、単一ページで洗練されたトランジションが作れるようになるほか、CSS Color Level 4が有効になることで使える色の幅が広がります。 New in Chrome 111 - Chrome Developers https://developer.chrome.com/blog/new-in-chrome-111/ NIC070 v2 - YouTube ◆「window-management」エイリアスの追加 「window-placement」パーミッションおよびパーミッションポリシー文字列のエイリアス(別名)として「window-
はじめに Webアプリケーションではユーザーとの対話を効果的に行うため、モーダルウィンドウ（モーダル）がよく利用されます。JavaScriptを駆使して制御するのが一般的ですが、それが必ずしも必要なわけではありません。今回は、JavaScriptを一旦忘れて、CSSのみを使って綺麗なモーダルを作成する方法を紹介します。 ここでは自分なりに考えた方法を紹介しているので、ぜひコメントで他の方法やアイデアを教えてください！ モーダルを表示する まず、モーダルの表示をCSSだけで実現します。 基本的にはクリックされた時に状態が切り替わるタグを利用して、表示を制御します。 checkboxを使う場合 checkboxにチェックが入ったかどうかに応じてモーダルの表示を制御します。 紐づけるlabelは複数配置できるので、表示ボタンと閉じるボタンに利用しています。 See the Pen CSSModa
今すぐできる Web アクセシビリティ改善
適切なロールを持った要素を適切な箇所で使うことが大切です。 button ロールを持つ要素は大抵のスクリーンリーダーで「${ボタン内のテキスト} ボタン」のように読み上げられます。その後現在ボタン上にいて、ボタンをクリックできるということが読み上げられます。 以上のことより、onClick がついていてクリック可能な要素には大抵 <button> を使っておけばいいことがわかります。 <button> に変更するときの注意 <div> や <span> タグをそのまま <button> に変更すると、思わぬ変化が起きてしまう可能性があるので注意が必要です。まず <button> に変更するとブラウザのデフォルトのスタイルが適用されるので、見た目が大きく崩れてしまいます。以下のようにデフォルトのスタイルを打ち消す CSS を適用させて置くといいでしょう。 .style-reset-butto
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
JSer.info #599 - Next.js 12.2がリリースされました。 Blog - Next.js 12.2 | Next.js MiddlewareとOn-Demand ISRのStableな機能となりました。 API RouteとSSRをCloudflare Workersを使ったEdgeで動かすruntimeオプションを追加など。 これに合わせて、Edge Runtimeをローカルでエミュレートするためのedge-runtimeというパッケージが公開されています。 What is Edge Runtime | Edge Runtime そのほかには、next/imageの改善、SWCプラグインのサポート、React 18のサポート改善などが含まれています。 また、next/linkが常に <a> で囲まれるようになる機能をopt-inで導入できるようになっています。 Re
Tailwind CSS の hover: を、非活性な要素やタッチ操作に適用させない ～ addVariant の活用
背景 以前公開した記事で、単純な :hover セレクタの問題点を書きました。 詳しくは上記の記事に書いていますが、要約すると問題は大きく以下の 2 点です。 スマホなどのタッチデバイスでもホバースタイルが適用されてしまう disabled 状態の button など、クリックしても反応しない要素にもホバースタイルが適用されてしまう これらの問題が次のようなメディアクエリと疑似クラスを組み合わせたスタイル記述によって解決できることを紹介しました。 @media (hover: hover) { .class:where(:any-link, :enabled, summary):hover { /* ホバースタイル */ } } 今回はこれを Tailwind CSS で実現するには？ という記事です。 確認した環境 Tailwind CSS v3.4.1 Tailwind CSS におけ
JSer.info #602 - Safari 15.6がリリースされました。 Safari 15.6 Release Notes | Apple Developer Documentation New WebKit Features in Safari 15.6 | WebKit 基本的には、Safari 15.5のバグ修正が中心となっているリリースです。 加えて、CSSの:modal擬似クラスのサポートが追加されています。 Deno 1.24がリリースされました。 Deno 1.24 Release Notes Deno 1.21から段階的にtype checkの挙動を変更していました。 この変更が続く形で、コード出力やtype checkのアーキテクチャのリファクタリングを行い、パフォーマンスが改善されています。 またウェブ互換を目的としたunhandledrejection/bef
こんにちは。株式会社エニグモにてフロントエンドエンジニアを務めています新井です。 こちらは Enigmo Advent Calendar 2023 および アクセシビリティ Advent Calendar 2023 の 14 日目の記事です。 はじめに：ウェブアクセシビリティとは？ 1. ページ内の見出しの最適化 2. リンクや状態の判別を色の変化だけで行わないようにする 3. キーボード操作時のフォーカスインジケーターは非表示にしない 4. クリッカブルな要素の実装には a タグまたは button タグを使用する 5. 画像の代替テキストの指定と装飾的な画像の取り扱い 6. フォームコントロールには必ずラベルを付与する 7. フォームの入力欄のオートコンプリートを有効にする 8. ラジオボタンやチェックボックスを装飾する際は元の input の隠し方に気をつける 9. アコーディオン
はじめに この記事は #EveOneZenn (Everyday One Zenn) vol.15 です。 Chrome DevTools に組み込まれている、ページの描画に関する機能を提供する Rendering タブについてまとめます。 前回： Rendering タブを表示する Chrome DevTools の Rendering タブは メニュー（三点ドット）→ More tools → Rendering から表示できます。 Elements や Console といったメインのパネルが並んでいる上部のナビゲーションではなく、下部のナビゲーションで Rendering パネルが表示されます。 Rendering タブの機能 Rendering タブで使用できる各種機能を紹介します。 Paint flashing ページ上で再描画が発生したエリアを緑色でハイライトします。 DOM
ナパームストレッチのCSS！！ - Qiita
はじめに ナパームストレッチのCSSを作ってみました！！ボタンにホバーすると空気抵抗によりAの文字が刻まれます！！ See the Pen napalm_stretch by am10 (@am102) on CodePen. おわり これだけだと怒られそうなのでQiitaでよく見る上のHTML,CSS,JSのコードを埋め込んだCodePenについて書いときます。（前からあれどうやるんだろ？って思ってました。） CodePenの使い方 アカウント作成 下記のサイトでアカウントを作成します。 CodePen(https://codepen.io/) 右上のSign upをクリックする アカウントを連携する(とりあえずTwitter使いました) Twitter,GitHub,Facebookのアカウントが使えます。なければEmailでの登録もできます。 Make the most of you
slick.jsのdots、arrowsのカスタマイズ方法
以前にslick.jsに関することを2つ書きましたが、今回はもっと絞って「arrows」と「dots」のカスタマイズ方法について紹介します。 以前のslick.jsに関する記事は下記の2つです。 よく使うjQueryプラグイン① 「slick.js」 「slick.js」の使い方応用編 追加で「slick.jsでサムネイル付きスライダーを作成する」も書きました。サムネイルを固定した場合のスライダーのサンプルも紹介しています。 arrowsのカスタマイズ方法 arrowsのカスタマイズ方法はすごく簡単です。これはカスタマイズができるようにもともとオプションが用意されています。 オプションについてはこちらから確認してください。 slick.jsのオプションの箇所に下記のように記述すれば好きな画像をarrowsに設定できます。 $(function(){ $("#slider").slick({
JSer.info #542 - Jest 27.0.0がリリースされました。 Release 27.0.0 · Facebook/jest Jest 27: New Defaults for Jest, 2021 edition ⏩ · Jest Jest 27.0.0では今までのデフォルトが大きく変更されるリリースとなっています。 testEnvironmentのデフォルトをjsdomからnodeへ変更、jest-circusのデフォルト化、fake timersのデフォルトを@sinonjs/fake-timersベースのmodernにしています。 機能追加として、失敗したテストをインタラクティブに実行できるように、inline snapshotsをprettierの依存なく実行できるようになっています。 また、doneの複数回呼び出しをエラーとしたり、テストケースでPromiseを
[React] styled-component を利用する際の最初に知っておきたいことまとめ - Qiita
はじめに これまでVuejsで開発をしてきたのですが、新しいプロジェクトでReactを利用することになりました。 キャッチアップのために、CSS in JS の代表的なライブラリの1つであるstyled-componentsを利用して簡単なWebサイトを作成しました。 実装を進める中で自分が調査して、なるほどと思ったポイントをまとめました。 [作成したサイト] [Github] CSS in JS について Reactのスタイリングの方法について CSS in JS について説明する前にまず基本として、Reactでは要素をどのようにスタイリングするかについて記載します。 Reactでは、要素のスタイリングに下記の2つの方法を用意しています。 通常のHTMLでスタイリングをするようにcssファイルを別に指定して、classNameプロパティに指定する Reactエレメントのstyleプロパテ
![[React] styled-component を利用する際の最初に知っておきたいことまとめ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/b774c15ac244f8eec09105c98750fb61212bfb0b/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTIwJTVCUmVhY3QlNUQlMjBzdHlsZWQtY29tcG9uZW50JTIwJUUzJTgyJTkyJUU1JTg4JUE5JUU3JTk0JUE4JUUzJTgxJTk5JUUzJTgyJThCJUU5JTlBJTlCJUUzJTgxJUFFJUU2JTlDJTgwJUU1JTg4JTlEJUUzJTgxJUFCJUU3JTlGJUE1JUUzJTgxJUEzJUUzJTgxJUE2JUUzJTgxJThBJUUzJTgxJThEJUUzJTgxJTlGJUUzJTgxJTg0JUUzJTgxJTkzJUUzJTgxJUE4JUUzJTgxJUJFJUUzJTgxJUE4JUUzJTgyJTgxJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1iZWFiNzFkNDUwNWZlYmVlZmM5ODdlM2EwMmI1ZDIxNA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzYWJhX2NhbjAwJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz04M2ZhZGRjYzdlOGYwMDllNjY2Njc3MTRiYTBhNWI5Zg%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g44Ko44Oz44K444OL44Ki44Go5Lq655Sf44Kz44Of44Ol44OL44OG44Kj%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D683d034d0452b72ae0c7d98e151ea9de)
【CSS】詳細度の基本と諸々
昨今のマークアップでは、CSS設計の発展やフロントエンドフレームワークの台頭によって、以前よりも詳細度を意識することが少なくなっているかもしれません。たとえばBEMやFLOCSSを使った従来のCSS設計によるアプローチをはじめ、CSS in JSやCSS Modulesを使った技術的なアプローチ、もしくはTailwind CSSのようにユーティリティファーストで設計するアプローチなど、多様な手法が存在します。 では、詳細度の悩みから完全に解放されたのかというと、そうではありません。過去の負債、技術的な成熟度、サードパーティ製CSSとの競合、CSS設計に対する解像度や方針の違いなど、その要因はさまざまだと思います。先に述べたように、詳細度をよしなにやってくれる技術が増えてはいますが、依然として知識は必要です。でなければ、どのような方法やツールを用いたとしても、どこかでCSSが破綻する可能性が
v5で変更された内容
v5.3.0 以前のアルファ版v5.3.0から移行する場合は、このセクションに加えて、その変更点を確認してください。 Helpers カラーリンクに再び！!importantが追加され、新しく追加されたリンクユーティリティとの相性が良くなりました。 Utilities 新しい.d-inline-griddisplayユーティリティが追加されました。 v5.3.0-alpha2 v5.3.0のアルファ版から移行される方は、以下の変更点をご確認ください。 CSS variables 重複したり、使用されていないルートCSS変数を削除しました。 Color modes ダークモードの色は、特定の色合いや色合い(例えば、$blue-300)ではなく、Sassのテーマの色(例えば、$primary)から派生するようになりました。したがって、基本テーマの色をカスタマイズする時、より自動化されたダークモ
コンテナクエリの使用方法 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 最近、Chris Coyier 氏は、 コンテナクエリがすべてのブラウザ エンジンでサポートされるようになった今、開発者がコンテナクエリを使用する機会が増えないのはなぜでしょうか。 Chris の投稿には考えられるさまざまな理由が挙げられています（意識の欠如、古い習慣が困難になるなど）が、際立った特に理由があります。 今はコンテナクエリを使用したいが、古いブラウザをサポートする必要があるためできないと考えているデベロッパーもいます。 タイトルから推測できるように、古いブラウザをサポートする必要がある場合でも、ほとんどのデベロッパーは本番環境でコンテナクエリをすぐに使用できると考えています。この投稿では、そのためにおすすめのアプローチについて説明します。 実際的なアプローチ 現時点でコ
2022年8月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン “牛乳パック”どっちが好きですか？｜内田 広由紀｜視覚デザイン研究所｜note 視覚デザイン研究所はデザイン関連の本で良いものがあるため、かなり昔に以下の記事で紹介していました。最近はnoteもやってたのですね。 関連: 年末年始にWebデザインを学び直すための3つのステップ | Stocker.jp / diary 知っておくべきUI/UXアニメーションの12の原則 (12 principles of UI/UX animation you should know) こちらは英文記事ですが、Google翻訳などで十分理解できる内容ですので取り上げました。 Chrome PC版の場合はアドレ
擬似要素タグbeforeとafterを活用しよう！基礎知識と使い方を解説！ | ビジネスとIT活用に役立つ情報（株式会社アーティス）
前回紹介した擬似要素・擬似クラスの指定方法の中から、今回はbeforeとafterについて詳しく解説をしていきます。 基本的な知識から具体的な活用方法まで、丁寧に解説していきますので是非参考にしてください。 属性要素「before」「after」とは 擬似要素とは、対象の要素の一部を指定して装飾を適用する、もしくは対象の要素に擬似的に要素を追加して装飾を適用するセレクタのことを指します。 このうちbeforeとafterは、後者の対象の要素に擬似的に要素を追加して装飾を適用するセレクタです。 そのほか擬似要素に関しての基本的な知識は前回の記事を参照ください。
Firefox 121でCSSの関係擬似クラス:has()に対応し、主要ブラウザすべてで使用可能に 12月19日、Firefox121がリリースされた。このバージョンで、CSSの関係（リレーショナル）擬似クラス:has()に対応した。ほかの主要ブラウザ（Chrome、Edge、Safari）ではすでに対応しており、これで:has()が一般的に使えるようになったと言える。 :has()を簡単に説明すると、あるセレクタ（A）に結合子（>、+、~などの明示的な結合子、または暗黙的な子孫結合子）を使って相対するセレクタをhas()内に記述し、その関係性を実際に持つ場合にセレクタ（A）にスタイルを適用できるという擬似クラス。 :has()を使うことで、子の要素に○がある要素、次の要素が△である要素といった、これまでできなかったかたちでスタイルを適用できるようなり、より効率的にCSSを書けるように
はじめに 早速ですが... :deep 機能について :deep 機能のつらいところ そんなあなたに PrimeVue PrimeVue の Pass Through 機能 Pass Through の利用方法 最後に 出典 はじめに こんにちは！ContractS株式会社の北原です。 フロントエンドのリードとして、プロジェクトの技術選定や品質保守等を担当しています。 早速ですが... みなさまは Vue 3 をお使いになられていますか？ これには、以前の Vue 2 と比較して多種多様な改善がふんだんに盛り込まれています。 2020/09/18 にリリースされてから暫く経っているので、実際の業務や個人で触られた方も多いと思います。 例えば、 Composition API の正式採用 script setup 構文の対応 メモリ使用量削減による負荷軽減 その他色々ありますが、以上のような
CSSSの設計 CSSSはシンプルで理解しやすい反面、破綻しやすい言語ともいわれています。 サイトの規模が大きくなるにつれ、CSSのコード量も増えます。 そのような場合、重複しているコードや無駄なコードなどが発生してしまうことが多いです。 CSSをできるだけスマートかつ扱いやすいようにするのがCSSの設計です。 CSSを設計する上で、意識するポイントは以下の3つになります。 ・保守性 ・可続性 ・再利用性 この3つを維持し続けるのが、CSSを設計する目的です。 具体的な方法をこれから説明します。 CSSの名称 CSSの設計を説明する前にCSSの各パーツの名称について説明します。 セレクタ セレクタとは、スタイルを適用させたい対象をいいます。 以下のようなモノがセレクタとして設定されます。 ・id名 ・class名 ・pタグ ・hタグ ・aタグ ・ulタグ ・liタグ ・headerタグ ・
indeterminate（知名度が低いウェブ標準ひとりAdvent Calendar 2021 – 06日目） | Ginpen.com
知名度が低いウェブ標準ひとり Advent Calendar 2021 – 06 日目 チェックボックスはオン・オフを表現するのに使われますが、未決定 indeterminate というオン・オフどちらでもない（あるいはどちらでもある）状態があり得ます。 JavaScript から indeterminate プロパティを操作するとそれを設定できます。また CSS では擬似クラス :indeterminate を用いてスタイルをあてることもできます。 またまだ選択されていないラジオボタンもこの未決定状態とみなされます。 <input type=”checkbox”> – HTML: HyperText Markup Language | MDN →未決定状態のチェックボックス デモ：indeterminate example 基本的な使い方 設定するには JavaScript から。HTM
CSSで特定の子要素を持つ親要素にスタイルを適用する方法！
CSSで特定の子要素を持つ親要素にスタイルを適用する方法！CSSで特定の子要素を持つ親要素にスタイルを適用させる方法についてサンプルコード付きで解説します。現状各ブラウザでは:has()の擬似クラスは使えないため、代替となる方法の紹介です。 CSSで例えばa要素を子要素に持つ親要素、.sampleというクラスの子要素を持つ親要素など特定の条件の子要素を持つ親要素に対してスタイルを適用したいケースを考えます。 この場合は実はCSS3では上記にドンピシャで使えるセレクタはありません。ただCSS4では:has()という擬似クラスが登場する予定で:has()を使うことで特定の条件の子要素を持つ親要素という指定が簡単に可能になります。
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱い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
HTMLとCSSでページ内リンクをクリックでジャンプ先をアニメーション表示させる｜たかもそ／Web Creator.
ページ内リンクをクリックしたときにジャンプ先の背景色をアニメーションさせて分かりやすくする演出の方法です。 <a href="#jump">ページ内リンク</a> ... ... ... <p id="jump">あのイーハトーヴォの...</p>まずは、ページ内リンクをマークアップします。 html { scroll-behavior: smooth; }html 要素に scroll-behavior: smooth; を指定してページ内リンクをクリックしたときにスムーススクロールされるようにしておきます。 @keyframes highlight { 0% { background-color: #fceb70; } 100% { background-color: transparent; } }@keyframes を使ってアニメーションを定義します。今回は、黄色の背景色から透明
:focus-visibleについて | EvoLab.
こんにちはミズノです。 2021年からモダンなブラウザのUA style sheet(ユーザーエージェントスタイルシート)に:focus-visibleが使用されるようになってきました。ChromeのUA style sheetを見ると全ての:focusが:focus-visibleになっています！ 今回は:focus-visible擬似クラスの紹介をしていこうと思います。 :focus-visibleとはキーボード操作時にフォーカスされた要素のスタイルを指定することができるキーボード入力をサポートする要素はマウス操作時でもフォーカスが表示される(input要素、またはフォーカスが当たると仮想キーボードが表示されるような要素など):focus-visibleが実装された経緯は開発者がマウスユーザーのためにoutline:0を指定してフォーカスリング(フォーカスインジケータ)を消し、キーボー
この記事を書いた人 だいちPENGIN BLOGメディア編集長。Web業界とは異業種の仕事をしながら、独学でWeb制作の世界に。副業でHP制作やコーディング代行、個人ブログの運営などに取り組み、現在はPENGINにてWebライティングやディレクションをしつつ、メディア運営全般を担当しています。（個人運営ブログ：https://daib-log.com/ ） 今回はカード型（タイル型）レイアウトの作り方についてまとめました。 汎用的なWebデザインの一つですが、メディアクエリでカラム（縦方向の表示数）を変える時や、WordPresの記事一覧のようにカードの表示枚数が変動するサイトの場合を考慮したら意外と難しいデザインだったりします。 いくつか実装方法はありますが、この記事で紹介するのはnth系の擬似クラスやcss gridプロパティを使わない、初学者の方でも簡単に取り入れられる方法となってい
こんにちは、森田です。 2023年初記事です。明けましておめでとうございます。 本年も Gaji-Labo よろしくお願いいたします。 さて、年も変わったことですし本年からなにか新しいことを始めたいと思います。 今年は疑似クラス :has() を使えたらいいなと願っております🙏 疑似クラス :has() とは /* img要素を含んでいるa要素を指定 */ a:has(> img) { style } /* p要素が隣接しているh1要素を指定 */ h1:has(+ p) 擬似クラス :has() は、その名のとおり引数の中で指定したセレクタを含んでいる要素を指定します。 今までになかった親要素を指定できるセレクタとなりCSSで出来ることが格段に増えそうです。 このような場合、今までは JS でクラス付与などをしていたのでそれが CSS のみで実現できるのは素晴らしいです。 仕様:has
Tailwind CSS でダークモードを実装する（React での切り替えボタンの実装コード例あり）
Tailwind CSS でダークモードを実装する Tailwind CSS でダークモードを実装する方法を紹介します。Tailwind CSS は v2 からダークモード用の CSS を簡単に適用できるようになりました。 この記事では、以前私が個人開発で作成した note PDFy というサイトを例に、ダークモードの作成方法と Tailwind CSS でのダークモードの実装方法を解説します。 このサイトは note の URL を入力するだけで記事を PDF 化できるツールです。これを使うと note の記事をオフラインで読むことができます。 なお、本記事は私の所属する BASE 社の Frontend Weekly LT で発表した内容を記事化したものです。 CSS でダークモードを実装する方法 まずはダークモードに対応する CSS を設定する方法を解説します。本章の内容は、ダークモ
2023年4月22日紙版発売 2023年4月22日電子版発売 B5判／160ページ 定価1,628円（本体1,480円＋税10%） ISBN 978-4-297-13477-8 ただいま弊社在庫はございません。 Gihyo Direct Amazon 楽天ブックス ヨドバシ.com Fujisan（定期購読のみ） 電子版 Gihyo Digital Publishing Amazon Kindle ブックライブ 楽天kobo honto 本書のサポートページサンプルファイルのダウンロードや正誤表など 特集1 仕様ファーストでいこう！ 実践API設計 堅牢で，保守性に優れたWebサービスの実現 本特集では，筆者自身が長年考えて実践してきたことに基づいて，「API仕様ファースト」という聞き慣れない言葉を中核として，Webサービスでのバックエンドサービスの開発方法について説明します。多くのソフト
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web API の紹介 - ウェブ開発を学ぶ | MDN
CSS の値と単位 - ウェブ開発を学ぶ | MDN
非同期 JavaScript - ウェブ開発を学ぶ | MDN
レスポンシブなドロップダウンメニューをつくる｜notes by SHARESL
CSSの記号の意味「#」「>」「$」など〜使い方とあわせて完全網羅〜
2021-05-11のJS: Bootstrap 5、Underscore.js 1.13.0(`_.template`のセキュリティ修正)、Prettier 2.3
JavaScriptを忘れて、CSSだけでモーダルを創造する - Qiita
メディアクエリーの初心者向けガイド - ウェブ開発を学ぶ | MDN
2022-07-04のJS: Next.js 12.2、Fresh 1.0(Deno Web Framework)、Vue 2.7(2.xの最終minor)
2022-07-26のJS: Safari 15.6、Deno 1.24、CSS behind Figma
自社サービスで必ず達成しておきたいウェブアクセシビリティ対応についてまとめました - エニグモ開発者ブログ
Chrome DevTools の Rendering タブを使ってみよう
2021-06-01のJS: Jest 27、vanilla-extract 1.0.0、Learn CSS
コンテナクエリの使用方法 | Blog | web.dev
Firefox 121でCSSの関係擬似クラス:has()に対応し、主要ブラウザすべてで使用可能に | gihyo.jp
【Vue.js】Painless なコンポーネント開発のプラクティス - ContractS開発者ブログ
【保存版】絶対に破綻しないCSSの設計を学ぼう | ブログ | コーディング代行・外注サービスなら即日対応のくまweb
ボックスモデル - ウェブ開発を学ぶ | MDN
サーバーサイドウェブフレームワーク - ウェブ開発を学ぶ | MDN
【HTML＆CSS】カード型レイアウト（モジュール）のコーディング方法 - PENGIN BLOG
2023年から使っていきたいCSS 〜疑似クラス :has() 〜
WEB+DB PRESS Vol.134