kamiya-memo-nagoya

[kamiya-memo-nagoya]

headにある、metaタグなどの記載方法をまとめたもの。 今やスタンダードな記述からあまり知らないものまで数多く記載されている。

結構googleに指示できる系のmetaタグは知らなかったので今後使う機会に備えてメモしておく。

#meta #head

[kamiya-memo-nagoya]

インターフェースのガイドライン記事。 いわゆるルール決めのもの。

一つ一つを比較して定義しているので非常にわかりやすいのと説明が的確で、何が必要なのかをしっかりとわかるように書いてある。これをしっかりと見たらUIデザインできそうなくらい。

素晴らしいです。私も参考にさせてもらいます。

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

#css #design #ui #ux #form

[kamiya-memo-nagoya]

コンテナクエリーってやつ。 cssで近年はちゃめちゃに盛り上がったアップデート。 いわゆる画面サイズではなく、親要素のサイズでレスポンシブできる書き方ができるとのこと。

イマイチ使い方や便利さが普段メディアクエリーを使ってるとわかりにくいなーと思ってるそこの諸君にはこちらの記事を御覧いただきたい。

例も含めて��のように書けるようなったのかが記載されている。 このサイズのとき、ここのコンテンツはまだ幅あるからデザイン変えたくない時とか、左のデザインは変えたいけど右のコンテンツはレイアウト変えたいとかがあるときとかに大活躍するでしょう。

自分はまだ使えてないので、今後の参考までにメモして使える機会を伺うことにする。

#css #container

[kamiya-memo-nagoya]

googleフォントにいつのまにやらアイコンが追加されていた。 現在は基本 font wesome4.7 を 利用しているがもう更新がされないのと表示の仕方がコードを毎回探さないと行けなくてめんどくさいと言う点からこちらを見つけて感動した。

アイコン名を疑似要素に入れたら表示されるとはなんて素晴らしい使いやすさだろう。メンテナンスもしかりコードフレンドリーにもつながる。

ちょっとまだ実装する前の読み込み速度やテストを行っていないのでなんとも言えないが、これはfontawesomeが終わる時代も近いかもしれない。

今後の参考までにメモする。

#webicon #icon #css

[kamiya-memo-nagoya]

cssの三角形の話。基本的にcssで三角形を作る系の記事といえばborderを使って、作成してるところが大半であるがこの記事のclip-pathを利用すれば変に設定をしなくても作成できますよということである。

確かにこっちのほうが記述が少なくてスッキリするのでいいね。 IEがなくなってすべてのブラウザに対応できるようになったので今後はこちらを活用していきたいと思う。

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

#css

[kamiya-memo-nagoya]

cssの単位やら関数の出し方やらの記事。 基本的にViewport単位というものができたことによる単位の説明。

わかりやすいが参考例や使用例が無いので少しわかりにくいが、元々固定値やvwのようにviewport widthのような全体からの数値ではなくもっと細かいブロックごとの数値で単位を出すことができるようになったっぽい。

2カラムレイアウトのような作りのときにはかなり役立つのではないか。

いかんせん使ってみないと判断のしようがないので一旦使ってみてどう使っていくかを検討していくとしよう。

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

#css #viewport

[kamiya-memo-nagoya]

今流行りのturbopackとviteの勝負の記事。 それぞれの生い立ちや流れやメリットなどをまとめてくれている。

webpackが衰退してるなかで今人気の２つですが、それぞれの良さがあるとのこと。

自分は現在バンドルを使ってないので今後使用するならどちらにしようかと思って調べてたときの出会いである。

今後のバンドルへのワクワクを秘めながらどちらにしようかと贅沢にも選択をしていこうと思う。（まだやるか決まってない）

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

#js #bundle

[kamiya-memo-nagoya]

サイトを高速にする術を載せている。

今や必須となった高速化対応。 阿部寛のHPなんかはよく参考例としてあげられている。 まぁあそこまで早くはしなくてもいいが、遅いとユーザービリティーも悪いしgoogleの評価も下がるので今は対応優先度は高め。

こちらの記事の内容をしっかりと理解し取り組む必要がある。

まぁ知ってる内容も多いが自分の作ったものを見直したときにまだできてない部分も多いのでこちらでメモして置く

#css #html #js

[kamiya-memo-nagoya]

日本のcssが進化するぞ！！！ これまで海外ではできてた改行の場所などの自動判別が日本語もできるようになりそう。 まだchorme系列だけだけど今後増えていったら使っていこうと思う。

あと意外に嬉しいのはフォントサイズの下限突破。今までtransformでやってて面倒だったのでとても嬉しい。まぁ下げすぎても読めないからあんまり使うことはないけど、使いたいときもあるので嬉しい。

早くほかのブラウザも対応してくれ・・・

今後対応されると器用にメモする

#css

[kamiya-memo-nagoya]

cssで変数を扱えるようになったよーの記事。 実はこれは前から知ってたんだけど重要なのはこの記事のjsの部分。 変数をjs上で取得と書き換えできるのは知らなかった・・・。

IEがなくなった影響でこうゆうのが使えるようになったので今後はscssをやめてcssのみにしていこうと思う。

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

#css

[kamiya-memo-nagoya]

さぁ毎度おなじみの最強記事です。いつも本当に助かってます。

今回もかなり有用な物が多い。IEがなくなってからというもの本当に作りやすくなって助かる。

ここに書いてあるネストですが、もうこれできるならscssいらないよね。。。変数も打てるしネストもできるならもうscss脱却するかー。

ブレークポイントもわかりやすくなってもう記載が楽になることなること・・・。

あと意外に便利なのがinset。これすごい。今までtransformとかで中央においてたのがこれ一個で行けるようになったの偉すぎ。

使えるもの多くて最高。こういうのがあるからcssはやめられないんよな！！

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

#少しのコード #css

[kamiya-memo-nagoya]

cssのスコープの記事。 色々調べたがこれが一番わかりやすい。

ケース例も記載されてて「このときどっちが使用されるんだろう」にも丁寧に説明がされている。

今後scopeはcssの書き方をかなり変える記述だと思っている。 それだけにシステムアプリや大規模プロジェクトなどで使うとなるときは慎重に構成を練らねばならない。 あとからこれにしとけばよかったというケースや普通の書き方の方が汎用性が高かったといった後悔が生まれかねない。

しっかりと理解をしてから使用していこうと思った。 まぁsafariとfirefoxなどがいつ実装できるか不明なのでしばらくはやれなそうだが・・・。

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

#css #scope

[kamiya-memo-nagoya]

エンジニアに特化したAIの紹介。

今やchat-gptは言わずもがなですが、

それ以外にも続々とAI化が進んでいたようです。

自分が特に良いと思ったのは「Phind」。 これGPT-4で返してくれる且つコーダー特化なので使用感がいい。

返答が早いのもいいし何より特化してるので解釈の理解も早くていいです。他のAIはまだ使ってないですが、どれも利便性の高いものが多いので、今後はこういったものも積極的に取り組んで行きたい所存でごわす。

#ai #chatgpt

[kamiya-memo-nagoya]

svgの画像を使って背景画像配置するもの。ちな今回は波線である。

背景に斜線や波線など目線を引くデザインが増えつつある中で、やはり主流になりつつあるSVG。伸ばしてもよし動かしてもよしで更に軽いという最強種族。 このサイトはジェネレータの紹介もしてるのだが、これがなかなかに便利だったので、この記事を選んだ。

今後またやりたくなったときのためにメモしておく。

#css #波線 #svg

[kamiya-memo-nagoya]

先程の続きみたいなもの。

budouXという日本語を自動で改行してくれるものをgoogleが開発したとのこと。

記事を見る限りめちゃめちゃ簡単。誰でも実装できそう。 以前から日本語の改行の整形は難しいと言われてきたので、これが実装されて歓喜である。

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

#html #js

[kamiya-memo-nagoya]

日本語の改行問題は昔から取り上げられていました。 自分の知る限りだとinline-blockが一番楽だと思ってたのでこういった場合はずっと利用してたんですが、いかんせん部分的に使うならまだしも全てにこれを利用するのは骨が折れるわけで・・・ というところでこの記事である。解決策２はappleのサイトとかで見た人も多いと思う。改行がきれいにできる優れものである。

ただその後に記載のあるbudouXが気になるのでそれを利用することになりそう・・・（笑）

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

#budou #css #html

[kamiya-memo-nagoya]

javascriptでプルダウンをわかりやすくする方法。 プルダウンって項目数が多いときに使われるくせにスクロールする量も増えるから面倒だなってなるんですよね。

そんなときにこちらです。 横に並んでればわかりやすくスクロールも減るので一石二鳥。 こっちのほうが利便性は高い気がする。

通常のUIに縛られず、もっと柔軟に考えて行きたい今日このごろでした。

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

#js #select #pulldown