紙屋のWEB参考メモ @kamiya-memo-nagoya - Tumblr Blog

この機能を待ち望んでいた人は、多いと思います！ 6月にアップデートされたChrome 149で、CSS GridやFlexboxのギャップをCSSで装飾できるようになりました。言い換えると、コンテナ間

cssのflexやgridに対する強化対応が来た。 gapを利用するのはもはや一般的になってきたが、これに対してborderの装飾ができるようになったらしい。プロパティ増えすぎ～・・・わけわからんくなる・・・・

まぁ慣れたら使いやすいんだろうけどね！ブラウザ対応が平準化してきたらなるべく使っていきたい所存。子要素へのプロパティで設定してく既存の記載よりも親で全てのルールを管理できる今の方が使いやすいとは思った。（それに関してはfloatの頃から思っているｗ）なので、今後の動向を見ながら実装に進めて行きたい。

今後忘れたときのためにメモする

#css #flex #grid #gap

テキストを棒グラフや折れ線グラフ、円グラフに変換して表示するフォントがGoogle Fontsで利用できるようになったので紹介します。たとえば、{b:15,45,80,30,60}というテキストは5

Googleフォントで使える手軽なグラフの表示。元々グラフ系は画像をを作成して、それをimgタグなどで貼り付けるのが主流だった。そこから時代は代わりjsなどでグラフを生成できるようになった。

でもこれからはもっと簡単にできる。これはフォントを読み込み、呼び出すグラフコードと数字を入れただけで完成する。なんとシンプルな作りなんだ。ただ現状、グラフのアニメーションがよくあると思うが、そういった動くグラフのようなものはこれではできない。

そのため動かすグラフであればjsを同じく使っていくのがいいだろう。

あと円グラフを複数の項目でいれるのも現状無理である。フォントに水準を置いているため、違いを出すことができないからだ。

こういった懸念点はあれど、それを差し引いても使い勝手がいいものであると考える。

今後使うときのためにメモしておく。

#font #google fonts #graph

こんにちは。フロントエンドエンジニアの奥村です。 JS（JavaScript・jQuery）を使わないで、スクロールの途中で要素を固定できる便利なCSSプロパティ、position: stickyを使用する際の注意点をまとめたいと思います。

position: stickyが効かないと思った時によく調べる記事。

stickyって便利なんだけどtableとかサイドナビとか使ってて、たまに効かなくなる時があって、、、、しかも何が原因かいまいちコード見てもわからんのよね・・・ｗ

そんなときにふと調べるとこの記事が見つかり、いつも解決に至る。正直overflow:hiddenが関係してるなんて見てもわからん！！！ｗ

また調べたい時があるかも知れないそんなときのためにメモしておく。

#css #sticky #position

clip-pathの記事おすすめ。矢印を作るための実装方法が記載されている。

結構三角（▶）とかは作れるんだけど、（＞）のタイプを作れる記事はなかなかない。てかどうやって作っているのかよくわからんｗ

でもこれ通りにやれば綺麗にでるし、例えばサイズ変更して、形くずれても、AIで投げたら綺麗にして返してくれる。＞のためだけにブックマークしてもいいくらいｗ

今後も忘れた時のためにメモしておく。

#shape #css #arrow

みなさんは仕事でスクリーンショットを撮る際に、こんな悩みを感じていませんか？競合サイトのランディングページ、参考にスクショしたいけど全部写らない… Webサイトの修正指示、何度もPrint Screenキーから貼り付けるのが面倒… このような作業は時間がかかる

chromeにフルスクリーンショットを保存する方法。これ結構楽だし簡単にできるから便利。できればボタン一個でこれが実行されるように拡張機能を作りたい所ではあるが、まぁ一旦これをそのまま利用すればええか・・・。忘れたときのためにメモしておく。

#chrome #screen shots #google chrome

A tool that calculates the CSS clamp formula to interpolate between two values in a given viewport range.

フォントサイズの指定で近年ではclampが大活躍中とのこと。最適なフォントサイズをminとmaxを入れてあげるだけで完成する優れモノのツールがこれだ。

こういうのって結構計算してこれを出さないと行けないんだけど、それを直感的に操作するだけでno計算式！で出てしまう。

私みたいなアンポンタンな脳みそしてるなんちゃってデザイナーからすればこれ作った人は神みたいな存在です。ありがたや～ありがたや～

今後使うときのためにメモしておきます。

#css #clamp #font-size

最近のデバイスやブラウザに対応させる最小限のファビコンセットには、3つのアイコンで対応できます。ブラウザはもちろん、スマホやタブレットにも対応し、さらにSVGも含めて3つだけです。ファビコンに必要な

ファビコンの最新版。ファビコンってちょっと前までたくさんの画像作ってそれをフォルダに入れて読み込みにいってて、、、

自分は途中からバカバカしくなってico１個でいいやってなってたんですが、３つで全てが網羅できるとのこと。

SVGの読み込みは近年の記事で書いてあってまぁいいかとほおっておいたんですが、今後は主流として活躍しそう。

３つ用意するだけでいいのは楽になったが、何にせよ拡張子３つ用意はまだ自分がめんどくささが勝つ・・・

今後対応するときのためにメモしておきます。

#html #favicon

今年もCSSの進化が早かった1年でした。一昔前にはJavaScriptや複雑なCSSを使用しないとできなかったことがたった一行、もしくは数行のCSSで簡単に実装できるようになりました。 2025年、W

jsからCSSだけで完結できるようになったコード一覧みたいな記事。

実際に最近利便性があがったdialogから最近個人的に熱い機能であるselectタグの改変など、新しい機能がまとめられている。

どれもワクワクするし使ってみたいんだけど、safariが、、、どうしてどの機能も調べるとsafariが対応してないんだ。。。

selectタグに関しては待ち望んでいたデザイナーさんも多いことだろう。画像やアイコンが入れれないのはとても不便だったからね。

何にせよ、これが来年のコーディングをさらに画期的なものにするのは明らかだろう。

私は生唾を飲みながらsafariの対応をチェックするとしよう・・・。

忘れたときのためにメモしておく。

#css #html

技術情報の記事まとめ。 cssやjs、HTMLの最新情報というか、トレンドなどをピックアップして紹介している。自分も一応トレンドや新しいcssなどの動向は追ってはいるが、どうしても当時使えなくて忘れたり、あんまり理解してなかったけど実はめちゃめちゃすごい機能だったりすることがあるので（特に近年はCSSの進歩がすごくて・・・（泣））こういった定期的に紹介をしてくれるサイトは重宝する。

定期的に個々はチェックしていこうと思った。忘れたときのためにメモする。

#html #css #js

各種ブラウザの仕様変更情報に関するまとめ記事の一覧です。

各種ブラウザの仕様の変更をまとめてくれているサイト。リアルタイムではないにしろバックナンバーから過去の変更も確認や遡ったりすることができるので便利。最新の挙動は個々で調べてそのたSNSやブラウザなどの変更などを過去分などを含めて確認したいときはこちらというように役割を分けて見るのがおすすめかと思われる。

こういった管理してるの大変だと思います！私は応援してますよ！！w これからも頑張っていただきたい想いでメモする。

#html #css #browser

10/29にアップデートされたChrome 142に追加された、CSSとUIに関する新しい機能を紹介します。今回のアップデートで注目すべきは、コンテナクエリとif()関数の範囲構文、ビジターが興味を

cssのアップデート記事。基本毎週行われてて見るようにしてるんだけど今週はすごそうな内容があったので。

表題にもあるif関数が多分やばい。これ多分レスポンシブコーディングに革命が起きる気がする。というかすべてのコーディングにおいて革命が起きるね。

だってもうこれできるなら「この横幅のとき」じゃなくて「この要素がこうなるとき」ってできるわけでしょ？ｗもうサイズの論争も起きないし個々の要素が完結したコーディングができるジャマイカ。これは現状かなりの可能性を秘めている大物である。

あとinterestfor属性も可能性広がりそう。興味のある人の取り方がどこまでなのかがわからないが、興味のある人を離脱させないor興味からゴールまでのアクションを意図的に行えるってことだよね。バケモンじゃないですかｗ

これは8番出口で連続で廊下が長くなってもおかしくない。(某vtuber)

期待の膨らむ記事であった。今後が楽しみだね★（錯乱）

忘れたときのためにメモ

#css #html

ベクター画像を表示する際とっても便利なSVG。名前を聞いたことのある方も多いのではないでしょうか？SVG自体は10年以上前から存在するのですが、HTML5の普及とともに多くのブラウザーでサポートされるようになり、今年に入ってから徐々に見かける機会が増えてきました。今回はそんなSV

結構前の記事でスマソ。 SVGをuseで使うやり方の記事。

もともとアイコンフォント族で生活してきた私は、SVGを使うことがあまりなかったんですが、FONT AWESOMEが有料化、google font iconも使いたいアイコンがなかったりするケースが増えてきた。

それで最近ちょいちょいSVGをベタ書きしていたのだが、これがいかんせんコード量が増えて見づらい。パット見結構文字がずらーと書かれてるので、鬱陶しいなと感じた結果今回の記事に至る。

useを使うと別の所で記載しておき、それを読み込むことができる優れモノ。これの注意点はuseで読み込むSVGはdisplay:noneにしないと出てきちゃうことと、IDをしっかりわかりやすいものを振っておくこと。結構このやり方でSVGが増えて行くとメンテナンス性が問われそうなので、しっかりと名前をつける必要性があると感じた。

とりあえず身近なものからこれを利用していこうと思う。

以上、忘れたときのためにメモする。（なんならこの記事・・・前も・・・・メモした・・・ような・・・）

#svg #icon #use

各種動画ファイルや音声ファイルを、無劣化で高速にカットしたり連結したりすることができるソフト「LosslessCut」。

無料の動画編集ソフト。編集というか自分はほぼトリミングや音消しくらいしか使ってないので、あまり詳しい紹介はできないが・・・。このソフトのすごくいいところ。それは無劣化の部分。 windowsのソフトとかを利用するとサイズが大幅に増えたり、ガビガビになったりとかザラにあって、毎回めんどくさいってなるんですが、これは劣化もサイズの極端な変更も行わずにトリミングやちょっとした修正が対応可能となってます。こういうソフト以外とないんだよねー。助かる。

ガッツリ修正はadobeプレミアを使って、こういった簡単なトリミングや修正はこれを使うのがおすすめ。こういうのでいいんだよ。こういうので。

#video #trim

2024年12月〜2025年2月頃にかけてリリースされたSafari 18.2、Chrome 133、Microsoft Edge133から、text-box-trimプロパティとtext-box-edgeプロパティが使用可能になりました。テキスト要素の上下のスペースを調整できる

テキスト要素の上下のスペースを調整できるようになった機能。

これがあればline-heightを変更せずに調整が可能になる。

今まではline-heightを使用し中央に寄せたりしていた。これによりレスポンシブ対応で2行になったりするときに、詰め詰めの文字間になり細かい調整が面倒だったのだが、これがあれば行間を変えずに文字の位置調整が可能になった。

can i useでみると、まだfirefoxなどには対応してないみたい。早く対応してくれ～。

今後忘れたときのためにメモ。

#css

近年の書き方をまとめてくれている。 ※結構量あるので、読むときは注意。

個人的に「これいい！！」ってなったのをメモする。

HTML

・DL要素 div要素をdlタグの直下に置けるようになったらしい。（なんか知ってた気もするけど気にしない）

・インラインSVG なにこれすごい。svgを埋め込まずsymbolタグに入れておいてこれをuseタグでよみこむことができる。まず可読性上がるし、わかりやすい。最高です。

CSS

・place-content: center 上下左右の中央寄せ。（これも前に見た気がするが・・・）今までflexで利用してたので、これからはこれを利用する。・clamp() 今まで知ってたが使ったことなかった。 minなどは使用してたが、こっちのほうが正確な数値を設定する事ができるのでこちらのほうがいい気がする。

JavaScript

・Defer 非同期のダウンロードを可能にする。これをつければheadに読んでも読み込みが遅くならない。

・DOMContentLoaded Deferとセットで利用する。これを使用して読み込めば、確実に取得エラーにならずに処理が走るようになる。

・Intersection Observer スクロールファンクションは重たくてスクロールするたびにカクカクするので、これを利用すべきとのこと。

・matchMedia ブレイクポイントをcssのrootから取得して、それに合わせてJSの処理も変更できるもの。JSの処理の改修が減るので確実にやったほうがいいやつ。

また続き読んでていいの見つけたらメモする。

#html #css #javascript #js