読みやすい＝理解しやすい Webの組版を整理してより良い文章を届けよう - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
😡webのスクロールでふわっと出てくるやつ絶対粉砕するマン【クソアプリ】 - Qiita
おひさしぶりです。この記事はクソアプリ Advent Calendar 2021の13日目です 突然ですが皆さんは「スクロールに合わせてふわっと出てくるwebページ」ってどう思います？ 最近多いですよね、あれ。 確かにオシャレだし楽しいしゲームとか作家さんのギャラリーサイトとかなら全然OK。でも情報が欲しくてアクセスしてるページで「ふわっ」ってされるとちょっとイラッとする。 ちょっと？...イラッと？...いや、 許さない、絶対 よろしい、ならば粉砕だ よそ様のサイトを粉砕する都合上、今回の実装はChrome機能拡張です。機能拡張はViteにChrome機能拡張用のプラグインvite-plugin-chrome-extensionを入れて作りました。今回は解説しないけど、これ超楽。フレームワークは無し、言語はTypeScriptです。 とは言え、クソアプリのためにChromeに機能拡張をイ
フロントエンドの刺激的なコーディング課題6選 - Qiita
素晴らしい課題でコーディング意欲を高めよう。 Photo by Ferenc Almasi on Unsplash. はじめに コーディングを上達させる最も効率的な方法の1つは、できるだけたくさん作ることです。 コーディング課題は、ものを作ることで自分のスキルアップする楽しい方法です。この記事のリストを参考に、何か選んで作り始めましょう！ 急いでいる時や、コーディングのアイディアを枯渇させたくない時は、100以上の課題をここにまとめてあります。 課題には好きなツールを使えるので、練習したいものがあれば、気軽に挑戦してみてください。 1. タスクマネージャUI なんて美しいアプリケーションでしょう！クリーンでモダン、インテリジェントなUIです。 Aysenur Turkによる「CSSグリッドを使ったタスクマネージャーUI」 学べること HTMLでCSSを使用する方法。新しいCSSグリッドを試
あなたのCSS力の助けになってくれる素晴らしいWebサイト12選 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 以下はAman Varma( Twitter / GitHub / stackoverflow / Webサイト )による記事、12 Super websites to help you with your CSS problems ☺の日本語訳です。 12 Super websites to help you with your CSS problems ☺ これらは、あなたのCSSをより楽しく簡単に装飾してくれる、そしてもしかしたらあなたが躓いているCSSの問題の多くを解決してくれるかもしれないWebサイトたちです。 1. Pixe
『まず触ってみて』Vueで使えるCSSアニメーションまとめ１１０選！【完全オリジナルだからコピペOK】 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? コピペだけで作れるマテリアルデザインを個ご紹介します。 box-shadow, filter, transform,などをふんだんに使っており、transitionで滑らかな動きが表されています コードには説明もわかりやすく書いてあるのでかなり参考になります Webデザイン初心者の方はもちろんですが、バックエンドエンジニアの方にもとても助かる内容になっています １. シンプルなスライダーマテリアルデザイン３選 そのまま使えるスライダーアニメーションのマテリアルデザインとなっています transition-durationを使っていてわか
【100%見たことない】完全オリジナル！ハンバーガーメニューのCSSアニメーション３３選（解説付き） - Qiita
コピペだけで作れるハンバーガーメニューのCSSアニメーションを３３個ご紹介します。 box-shadow, filter, transform,などをふんだんに使っており、transitionで滑らかな動きが表されています コードには説明もわかりやすく書いてあるのでかなり参考になります 完全オリジナルでコピペだけで実装できてしまうお手軽なアニメーションとなっています Webデザイン初心者の方はもちろんですが、バックエンドエンジニアの方にもとても助かる内容になっています CSSハンバーガーメニュー３３選 １. コピペだけでCSSアニメーション！そのまま使えるシンプルなハンバーガーメニュー３選 hoverやクリック（タップ）でデザインに変化が起きるよう作ってあるのでWeb制作やWebアプリケーション等でそのまま使えます。 ２. コピペでCSSマテリアルデザイン！Web制作で使えるオシャレなハン
Web Developer Roadmap 2020版が出ていたので2019版と比較 - Qiita
はじめに WEBエンジニアのためのロードマップ(https://roadmap.sh)が2020版に更新されていたので2019版と合わせてざっとですがまとめます。 1つ1つの説明はしないので画像の図を読んでいただくか、2019版を詳しくまとめてくださっている記事を拝読するとよいかもです。 Introduction 2019 2020 Choose your path は昨年と変わらずですが、SOLID, KISS, YAGNIが消えています。 個人的には大事なことだよなーと思ったのですがなくなってしまったようです。 あとは色の説明がなくなっていますが色分けはされているので意味は去年のままという認識です。 黄色→ 作者のおすすめ オレンジ → その他の選択肢など グレー → 非推奨 Frontend Roadmap 2019 2020 Internet 2020版から追加されました。たしかに
Webフロントエンドでアニメーションを実装する時になにを考えるか - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 明けましておめでとうございます。 アニメーションの実装に抵抗を覚えている方、多いのではないでしょうか？ 特に昨今ではサーバサイド出身で最近フロントエンドを触り始めたという方も多いと思います。私が属している組織でもそんな流れは少なからずあるのですが、そういったバックグラウンドの方の声として聞くことが多い声はやはり「CSSは触りたくない、アニメーション怖い」というものです。 私も少し前まではちょっと複雑なアニメーションを見ると「えぇ…」と思っていたものですが、今ではCoolなアニメーションを見ると「どうやって実現しよう」とワクワクするように
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[301] メンテナンスページのHTMLの書き方 - Qiita![[301] メンテナンスページのHTMLの書き方 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/02ce8fc6c30884d949a907af89ec1cb67d4429f9/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCMzAxJTVEJTIwJUUzJTgzJUExJUUzJTgzJUIzJUUzJTgzJTg2JUUzJTgzJThBJUUzJTgzJUIzJUUzJTgyJUI5JUUzJTgzJTlBJUUzJTgzJUJDJUUzJTgyJUI4JUUzJTgxJUFFSFRNTCVFMyU4MSVBRSVFNiU5QiVCOCVFMyU4MSU4RCVFNiU5NiVCOSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9YmMyNGE4YjUwYWVlYzEyNGE4ZWRhMWI5ZGJkMjA0NGI%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzdHVkaW8xNSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MzJlNzBiNWU3YWE3NmQ1MDM0ODkxNDEwMjJjYWJkZGM%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4gUWlpdGFkb27jg6bjg7zjgrbjg7zkvJo%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D31e1b7dccbd925406b89c390a82d1d72)