Web制作者は要チェック！ Chrome 125で新しく追加された4つのCSSの機能
Chrome 125で追加された、CSSの新しい機能4つを紹介します。 今回のアップデートでは、今まではJavaScriptを使用しないと実装できなかったアンカーのポジションをCSSだけで設定できるようになりました。また、新しい関数やスクロールバーのカラースキームなど、Web制作者は要チェックです！ New in Chrome 125 Chrome 125 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSによるアンカーのポジション CSSのステップ値関数 round(), mod(), rem() 明度がほぼ100%または0のOklabおよびOklchカラーの不連続性を除去 スクロールバーのカラースキーム はじめに 5/15にリリースされたChrome 125で4
【React】オブジェクトリストをループしてコンポーネント化する - Qiita
はじめに プログラミング歴2ヶ月の素人が書いています。（間違っていたらご指摘ください） WesBos.com のオンラインビデオコースでReactを学習しています。 動画は以下から。 https://reactforbeginners.com/ 「Reactでオブジェクトリストをループしてコンポーネントを動的に複数生成する」ための学習メモです。 今回の目的 以下のような商品リストがオブジェクトリストとして存在するとします。 const fishes = { fish1: { name: "Pacific Halibut", image: "/images/hali.jpg", price: 1724, }, fish2: { name: "Lobster", image: "/images/lobster.jpg", price: 3200, }, fish3: { name: "Sea
WP REST APIのカスタムエンドポイントにカテゴリー名を追加した話
私にもありました。Wordpressでの一覧呼び出しはJs+RestAPIが正義だと思っていた時代が。。。 皆さんはWP REST APIを使用したことがありますか？ json形式で投稿を扱えるのですごく便利なのですが、「この情報が含まれていないからエンドポイントに追加したい」ということが割りと起こります。 特にカテゴリーはidしか含まれていないので、取得後、さらにカテゴリー名を取得しに行くという2度手間が発生します。 そこで今回はWP REST APIのエンドポイントにカテゴリー名やカテゴリーに付随する情報を追加してみましょう。 # この記事で解決すること WP REST APIのエンドポイント（post_type）にカテゴリー名を挿入することができる WP REST APIのエンドポイント（post_type）にカテゴリーに付随する情報を挿入することができる 前提 今回はカテゴリーのn
WordPressのバージョン5.5.0から追加されたXMLサイトマップ自動出力機能を紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
WordPress5.5.0から追加された新しい機能についてご紹介します。 この記事を執筆中のWordPressの最新バージョンは5.8.2なので、なんで今更と思われてしまうかもしれませんが、少し驚いた機能だったのでこうして記事にしてしまいました。 WordPressはXMLサイトマップを標準で出力する？ しない？ これまでWordPressではXMLサイトマップはそのままでは出力されませんでしたので、プラグインを利用したり、または自前で用意したりといったかたちで対応をしてきたと思います。あるとき、WordPressをいじっているとまだ準備していないはずのXMLサイトマップが出力されていることに気づきました。 WordPress5.5からはデフォルトでXMLサイトマップが出力されるようになっていたのです。それがどのような機能なのかを簡単に見ていきたいと思います。 XMLサイトマップには、設
【JavaScript】insertAdjacentHTMLでHTML要素を追加する【挿入位置指定】
text 「text」にはHTMLやXMLとして挿入することができる文字列を指定します。 下記はinsertAdjacentHTMLのpositionに各値を指定して実行した際の挿入場所を表したものです。コメントの位置に「text」に記述したHTML要素が挿入されます。 <!-- beforebegin --> <div> <!-- afterbegin --> intotheprogram <!-- beforeend --> </div> <!-- afterend --> insertAdjacentHTMLでHTML要素を追加する では、実際に各「position」にHTML要素を追加してみます。下記のHTML要素に対して、段落のタグを追加します。 <div id="box"> <h1>Title</h1> </div> 各「position」を指定した際の実行結果も記載しておりま
【WordPress】カスタムタクソノミーを親なしのチェックボックスで追加する | バシャログ。
こんにちはfujiharaです。自宅のwifi環境に中継機を導入したら ネットワーク環境が劇的に変化してマジすげぇと感動しています。 今回はカスタムタクソノミーを追加したときに、管理画面で親なし・チェックボックスにする 方法をご紹介します。 方法 カスタムタクソノミーを通常追加するときには以下のコードで 実現すると思います。(詳細オプションは省いて、無名関数で実装しています) add_action( 'init', function () { register_taxonomy( 'bashalog', 'post', [ 'label' => 'バシャログ', ] ); } ); 上記で追加されると以下のようになります。テキストフィールドで追加していく方法 まずはこれをチェックボックスにします。meta_box_cb に post_categories_meta_boxを指定 add_a
JavaScriptのモダンな書き方 - ES2020のオプショナルチェーン、null合体演算子、動的import、globalThis等を解説 - ICS MEDIA
JavaScriptのモダンな書き方 - ES2020のオプショナルチェーン、null合体演算子、動的import、globalThis等を解説 JavaScriptの仕様であるECMAScriptは年次で仕様が更新されています。ECMAScript 2020（ES2020）は2020年6月にリリースとなりました。現行のすべてのブラウザでES2020の機能は利用できますが、フロントエンドエンジニアにとって使いこなしたい記法ばかりです。 本記事ではES2020に焦点をあて、JavaScriptの新しい記述方法のメリットと使いどころを解説します。 オプショナルチェーン Optional Chaining（オプショナルチェーンやオプショナルチェーニングと呼ばれています）とは、?.構文を用いてnullやundefinedになりうる値へ安全にアクセスできる仕組みです。 利用シーン nullやunde
Gutenbergで既存のブロックにカスタム設定を追加する方法
Posted: 2019.03.12 / Category: WordPress / Tag: Gutenberg Gutenbergはサイドバーに「高度な設定」というクラス名を入力できる欄があるのですが、これだとクラス名を覚えていなくてはいけなくて、制作者以外の人に入力してもらうのが難しいですよね。 ということで今回はサイドバーに設定項目を追加してボタンでクラスの切り替えをできるようにしてみます。 動作環境 WordPress 5.1 Create Guten Block Create Guten Blockの導入は下記も参考にしてください。 Create Guten BlockでGutenbergのカスタムブロック開発環境を構築する 完成イメージ 段落のマージンをボタンで切り替えて調節できるようにしてみます。 コンポーネントの読み込み 最初に必要なコンポーネントを読み込みます。 blo
Google Calendar API と PHP で 予定の取得と追加をしてみるよ（準備編） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
半年前ぐらいに一眼カメラを買ってカメラ沼にズブズブとハマっているハルです。 最初、ズームレンズを買ったのですが、単焦点レンズというものに手を出したいなとも思っています。 ですが、まだ今のレンズのローンがあり、すぐには買えない……。かなしいです。 さて、最近、Google Calendar APIをつかって、自分のカレンダーに予定の追加と削除をしたくなりました。みなさんもそういうとき、ありますよね？ そこで今回の記事では、Google Calendar APIを使うために必要な下準備をしていきます。 ちなみに、もう下準備終わってるよ！ という方はこちらの後編の記事をご覧ください。 Google Calendar APIの準備 Google Cloud Platform にアクセスします。 Google Cloud Platform: https://console.cloud.google.
脱jQueryの道 初級編
Posted: 2019.02.12 / Category: javascript いつもはjQueryを使用していますが、素のJavaScriptでクリックイベントやクラスの切り替えを行ってみます。 要素取得する セレクタで指定したid・classの要素を取得してみましょう。 これがないと始まりませんね。 要素を一つだけ取得する 以前は、idがgetElementByIdで、classはgetElementsByClassNameを使用していましたが、最近はquerySelectorが主流です。 CSSのセレクタのように要素名を指定するか、.でclass、#でidを取得できます。 JavaScript // 要素名で取得 document.querySelector('div'); // classを取得 document.querySelector('.example'); // id
配列の要素挿入、置き換えもsplice()で。Vue.jsでも大丈夫。（配列とかおれおれAdvent Calendar2018 – 07日目） | Ginpen.com
const arr = [11, 22, 33]; const index = 1; const value = 99; arr.splice(index, 0, value); console.log(arr); // => [ 11, 99, 22, 33 ] const arr = [11, 22, 33]; const index = 1; const value = 99; arr.splice(index, 1, value); console.log(arr); // =>[ 11, 99, 33 ] 第2引数を 0 にするとただ挿入するだけ、 1 だと置き換えます。 仕様 Array.prototype.splice() – JavaScript | MDN array.splice(start[, deleteCount[, item1[, item2[, ...]]]]
アスタリスク表示してマウスホバーで注釈表示
Result 注釈がある事をアスタリスク（これ→*）で明示し、マウスホバーで表示する、みたいなの。 dfnタグのtitle属性をテキスト化する形で表示しています。 cssdfn[title] {/*dfnタグをヘルプカーソルに*/ cursor: help; position: relative; font-style: normal; } dfn[title]:after {/*疑似要素でアスタリスクを表示、注釈がある事を明示する*/ content: '*'; color: red; display: inline; text-align: right; white-space: nowrap; vertical-align: super; font-size: 0.6em; padding-left: 2px; } dfn[title]:hover:after {/*title属性を
テーブルのセルが空だった場合にハイライトしたり文字を挿入したり
Result 5年前にjQueryでテーブル内で空の要素をハイライトさせる、という記事を書いたのを偶然確認したのでCSS版みたいなものを書いておきます。 特別なことはしてなくて、今は:emptyを使える時代になった、みたいな内容です。 セル毎に異なるスタイルや文字にしたい場合はclass付与等で対応してください csstd:empty{/*tdが空なら背景をyellowに*/ background:yellow; } td:empty:before{/*背景が空なら文字挿入*/ content:"無し"; }html<table> <tr> <th>順番</th> <th>名前</th> <th>数</th> <th>金額</th> </tr> <tr> <td>1</td> <td>りんご</td> <td>10</td> <td>2000円</td> </tr> <tr> <td>2<
CodeCopy - GistやGitHubにあるコードを簡単にコピーできる機能拡張/亜ドン MOONGIFT
GitHubやGistなどプログラミングコードが記載されているサイトにおいて、そのコードをコピーしたいと思うことは多々あります。マウスで選択しても良いのですが、最初や最後の文字がうまく選択できなかったりするとストレスを感じるでしょう。 そこで使ってみたいのがCodeCopyです。コードのコピーが簡単にできるようになるGoogle Chrome機能拡張/Firefoxアドオンです。 CodeCopyの使い方 機能拡張をインストールすると、コードの書かれた部分の右側にコピーボタンが表示されます。 後はアイコンをクリックすればコードがコピーされます。とても簡単なのでコピーが捗るようになるでしょう。マウスで選択してコピーという二手間を一度のクリックで解決してくれる便利なソフトウェアです。 CodeCopyはGoogle Chrome機能拡張/Firefoxアドオンのオープンソース・ソフトウェア（M
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JSXの中にインラインスクリプトを埋め込む - React | nju33
https://www.web-development-kb-ja.site/ja/content/%E6%9C%80%E5%88%9D%E3%81%AE%E6%AE%B5%E8%90%BD%E3%81%A82%E7%95%AA%E7%9B%AE%E3%81%AE%E6%AE%B5%E8%90%BD%E3%81%AE%E5%BE%8C%E3%81%AB%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B/956897715/
HTML要素の追加方法いろいろ 挿入位置で分類 - Qiita