【初学者向け】CSR / SSR / SSG / ISRとは？架空アプリでレンダリング手法の違いを理解しよう！ - RAKUS Developers Blog | ラクス エンジニアブログ
初めまして！新卒1年目のmochi_proteinと申します。 CSR / SSR / SSG / ISRがどのような概念か、 架空アプリを例として、それぞれの違いを初学者向けにやさしく解説していきます！ 🔖目次は以下の通りです🔖 はじめに 架空アプリ「楽楽鮮魚」の仕様 前提知識 レンダリングとは？ 動的にHTMLを生成するとは？ CSR（クライアントサイドレンダリング）とは？ 概要 「楽楽鮮魚」が CSR を採用したら？ 初期画面(在庫一覧画面)表示までの流れ 詳細画面への遷移時の流れ CSRのメリット CSRのデメリット どのようなサービスに向いているか SSR（サーバーサイドレンダリング）とは？ 概要 「楽楽鮮魚」が SSR を採用したら？ 初期画面(在庫一覧画面)表示までの流れ 詳細画面への遷移時の流れ SSRのメリット SSRのデメリット どのようなサービスに向いているか S
「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典
2024/04/25 『龍が如く8』をクリアしました。過去作の振り返りも多く、面白かったです。欲を言えば、もうちょっと「桐生ちゃぁん！」を聞きたかったかな。 2024/04/13 コラム「第百回：IT系の資格取得に意味はあるのか 2024年版」を追加しました。 2024/04/07 ピヨピヨ過去問解説の「令和5年度 ITパスポート試験（IP）」が完成しました。 2024/02/29 コラム「第九十九回：脱・時間貧乏」を追加しました。 2024/02/16 令和5年分の確定申告が無事に終わりました。いえーい！ヾ（´∀`）ノ 2024/02/05 コラム「第九十八回：お仕事プログラマ1年生に向けたお話」を追加しました。 2024/01/28 コラム「第九十七回：心の中で秘書を雇う」を追加しました。 2024/01/26 ふと気付いたら『龍が如く8』を衝動買いしていました。買ってしまったものは仕
CSSのkeyframesとanimationをプレビューを見ながら簡単な操作で編集、調整できるOSS・「Animation Studio」 - かちびと.net
Animation Studio Animation StudioはCSSのkeyframesとanimationをプレビューを見ながら簡単な操作で編集、調整できるOSSのWebアプリです。 右ペインのメニュー、keyframesタブでn%及び変化の内容を設定し、animationタブでanimation-nameやduration、そのほかタイミングをベジェ曲線を使ったマウス操作でcubic-bezierを設定、TargetタブでCSSとHTMLを書いてアニメーションさせる要素を設定、Exportタブでコードをコピペする、という流れになります。 単純にアニメーションのセッティングが出来るだけでなく、ややこしいcubic-bezierを直感的な操作で設定出来たり任意のCSSとHTMLを指定出来たりと実践的なアプリという印象でした。 使い慣れるまでも特に学習コストはかかりませんし、導入も難し
【無料】これはうれしい！表現力がアップする最新テクスチャ素材24選
いくらあってもうれしい無料デザイン素材ですが、その中でもテクスチャ素材は使い勝手の良さから人気の高いアイテムです。 商用利用できる無料テクスチャ素材集もアップグレード継続中ですが、今回は2024年に公開されたばかりの最新テクスチャをまとめてご紹介。 2024年のデザイントレンドの代表格「グラデーションカラー」や、人気の高いキラキラ黄金アイテム、レトロ系など豊富すぎる収録数が魅力です。 画像に重ねるだけで印象をがらりと変えるオーバーレイエフェクト向けテクスチャも多くなっています、使い方を一緒に確認しておくと良いでしょう。 全部無料！センスがいいフリーテクスチャ素材セレクション 250 Free Fireworks Textures [4K Resolution] 夜空に舞う大輪の花火250パターンを揃えたテクスチャは、画像に重ねるだけのPhotoshopオーバーレイエフェクトで自由自在のカス
もっと早く知りたかった！Web制作に便利な最新オンラインツール50個まとめ
この記事では、Webデザインやグラフィックデザインの制作スピードが爆速になる、便利な最新オンラインツールをまとめています。 うまくツールやサービスを利用することで、時間や労力の必要な作業もラクラクこなし、よりプロジェクトを円滑にすすめることができるでしょう。気に入ったツールを制作ワークフローに取り入れ、さらなる制作スピードアップを目指しましょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次デザインツールWeb便利ツールFigma・モックアップツールユニーク・面白ツール デザインツール KRESKA.art – Drawing and Painting あらゆるブラウザ上で動作する無料のお絵描き＆ペイントツールで、シンプルで使いやすいインターフェースと、超リアルな書き心地や豊富なブラシコレクションが特長。 Public Work by Cosmos
role 属性とは、aria-* 属性とは、WAI-ARIA とは、いったい何なのか、いつ使うべきなのか - Qiita
role 属性とは、aria-* 属性とは、WAI-ARIA とは、いったい何なのか、いつ使うべきなのかHTMLアクセシビリティWAI-ARIA 最近、いくつかの場面でWebアクセシビリティについて、コーディングに関する技術的な説明をする機会がありました。そのなかで、そもそもWAI-ARIAというものが、どういう立ち位置のものなのかがわかりづらい状態にあるということに気付きました。その結果として、WAI-ARIAの活用を含めたWebアクセシビリティ向上に取り組むことへのネガティブな印象が生まれてしまったり、理解が足りないままWAI-ARIAの属性を使うことでかえって問題が発生しやすくなってしまったりしている現状があるのではないかと思うようになりました。 そこでこの記事では、なるべくわかりやすい形で、WAI-ARIAそのものや、その中で登場する role 属性や、名前に aria- のプレフ
CSSで固定背景画像をセクションごとに切り替えるパララックス実装
はじめに 実装したいのはこんなパララックスです。 各セクション間に背景画像が見えていて、セクションごとに異なる画像に切り替わります。 これを2通りの方法で実装してみます。 background-attachment: fixed で実装 position: fixed + clip-path で実装 先に書いておくと、background-attachment: fixed を使う方法はiOS Safariでうまく動かなかった（2024年9月時点）ため、実際のプロダクトでは後者の方法で実装しました。 必要に応じて前者は読み飛ばしてください。 1. background-attachment: fixed で実装 特筆ポイントは、background-imageを指定している要素にbackground-attachment: fixed;を指定している点です。 背景画像を固定してくれます。
【2024年版】OGPの設定方法と最適なOGP画像サイズまとめ
OGPは、記事がSNSでシェアされたときに、適切なぺージのタイトルやアイキャッチ画像、説明文を表示するために必要な設定です。 SNSでのシェア・拡散を狙っている方はもちろん、少しでもSNS経由のアクセス流入を増やしたい場合、OGPの設定は欠かせないものとなります。 本記事では、各SNSに対応した最新のOGPの設定方法と、最適な画像サイズについて解説しています。 OGPとは OGPとは「Open Graph Protocol（オープン・グラフ・プロトコル）」の略称で、HTML要素の1種です。 OGP設定がされていないと、画像が表示されなかったり、SNS側が勝手に画像や説明文を表示したりしてしまうので、意図しない画像やテキストが抜粋されてしまいます。タイトルと画像のミスマッチが発生し、ユーザービリティにネガティブな影響を与えるでしょう。 また、各SNSでOGPの仕様が異なります。特に画像サイズ
WebでサードパーティのJavaScript、CSSライブラリのCDNを利用したら、プロダクションではDLしたものを使うべきだと先輩に注意されました。このことについてどう思いますか？
回答 (3件中の1件目) CDN を使うということは、そのCDNの配信者を「信用する」ということです。「信用する」というのをもう少し詳しく言うと、「裏切るメリットが十分に小さい」ということです。 極端な例として、大手銀行が弱小CDNのフロントエンドライブラリをつかっていたとしましょう。そのライブラリに細工を紛れ込ませば、あなたが振込に使う秘密のパスコードを抜き取ったり、振込先を密かに改変したりすることができます。CDNの運用者の中にずるがしこい人が一人いれば、誰にも気づかれずに億単位の金をかすめ取ることが可能でしょう。銀行が弱小CDNを使うべきではない理由は明らかですね。 一方で、銀...
実例で学ぶFlexboxとCSS Gridの使い分け – TAKLOG
タイムラインを見ていると「flexとgridの使い分けがよく分からないよ」という人が多く散見されるので、今回は僕が普段意識していることを皆さんに紹介します。 これから紹介することはあくまで僕のやり方で、絶対的な正解とかではないので参考程度に留めておいてください。実装において頻出するレイアウトをサンプルに、どのように考えてレイアウトを組んでいけばよいかを自分なりに説明できたらなと思います。 はじめに僕がレイアウトを組む上で大事にしていること、および意識していること。それは、レイアウトに変化が起こった際に崩れが生じないことはもちろん、将来的な変更に対して柔軟に対応できることです。 極論を言ってしまえばgridは使わなくても大抵のレイアウトは組めてしまいます。Internet Explorerに苦しめられていたあの頃を思い出してみてください。現在でもgridは難解だからflexだけ使用するって方
デザイナーにもお勧め！ CSSもThree.jsもタイムライン編集を可能にするTheatre.jsが凄い - ICS MEDIA
デザイナーにもお勧め！ CSSもThree.jsもタイムライン編集を可能にするTheatre.jsが凄い ウェブサイトの演出を作る上でアニメーションの実装は欠かせません。一般的には、CSSアニメーションやJavaScriptのライブラリ（GSAPジーサップなど）を用いてコードベースで動きをつけることが多いと思います。ですが、完全にコードだけでアニメーションを調整するのは大変だと思ったことはないでしょうか？ 一度実装したことがある方は共感いただけるかもしれませんが、少し直そうにもコードに戻って調整し、反映されたブラウザ画面を確認して、もう一度コードを直して…と往復していると結構大変です。また、アニメーションさせるプロパティや要素が複数ある場合には、コードを解読する難易度も上がります。 本記事ではそんな悩みを解決できる、GUIからアニメーションを調整できるライブラリ「Theatre.jsシアタ
【Vue3/Vite】スマホでlocalhostを確認する方法 - Qiita
はじめに レスポンシブのWebアプリを作成していると、ローカルで開発中の状態を実機のスマホで確認したいと思うことはありませんか？？ はい！私はあります。 とてつもなく簡単なんですが、意外と詰まったので共有しようと思います。 前提 スマホとPCで同じWifiを利用していること スマホでlocalhostを確認する手順 1. --hostを追加する 普段通りnpm run devをすると、下記のように表示されませんか？？ VITE v4.0.4 ready in 220 ms ➜ Local: http://127.0.0.1:3000/ ➜ Network: use --host to expose ➜ press h to show help
20 Super Useful CSS Animation Libraries
A hand-picked collection of the best 20 CSS animations curated from various sources around the web. Most of them will generate pure CSS code without requiring any external libraries. If you want to explore more frontend tools and resources, visit our page 180+ Best Frontend Development Tools to find out more. 1. Animate.css A library of ready-to-use, cross-browser animations for you to use in your
GSAP ScrollTriggerのプロパティ一覧(2023/4) - Qiita
はじめに ScrollTriggerは、GSAPのプラグインの一つで、スクロールベースのアニメーションをささっと作成できる便利なライブラリです。 基本的には簡単に使えるのですが、意外とプロパティがたくさん用意されており、これらを適切に用いることでより効果的にアニメーションを作成できます。 API Docsは割と簡単な英語でまとめられていますが、これをもとに日本語でまとめてみます。(Version3系) 2023/04/24 onKill、onRefreshInit、onUpdate追加（前者2つはドキュメントの中で見当たらないけど使えた） プロパティ一覧（アルファベット順） animation 値形式：Tween | Timeline ScrollTriggerによって発火させるアニメーションを指定します。 1つのScrollTriggerにつき1つのアニメーションしか制御できません。 よ
GSAPのScrollTriggerで横スクロール制御 - Qiita
はじめに 世の中にはリッチで素敵なアニメーションが効いたwebサイトがたくさんあり、思わず見惚れてしまうことがありますよね...! そんなwebサイト達を眺めていた時、ある地点までスクロールした途端に横スクロールに切り替わるアニメーションがあり、その実装方法が気になったので調べて今回軽いデモを作成してみました。 これがはじめての記事投稿で拙い内容になってしまいましたが、どなたかのお役に立てれば幸いです！ GSAPの「ScrollTrigger」とは？ GSAP（GreenSock Animation Platformの略）はGreenSock社が開発しているJavaScriptのアニメーションライブラリであり、シンプルで豊富なアニメーションを表現できるため、web制作のアニメーション実装を手軽に行うことができます。 その中のライブラリのひとつに「ScrollTrigger」があります。 こ
滑らかなスクロール体験を！ JSライブラリでお手軽に導入する慣性スクロール（前編） - ICS MEDIA
ウェブサイトをスクロールした時に、他のサイトよりも滑らかに余韻が残るような動きを目にしたことはないでしょうか？ このスクロールの挙動は慣性スクロールと呼ばれ、ウェブサイトを演出する手法のひとつです。 スクロール操作を止めた後に少し余韻が残りながらスクロールが継続することで、コンテンツをスムーズに閲覧できたり、演出と組み合わせることで世界観や没入感を表現できます。また、macOSに比べるとWindowsはデフォルトでスクロールしたときにカクカクと動くため、慣性スクロールを実装するとWindowsでもmacOSのように滑らかにスクロールさせることができます。 前編である今回の記事では、慣性スクロールを使ったウェブサイトを紹介し、簡単に実装できるライブラリ「Lenis」で実際に慣性スクロールを実装してみます。 慣性スクロールが使われているサイト 慣性スクロールはどのようなウェブサイトで使われてい
CSSのみで実装できる！テキストリンクのホバー時に、カラーをアニメーションで変更させる実装方法のまとめ
テキストリンクをホバーした際に、テキストのカラーをスライドのアニメーションで変更させるピュアCSSの実装方法を紹介します。 IEには対応してないけど実装が簡単な方法、IEに対応しているけど実装がちょっと面倒な方法など、プロジェクトの要件に適したテクニックをご利用ください。 4 Ways to Animate the Color of a Text Link on Hover by Katherine Kato 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. background-clip: text;を使ったテクニック 2. widthまたはheightを使ったテクニック 3. clip-pathを使用したテクニック 4. transformを使用したテクニック まとめ はじめに ホバー時にテキストリンクのカラー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
lenis.jsでposition:fixed要素のoverflow:scrollを効かせる - Qiita
Comment shortcut in normal HTML file leads to nunjucks comment, not HTML comment · Issue #11 · ronnidc/vscode-nunjucks
Web制作の面倒におさらば、便利すぎるCSS時短ツールまとめ【2024年版】
