最近CSSの進化がすごいですね。カスケードレイヤー、コンテナクエリ、sin、cos関数と次々と大幅な機能が追加されています。IEのサポートが終わって以来IEを意識する必要が無いため今後新しいCSSがどんどん取り入れられるでしょう。 今後どんどん使われれそうなCSS 任意の要素の幅などを分岐点として特定の要素のCSSを変えることができるようになるコンテナクエリ、CSSの入れ子がSass無しでもできるCSSネスト、簡素に中央の配置ができるdisplay:gridのplace-content: centerなど色々あります。複雑なレイアウトを組むわけでなくてもCSSネストなんかは特別な環境設定を行わ
Reactで今までろくにアニメーション関係を扱ってなかったのでちょっと何かライブラリーがないか探してちょっと試すためだけに簡単なサイトをNext.jsで作ってみたという簡単な感想のような記事です。 サイトの趣旨 ただのよくある写真サイトです。東京の各場所の写真を載せたサイトです。スクロールで画像が出てきて写真をクリックするとスライドが出ててくる本当によくある感じのサイトです。 Next.jsで作っているので以下、vercelにあげています。 Tokyo Gallery Site アニメーション 今までアニメーションといったらwebアニメーションを使っていたのですがいまいちReact上だと扱いに
前回の記事でNext + Vercelでサイトを作ったという記事を書きましたがちょっとあまりにも良くなかったので今回大幅に作り直しました。新しいサイトでも主にAdobeScript関係のまとまった情報を載せてゆく予定ですが単発の記事、新しい情報は今まで通りブログとTwitterで更新してゆく予定です。特に目新しいことはやってないのですがどんな風に開発したかの記事です。 ちなみに該当のサイトはこちらになります。 導入した技術 前回同様今回もTypeScript + React + Styled-componentで作成したのですがそれ以外にもコンタクトフォームの作成のためにGoogle reCA
Electron,ExtensionとかれこれずっとReactで開発してきたのでそろそろNext.jsでサイトでも作ってみたいなと思ったところだったので簡単なサイトを作ってみました。勿論おおよそ普段のReactと同じような感じで開発できたのですが少し戸惑った部分もあったので備忘録としてまとめました。本当にメモ書き程度の内容です。サイトはこちら。 Next.jsの導入 チュートリアル的なものが書かれたサイトで他にもっと詳しいサイトがあるのでここでは簡単にしか書きません。まずはインストールです。 これだけでベースとなるパッケージがインストールされます。ただし今回これに加えてtypescriptとs
ある程度Extensionの開発にも慣れてきていろんな機能やオプションを盛り込むと段々UI周りの整理をしたくなるでしょう。実際htmlは構造上、上から下に流れる構造になりやすいので何も考えずにひたすらボタンやチェックボックスを増やして行くと縦長いインターフェースになって使いずらくなる。というわけで今回簡単な基本のボックスレイアウトをcssで組んでみたいと思います。簡単なところからという事でヘッダーとオプションのチャックボックスを入れたサイドメニューとメインのエリアにボタンのあるよくありそうなインターフェースを作ります。以下が下書きになります。 適当ですがこんな感じで作ります。サイドバーにオプシ
今までソースコード公開のためにwordpress用プラグインCrayon Syntax Highlighterを使用していました。使用していた当初から古い更新日時に不安を抱きつつも何も考えずに使っていたらある日突然「技術的な問題があります」という警告とともに表示されなくなり頭が真っ白になりました。特にwordpressのアップデートしたわけでもなく突然だったので他のプラグインも使用してみたのですが全てうまく表示されなかったのでとりあえずGistを使用する事にしました。自分自身wordpressにあまり詳しくないのでどうしてもこういった事が起きた時に為す術もなく、wordpress自体不安定な土