アニメーション実装の選択肢のひとつになると思う。Lottieを試してみた。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
サイト制作時に今は当たり前のようにおしゃれなアニメーションがついてる時代がきましたね。 CSS3で実装できることも増え、あんまりゴリゴリJavaScriptでってことは減ってきてる気がします（もちろん必要なときはいっぱいあるのでケースバイケースですが）。 制作者としては、意図した通りのアニメーションをつくりたい、それもなるべく手間をかけずに、という思いがあるのではないでしょうか。 そんな悩みを解決してくれるかもしれない「Lottie」を試してみました！ ※今回、After Effectsの使い方はありません、ごめんね。JavaScript側の組み込み方の説明です。 Lottieとは Airbnb制作のiOSやAndroidにも対応したアニメーション用のライブラリです。Adobe After Effectsで作ったアニメーションを、そのままWebにもってこれるやつらしい。 一部使えない機能も
この記事は BASE Advent Calendar 2021 の 5 日目の記事です。 基盤チームの右京です。 最近ひょんなことから browserslist の設定を見返したのですが「babel や autoprefixer で必要になったので導入した」以上はあまり触れられていなかったため、この機会にいちから見直してみようと思いました。 browserslist? https://github.com/browserslist/browserslist 簡単に言えば、クエリを書くとそれに該当するブラウザをリストで取得できます。babel(preset-env) や autoprefixer はここから取得出来るリストを利用して、必要な変換内容を決定しています。単純にバージョン指定でのクエリが記述できるだけではなく、利用統計に基づく絞り込みも可能となっています。例えば、0.2% 以上のシ
I first got into web design/development in the late 90s, and only as I type this sentence do I realize how long ago that was. And boy, it was horrendous. I mean, being able to make stuff and put it online where other people could see it was pretty slick, but we did not have very much to work with. I’ve been taking for granted that most folks doing web stuff still remember those days, or at least t
Accidentally Turing-Complete Some things were not supposed to be Turing-complete. This is a collection of such accidents. Stuff which is somehow limited (stack overflows, arbitrary configuration, etc) is still considered Turing complete, since all "physical" Turing machines are resource limited. C++ Templates Although they were initially not supposed to, C++ templates are Turing-complete. For proo
Tailwind CSS for Railsを使って、NodeをインストールせずにTailwind CSS 3を導入する
Tailwind CSS for Railsを使って、NodeをインストールせずにTailwind CSS 3を導入する みなさんこんにちは。この記事はRuby on Rails Advent Calendar 2021の20日目の記事です。 20日は誰も埋めていなかったようなので（と言いつつもう日付も変わってしまっているのですが）、Tailwind CSS for Railsというgemについて書きます。 Tailwind CSSとRails Tailwind CSSは最近流行のCSSフレームワークで、Utility-Firstと呼ばれている思想に基づいています。これはある意味、従来のCSS設計のベストプラクティスの真逆を行くようなもので、class="flex items-baseline mt-4 mb-6 pb-6 border-b border-gray-200"みたいなスタイル
これまでにもCSSに関する様々なエフェクトを紹介しましたが、今回はマウスオーバー時のアニメーションに関する良さげなものをピックアップしてみました。 関連 使える！CSSアニメーション 20選 様々なボタン用ホバーエフェクトHover.css 2D、ボーダー、影、吹き出し、めくり等、ボタンに使えそうな様々なホバーエフェクトがまとめられています。 スライドするButton Hover Effects これもボタンに関する様々なホバーエフェクトです。 グラデーションなAnimated Gradient Buttons グラデーションを使ったホバーアニメーションです。 様々な画像用ホバーアニメーションCSS Image Hover Effects ズーム、ズームアウト、スライド、回転、ぼかし、グレースケール、セピア、透明度、フラッシュ、シャイン、サークル等、画像をマウスオーバーした時のエフェクトが
Smooth Shadow
Make a smooth css shadow
Webサイト制作において面倒で時間のかかる作業を効率化したい方へ。 この記事は、CSSコードを手軽に生成できる便利ツールをまとめた最新版リストで、Web制作を快適、楽にしてくれるツール68個が揃っています。 以前CSS便利ツールを集めた厳選リストの公開が2021年。あれからおよそ3年のあいだに話題となったツールを中心に紹介しています。 日頃のワークフローに活用して、ストレスのないクリエイティブな制作ライフを実現しましょう。 Web制作の面倒におさらば、CSS時短ツール厳選リスト CSS pattern backgrounds ジグザグやサークル円などシンプルな幾何学模様をつかったCSSパターンをコピペで利用できるオンラインツール。 CSS Polka Dot Generator ポルカドット柄を作成、カスタマイズできるCSSツールで、影を設定するとよりレトロな印象に仕上がります。 CSS
サイボウズに新卒入社してkintone開発チームに配属されてから1年経ったのでふりかえる - もやし丸の備忘録
こんにちは もやし丸 です。2019年にサイボウズに新卒入社して、kintone開発チームでWebエンジニアとして働いています。 kintone開発チームに配属されてから1年経過したのでふりかえりを書きました。 自分が配属される時期に中途入社された sakito さん、 Nokogiri さん、あおいさんが入社1年をふりかえるブログを書いてて、それを見て触発された感じです。 https://note.com/mki_skt/n/nd11c9fe2ec3fnote.com nkgr.hatenablog.com blux.hatenablog.com shisama_さんも1年ふりかえりブログを書いていたので追記しました： shisama.hatenablog.com 採用に関する仕事に携わったときに「入社した理由」「入社までにやっていたこと」「入社後どんな仕事をしているのか」をよく質問され
Q by LivesenseをWordPress on EC2からHugo on Cloudflare Pagesに移行しました - LIVESENSE ENGINEER BLOG
はじめに 技術構成（before）と課題 技術構成（after）と選定の理由 改善したこと パフォーマンスの向上 デリバリー速度の向上 セキュリティ面でのリスク低下 大変だったこと 記事のマークダウン変換 段落分けと改行の区別 字下げ 書式の追加 Lintが必要になった 記事ごとのOGP画像周りの実装 URL変更に伴うリダイレクト設定 標準の検索機能がない おわりに はじめに 技術部の @mom0tomo , @etsxxx です。 技術部では、事業部横断的な仕事としてコーポレートサイトの運用も行っています。このたびWordPress on EC2で運用されてきた弊社のWebメディア（Q by Livesense）を、Hugo on Clouflare Pagesに移行しました。 q.livesense.co.jp 弊社のWordPress運用はやや特殊で、エンジニアがサーバーにSSHして
グラデーションは鮮やかな配色や動く流体Blobシェイプなど、さまざまな方法や見せ方で見かけるようになっています。 2色の配色によるグラデーションをつかった影、シャドウグラデーション（英: Shadow Gradients）を手軽に作成できるオンラインツール「CSS Shadow Gradients」が公開されています。 CSS Shadow Gradientsで作成したグラデーションは、CSSコードとしてワンクリックでコピー、利用できます。 CSS Shadow Gradients https://alvarotrigo.com/shadow-gradients/ 🧑💻 使いかた CSSグラデーションシャドウは、疑似要素をつかって表現しており、backgroundプロパティにlinear-gradient関数を使うことで、手軽にスタイリングすることができるようになりました。 使いかた
謎ロゴとの出会い 先日、YouTubeでプログラミング関係の動画を見ていたらJavaScriptの話題とともにこんな画像が出てきました。 これを見て僕は「あちゃー、JavaとJavaScriptを混同しちゃってるのね 初心者よくある、どんまい」と思い、コメント欄に「JavaとJavaScriptは別物ですよ😃」と書き込み、送信ボタンを押そうとしたその瞬間、突然嫌な予感がしてその手を止めました。 （いや、動画内で一瞬表示させるためにJavaのアイコンとテキストを組み合わせてロゴを作ったとは思えないし、このロゴは本当に存在しているのでは…？） ググってみたら案の定、素材として配布されているロゴでした。 JavaScriptの公式ロゴ 現在、JavaScriptに公式ロゴは存在しません。（そもそも現在の「公式」というのがEcma InternationalなのかMozillaなのかJavaSc
初心者からちゃんとしたプロになる HTML+CSS標準入門 「初心者からちゃんとしたプロになる HTML+CSS標準入門」がオススメの人 「初心者からちゃんとしたプロになる HTML+CSS標準入門」の特長 「初心者からちゃんとしたプロになる HTML+CSS標準入門」の内容 「初心者からちゃんとしたプロになる HTML+CSS標準入門」Amazonでの購入はこちら 「初心者からちゃんとしたプロになる HTML+CSS標準入門」楽天市場での購入はこちら 「できるポケット Web制作必携 HTML&CSS全事典 改訂版 HTML Living Standard & CSS3/4対応」紹介記事 「できるポケット Web制作必携 HTML&CSS全事典 改訂版 HTML Living Standard & CSS3/4対応」Amazonでの購入はこちら 「できるポケット Web制作必携 HTML
CSS Background Patterns is fun little free tool that lets you create cool CSS patterns for your website background. We've curated and parameterized this collection of pure CSS patterns to help you generate & customize the most cool CSS seamless patterns around the web. The collection is being updated regurarly! Patterns are everywhere! From your website to your favorite book cover. There're severa
細かすぎ…？FigmaやWebで文字の表示位置がズレる問題を知っておこう - Goodpatch Tech Blog
この記事はGoodpatch Advent Calendar 2023 15日目の記事です。 株式会社グッドパッチでエンジニアをしているちげと申します。Strap というオンラインホワイトボードサービスの開発に携わっています。最近は小学生時代にハマっていたレゴを触って懐かしさと構造設計の奥深さに浸っています。 product.strap.app 今回はFigmaやWebで文字の表示位置がズレるいくつかの問題について取り上げて解説したいと思います。 時間がない人向けサク読み ハーフリーディングを削ることで、文字をぴったり上揃えできる。※(行間の高さ - フォントサイズ) ÷ 2 = ハーフリーディング Figmaのトリミング機能は現状Webでは実装できない。 Figmaが小数点以下のピクセルを四捨五入する影響で、Webの実装と 0.Npx 分ズレたり、完璧に中央に揃わなかったりする。 上記の
CSS超入門！…のさわりだけ！！その２ - Little Strange Software
どうも！LSSです！！ 今回は、だいぶ前の記事、 の続きとなります！（だいぶ前すぎるｗ） 今回は実践編です！ HTML編集画面を開きます まず手始めに、<div>タグを書いてみます divタグにstyleオプションをつけたします style=""の中に色々、追加していきます！ CSSの指定って 四角い枠を角丸にしてみます 緑が濃くて、黒い「てすと」の文字が見えづらいな 枠の端っこにくっついてるのがいただけない 枠に縁取りもつけちゃえ！ こんな感じに作っていきます 今回は実践編です！ 前回の記事の内容は 「:と;でプロパティと値を指定する」事と、 「CSSは３つの指定方法がある」事ぐらいしか書いていませんでしたね。 今回は、実際に「はてなブログのHTML編集画面」で、CSSを書いていく様子を語る記事となります^^ HTML編集画面を開きます ↑こんな感じの画面ですね。 ここにコードを書きこん
この記事も例に漏れず、Web における組版は 1 段組みを基本としており、テキストが延々と下に伸びていく単調なレイアウトが主流です。 しかしながら新聞や雑誌等の組版を見つめ直すと、ブラウザでは実装されることのない縦横無尽に動き回るグリッドの配置、テキストの流し込みが当たり前のように実現されています。こうした自在な組版、Web でぜひ実現してみたいと感じませんか……？ できたもの 図 1: Web で新聞のような組版が実現されたスクリーンショット 図 1 の通り、新聞風のレイアウトを実現しています。 Web で自在なテキストレイアウトは不可能？ CSS3 にて導入された columns プロパティ は、ブラウザ上で段組みを用いたコンテンツの表示を実現します。論文のスタイルでよく見かけるアレですね。ところが、CSS3 の段組みの仕様には「段の高さが揃っていなければならない」[1]と規定があるこ
Web Development Gallery Eases
Eases is Web Development Gallery Site. Watch and learn about Easing and front-end development
overflow-wrap: break-word; や word-break: break-all; が万能の改行処理だったなら、こんなに苦労していない - Qiita
overflow-wrap: break-word; や word-break: break-all; が万能の改行処理だったなら、こんなに苦労していないHTMLCSS初心者 はじめに 今回解決したいのはこれです。 「overflow-wrapかけたのに改行されないしテーブルwidthもなんか勝手に伸ばされちゃってる問題」です。 こんなんHTML / CSSの初歩中の初歩じゃんwwwという方は、どうぞごゆるりとブラウザバックしてやってくださいませ… 「それ地味に悩んでた！」という方がもしいらっしゃいましたら、少しでも助けになれれば嬉しいです。というか一緒に悩みましょう。 あ、でも、もしそんな方が本当にいたら、こんなことに悩むよりも、 「全半角記号のブラウザテストだけ許容する」という呪文を唱えた方が5億倍早いです…というネタバレだけ先にしておきますね＞＜ もくじ 当記事は、以下の内容に関する
はじめにこんにちは。株式会社オンズの原一勢です。 今日の記事はちょいと辛口です。 はじめに次の質問に答えてみてください。 「自分が住む家を作るとき、未経験の大工に任せられるか？」 まず間違いなく、答えは「ノー」ですよね。 ですが昨今、フリーランスという働き方に注目が集まり、その道に足を踏み入れ、素人同然にも関わらず「仕事をください！」と手を挙げる”未経験フリーランス”の方々が多く目につきます。 アナタ！ そこのアナタ！ 耳が痛いハナシかもしれませんが、もしかするとアナタも「未経験からWebエンジニアを目指す」みたいなキャッチコピーに踊らされていませんか？ アナタもしかして、甘いハナシに釣られてこの業界に興味を持ち、数ヶ月間のスクールで基礎を学び、卒業後にいきなりフリーランスで仕事を受注しようとしていませんか！？ 言いたいことが山ほどあるので、今日は「こんなウェブ系フリーランスには仕事を任せ
はじめに 「自分の制作物を自慢したい」 「知識ないけどポートフォリオサイトを作りたい」 もしくは 「プログラミング学習のアウトプットとしてWebサイトを作りたい」 という方向けに、ポートフォリオサイトの作り方について簡単に書きます！ 作ったポートフォリオサイト 僕が作ったWebサイトです！気に入っています ザックリ作り方紹介 Webサイトを作る方法は様々です。大きく分けて２種類かと思います。 HTML/CSS/JavaScriptなどを使って0からWebサイトを作る方法 WordPressなどのホームページ作成ツールで作る方法 僕は今回、0からポートフォリオサイトを作れる自慢をしたかったので、 HTML/CSS/JavaScriptなどを使って0からWebサイトを作る方法 この方法でポートフォリオサイトを作りました！ では作り方の流れを以下に書きます！ （詳しいWebサイトの作り方は今回は
はてなブログでいろいろな人の記事を読んでいると文系から情報系の大学院をでたと書いている人の記事を読んで大学院について調べてみました。 グーグルのテンサーフローとか アマゾンのAWS上でAmazon SageMaker を利用するとか 技術って道具だと思うんです。 放送大学について調べたことについて紹介します。 放送大学 大学院の学費は？ 放送大学の大学院は働きながら通えるかも 修士全科生 修士選科生 修士科目生 放送大学 大学院は1科目から次のことが学べます。 放送大学 大学院 情報学 放送大学 大学院 入試 2020 放送大学 大学院 インターネット出願 まとめ 私は理系ですが、私が学生だった頃は情報系の学部ができ始めた時で今のように情報系の学部がなかった気がします。。 電気工学科とか、電子工学科とか、電気電子工学科が一般的だった気がします。 AIにしても機械学習にしてもここ数年でワーッ
If you want to give your website a little extra flair, you’ll definitely want to investigate and utilize CSS animated buttons. These bits of code add a layer of interactivity to your website that most site visitors will appreciate. Plus, they can be used to add a sense of dynamics and further help to solidify your brand. If you’re not sure where to start in getting these buttons for your site, how
Sass just launched a major new feature you might recognize from other languages: a module system. This is a big step forward for @import. one of the most-used Sass-features. While the current @import rule allows you to pull in third-party packages, and split your Sass into manageable “partials,” it has a few limitations: @import is also a CSS feature, and the differences can be confusing If you @i
ペルソナ5 の UI かっこいいですよね。 今は ペルソナ5S が出ていますが、今回は ペルソナ5 のメッセージウィンドウを、 もしかしたら CSS で作れるんじゃないか、と思って作ってみました。 画像としてはこんな感じ これがゆらゆらアニメーションします。 特徴 自由変形した四角形。 白と黒で重なったウィンドウ 吹き出しの矢印の部分の複雑な形 不規則にそれぞれの枠が別々で動くアニメーション 動作サンプル( Codepen ) See the Pen Persona5 Message Window by ばりとん📛フルスタックエンジニア兼ITコンサル (@dd0125) on CodePen. ソースコード <link rel="stylesheet" href="persona5.css"> <body> <h1>ペルソナ5 メッセージウィンドウ</h1> <div class="me
X Magazineは、無料のレスポンシブな純粋なWordPressマガジンテーマです。 これはX Blogテーマの子テーマです。 X Magazineは、ウェブサイトを非常に美しく見栄えよく表示するために、モーデンカラータッチのある雑誌サイトに非常に適しています。 X Magazineは編集可能で非常に柔軟な新機能です。 テーマには、美しく、美しく、プロフェッショナルなレイアウトがあります。 このテーマは、SEO対応のあらゆる検索エンジン向けに作成されています。 X Magazineは完全にレスポンシブです。 HTML5およびCSS3ベースのコード化。 雑誌やブログのウェブサイトに使用する雑誌やブログのテーマです。
Result スクロールするとテキストにアニメーションしながらハイライトする、というもの。 通常のハイライトよりも目を惹く印象です。コードはVanillaとなっています。 JavaScript(function (document) { const markers = [...document.querySelectorAll('mark')]; const observer = new IntersectionObserver(entries => { entries.forEach((entry) => { if (entry.intersectionRatio > 0) { entry.target.style.animationPlayState = 'running'; observer.unobserve(entry.target); } }); }, { threshold:
SameSite 属性を使った Cookie のセキュアな運用を考える - 30歳からのプログラミング
Cookie に対しては「属性」というものを設定することができる。そして属性の設定内容によって、Cookie の生存期間を指定したり、送付先の制限を行ったりすることが可能になっている。属性のひとつであるSameSiteは、正しく使うことでセキュリティ対策やプライバシー保護に大きな効果を発揮する機能である。 ただ他の属性に比べると若干複雑で、しかも比較的新しい属性ということもあって、今のところそれほど普及していない。 しかし有用な機能であることは間違いないし、後述するように一部のブラウザベンダはSameSiteの利用を促す方針を明確にしている。 今後はSameSite属性を積極的に活用していくべきだろう。 この記事では、SameSite属性を設定した Cookie がどのように動作するのかを見ていき、その運用方法について考えていく。 Cookie の基本的な仕組みや機能については、こちらを参
Dark Ages of the Web
Today we can use a variety fonts but there was a time when we didn't have web-fonts and only a few variations. Most usable were — Georgia, Arial and Times New Roman. But if you wanted to do something unusual and use your own fonts — that's what I would call pain in the ass. The `@font-face` rule was announced only with the CSS3 fonts module. The first formats for embedded fonts were Embedded OpenT
WordPressでホームページ作成講座ワードプレスを使えば、ウェブサイトの構築は簡単に出来ますが、インストールをした直後というのは、どこから手を付けて良いのか分らないという初心者の方も多く見受けられます。テーマのインストールや設定などを中心とした情報配信をしてます。 シンプルさが強力な、ユーザーフレンドリーである応答WordPressのテーマ 3Dスライドを含む36枚のスライド効果を持ちます。 シンプルさがEコマースおよび企業サイトに最適です。 それは非常にあるので、それは容易に取り扱うことができるシンプルなワードプレスのテーマ。 シンプルさが事業会社のためのCSS3搭載し、WordPressの最新バージョンレディのテーマです。 シンプルは、3Dスライド持つ UNLIMITEDスライド画像/アイテム/ビデオ付きを。 シンプルの色のカスタマイズオプションの拡張は、任意の色を使用してサイトを
speckyboy Speckyboy is an online magazine for designers with its focus on sharing helpful resources, exploring new techniques, sharing useful tips, and inspiring you to build a better web. SVGとは画像形式の１つで、おなじみのJPG形式やPNG形式と違い、２次元ベクターなので拡大縮小しても画質が落ちないというメリットがあります。また、XMLというマークアップ言語で記述されるため、テキストとしてテキストエディタで編集できるのが特徴です。 このSVGをwebデザインに応用すると、かなりクレイジーなことができてしまいます。なんと、ページにコードを書くだけで、画像ファイルを用意することなくイラストやアニメーショ
【CSS】object-fitはCSSだけで画像をコンテナーにフィットさせてトリミングもできるとっても素晴らしいプロパティー
WEBDESIGNDAY > INSPIRATION > Technique > CSS > 【CSS】object-fitはCSSだけで画像をコンテナーにフィットさせてトリミングもできるとっても素晴らしいプロパティー 【CSS】object-fitはCSSだけで画像をコンテナーにフィットさせてトリミングもできるとっても素晴らしいプロパティー 公開日:2020/05/03 /最終更新日:2020/05/25 CSS PICKUP Technique CSSプロパティーの「object-fit」を使えば、簡単にCSSだけで画像を指定したサイズ（コンテナー）にフィットさせて、かつ、はみ出すの部分はトリミングができてしまいます。要は画像として配置しているのに、「background-size」と同じことができてしまいます。 そこで今日は、素晴らしいCSSプロパティー「object-fit」を色々
はじめに こんにちは！プラコレのアドベントカレンダー2日目です！！ 10月からプラコレでお世話になっている森下です。 私は9月まで看護師をしていました 日々業務を行いながら勉強という感じですが、 今回は最近教えていただいたcssでのアニメーションについてお話しようと思います〜！ どうかお手柔らかにお願い致します CSSだけでアニメーションを作る方法って？ アニメーションというと、JavaScriptやjQueryを思い浮かべ、 難しそうというイメージを持つ方もいるかと思います。 ここではCSSで簡単にアニメーションを実装させる方法をサンプルを一緒にご紹介しようと思います CSS3 でアニメーションを実装する方法は大きく分けて以下の2種類があります。 ・ transition プロパティでの定義 ・ animation プロパティでの定義 【Transition】 ・始めと終わりのみ指定可能
rem（レム）はCSSにおけるhtmlタグの文字サイズを基準とする相対的な文字サイズ指定の単位で、親要素の影響を受けないため個々の要素のサイズ設定を把握しやすく、htmlタグの文字サイズ設定を変更することでサイト全体の文字サイズ調整を行うことも可能です。 今回はレスポンシブサイトの構築やウェブアクセシビリティへの対応時にも有効な「rem」を用いた文字サイズ指定についてご説明します。 文字サイズ指定の単位rem（レム）とは rem（レム）は「root em」の略で、名前のとおり「最上位階層の『em（エム）』」を意味します。 （emは活字で用いられていた大文字「M」の大きさを基準に１文字分の大きさを表す単位） remはCSS3から利用可能になり、最上位のHTML要素である「HTML」の文字サイズを基準とした相対値で文字サイズを規定するため、親要素の指定の影響を受ける「%（パーセント）」や「em
ニューモーフィズムをBootstrapで再現！無料UIコンポーネント200個セット Neumorphism UI
2019年末ごろより見かけるようになった、「ニューモーフィズム（英: Neumorphism）」。「スキューモーフィズム」のリアルな質感と、フラットやマテリアルデザインのようなシンプルさを組み合わせた新しいスタイルです。 ニューモーフィズム？CSSコピペ実装できる新Webトレンドの参考HTMLスニペット、ツールまとめ 今回は、ニューモーフィズムを人気定番CSSフレームワークBootstrapで再現し、200種類のUIコンポーネントを揃えたHTMLテンプレートNeumorphism UIをご紹介します。 ウェブサイトやアプリ作成に必要なコンポーネントが一式揃っており、各種ページデザイン5種類も収録しています。これから、ニューモーフィズムをつかったサイト制作を考えていたひとは、活用してみてはいかがでしょう。 ニューモーフィズムをBootstrapフレームワークで再現した、無料UIコンポーネント
Tailwind UI KIT – 250 components and templates for React, VueJS and Angular.
Tail-kit Components and templates for Tailwind CSS 3.0Tail-kit now support tailwind CSS v3 !Tail-kit gives you access to over 250 free components and free templates, based on Tailwind CSS 3.0. It's all compatible with React, VueJS and Angular application.
みんな独立したプロパティ使ってる。使ってないのお前だけ。transformは与えられた要素に移動(translate)、拡大縮小(scale)、回転(rotate)、傾斜(skew)などの変形(transform)を適応させるCSSプロパティです。 transform: translate(-50%, -50%);で中央寄せ(現在ではあまり使用されないレガシーな手法です)といった静的な配置に用いることもありますが、主にCSSアニメーションを実装する際に使われることが多いです。 そのtransformプロパティの値のうち傾斜(skew)以外は現在では独立したプロパティで指定することができます。 /* 従来の書き方 */ .sample { transform: translateY(12px) rotate(90deg) scale(1.1); } /* 独立した書き方 */ .sample
After learning a little bit more about web accessibility last year I had been exploring some of the less common HTML elements, and making changes to this website, like wrapping the text of the posts on this blog in <article> tags and adding a <main> tag in the website’s layout templates (this website is built using Eleventy). I had previously done some work to make sure that <figure> and <figcapti
Next.js で next-themes と Tailwind CSS を使って Light/Dark モードを切り替える - Goodpatch Tech Blog
フロントエンドエンジニアの上垣です。 この記事では、Next.js で、next-themes と Tailwind CSS を使って Light/Dark モード切り替え対応する例を紹介しています。 github.com 前提 Tailwind CSS のダークモード Light/Dark モードの判定 Dark モードのスタイル next-themes インストール セットアップ 実行結果 Light/Dark モードの切り替え サンプルアプリケーション 感想 前提 この記事では下記のバージョンのライブラリを利用しています。 Next.js 13.4.12 next-themes 0.2.1 Tailwind CSS 3.3.2 Next.js の AppRouter を利用しています。 この記事で紹介するのは、「Light/Dark モードの切り替え」であり、Dark モード実装の詳
【CSS】キャラクターデザイン続き【完成でいいかも】 - Little Strange Software
どうも！LSSです！！ little-strange.hatenablog.com にて、いかにもな手抜きキャラを描きましたが、それにちょっと手を加えました。 （いかに手をかけずに…と考えていたのにそれに反するかのようなｗ） これで完成ってことにしてもいいかな？ キャラクター コード 問題点と解決について 命名発表！ キャラクター 今回はアニメーションしません。 スイッチ迷路のキャラとして使うつもりですが、そこでもアニメーションはせずに、手足だけ交互のパターンを一歩ごとに切り替えようかと考えています。 コード <style> .test1,.test2,.test3,.test4{ display:inline-block; border:1px solid black; width:54px; height:54px; background-repeat:no-repeat; } .te
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Browserslist でサポートブラウザを設定しよう - BASEプロダクトチームブログ
Old CSS, new CSS / fuzzy notepad
Accidentally Turing-Complete
コピペで使うマウスオーバー時のhover cssエフェクト28選 | SONICMOOV LAB
Web制作の面倒におさらば、便利すぎるCSS時短ツールまとめ【2024年版】
グラデーション付き影をコピペ作成 CSS Shadow Gradients とおすすめツール
JavaScriptのロゴを調べた話（そしてわからなかった話） - Qiita
HTML+CSSの基本から応用までを習得できる教科書 - mojiru【もじをもじる】
CSS Background Patterns by MagicPattern
Web だって組版の夢を見る――新聞のように自在にテキストを流し込むには
こんなウェブ系フリーランスには仕事を任せられない！
ポートフォリオサイト作ってみた！作ってみたい初心者必見！！ | スキルメーカー for パソコン
放送大学の大学院のパンフレットを取寄せて情報学の学費と科目を検討 - u nextで息抜きする組み込みエンジニア
20 Amazing Pure CSS Animated Buttons - 1stWebDesigner
Introducing Sass Modules | CSS-Tricks
CSS(SCSS) で作るペルソナ5 風メッセージウィンドウ - Qiita
『WordPressワードプレス無料テーマ X-Magazine インストールと設定・使い方』
スクロールに応じて任意のテキストにアニメーションしながらハイライト
『WordPressワードプレス無料テーマ Simplicity Lite インストールと設定』
CSSで絵が描ける！コード入力によるアニメーションやパララックス付きSVG風景イラスト12選
CSSでアニメーションを作ろう！”keyframes”について解説！ - Qiita
remを使ってCSSの文字サイズ指定 | パソコン工房 NEXMAG
えっ！？まだtransformプロパティを使ってるの！？ ｜ TAKLOG
A Blog Post With Every HTML Element