メディアクエリーのhoverでPC/SP切り替えが便利（最近便利なCSSおれおれAdvent Calendar 2023 – 15日目） | Ginpen.com
最近便利なCSSおれおれAdvent Calendar 2023 – 15 日目 メディアクエリーを使って切り替える場合ってだいたい画面の幅を見て、広ければパソコン、狭ければスマホ、という判断にしていることが多いかと思います。中間にタブレットを置いたり。 大きさとか配置とかはそれでもまあまあ大丈夫かなとは思うんですが、ユーザー操作（インタラクション）を考えると画面幅に依存するのは本質ではないなあという感じがしますよね。デバイスの特性を見てやりましょう。 例 ホバーで色を変えて強調表示するカード UI です。スマホ等で入力欄に触れるとホバー状態にしても反応してしまうのを制御できます。 デモ：https://codepen.io/ginpei/pen/qBgzRJK
CSSの進化が止まらない！ Chrome 120で追加された7つの新しいCSSの機能
年末になっても、CSSの進化が止まりません！ 先日リリースされたChrome 120で追加された7つの新しいCSSの機能を紹介します。JavaScriptをサポートしているかチェックできる新しいメディアクエリ、新しい指数関数、CSSネストの記述方法がより簡単になったり、要チェックです。 New in Chrome 120 Chrome 120 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 Chrome 120で追加された7つの新しいCSSの機能 カスタムプロパティに対する<image>構文 カスタムプロパティ用の<transform-function>および<transform-list>構文 JavaScriptをサポートしているかチェックできる新しいメディアクエリ :dir
知っておくと便利！ CSSだけで要素がスクロールできるかどうかを検出する方法
CSSだけで要素がスクロールできるかどうかを検出する方法を紹介します。 先日紹介したスクロール駆動アニメーション（Scroll-Driven Animations）はスクロール可能なオーバーフローがある場合にのみアクティブになるため、要素がスクロール可能かも検出することができます。 Solved by CSS Scroll-Driven Animations: Detect if an element can scroll or not by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSで要素がスクロールできるかどうかを検出する アクティブと非アクティブなスクロール駆動アニメーション CSSの変数を追加して、スクロール検出機能を作成 実装でより使いやすくする 実装例 はじめに スクロール駆動ア
モダンCSSの新機能のブラウザ対応がこれで簡単になる！ Modernizrに代わる新しいスクリプト -SupportsCSS
2023年もCSSの新しい機能が続々とリリースされ、進化が早いですね。魅力的な新機能を使用するときに気になるのが、ブラウザのサポートです。 ブラウザがその機能をサポートしているかチェックし、判別するクラスを付与してくれるといえば、Modernizrですが、その更新はストップしています。 そんなModernizrに代わる、モダンCSSに対応したスクリプト、SupportsCSSを紹介します。@containerも@layerも:has()もsubgridもcolor-mix()にも対応しています。 SupportsCSS SupportsCSS -GitHub SupportsCSSはModernizrにインスパイアされたスクリプトで、モダンCSSに使用されるセレクタ・機能・@ルールなどのサポートをライブ検出できます。 CSSの@supportsもサポートしている機能を検出できますが、Sup
React 条件分岐によるComponent表示切り替え方法を理解する #4 - Masa engineer blog
Event HandlerとuseStateについて紹介していきます。ユーザーがボタンを押下する、何か画面に入力するなどの操作をトリガーとして、定義したイベントを実行する仕組みになります。useStateと組み合わせて使うことがあるため、一緒に紹介します。 本記事では、前回記事で使ったコードを元に変更・追加をしていきます。 条件分岐によるcomponent表示切り替え方法だけであれば、本記事内のコードだけで理解できるようにしています。 2.条件分岐による切り替え「Add New」ボタンのクリックにより、表示内容を切り替え、「Cancel」ボタンによって元の表示にする例を紹介します。 条件分岐による切り替え方法は、いくつかあります。 2.1 && を使うNewExpense.js import React, { useState } from 'react'; import ExpenseF
CSSのコード品質向上のためのStylelint入門 - ICS MEDIA
Stylelintは、スタイルシートの問題検出や自動修正を行えるLintと呼ばれる静的解析ツールです。利用することで、CSSやSCSSファイルのコード品質の向上に役立ち、具体的には以下のメリットがあります。 プロジェクトのすべてのスタイルシートから構文エラーを検出する セレクターやプロパティの重複といった、問題になりそうな実装を未然に防ぐ 次のようなルールを強制し、コーディングスタイルを共通化してコードに一貫性を持たせる font-weightの値は、boldといったキーワード指定を強制する 疑似要素のコロンは2つに強制する（::before）など ICSでは複数人で開発することが多いため、スタイルシートの一貫性のためにStylelintが役立っています。HTMLコーディングが多い場面で恩恵を得られるツールです。 この記事ではStylelintの導入方法と、必要な設定について紹介します。
CSSの新機能、メディアクエリの新しいクエリ「update」がChrome 113で使用できるようになりました
2023年5月4日にリリースされたChrome 113で、CSSの@mediaで新しいメディアクエリが使用できるようになったので、紹介します。 新しいクエリはupdateで、WebサイトやアプリのUIをデバイスのリフレッシュレートに最適化させることができます。 CSS update Media Query 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスの元、翻訳しています。 はじめに 「update」クエリの基礎知識 新しいメディアクエリ「update」を使用したデモ リソース はじめに CSSのメディアクエリは、Webサイトやアプリを表示されているデバイスに基づいて外観をコントロールできる強力なツールです。メディアクエリを使用すると、さまざまなスクリーンサイズや向きなどに対してレイアウトを最適化できます。 updateクエリは、デバイスのリフレッシュレートに適応することが
【無料・有料】文章校正ツールおすすめ6選の機能比較！AIでのカスタマイズ校閲時代がやってきた
「冷たい印象になるから」と、若い人はメッセージのやりとりで句読点をつけたがらない。そんな話を聞いて「俺、もしかして冷たい人間と思われているかも？」とショックを受けました…。 どうも✋おじさん構文マイスターことエディター✍のヒロです(^_^)💦💦🍺 10年以上の紙媒体編集者歴を経てWeb編集者に転身した自分ですが、いまだに戸惑うことがあります。それは、Web編集ならではのスピード感です。 なかでもスピード不足を自覚しているのが、原稿の校正校閲業務。紙媒体編集者の宿命ともいえるのですが、「ミスは絶対に許されない」の気迫で校正校閲に臨むため、どうしても時間がかかります。「ミスっても気づいたら後で直せばよくね？」なWebのチャラいノリに賛同できないわけですね。（句読点の抜け漏れもやっぱり許せません！） 「Webのスピード感で校正したい」「でも紙媒体クオリティは死守したい」、この狭間で葛藤し、
VSCodeでChatGPTにプログラムのバグや、レビューをしてもらおう！
こんにちは、プロクラスの阪口です！ 昨今、ChatGPTやBingなどの人工知能チャットボットが人気ですよね〜 なので今日は、プログラミングやコーディングに欠かせないツール「VSCode」で、ChatGPTを使えるようにするプラグイン「ChatGPT Reborn」を導入し、ソースコードのバグを発見してもらったり、ソースレビューをしてもらいたいと思います！ ChatGPT Rebornとは？ ChatGPT Rebornは、OpenAIが開発した人工知能モデル「ChatGPT」を、VSCode上で手軽に使えるようにするプラグインです。 このプラグインを使えば、アルゴリズムのヒントなどを簡単に教えてもらうことができます！ それでは、そのインストール方法と基本的な使い方について解説していきます。 ChatGPT Rebornのインストール方法 まずは、VSCodeを開いて、以下の手順でインスト
VSCodeにChatGPTの拡張機能を入れてコードレビューやバグを発見してもらう - Qiita
ChatGPTとは？ OpenAIが開発するGPT-3という言語モデルをベースとした(執筆当時)チャットアプリです。 こちらの質問に対して、AIが色々な質問に答えてくれて、一般的な内容だけではなく、コードレビューやバグなども発見してくれるめっちゃ凄いやつです。 細かい内容は以下の記事がとても参考となります。 筆者の関連記事 VSCodeと連携して、ブラウザを開かなくてもChatGPTを使用できるようにする 通常はブラウザを開いて使用するのですが、コーディング中にサクッとレビューしてもらったり、バグを見つけてもらえるような拡張機能があったので、そちらの設定方法について記述してみます。 今回インストールする拡張機能 使用までの手順 環境 PC: MacBook Pro (Apple M2) OS: macOS Ventura 13.1 VSCode: v1.74.3 OpenAIの価格について
CSSの:has()がブラウザで使用できるかを@supportsで検出するには、:has(*)ではなく、:has(+ *)にする必要がある
CSSの:has()がブラウザで使用できるかどうかを@supports selector()で検出するには、:has(*)ではなく、:has(+ *)が必要です。 これは2023年現在、:has()はFirefoxを除くすべての主要ブラウザでサポートされていますが、Firefoxで実験的な機能としてサポートされているためです。 CSS :has() feature detection with @supports(selector(…)): You want :has(+ *), not :has(*) by @Bramus 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの:has()を検出するには :has(*)を使用した場合の問題点 デモとコード 終わりに はじめに CSSの:has()を@supports
CSSでhoverアニメーションの実行をPCのみに制御する｜BLACKFLAG
iPhoneやAndroidのスマホやタブレットなどのタッチデバイスでCSSのhoverアニメーションをつけていると、タップ（クリック）動作にいろいろと支障がでることがあります。 CSSで指定するhover動作をスマホやタブレットでは無効にさせてPCのみで実行させるために、JavaScriptでデバイスの判定をしたりすることもありますが、CSSのメディアクエリーだけでも制御ができるのでメモとして紹介します。 mediaクエリーのhoverとpointer PCデバイスのみにCSSのhover動作を実行させるには、CSSメディアクエリーで判定できる以下の2つを使用します。 ・使用デバイスがhoverを使えるかどうか ・使用デバイスのポインターの種類 この2つを組み合わせることでPCのみを判定させた状態を作り、その中にhover動作の指定を記述します。 実際の記述方法については以下です。 a
第一部: 基本文法 · JavaScript Primer #jsprimer
第一部: 基本文法 第一部ではJavaScriptの基本的な文法やビルトインオブジェクトの使い方を紹介します。 目次 JavaScriptとは JavaScriptとはどのような用途に使われているプログラミング言語なのか、どのような言語的な特性を持っているのかについて簡単に紹介します。 コメント JavaScriptにおけるコメントの書き方を紹介します。コメントはプログラムとして評価されないので、ソースコードに対する説明を書くために利用します。 変数と宣言 JavaScriptで変数を宣言する方法について紹介します。変数を宣言する方法にはconst, let, varがあります。これらの動作の違いや使い分けについて紹介します。 値の評価と表示 ブラウザでJavaScriptコードを実行する方法について紹介します。またプログラムを実行すると遭遇するエラーをどのように解決していくかを紹介します
簡単な設定で使える軽量でモダンなキーバインドライブラリ・「tinykeys」
tinykeysは簡単な設定で使える軽量でモダンなキーバインドJavaScriptライブラリです。 以前にもwhenipressというライブラリをご紹介しましたがtinykeysの方が若干使いやすい印象でした。 上にサンプルを用意しましたが、反応が無い場合はCodepen内にフォーカスしてからお試しください。 使い方も非常にシンプルです。 <script src="https://cdn.jsdelivr.net/npm/tinykeys/dist/tinykeys.umd.js"></script>tinykeysを読み込みます。 tinykeys(window, { "Shift+D": () => { alert("ShiftとDが押されました！"); }, "y e s": () => { alert("YES！はいそうです！"); } });キーの設定とキーが押されたときの内容を
無料で自分のウェブサイトの脆弱性をスキャンしてくれる「Probely」レビュー、有料プランはレポート出力なども可能
自分でウェブサイトを運営している人にとっては、ウイルス侵入の原因となりうるCMSの脆弱性など、ウェブサイトのセキュリティは気がかりなものです。「Probely」を使うと、自分のウェブサイトの脆弱性やセキュリティの問題をスキャンし、修正の方針まで指示してくれます。 Web Vulnerability Scanner | Web Application Security Testing — Probely https://probely.com/web-vulnerability-scanner/ Probelyには「Free」「Starter」「Pro」「Premium」の4つのプランがあります。無料版でどこまで使えるか確かめたいので、ひとまず「Free」を選択することに。 氏名やメールアドレスなどを入力して「SUBMIT」をクリック。 入力したメールアドレスにパスワードの設定を求めるメール
Web Vitals Chrome Extension - Web Vitalsの評価を可視化するGoogle Chrome機能拡張
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近GoogleがWeb UXの指標として提示しているのがWeb Vitalsです。3つの指標があり、ローディングとインタラクティブ性、そして視覚的安定性となっています。これらの3つの指標に沿って、Webページを判定します。 そんなWeb Vitalsを判定するGoogle Chrome機能拡張がWeb Vitals Chrome Extensionです。 Web Vitals Chrome Extensionの使い方 MOONGIFTを見た場合。 このページはわざと欠点を出しているページです。 改善ポイントがあるページでは赤い表示、問題なければ緑のアイコンが表示されます。まだアルファ版なので、改善方法などが提示されなかったり、指標が大ざっぱな印象があります。今後改善されれば、UX
Visual Studio Code (PHPStrom) で WordPress開発環境を作る - toiee Lab
個人データは、このウェブサイトでの体験のサポート、アカウントへのアクセスの管理、プライバシーポリシー に説明されている他の用途に使用されます。 ITサポート Visual Studio Code (PHPStrom) で WordPress開発環境を作るvscode + phpcs + wpcs 概要 Visual Studio Codeを用意する（あるいは、PHPStorm）PHP関連の拡張機能をインストールphpcs (コード規約チェック）をインストール by homebrewwpcs (WordPress）をインストール by composer 前提 homebrew というパッケージ管理ソフトを入れておくcomposer というPHP専用のパッケージ管理ソフトを入れておく (1) Visual Studio Code とても便利なエディタ。情報も非常に多い。インストール情報を探して
macOSのVisual Studio CodeでPHP CodeSniffer & WordPressコーディング規約によるコードチェック環境を構築
当サイトでは、WordPress標準や配布されているテーマは使用せず自作しています。 一応、WordPressのテーマチェック機能を使い使用していない機能を除いて問題がないかチェックはしていますが、正直ちゃんと出来ているのかまだまだ不安な部分があったりします。 先日、いつも「信州 WordPress Meetup」でお世話になっているとろゆに（@Toro_Unit）さんから「PHP CodeSnifferとかでコーディング規約のチェックしてみると良い」とアドバイスいただいたので早速WordPressコーディング規約を含めてインストールしましたが、Visual Studio Codeとの連携でちょっとつまずいたので環境構築手順を備忘録的にまとめてみました。 PHP CodeSnifferとは PHPのコーディング規約チェックをしてくれるツールです。 Homebrew & Composerのイ
Grammarly （グラマリー）でスペルミスを一掃！無料の英文校正ツールを使ってみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。英会話スクール「MeRISE英会話上野校 by LIG」の運営をしているみおです！ スクール運営業務の中で、５人の外国人の先生たちと英語でコミュニケーションをとることもしばしば。 先生にチャットで要件を伝える際に、英文がきちんとした英語になっているのかを必ずチェックしています。 そこで、最近「Grammarly」という文章校正ツールを使い始め、英文のチェックがとっても楽になったので今回は実際に使ってみた感想を書こうと思います。 以前、LIG社員のモトキウエダさんが「Grammarly」の紹介記事を書いていますので、Grammarlyについて知らない方はこちらをご一読ください。 Grammarlyってどうやって使うの？ Grammarlyの使用方法は主に3つです。 Grammarlyのサイトへ直接アクセスして使用する Chromeなどの拡張機能を利用する GrammarlyをPC
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS チートシート - by Takumi Hirashima
