chaika.hatenablog.com Open in urlscan Pro
54.199.90.60 Public Scan

Back to summary

Submitted URL:
http://chaika.hatenablog.com/
Effective URL:
https://chaika.hatenablog.com/
Submission: On January 09 via api (January 9th 2024, 10:18:40 am UTC) from US — Scanned from JP

Form analysis
1 forms found in the DOM

GET https://chaika.hatenablog.com/search

<form class="search-form" role="search" action="https://chaika.hatenablog.com/search" method="get">
  <input type="text" name="q" class="search-module-input" value="" placeholder="記事を検索" required="">
  <input type="submit" value="検索" class="search-module-button">
</form>

Text Content

読者になる



かもメモ


自分の落ちた落とし穴に何度も落ちる人のメモ帳


2024-01-09


CSS 日本語で <WBR /> が効かないにハマる

CSS Responsive HTML Tips

レスポンシブなサイトを実装する際に、モバイルなどエリアが小さくなる時にいい感じにテキストを改行させたい・デザイナーの要望で改行位置を固定させたいケースがあります。改行位置のためにメディアクエリで
display を切り替えるのはイケてないので避けたく <wbr /> を使うことが多いのですが日本語だと<wbr />
でいい感じに改行されない問題に当たったのでメモ。

> <wbr> は HTML の要素で、改行可能位置 —
> テキスト内でブラウザーが任意で改行してよい位置を表しますが、この改行規則は必要のない場合は改行を行いません。
> cf. <wbr>: 改行可能要素 - HTML: ハイパーテキストマークアップ言語 | MDN


日本語だと <WBR /> が無視されて改行されてしまう問題

日本語のテキスト内に <wbr /> を置くだけだと、ブラウザに関わらず画面幅に応じてどこでもテキストが改行されてしまう。
英文なら <wbr /> が効くが、日本語文章の場合は <wbr /> があろうがなかろうが関係なく文字が折り返されてしまう。
これは単純にブラウザが英文なら単語などを認識できるが、日本語だと単語などを認識していないために起こっている現象だと思われる


結論 WORD-BREAK: KEEP-ALL + `OVERFLOW-WRAP: BREAK-WORD" を指定すれば OK

word-break: keep-all だけだと、コンテナより長い語句があるとコンテナからはみ出してしまうので、overflow-wrap:
break-word をあわせて指定するといい感じになる。逆に overflow-wrap: break-word だけだと <wbr />
関係なしに折り返されてしまう。




SAMPLE



WORD-BREAK と OVERFLOW-WRAP

 * word-break … 表示エリアの端に文字が来た時に、その文字が単語の途中かどうか関係なしに途中で改行させるかどうか
 * overflow-wrap … 表示エリアに収まらない単語が来たときに、単語の途中で改行させるかどうか

> word-break とは対照的に、 overflow-wrap は単語全体があふれずに行内に配置できない場合にのみ、改行を生成します。
> cf. overflow-wrap - CSS: カスケーディングスタイルシート | MDN

WORD-BREAK

> normal … 既定の改行規則を使用します。
> break-all … CJK (中国語、台湾語、日本語、韓国語)
> 以外のテキストにおいて、単語中などでの文字の改行に関する禁則処理を解除し、どの文字の間でも改行するようにします。
> keep-all … CJK テキストの改行を許可しません。 CJK 以外のテキストについては normal と同じ挙動となります。
> cf. word-break - CSS: カスケーディングスタイルシート | MDN

OVERFLOW-WRAP

以前は word-wrap だったが、overflow-wrap に解明されたらしい

> normal … 通常の単語の分割位置 (2 つの単語の間の空白など) でのみ改行することを示します。
> anywhere … あふれることを避けるために、行内にその他の分割可能な位置がない場合、その他の分割できない文字列 — 長い単語や URL —
> が任意の場所で分割されることがあります。分割位置にハイフン文字は挿入されません。
> break-word … anywhere
> の値と同様に、行内にその他の分割可能な位置がない場合、通常は分割可能でない単語が任意の場所で分割されますが、コンテンツの最小固有寸法を計算する時に、単語分割によって導入された折り返し可能位置が考慮されません。
> cf. overflow-wrap - CSS: カスケーディングスタイルシート | MDN

日本語鬼門。
おわり

--------------------------------------------------------------------------------

[参考]

 * <wbr>: The Line Break Opportunity element - HTML: HyperText Markup Language |
   MDN
 * 【wbrタグ】HTMLとCSSでレスポンシブに改行する
 * Webブラウザの日本語改行問題 -改行を実現するHTML/CSS-（1） #JavaScript - Qiita
 * 【CSS】overflow-wrap (word-wrap) と word-break の違い | Hazu Labo
   * word-break - CSS: カスケーディングスタイルシート | MDN
   * overflow-wrap - CSS: カスケーディングスタイルシート | MDN















スペースキーで見た目を整えるのはやめなさい ~8割の社会人が見落とす資料作成のキホン

 * 作者:四禮 静子
 * 技術評論社

Amazon





給料はあなたの価値なのか――賃金と経済にまつわる神話を解く

 * 作者:ジェイク・ローゼンフェルド
 * みすず書房

Amazon



#CSS #Responsive #HTML

ききき きき (id:kikiki-kiki) 10時間前




広告を非表示にする

コメントを書く
 * もっと読む

2023-12-18


GOOGLE SPREADSHEET VLOOKUP と ARRAYFORMULA でシートから検索した行の値を自動的に取得しする

Spreadsheet

やりかを良く忘れるのでメモ

 1. 特定のセルの値と合致 / 含む、行を探してその中からあるセルの値を取得する(VLOOKUP)
 2. 上記の処理を列全体で実行する (ARRAYFORMULA)


他のシートから検索した値と合致した行の値を取得する (VLOOKUP)

=VLOOKUP(検索キー, 範囲, 番号, [並べ替え済み])




上記のような商品の data シートが有り、A列にある販売したの商品コードと合致する商品名と価格を反映させたい
data シートの A〜C列を検索して、商品名 B 列と価格の C 列の値を取り出せば良い
商品名のB列は検索する A〜C列の 2番目、価格のC列は 3番目なので、下記のようにすればOK

// 商品名
=VLOOKUP(A2, data!A2:C, 2, FALSE)
// 売上
=VLOOKUO(A2, data!A2:C, 3, FALSE)


VLOOKUP は単体の値しか取得できないので、商品名・売上のそれぞれのセルにマクロを書く必要がある


ARRAYFORMULA を使うと複数のセルの値が取得できる

> 配列数式から返された値を複数行または複数列に表示したり、非配列関数で配列を使用したりすることができます。
> cf. ARRAYFORMULA - Google ドキュメント エディタ ヘルプ

ARRAYFORMULA は扱う値を配列にできるので、VLOOKUP で取得する値を配列にし複数セルを取得させることができる
検索して取得したいデータが検索する範囲の2番目と3番目のセルの場合は {2, 3} のように指定すればOK

=ARRAYFORMULA(VLOOKUP(A2, data!A2:C, {2,3}, FALSE))


(出力が 2セルになるので 売上 に入力していたマクロは削除する)




VLOOKUP の処理を列全体に適応させる (ARRAYFORMULA)

ARRAYFORMULA で検索する値を範囲に変更すれば、A 列にある売上商品コードと合致する商品名・売上 (価格) を自動的に反映させられる
検索範囲を A列 A2:A に変更すればOK

=ARRAYFORMULA(VLOOKUP(A2:A, data!A2:C, {2,3}, FALSE))




適応範囲が A 列の最後までなので、検索条件の値に依っては空白のセルにも VLOOKUP が適応されてしまう問題がある


空白のセルを除外する

= IF(論理式, TRUEの時の値, FALSEの時の値)


IF を用いて検索条件が空白のなら空白のままにするようにすれば良い

=ARRAYFORMULA(IF(A2:A="", "", VLOOKUP(A2:A, data!A2:C, {1,3}, FALSE)))




いい感じになった！


* (ワイルドカード) を使うことで VLOOKUP の検索条件を曖昧にできる

検索条件に * を含めた文字列にすると、前方一致・後方一致・含むにすることができる

// 前方一致
=VLOOKUP(A2&"*", data!:A2:C, 2, FALSE)
// 後方一致
=VLOOKUP("*"&A2, data!:A2:C, 2, FALSE)
// 含む
=VLOOKUP("*"&A2&"*", data!:A2:C, 2, FALSE)


文字列結合をしているので、検索条件のセルが文字列である必要がある
文字列でないとエラーになるので、その場合は値を文字列変換すればよい

おわり

--------------------------------------------------------------------------------

[参考]

 * VLOOKUP - Google Docs Editors Help
 * ARRAYFORMULA - Google Docs Editors Help
 * VLOOKUP関数の使い方｜指定した値と一致するデータを取得する【図解】｜スプレッドシートの使い方
 * Arrayformula関数とは？便利な使い方や実例も！（Googleスプレッドシート） - 初心者脱出！SEO情報ブログ
 * Googleスプレッドシートの小技｜あかやす











ブラウザだけで学べる Googleスプレッドシート プログラミング入門

 * 作者:掌田 津耶乃
 * マイナビ出版

Amazon





Anytime Anywhere (通常盤) (特典なし)

 * アーティスト:milet
 * SME

Amazon



#SpreadSheet #GoogleSpreadSheet

ききき きき (id:kikiki-kiki) 22日前




広告を非表示にする

コメントを書く
 * もっと読む

2023-12-13


NODE.JS URL を作りたくて PATH.JOIN を使うと HTTPS:// が HTTPS:/ に変換されてしまう

JavaScript Node.js Tips

SSG 時にパスをドメインから始まるものに変更したいという要件があって、path.join でドメインとパスを合体させてハマってしまったのでメモ

環境

 * Node.js v18.18


PATH.JOIN に URL を渡すとHTTPS:// が HTTPS:/ になってしまう

http://, https:// から始まる URL もパスだよね？と思って、path.join() で結合したら protocol の // が /
に変換されてしまい 404 な URL になってしまった

const path = require('path');

const host 1= 'https://example.com';
path.join(host1, '/foo');
// => https:/example.com/foo

const host2 = 'http://example.com';
path.join(host2, '/bar');
// => http:/example.com/bar


path.resolve はもっと壊れる

const path = require('path');

const host 1= 'https://example.com';
path.resolve(host1, '/foo');
// => /foo

const host2 = 'http://example.com';
path.resolve(host2, '/bar');
// => /bar


どうやら path モジュールは URL はパスではないという扱いなのかもしれないようです


URL を組み立てる時は NEW URL を使うほうが良さそう



> new URL(input[, base])
> input The absolute or relative input URL to parse. If input is relative, then
> base is required. If input is absolute, the base is ignored. If input is not a
> string, it is converted to a string first.
> base The base URL to resolve against if the input is not absolute. If `bas is
> not a string, it is converted to a string first.

new URL() はオブジェクトを返すので .href プロパティで結合した URL が取得できる

const host 1= 'https://example.com';
new URL('/foo', host1).href;
// => https://example.com/foo

const host2 = 'http://example.com';
new URL('bar', host2).href;
// => http://example.com/bar



NEW URL は BASE が URL でない時はエラーになる

undefined や URL でない文字列の時 Invalid URL というエラーが発生する

new URL('/foo', undefined);
// => TypeError [ERR_INVALID_URL]: Invalid URL
new URL('/foo', '/');
// => TypeError [ERR_INVALID_URL]: Invalid URL
new URL('/foo', '//');
// => TypeError [ERR_INVALID_URL]: Invalid URL


/ 始まりな絶対パスにしたいケースと http から始まる URL にしたいケースが混ざる場合は、URL にしたい時だけ new URL
に渡す場合分けが必要になる


NEW URL の INPUT が URL の場合 BASE は無視される

パスの生成をユーティリティ化すると、input に渡される値が制御出来ない事も想定される。
new URL の場合 input が URL だと base の値は無視される仕様になっているっぽい

const HOST = 'https://example.com' as const;
const buildPath = (input: string) => {
  return new URL(input, HOST).href;
};

buildPath('/images/sample.png');
// => https://example.com/images/sample.png

buildPath('https://sample/images/test.png')
// => https://sample/images/test.png


渡されるパスが / 始まりか担保されない、環境変数にあるドメインが / で終わるか担保されない。という条件だったので、path.join() で URL
作るのが安全やろ〜って軽い気持ちでユーティリティ作ってなんで https:/ になってるの？？？？？ってはまってしまいました

new URL protocol を https://, https:// 以外だと実装差もあるみたいですが、URL
を組み立てる時はこちらを使ったほうが良さそう。と学びました！
学び〜 ₍ᐢ⑅•ᴗ•⑅ᐢ₎

--------------------------------------------------------------------------------

[参考]

 * path.join results in One Slash after [http:/] instead of 2 slashes [http://]
   for both http and https · Issue #44047 · nodejs/node · GitHub
 * URL | Node.js v18.19.0 Documentation
 * [Node.js] 新旧APIでのURLパースの違い #JavaScript - Qiita
 * JavaScriptのnew URL()には気をつけろ
 * Path | Node.js v18.19.0 Documentation









ハンズオンNode.js

 * 作者:今村 謙士
 * オライリー・ジャパン

Amazon





Real World HTTP 第2版 ―歴史とコードに学ぶインターネットとウェブ技術

 * 作者:渋川 よしき
 * オライリー・ジャパン

Amazon





URL (期間生産限定盤) (特典なし)

 * アーティスト:坂口有望
 * ソニー・ミュージックレーベルズ

Amazon



#JavaScript #Tips #Node.js

ききき きき (id:kikiki-kiki) 27日前




広告を非表示にする

コメントを書く
 * もっと読む

次のページ

検索


永遠の初心者

Я чайка!
無職のデザイナーが描いています。
アイカツ！が好きです。人生の大切なことはアニメから学んだ。

読者です 読者をやめる 読者になる 読者になる


放射線について考えよう。 WEB・本のイラストを描かせてい頂きました！

Buy me a coffee
最新記事
 * 2024-01-09
   CSS 日本語で <wbr /> が効かないにハマる
 * 2023-12-18
   Google Spreadsheet VLOOKUP と ARRAYFORMULA でシートから検索した行の値を自動的に取得しする
 * 2023-12-13
   Node.js URL を作りたくて path.join を使うと https:// が https:/ に変換されてしまう
 * 2023-12-11
   Vite React (TypeScript) vite-plugin-svgr で SVG をコンポーネントとして扱う
 * 2023-12-07
   Git squash merge された PR に依存する PR を Fast Forward に rebase する Tips


アクセスの多い記事
 * Git 間違って rebase しちゃったのを元に戻したい
 * npm パッケージをアップデートしたい
 * Googleスプレッドシート 他のシートから特定のセルを条件付きで取ってきて表示させたい
 * Googleスプレッドシート 時間を数値にして計算したい。
 * Googleスプレッドシート 関数を含めた複数の値を文字列結合したい。

月別アーカイブ
 * ▼ ▶
   2024 (1)
   * 2024 / 1 (1)
 * ▼ ▶
   2023 (73)
   * 2023 / 12 (4)
   * 2023 / 11 (6)
   * 2023 / 10 (6)
   * 2023 / 9 (4)
   * 2023 / 8 (9)
   * 2023 / 7 (3)
   * 2023 / 6 (5)
   * 2023 / 5 (2)
   * 2023 / 4 (8)
   * 2023 / 3 (9)
   * 2023 / 2 (14)
   * 2023 / 1 (3)
 * ▼ ▶
   2022 (87)
   * 2022 / 12 (10)
   * 2022 / 11 (6)
   * 2022 / 10 (11)
   * 2022 / 9 (5)
   * 2022 / 8 (12)
   * 2022 / 7 (6)
   * 2022 / 6 (12)
   * 2022 / 5 (12)
   * 2022 / 3 (4)
   * 2022 / 2 (4)
   * 2022 / 1 (5)
 * ▼ ▶
   2021 (74)
   * 2021 / 12 (7)
   * 2021 / 11 (7)
   * 2021 / 10 (9)
   * 2021 / 9 (8)
   * 2021 / 8 (5)
   * 2021 / 7 (11)
   * 2021 / 6 (7)
   * 2021 / 5 (5)
   * 2021 / 4 (7)
   * 2021 / 3 (5)
   * 2021 / 2 (1)
   * 2021 / 1 (2)
 * ▼ ▶
   2020 (114)
   * 2020 / 12 (11)
   * 2020 / 11 (7)
   * 2020 / 10 (13)
   * 2020 / 9 (7)
   * 2020 / 8 (10)
   * 2020 / 7 (13)
   * 2020 / 6 (12)
   * 2020 / 5 (9)
   * 2020 / 4 (12)
   * 2020 / 3 (9)
   * 2020 / 2 (6)
   * 2020 / 1 (5)
 * ▼ ▶
   2019 (116)
   * 2019 / 12 (7)
   * 2019 / 11 (6)
   * 2019 / 10 (8)
   * 2019 / 9 (6)
   * 2019 / 8 (5)
   * 2019 / 7 (9)
   * 2019 / 6 (10)
   * 2019 / 5 (17)
   * 2019 / 4 (7)
   * 2019 / 3 (5)
   * 2019 / 2 (16)
   * 2019 / 1 (20)
 * ▼ ▶
   2018 (73)
   * 2018 / 12 (17)
   * 2018 / 11 (7)
   * 2018 / 10 (8)
   * 2018 / 9 (5)
   * 2018 / 8 (9)
   * 2018 / 7 (2)
   * 2018 / 6 (5)
   * 2018 / 5 (3)
   * 2018 / 4 (4)
   * 2018 / 3 (4)
   * 2018 / 2 (5)
   * 2018 / 1 (4)
 * ▼ ▶
   2017 (66)
   * 2017 / 12 (5)
   * 2017 / 11 (4)
   * 2017 / 10 (4)
   * 2017 / 9 (4)
   * 2017 / 8 (2)
   * 2017 / 7 (10)
   * 2017 / 6 (7)
   * 2017 / 5 (4)
   * 2017 / 4 (13)
   * 2017 / 3 (7)
   * 2017 / 2 (2)
   * 2017 / 1 (4)
 * ▼ ▶
   2016 (76)
   * 2016 / 12 (6)
   * 2016 / 11 (4)
   * 2016 / 10 (6)
   * 2016 / 9 (2)
   * 2016 / 8 (4)
   * 2016 / 7 (6)
   * 2016 / 6 (11)
   * 2016 / 5 (3)
   * 2016 / 4 (6)
   * 2016 / 3 (15)
   * 2016 / 2 (7)
   * 2016 / 1 (6)
 * ▼ ▶
   2015 (88)
   * 2015 / 12 (2)
   * 2015 / 11 (5)
   * 2015 / 10 (8)
   * 2015 / 9 (11)
   * 2015 / 8 (7)
   * 2015 / 7 (5)
   * 2015 / 6 (5)
   * 2015 / 5 (4)
   * 2015 / 4 (12)
   * 2015 / 3 (15)
   * 2015 / 2 (5)
   * 2015 / 1 (9)
 * ▼ ▶
   2014 (59)
   * 2014 / 12 (3)
   * 2014 / 11 (4)
   * 2014 / 10 (9)
   * 2014 / 9 (3)
   * 2014 / 8 (5)
   * 2014 / 7 (7)
   * 2014 / 6 (7)
   * 2014 / 5 (3)
   * 2014 / 4 (6)
   * 2014 / 3 (12)

カテゴリー
 * Accessibility (1)
 * Adobe (6)
 * Adobe Creative Cloud (2)
 * Aikatsu! (1)
 * Ajax (11)
 * anyenv (2)
 * Apache (8)
 * Arudino (1)
 * AWS (10)
 * AWS Amplify (3)
 * AWS CDK (2)
 * AWS Lambda (6)
 * Babel (9)
 * Blog (25)
 * Book (9)
 * Bower (1)
 * cache (3)
 * Cache_Lite (2)
 * CakePHP3 (3)
 * Capybara (4)
 * CentOS (3)
 * Chakra UI (5)
 * ChatGPT (1)
 * Chrome (5)
 * CI (1)
 * Cloud Firestore (4)
 * CommonJS (6)
 * compass (Sass) (4)
 * Composer (6)
 * Contact Form 7 (6)
 * cookie (1)
 * CORS (2)
 * CSS (65)
 * CSS in JS (3)
 * CSV (1)
 * Dark Mode (2)
 * Design (28)
 * Docker (15)
 * DynamoDB (3)
 * Edge-BUG (1)
 * Enzyme (6)
 * ES2015 (ES6) (30)
 * ES2017 (6)
 * ES5 (6)
 * ESLin (1)
 * ESLint (16)
 * ESModules (6)
 * Express (18)
 * Express 4.x (10)
 * fetch (2)
 * Firebase (10)
 * Flask (2)
 * Functional Programming (12)
 * git (40)
 * git submodule (3)
 * GitHub (18)
 * Gmail (5)
 * Google Analytics (1)
 * Google Apps Script (GAS) (9)
 * Google Drive (20)
 * GoogleDomains (1)
 * GoogleMaps (3)
 * GraphQL (7)
 * Grunt (4)
 * Gulp (24)
 * Haml (2)
 * Hasura (1)
 * Heroku (1)
 * heteml (2)
 * Homebrew (20)
 * HTML (37)
 * i18n (4)
 * IE-BUG (5)
 * illustrator (4)
 * iOS (2)
 * IoT (1)
 * iPad (2)
 * iPhone (6)
 * iTunes (1)
 * Java (1)
 * JavaScript (299)
 * Jest (14)
 * jotai (5)
 * jQuery (31)
 * jsHint (1)
 * JSON (4)
 * JSX (8)
 * JWT (3)
 * Laravel (2)
 * Linter (3)
 * Linux (1)
 * localhost (2)
 * Mac (48)
 * Mac M2 (4)
 * Mail (1)
 * Markdown (6)
 * mashup (1)
 * Material UI (2)
 * mongoDB (1)
 * Multisite (3)
 * MySQL (29)
 * Netlify (1)
 * Next.js (20)
 * nginx (3)
 * Node.js (91)
 * nodebrew (2)
 * note (5)
 * npm (20)
 * Nuxt.js (2)
 * nvm (2)
 * obniz (1)
 * PDO (6)
 * PEAR (2)
 * Photoshop (1)
 * PHP (102)
 * phpbrew (3)
 * PHPMailer (1)
 * Pinterest (1)
 * PostCSS (2)
 * PostgreSQL (2)
 * Prettier (4)
 * Processing (1)
 * Promise, async / await (6)
 * pug (jade) (14)
 * Python3 (21)
 * Raspberry Pi (1)
 * React (108)
 * React Hooks (19)
 * React-Query (1)
 * react-router-dom (2)
 * Recoil (4)
 * Rect (1)
 * Redis (4)
 * Responsive (11)
 * RESR API (1)
 * Rollup (3)
 * RSpec (7)
 * Ruby (37)
 * Ruby on Rails (11)
 * Safari (2)
 * Sass (SCSS) (18)
 * security (2)
 * SEO (1)
 * Serverless (5)
 * setup (50)
 * shell (2)
 * SIM (4)
 * Sinatra (1)
 * Slim (1)
 * Slim (PHP) (1)
 * SPA (4)
 * Spreadsheet (29)
 * SQL (2)
 * SSH (3)
 * Stash (1)
 * stylus (15)
 * Sublime Text (7)
 * Svelte (2)
 * svg (4)
 * Tailwind CSS (1)
 * Test (2)
 * testing-library (2)
 * TIL (Today I Learned) (1)
 * Tips (191)
 * TLS (1)
 * TLS (SSL) (1)
 * Tools (1)
 * Twitter (2)
 * TypeScript (127)
 * Unit Test (15)
 * Vercel (1)
 * vim (1)
 * VirtualBox (2)
 * Vite (13)
 * VS Code (11)
 * Vue.js (1)
 * Webpack (23)
 * Windows10 (2)
 * WIP (1)
 * WordPress (70)
 * Works (1)
 * XHR (15)
 * yarn (4)
 * zsh (3)
 * さくらサーバー (3)
 * はてなブログ (2)
 * ドットインストール (3)
 * 家計を支える技術 (1)
 * 海外旅行 (2)
 * 非同期処理 (4)

CLOSE


かもメモ

Powered by Hatena Blog | ブログを報告する



引用をストックしました

ストック一覧を見る 閉じる

引用するにはまずログインしてください

ログイン 閉じる

引用をストックできませんでした。再度お試しください

閉じる

限定公開記事のため引用できません。

読者です 読者をやめる 読者になる 読者になる
196

chaika.hatenablog.com Open in urlscan Pro 54.199.90.60 Public Scan

Form analysis 1 forms found in the DOM

GET https://chaika.hatenablog.com/search

Text Content

chaika.hatenablog.com Open in urlscan Pro
54.199.90.60 Public Scan

Form analysis
1 forms found in the DOM