CSSのlight-dark()関数の実践的な使い方、ライトテーマとダークテーマの作成方法
Webサイトをライトテーマとダークテーマ対応にするには、CSSのlight-dark()関数を使用すると今までより簡単に実装できます。現在のところ、サポートブラウザはChrome, Firefoxですが、Safari TPに実装されており、次のバージョンでサポート予定となっています。 CSSのlight-dark()関数の基礎知識と実践的な使い方を紹介します。 CSS color-scheme-dependent colors with light-dark() by Bramus! 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSにおけるシステムカラー light-dark()関数の基礎知識 light-dark()関数の使い方 はじめに システムカラーには、現在使用され
CSSの新しいセレクタが便利！複数のセレクタを1つにまとめられる:is()、さらに詳細度を0にする:where()の使い方
CSSの新しいセレクタが、主要なすべてのブラウザにサポートされました（ただし、IEは除く）。複数のセレクタを1つにまとめられる:is()、同機能でさらにセレクタの詳細度を0にする:where()をどのように使い分ければよいのか紹介します。 :where() has a cool specificity trick, too. by Chris Coyier 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 最近、:is()疑似セレクタがよく話題になっている 複数のセレクタを1つにまとめられる:is() 同じ機能で、詳細度を0にする:where() :is()と:where()のどちらを使用すればよいか 最近、:is()疑似セレクタがよく話題になっている 最近、:is()疑似セレクタがよく話題になっています。おそらく、Safari
【作業効率】GASを使ってGoogleドライブの指定フォルダにファイルを一括コピーする | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
まいどです。テクニカルディレクターのやなさんです。 さて、Web制作やサービス開発を行っている人たちは、作業完了時、クライアントにドキュメントを一式納品することってありますよね？ 昔は社内サーバーのファイルを圧縮して、メールで送付したり、DVDに焼いて納品したりという方法があったと思いますが、今となってはクラウド上のストレージでのやり取りが増えてきているかと思います。 弊社でのファイル管理はGoogleドライブを利用しています。あるとき、弊社のGoogleアカウント内で管理していたファイル一式を、クライアントのGoogleアカウントに移動ではなく、コピーしなければいけない機会がありました。 クライアントに依頼されて、 「承知しましたー！ アップしときまーす！」と軽く回答したものの、ブラウザ上でたくさんのファイルをまとめて引っ越しさせることが思ってる以上に手間だったので、みなさんが今後困らな
CSSの新しい疑似クラス関数「:is()」複数のセレクタを1つにまとめることができて、これは便利
CSSの新しい疑似クラス関数「:is()」が便利すぎるので紹介します。 :is()については、以前の記事で紹介した時はプレビュー版のみのサポートでしたが、ブラウザのサポートも進み、来年には普通に使用できるようになるかもしれません。 画像はツイートより 元ツイートは、こちら。 How slick :is(this CSS!?) 😏 removes the margins on all headers with a .tight class h1.tight, h2.tight....... 🤢 :is(h1,h2).tight { 🤓 } pic.twitter.com/y01f7uKPmA — Adam Argyle (@argyleink) October 13, 2020 ツイートは、hx要素のマージンをまとめて削除するスタイルシートが紹介されています。
CSSだけで任意のテキストを1クリックで全選択
Result 1クリックで全選択できるようにする的なやつです。オートコピーまでは出来ません 分かる人ならコードを見るまでも無くタイトルでピンと来てると思いますがuser-selectを使います csscode { -webkit-user-select: all; user-select: all; display: block; font-size:16px; padding: 20px; border: 1px dashed #999; color: #31808c; background-color: #fff; text-align: left; overflow: auto; }user-selectはテキストをコピペできないようにするuser-select: none;の情報が多いみたいですがallにするとこんな風に任意のテキストの全選択をサポートできるようになります can
JavaScriptのArrayを知る。大きな目標への小さな一歩 〜Array.prototype.fill編〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
JavaScriptのArrayを知る。大きな目標への小さな一歩 〜Array.prototype.fill編〜 こんにちは、フロントエンドエンジニアのザワです。 Are you hungry? 急に何だよ、と思われるのも当然です。 人の欲求というのは限りないものです。求めることは成長するために必要なことですが、求めすぎることは時に自分を必要以上に追い詰める刃になりかねません。ということでハードルは高くしすぎず、いつも通りマイペースに一歩ずつ進もうと思う今日この頃です。 さて、今回のArrayシリーズは、Array.prototype.fillです。こちらも名前からするに想像しやすいですよね。 「満たす」という意味を持つfillのことですから、配列を何かで満たすことなんだろうなとイメージできます。 さっそく自分の幸福度を満たすべく、fillメソッドを紐解いていきます。 ※ ここからの説明は
ncc - nodeプロジェクトを一つのファイルにまとめる
nodeではnpmを使ってライブラリをインストールしてプログラミングを行います。そして配布する際にはnode_modulesを除き、各自がインストールします。しかしネットワークが必要だったり、場合によってはライブラリのインストールに失敗するかも知れません。 そこで使ってみたいのがnccです。コードを一つにまとめてポータブルにしてくれるソフトウェアです。 nccの使い方 コード例です。 const chalk = require("chalk"); console.log(chalk.blue.bgRed.bold("Hello world!")); ビルドを使うとコードが生成されます。 $ ncc build ncc: Version 0.20.4 ncc: Compiling file index.js 44kB dist/index.js 44kB [439ms] - ncc 0.20
JavaScriptのArrayを知る。大きな目標への小さな一歩 〜Array.prototype.every編〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。環境の影響を受けやすい、根っからのミーハーなフロントエンドエンジニア・ザワです。「ミーハー」という言葉は死語なのでしょうか。 さて、今回のArrayシリーズは、そんなミーハーな私にはたまらないメソッドであるArray.prototype.everyをご紹介しましょう。 「every」と聞くと某ニュース番組を連想してしまいがちですが、「すべての」という意味ですよね。どういうメソッドなのか、この時点ですでに想像に容易いのではないでしょうか。 それではさっそく進めていきたいと思います。 ※ここからの説明は個人的に調べて解釈したざっくりとした説明になります。詳しく知りたい方はこちらへどうぞ Array.prototype.every()メソッドとは 配列の各要素に対してテストを行い、すべて通った場合にtrueを返します。 テストが失敗した時点でfalseを返して、以降の要素に対してのテ
配列の要素削除はsplice()で。（配列とかおれおれAdvent Calendar2018 – 06日目） | Ginpen.com
const arr = [11, 22, 33, 44, 55]; const index = 2; console.log(arr[index]); // => 33 arr.splice(index, 1); console.log(arr); // => [ 11, 22, 44, 55 ] 第2引数 1 を忘れるとごそっと消え去るので気を付けてください。 仕様 Array.prototype.splice() – JavaScript | MDN array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) 対象の配列は破壊的に変更されます。 引数 start … 削除開始する位置。先頭は 0 。負数の場合、後ろから数える deleteCount … 削除する数。初期値は array.length - start item1
CSS transformのmatrix()を一瞬で 完 全 理 解 できるやつ作ったよ。 | Ginpen.com
というわけでお探しのはこちらです。 Understanding transform:matrix() https://understanding-transform-matrix.ginpei.info/ スマホでも存分にご理解頂けます。 見た目 こんな感じ。 pic.twitter.com/GsxurJJbKI — 高梨ギンペイ (@ginpei_jp) November 13, 2018 この動画だけでも十分理解できそう。 matrix() とは 動かして完全理解して頂きましたら、改めてこの関数を紹介したいと思います。 matrix() は、 transform で使える各種関数すなわち translate(), scale(), rotate() 及び skew() を置き換え得る最強の関数です。配列の reduce() 的な立ち位置、といえばJavaScriptに明るい皆さまに通じ
【ディレクターもプログラミングを学ぼう #10】任意のディレクトリに格納されているファイル名を一括でリネームする方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、マネージャーのジャックです。 本日も、プログラミングネタで記事を執筆していこうと思います。 今回は、PHPでディレクトリに格納されているファイル名を取得するスクリプトを書いていきたいと思います。 背景 とある案件で、任意のディレクトリに格納されているたくさんのファイルをリネームする必要があり、 手動ではなく効率よく自動でリネーム実現できないかなぁと思ったのが背景です。 普段ファイルをリネームする際は、 rename コマンドを利用するのですが、 この rename コマンドは複数ファイルを一括してリネームする事ができないという問題点があります。 それなら、ファイル名を一括取得した後に rename コマンドを叩くスクリプトを書いたらラクなのでは？ いや、ラクでしょう！！という事で、スクリプトをサッと書いていきたいと思います。 要件 たとえば、test というディレクトリに複数の
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの「display: block;」が「display: block flow;」になる、displayプロパティで2値構文がサポートされます
レスポンシブ用にfont-size, margin, paddingなど、プロパティの値を一元管理できるSassの超軽量ライブラリ -SSCSS