「動き」を極めるWebアニメーション表現アイデア50選
最近のウェブサイトでよく見かける、スクロールやユーザーの動作に合わせて動く「インタラクティブなアニメーション」が注目を浴びています。 実際、2024年のデザイントレンド予想でも、多くのサイトが「アニメーション」を注目トレンドに挙げており、CSSのスクロール駆動アニメーションやView Transition APIなど新しい技術の登場で、より手軽にウェブサイトに動きを加えることができるようになってきています。 しかし、なんでもかんでも動きを加えてしまうとユーザーの使いやすさ、アクセシビリティを結果的に損なってしまう恐れも。 この記事では、参考にしたいUIアニメーションとインタラクティブなデザインを取り入れた最新コンセプトをまとめてご紹介します。 心地よいアニメーションの基本ルールを知っておけば、より実践的な動きを取り入れることができるでしょう。
2022年に読んでよかったO'Reilly書籍をまとめた
はじめに 本記事では、私が2022年に読んでよかったO'Reillyの技術書とその要点を簡潔に解説する。本記事の内容はあくまで一個人の見解にすぎないので、参考程度に。今後O'Reilly関連の技術書を購入する上で、少しでも参考になるものがあれば幸いだ。 リーダブルコード 読みやすいコード、質の高いコードを書く上で重要な原則が体系的にまとめられている。プログラミング初心者から上級者まで幅広く使える。プログラミングを学ぶ上で重要な原則(例：制御フロー、論理式など)やその書き方をこの１冊でまるごと学べる。本質的な内容と具体的なテクニックが両方ともまとめられていて読みやすい。何回も読み直して普段の開発に活かすべき重要な書籍である。 データ指向アプリケーションデザイン アプリケーションの設計・開発における原則を図解やソースコード付きで丁寧に解説されている。今後のアプリケーション開発における原則をデー
JavaScript初学者【 応用力が身につく！実践トレーニング 】 動画リスト2023年 - Qiita
JavaScript/jQueryを使っていますが「コードを学習」することではなく 「 応用力 」「 創り上げる力 」 を学べるようにしてるのがポイントです。 応用実践トレーニングの内容( 必ず読んで進んでください ) 内容は 「基礎を学んだ」レベルに合わせています。 JavaScriptの「超基礎」のところはプロゲートなどで見ていただくと良いかと思います。 そういった教材で「自分で考えて作れるようにならなかった人」が対象です。 「変数・分岐処理・繰り返し処理・関数・オブジェクト...」を応用できるようにするための教材として作りました。 他の学校、提携校の皆さんもご活用ください！ 「学び方・作り方・考え方」全て揃っています！ ◆JavaScript初学者「効率よく学ぶためのポイントを紹介」準備編 サムネ１ サムネ２
初学者向け！Webサイト制作の独学勉強のコツ
2022年6月29日 Webサイト制作, フリーランス Webデザイナーやフロントエンドデベロッパーを目指す方から、よく勉強方法を聞かれることがあります。彼らなりに調べて、あれこれ学習を続けているようなのですが、「このやり方でいいのか？」と不安に感じるときもあるようですね。ということで今回は私の経験をもとに勉強するときのコツをまとめてみます。具体的な学習内容については各々の目的によって異なると思いますし、「ロードマップ」なるものが巷で出回っているので今回は割愛。 ↑私が10年以上利用している会計ソフト！ いろんなWebサイトを見る 初学者と経験者では見てきたWebサイトの数が圧倒的に違います。いろんなジャンルのWebサイトを見る習慣をつけるといいでしょう。ただ眺めるだけではもったいない！いいなと思ったところや改善できそうなところを探っていくと、自分の引き出しが増えていくはず。コーディング面
フロント学習の最高の教材集 - Qiita
はじめに 今回はフロント学習で重宝できる教材をまとめました。 軽く自己紹介として、自分は新卒でフロントエンジニアとして入社し2022年で2年目になります。 実際に実務を通す中で「この教材のおかげで実装がスムーズにできた」「この教材をやってたおかげで理解ができた」といったような場面が2年の間で多々ありました。 今回紹介する教材は自分自身が実際に使ってよかったものかつ、そのほとんどが無料で学べるor低価格の教材になっています。 「フロントエンドを網羅的に学べかつ実務の基礎作り」という目的で教材を紹介します。 この記事の主な対象者 フロントエンドの学習をこれからしていきたい人 何を学べばよいのかがわからない人 HTMLとCSSはある程度かける人 この記事の目標 フロント学習の指針が立てられる 実務現場でも活用できるスキルを学べる教材を知れる JavaScript ドットインストールのJavaSc
TypeScript入門『サバイバルTypeScript』〜実務で使うなら最低限ここだけはおさえておきたいこと〜
本書『サバイバルTypeScript』は実務でTypeScriptを使う開発者のための入門書です。そして、このページはTypeScriptの特徴を最速で把握できるよう、数百ページからなる本書のコンテンツをつまみ食いした要約です。 » 本書ついて詳しく知る » とにかく今すぐTypeScriptを書いてみたい TypeScriptとはJavaScriptのスーパーセットとなるプログラミング言語。静的型付け言語であり、プログラムの正しさが静的に検査できる。ライブラリやIDEなどの開発環境が充実しており、大きなエコシステムを持っている。Microsoftが2012年に開発し、オープンソースで公開した。» TypeScriptの特徴について詳しく知る » TypeScript誕生の背景について詳しく知る TypeScriptはJavaScriptのスーパーセットスーパーセットとは、元の言語との
【2024年最新版】オススメのプログラミング学習サービス集 - Qiita
はじめに 今回はプログラミング初心者と中級者向けの、プログラミング学習サービスを紹介します。 自分自身が実際に学んできた中でよかったものだけをピックアップしています。 なお、progateやドットインストールといった誰でも知っている学習サービスは省いています。 web制作向け (1) web-design-textbook まずはじめに紹介するのはWeb制作を基礎から実装手法を網羅的に学ぶことができる「web-design-textbook」です。 こちらは基本編~上級編とレベル別になっているので初心者でも入りやすい構成になっています。 かつ問題数もかなり豊富で図を多数用いて解説をしているので独学でも挫折せずに学習を進められる教材になっています。 ぜひこれからWeb制作の学習をはじめたいという人は使ってみてください。 (2) Codestep 次に紹介するのは、HTMLやCSSといった基礎
英語を話せなかった普通の大学生がTOEICで955点を取るまでの全記録｜jqro
2022年9月22日 あれから2,3年が経って、自分も大きく変わった。この記事でどれほどの人に影響を与えることができたのか分からないけど、一定の役割は果たせたのかなと思う。情報と経験の詰まった教材である一方で、自分にとって恥ずかしい過去でもあるので、またこっそりと有料にして物好きだけしかみられないようにしておく。 本記事ではTOEICで955点を取るまでの、自分の3年間の英語学習で得た経験を書いています。さらに質問に答えたり、自分がこれから満点を目指していく中で気づいたことなども随時更新していきます。自分、そして皆さんと共にどんどん成長していくのがこのnoteです。 ATSUにも感想もらいました！ 今更だけど読みました。このノートの価値は、メソッド云々よりもそれを実施した彼が学習過程で体感したことが新鮮かつ体系的にパッケージ化されていることだと感じた。それは何年も前に受験した自分には書けな
強いエンジニアになるために英語が必要と聞いたので４ヶ月でTOEICスコア400→900まで上げた話 - Qiita
はじめに 初投稿です。 筆者スペック 19歳 高卒 某大手自動車メーカー関連会社勤務 エンジニア志望 (Web開発勉強中) 業務の効率化（データ整理・画像処理など）でPythonを書くことがあります。Python歴は半年程度です。 英語学習について、 どのように学習してきたのか記録を残すため 「TOEICのスコアを伸ばしたい」と考える方にとって少しでも参考になれば と思い、記事を書くことにしました。 英語学習の動機 「エンジニアには英語が必要」 論 エンジニア/エンジニアになりたい方なら、1度は「エンジニアに英語は必要か」という議論を目にしたことがあるのではないでしょうか。 自分は現在エンジニアになることを志しています。 そのための情報収集をしていると、「エンジニアに英語は必要なのか？」という主旨の記事、議論を時折見かけます。 そして、その結論は殆どの場合「強いエンジニアになりたい場合、あ
フロントエンドを集中的に学習できる究極の無料リソースを厳選してみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、フロントエンド開発者およびこれから学習をしようと考えている人に最適な無料リソースを厳選してご紹介します。 学習コンテンツばかりでなく、開発に便利なサービスやツールなども紹介しつつ、初心者から中級者くらいまで役に立つドキュメントもまとめています。すべて無料なのでWeb開発にご興味ある方はぜひ参考にしてみてください！ ■何を学習したらいいのかをロードマップで確認する 【 Developer Roadmaps 】 フロントエンドの学習といっても意外に広範囲なので、まずは何から勉強をすればいいのか迷う人も少なくありません。この「Developer Roadmaps」はWeb開発者が勉強するための学習内容をロードマップとして無償公開しています。 さまざまな種類が用意されていますが、例えばフロントエンドの場合は以下のような感じです。 有名なロードマ
TOEIC満点ホルダーがやっているおすすめ英語学習法（2022年版）｜Shin
今回はビジネス系ではなく、英語学習系の記事になります。実は私、20代のころにTOEIC満点を獲得しているバイリンガルでして、英語のミーティング参加やメール作成などの仕事もこなしています。 今年はNFTやメタバースといったweb3の台頭、SaaSグローバル企業との競争など英語に触れる機会も多いので、私が日本にいながら英語力を落とさないためにやっている勉強法をまとめてみました。 今年こそは英語やるぞ！と思っている人はぜひどうぞ。 前提：99％の英語学習者が誤解していること私が今まで出会った中で99％の人が知らない、けど英語ができる人はやっているポイントがあります。それは英語学習というものは「自分が発音できる英語しか理解できない」です。どういうことでしょうか？ 例えば、こちらの単語を見てください。正しく発音できますか？ month これは「月」という意味ですね。2月や12月という月です。発音は「
AWS Builders Online Series AWS をゼロから学ぶ初心者向けイベント | 2024 年 7 月 18 日開催！| AWS 公式
AWS Builders Online Series は、初心者を対象とした AWS の基礎を幅広く学ぶことができるオンラインイベントです(※)。AWS 基礎、生成 AI、モダンアプリケーション開発の 3 つのテーマにフォーカスし、ゼロから学べるよう構成されています。また、デモを交えた分かりやすい説明により、すぐに実践に役立つ知識を習得できます。本イベントは、全てのセッションがライブ配信され、リアルタイムで皆様の質問に回答します。 ※本イベントは、すでに AWS をご利用中のお客様にもお勧めです。最新情報を取り入れた上で、基礎からわかりやすく解説しますので、まだ触れたことのないサービスの理解にもお役立ていただけます。
クリエイティブコーディングの教科書
ゲームエンジンや3Dソフトウェアを利用して高度な表現ができるこの時代でも、プリミティブな描画や動き、アルゴリズムから学べることは多い。それらをJavaScriptで書くクリエイティブコーディングという形で学べる手引書が本書となる。
勉強に集中できないときの5つの対策。チャートですぐわかる「あなたに最適な勉強への集中法」 - STUDY HACKER（スタディーハッカー）｜社会人の勉強法＆英語学習
いざ机に向かってもなかなか勉強に集中できない……。 勉強を始めても集中力がすぐになくなってしまう……。 このような「勉強における集中力」の問題でお悩みの方は、多いのではないでしょうか。そこで今回は、あなたにピッタリの集中法をチャート形式でご紹介します。 上のチャートでたどり着いたものが、いまのあなたがやってみるべき勉強への集中方法！ それぞれ詳しく解説していきましょう。 1. デスクを整理整頓する 「最初から勉強に集中できない」タイプで「そもそも勉強する気がしない」という人は、勉強前にデスクの簡単な整理整頓をしてみてください。 勉強のやる気を出すには、意欲や学習能力に深く関わるホルモン「ドーパミン」の活性化が欠かせません。そこで、脳神経外科医の築山節氏がすすめる最も簡単な方法が、勉強前にデスク周りの整理整頓をすること。簡単な掃除や片づけを行なうと、やる気に関わる脳の「側坐核」が刺激され、ド
英語学習が捗るGoogle Chrome拡張機能7選 | ライフハッカー・ジャパン
YouTubeや海外のWeb記事などを使って英語学習をしている人、始めようとしている人は多いはず。 かさばらず、費用も抑えられる一方で、単語を調べるために、いちいちタブの切り替えやアプリの作動が必要になったり、書き込みができず頭に入らなかったりなど、不便さを感じている人もいるのではないでしょうか。 最近は、そんな悩みを解決する拡張機能が多く登場しているんです。 今回は、インターネット上での英語学習をもっと効率的に進めるためのChrome拡張機能を紹介します。 自分だけの辞書が作れるせっかく調べた単語でも、調べっぱなしでは身につきませんよね。 単語をコレクションできるこの拡張機能では、単語の意味に加え、その単語が使われた文章もストックできるのが特徴。 どのような文脈で使われたかをひと目で把握できるため、単語の理解度も上がりそうですね。
【2021年最新】ブラウザで勉強できるプログラミングサービス10選！｜プログラミング・IT 未経験からの攻略法｜variiis PROGRAMMING MEDIA
「ブラウザで学習できるプログラミングサイトを知りたい」 プログラミングを学習するにあたってブラウザですぐ勉強を始めることができたら便利ですよね。 環境構築する必要がないので、学習のスタートがとても楽になります。 そこで本記事では、これからプログラミング学習を始めたい人向けのブラウザでプログラミング学習できるおすすめサイトを紹介していきます。 当サイト厳選のスクールは以下の通りです。以下リンクから直接公式サイトへ飛べます。 ・TechAcademy【業界最大級の講座数を有する格安オンラインスクール/転職保証コース有り】 ・GeekJob【無料で学べるスクール/500社以上の豊富な就職先・転職成功率97.8%/20代におすすめ】 ・DMM WEBCAMP【転職成功率98%・離職率2％/DMMグループなので紹介先企業も良質・豊富/転職保証コース有り】 ブラウザでプログラミング学習するメリット 本
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
『ぷよぷよ』でプログラミングを学べる！「HTMLとJavaScriptでぷよぷよ作れちゃう」こんなゲームもできるよ
Webアクセシビリティ学習リソースまとめ （2023年3月版）
マルクさんはTwitterを使っています: 「元銀行員として伝えたい。日銀に金融庁、FP協会に財務省。エリートが作ったお金を学ぶサイトが超有益。給与明細から投資、保険にクレカ、インフレやつみたてNISA、仮想通貨まで。小学生から、わかったつもりの大人も。もちろん0円。各資料で学べることや元銀行員的なおすすめ理由をリプ欄に貼ります↓」 / Twitter
【公式】ぷよぷよeスポーツ×プログラミング