こんにちは。FASTCODINGデザイナーの七転び八重子です。 Webサイトで使いたい！カッコよくて、オシャレなテキストエフェクト・アニメーションをまとめてみました。 今回は、codepenから探してみました。 CodePen Home CSS3 text-shadow effects 綺麗なテキストシャドウです。CSS3で実装可能。 See the Pen CSS3 text-shadow effects by Jorge Epuñan (@juanbrujo) on CodePen. Rotating text テキストの一部が変わっていきます。使えそうな予感。 See the Pen Rotating text by Rachel Smith (@rachsmith) on CodePen. Shattering Text Animation メインビジュアルに使えそうですね。ループ
ラクスフロントエンド開発課が測定するWebパフォーマンス指標と測定方法 - RAKUS Developers Blog | ラクス エンジニアブログ
はじめに はじめまして、ラクスフロントエンド開発課の斉藤です。 普段フロントエンド開発課では、一部のプロダクトにおいて新しく開発した機能を実装した画面や、パフォーマンスの劣化が懸念される画面に対して、性能計測を行っています。今回はフロントエンド開発課がどのようなWebパフォーマンス指標を計測しているのか、なぜその指標を採用したのか、どのように計測しているのかを紹介したいと思います。また、パフォーマンスを計測している中で不便に思っていることや改善していきたいことについてもご紹介します。 注意点として今回紹介する指標や計測ツールは、あくまでもラクスのプロダクトに合わせて選定したものであるため、他社様、あるいは個人にとって最適なものと言えるわけではありません。参考程度にお読み頂ければ幸いです。 はじめに 対象読者 この記事で扱わないこと 結論 計測する指標と目標スコアの一例 計測ツール 選定理由
※本記事は2020年4月に公開された内容です。 シェアフル社のフロントエンドの技術顧問をしている翁華宏（@kahirokunn）と申します。SIer出身で、数社を経て現在はフリーランスとして活動しています。主にフロントエンド開発に貢献しているほか、イベントへの登壇も行っています。 今回はフロントエンドの中でも、React入門編をお話したいと思います。Reactは現在のフロントエンドの主流となっている技術です。初心者の方向けに入門として解説していますので、どのように学ぶべきかといった勉強法のポイントや、躓きやすいポイントなども是非チェックしてみてください。 React関連の案件検索はこちら そもそもフロントエンドとは フロントエンドエンジニアの主な仕事は、ユーザーが触る画面を作る事です。画面の特徴にはいくつか種類があり、それぞれ求められるスキルの幅も異なります。例えばシステム系のシステムのフ
ぼくの職場の新人さん向けに、サイト制作（とくに静的サイト）を作るのに便利なサービスをまとめたので記事にしました。 もう少しあるので、あとで加筆修正するかもしれません。 静的サイトジェネレーター『Hugo』『Middleman』などお好みで StaticSiteGen 静的サイトジェネレーターは、結局生成されるのはhtml+css+jsなので、好みの物を使えばいいと思います。 このブログではHugoを利用していて、確かにビルドはめっちゃくちゃ早いですが、スクラッチで制作・開発するなら慣れているRuby+Middlemanのほうがサクっと作れます。そんな感じで使い分けても良いと思います。SPA(Single Page Application)に近いものを作るなら、VueとかReactなどを採用したフレームワークを使えばいいですし。 ホスティング『Netlify』 Netlify: All-in
【しつこく】ちょっとCSSの実験【複数要素でのアニメーション同期】 - Little Strange Software
どうも！LSSです！！ ちょっと何がしたいのか、LSSにも分からないシリーズ（？） little-strange.hatenablog.com の続き、です。 2021/8/29追記 Windows＋GoogleChrome環境で動作確認していますが、FireFoxやSafariなどで文字のほうが正常に動作しないようです^^; サンプル コード CSSにはアニメーションの同期をとる指定はないようですが… サンプル だいぶ前の写真を 引っ張り出してきました！ｗ コード <style><!-- :root{--txtop:0;} @keyframes tbds{ 0%{top:-20%;left:100%;} 30%{top:5%;left:2%;} 31%{top:5%;left:8%;} 32%{top:5%;left:3%;} 33%{top:5%;left:7%;} 34%{top:5
ちょっとびっくり→Microsoft365に図形のSVG保存機能があったんですね - Little Strange Software
どうも！LSSです！！ Microsoft365（旧称Office365）…WordやExcelなどのいわゆるOfficeソフトですね。 それに昔から「図形の挿入」機能があり、多角形や矢印、フキダシなど様々な図形を用意に挿入する機能がありました。（図形・図・オートシェイプなど色々な呼び名があります） が、それにいつの間にか「図形をSVGとして保存する」機能がついていたようです！（実は結構 前かららしいですｗ） …ただし、サブスクのMicrosoft365のみで、無料Web版のものや、手元にある2016ではできませんでした^^; 職場のPCに入っているのはサブスクのMicrosoft365でしたので、そちらではすんなり可能。 描いた図形を右クリックして「図として保存」を選び、ファイル名を入力するダイアログ上でファイルの種類を選択するところにフツーに「SVG」が入ってます！ SVG形式で保存す
SVG：いいヤツ、悪玉、醜い奴
この記事は、著者の許可を得て配信しています。 SVG: The Good, the Bad and the Ugly SVGは「スケーラブル・ベクター・グラフィックス（変倍ベクタ図形）」の略で、スケーラブル・ベクター・グラフィックスのためのフォーマットです。この記事では、このフォーマットについての私の意見、問題点、改善点やまた改善のためにすべきことなどをまとめました。 私は数年前からInkscapeと共にSVGをスケッチやグラフィックのために定期的に使っています。私はコードを通して精密さを追求し、アートへの愛を満たすために手書きで書くのが好きです。SVGと私はある種の愛憎関係にあります。SVGはパワフルで、オープンソースの素晴らしい無料ツールがありますが、フォーマット自体はかなり醜いです。 メリット vector graphicsのフォーマットです。Adobe IllustratorからI
D3.jsを使ってデータをビジュアライズしよう
D3.jsはSVGを使って高度なビジュアル化を行うライブラリです。 グラフに限らず、様々なチャートやビジュアルの表現ができますが、複雑な仕組みを覚えなければなりません。他のグラフライブラリなどではCSVデータを適用するだけというものもありますが、D3.jsはそこまで簡単ではありません。 今回はD3.jsで折れ線グラフ（Line Chart）を描画してみる | Will Style Inc.｜神戸にあるウェブ制作会社を参考に、なるべく段階を区切ってD3.jsの使い方を解説します。 インストール インストールはMonaca IDEのJS/CSSライブラリの管理でD3を検索するか、index.htmlに次の記述を行います。 <script src="https://d3js.org/d3.v5.min.js"></script> HTML側での準備 HTMLは body タグ内に次の記述を行いま
CSS Nite LP64「Coder's High 2019」フォローアップ（4）鹿野 壮さん、松下 絵梨さん｜CSS Nite公式サイト
CSS Nite LP64「Coder's High 2019」フォローアップ（4）鹿野 壮さん、松下 絵梨さん 記事公開日：2020年1月 2日（木） 2019年10月19日に大崎ブライトコアホールで開催したCSS Nite LP64「Coder's High 2019」のフォローアップとして、鹿野 壮さん（ICS）、松下 絵梨さん（ツキアカリ）の『デザイナーとコーダーをつなぐ、Adobe XDを用いたモダンなウェブ制作』セッションのスライドなどを公開します。 スライド（PDF）デモファイル動画 2019年10月19日開催のCSS Nite LP64で「デザイナーとコーダーをつなぐ、Adobe XDを用いたモダンなウェブ制作」セッションを担当した松下・鹿野です。今回はご参加ありがとうございました！ アンケートでは「XDの便利な使い方を知れてよかった」「ダークモード対応について初めて知った
はてなブログ10周年特別お題「はてなブロガーに10の質問」 いつも読んで頂きありがとうございます。 はてなブログ10周年お題キャンペーンのお題の1つ「はてなブロガーに10の質問」に答 えてみます。前回さじ(id:conasaji)さんの企画で100の質問がありましたが、はてな側が これを参考にしたかもしれませんね。 ◆のんべえの100の質問の答えに興味がある人はこちら◆ whisky-coke.hatenablog.com それでは今回のお題をやってみましょう！ はてなブロガーに10の質問 1. ブログ名もしくはハンドルネームの由来は？ ブログ名の由来は2009年にFC2でブログを始めましたが、当時は日々の出来事を書い ていたので、のんべえの日常茶飯事というブログ名でしたが、はてなに引っ越しする ときに気楽に好きな事を書こうと思ったことから、のんべえの気まぐれになっていま す。おっと！これ
達人出版会
探検! Python Flask Robert Picard, 濱野 司(訳) BareMetalで遊ぶ Raspberry Pi 西永俊文 なるほどUnixプロセス ― Rubyで学ぶUnixの基礎 Jesse Storimer, 島田浩二(翻訳), 角谷信太郎(翻訳) 知る、読む、使う！ オープンソースライセンス 可知豊 きつねさんでもわかるLLVM 柏木餅子, 風薬 実践力をアップする Pythonによるアルゴリズムの教科書 クジラ飛行机 スッキリわかるサーブレット＆JSP入門 第4版 国本 大悟(著), 株式会社フレアリンク(監修) 徹底攻略 基本情報技術者教科書 令和6年度 株式会社わくわくスタディワールド 瀬戸美月 徹底攻略 情報セキュリティマネジメント予想問題集 令和6年度 五十嵐 聡 詳説 ユーザビリティのための産業共通様式 福住 伸一, 平沢 尚毅 DX時代の観光と社会
1.Tooltip こちらは定番ですね！ 特に、何か注釈などの追加情報をユーザーに知らせる時はよく利用します。要素のホバー時だけ表示できるので、エリアの狭い箇所でも利用できるUIです。ただ、警告などの内容には非推奨な点やモバイルユーザーの考慮を必要とする点はデメリットですかね。 // page.tsx <div className="mt-10 mx-auto text-center"> <Tooltip label="ここに説明が入ります。ここに説明が入ります。ここに説明が入ります。ここに説明が入ります。"> <span className="p-2 bg-gray-100 rounded-full">🗑️</span> </Tooltip> </div> // Tooltip.tsx import { ReactNode } from "react" type TooltipProp
パフォーマンスを考慮して画像を最適化する方法
ウェブサイトを運営していれば、Googleからの評価は非常に重要。画像ファイルのサイズを小さくすると、ウェブサイトのパフォーマンスを改善できることはご存知でしょうか。 画像を最適化する際に気をつけたいのは、圧縮することで画質が損なわれてしまう点（その結果、訪問者によからぬ印象を与えてしまうことも）。とはいえ、見た目が明らかに損なわなければ問題ありません。 ウェブサイトに使用するのに十分な画質を保ちながら、画像サイズを縮小するコツや方法は複数あります。 今回は、画質を損なわない画像の圧縮方法と、パフォーマンスを改善する画像最適化について掘り下げていきます。 重い画像はウェブページを遅くするため、ユーザーエクスペリエンスが悪化します。画像の最適化とは、プラグインまたはスクリプトを使用してファイルサイズを縮小するプロセスのことです。これにより、ページの読み込み時間が改善されます。よく使用される処
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web上でアニメーションを実現する方法は幾つかあります。アニメーションGIFを使う方法、CSSアニメーション、そしてSVGやJavaScriptを使うこともできるでしょう。ユーザ操作によるインタラクティブなアニメーションを実現しようとすると、JavaScriptが選択肢になります。 しかしWebブラウザ側でJavaScriptをオフにされるだけでJavaScriptベースのアニメーションは実現できなくなります。そこで参考にしたいのがSVG ANIMATIONSです。 SVG ANIMATIONSの使い方 SVG ANIMATIONSはCSSとSVGのみでアニメーションしています。JavaScriptも画像も使われていません。 複雑な幾何学模様系のアニメーションが多いです。 線が動く
ごきげんよう、和風デザイナーの清水です。 2021年に東京オリンピック、2025年に大阪万国博覧会の開催が決まりより日本らしいデザインが求められてる傾向にあります。 和風デザインのコツについては詳しく見ていきましたので、今回は和風デザインのホームページについてご紹介致します。 和風デザインの特徴和風デザインは時代によって変わり多様なデザインが表現可能です。 白鳳文化の高松塚古墳壁画のような華やかな色彩美、質素で静かなに美を見出す室町時代の侘び寂び、江戸時代になると琳派や狩野派など豪快で力強い… これらの時代の絵画、建築、彫刻、工芸など見られる特徴や技法をデザインの要素に取り込むことで「和風デザイン」をつくる事ができます 和風デザインホームページでありがちな事時代背景がめちゃくちゃになってしまうホームページに関わらず、和風デザイン全体に言える事なのですが『色』『テクスチャー』などが時代に即し
deSVGは、imgタグで設置しているSVGファイルをインラインSVGに変換してくれるJavaScriptライブラリです。 SVGの色をCSSで変更しようと思った場合、imgタグで設置されているSVGファイルは変更できず、インラインSVGとしてHTMLにコードが記述されている必要があります。 ですが、SVGのコードは非常に長くなる場合もあり、HTMLに直接記述するのは嫌だなーと思うかもしれません。そんな時はdeSVGを使えば、HTMLにはimgタグとして記述し、ページが読み込まれた時にインラインSVGに変換するといったことが可能になります。 例えば、以下のようにimgタグでsample.svgを読み込んでいたとします。 <img src="sample.svg" alt="" class="svg"> deSVGを使うと、以下のようなインラインSVGに変換することができます。 <svg i
どうも！LSSです！！ ブロガーをしばらくやってて、交流とかも増えてくると「言及」をいただく機会も増えてきます。 はてなブログでいうところの「言及」とは…端的にいうと「自分の記事・ブログ」に、他の方のはてなブログ記事からリンクしていただく事。 つまり紹介ですね^^ なお、「言及」していただけると、通知が来るほか、「アクセス解析」画面の下のほうに言及していただいた履歴が確認できます（PC版のみ） なお、スマホでも確認する方法はあります。 詳しくは以前、記事にしましたので、興味のある方は ↑をご確認ください^^ というわけで、今回は最近いただいた言及についての謝辞 カタカタ自己主張する見出し 雪の結晶 コメントを書くボタンの外観 JavaScriptで存在しないファイルをダウンロード SVGを試して見る あとがき というわけで、今回は最近いただいた言及についての謝辞 …しつつ、しれっと自身の過
【SVG】SVGでアニメーションを指定してみる - Little Strange Software
どうも！LSSです！！ に続き、今度はこの絵にアニメーションで動く「雲」を追加してみます！ SVGアニメーションを追加した絵 コード 雲を楕円で描きます またも円形グラデーション ここからアニメーションの話 あとがき SVGアニメーションを追加した絵 コード <p>[] <svg xmlns="http://www.w3.org/2000/svg" width="300" height="400"> <defs> <radialgradient id="rg" cx="75%" cy="20%" r="20%"> <stop offset="30%" stop-color="white"></stop> <stop offset="100%" stop-color="lightblue"></stop> </radialgradient> <radialgradient id="rgc"
最近はギガ単位のデータをダウンロードすることもさほど珍しくはなくなってきましたが、ネット上の大容量のデータを受信してサービスが動作するまでに欠かせないのがローディング・アニメーションだったりします。 今回はこのローディング・アニメーションについて良さそうなものをピックアップしてみましたので、ぜひともチェックして使ってもらえればです。 関連：使える！CSSアニメーション 20選 ちょっとクール CSS loading animation 12 CSSだけで描かれたものです。 ゲームで見かける Rotate / Pulse Loading Animation ゲームで見かけそうなローディングです。 ヘキサゴンアニメーション overwatch loading by css3 ローディングでなぜか見かけることの多いような気がする六角形のアニメーションです。 CSSのみ Cube Flipping
多種多様なCSSローダー集
Result CSS製ローダー集です。以前は一つの要素で三角を使った複雑な動きをするローダー集をご紹介しましたが、今回は複数の要素を使ってより複雑で多様的なCSSローダー集となっています いくつかの要素やSVG、細かく設定されたkeyframesアニメーションなど様々なローダーが集められています。はみ出したりしてるのもありますが いくつかご紹介したかったんですが、今日はちょっと時間無いので割愛します。コードはPen内をご参照下さい。 プレフィックス付きが多いので必要に応じて見やすいようになさってください viaLoaders for website
今回の記事では、webサイトのメインビジュアルに設置することが多い、超オシャレなスライドショーのサンプルを厳選して紹介していきます。 スライドショーといえば、slickslideやswiperなどが定番のプラグインですよね。 オプションが豊富で汎用性が高いので、普段からお世話になっている人も多いはず。 僕もコーディングを担当するときは大体ここら辺のプラグインを使うことが多いです。 ですが、webサイトの花形であるスライドショーにいつも同じプラグインを使っていて良いんだろうか？ ふとそんな疑問を抱いてしまう人もいるのではないでしょうか。 今回はメジャーなプラグインに囚われず、柔軟な発想でオシャレな動きを実装しているスライドショーをまとめてみました。 コピペで使うもよし、動きのアイディアだけ拝借するも良しです。 中にはブッ飛んだ動きを実装しているものもあるので、いつものスライドショーに飽きてし
カレー、ほかほかにさせたくない？ というわけで、今回はカレーに簡単なCSSアニメーションをつけていきたいと思います。 対象 CSS書けるけど、もうちょっと表現を豊かにしたい人 CSS アニメーションなんのこっちゃ カレーのルーはご飯の真上にぶっかける人 といった方に向けて書いていこうと思います。 CSSアニメーションのテクニックとか、速度を考慮したらこれがベストだ！等の 上級者向けのものは書きません。（当方まだまだペーペーなので） あくまで基礎のご紹介です！ そもそもCSSアニメーションって？ CSSは以下のように定義されています。 カスケーディングスタイルシートCascading Style Sheets (CSS) はスタイルシート言語であり、 HTML や XML (方言である SVG, MathML, XHTML などを含む) で記述された文書の体裁や見栄えを表現するために用いられ
クライアントからWEBサイト制作の依頼を受ける立場。 自社内にデザイナーがいるためデザインは出来るが、コーディング出来る人がいないため、外注に依頼したい。 もしくは、デザイン・コーディング両方を内政化しているが、リソースが足りないためさばき切れない案件を外注に依頼したい。 以上のように、クライアント直請けではなく制作会社を挟んだ二次受けになる事が多いです。 デザインスキルもあり、WEBサイト制作を一気通貫で行える人であれば、クライアントさんから直請けしやすいでしょうし、仕事の幅も一気に増えると思います。 自分の場合は、凝ったデザインで無かったり既存サイトの改修であれば、クライアントさんから直請けする事もありますが、デザインセンスが壊滅的にないので、基本デザインは行っていません。。 STEP0：制作環境について 制作フローの話の前に、マークアップエンジニアとして案件をこなすために準備しておき
SVGとCSSで簡単な描画アニメーションを実現する
SVG形式に対応するブラウザが増えたことにより、利用するシーンが増えてきた画像形式です。このSVGとCSSを利用することで、簡単なアニメーションを実現することができます。 SVGファイルとは SVGファイルとは、JPGなどのビットマップデータと違い、ベクターデータであることが特徴です。JPGやPNGなどのビットマップデータは、画像を拡大・縮小すると劣化しますが、SVGデータは劣化することがありません。そのため、ロゴなどの単純な画像に適した形式だと言えます。 SVGファイルの作り方 SVGファイルはイラストレーターで制作することができます。ロゴや自作したデータをSVG形式で保存することで、SVGファイルを制作することができます。 SVGファイルの中身 まずは、下記の画像を確認してください。 上記の画像のようにHTMLにコードを記述することで、画像を表示することができるのがSVGファイルの特徴
今回はFigmaとSVGatorを使ってアニメーションを作る方法をご紹介します。 手軽にアニメーションを作成してみたいと思った時に触れたSVGatorですが、アニメーションの知識があまりない、私でも簡単に作ることができました。 Lottieアニメーションをつくりたい！という方は、下記の記事もおすすめです。 After EffectsとLottieを使ったアニメーションについて、モーションデザイナーの田口さんが記事を書いています。ぜひ合わせてご覧ください。 ウェブサイトやアプリで使えるLottieアニメーションの基本。作成方法や注意点などを解説 Lottieアニメーションの作成に必要な「Bodymovin」のダウンロード・インストール方法 使ったきっかけ 私が入っているコミュニティで、「SVGatorの有料プラン1ヶ月使えるけど使ってみる？」と声をかけていただいたことがきっかけでした。 SV
アニメーションで魅せるポートフォリオサイトの制作過程を紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
思いのほか反響があり、三大Webアワードのawwwards CSS Design Awards FWA を受賞することができました。とても嬉しかったです。 この記事では制作を振り返りつつ、技術周りのことや、動きのあるWebサイトを作る意味を書いていきたいと思います。 ポートフォリオサイト制作過程 自分らしいデザインを目指し、デザイナーさんをアサイン ポートフォリオサイトを作ろうと思ってから、デザインを自分でやるかずっと迷っていたのですが、元LIGのデザイナーさんにポートフォリオサイトの話をしたらバイブスが合って作ってくれることになりました。 このデザイナーさんとはLIG在籍時代に一緒によく案件をやっていて、以前自己研鑽で制作していたデザイン案がとても好みだったのでそのテイストにして欲しい、パーティクルを使って欲しい、アワードを取れるクオリティにして欲しいと伝えました。 今振り返るとすごくふ
スタイリッシュなデザインの区切り線・水平線（hrタグ）のCSSサンプルをまとめました。デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインのメニューは利用者の興味を引き付けます。 文章やコンテンツの区切りでつかわれるhrタグ。文章をたくさん扱うサイトなどでは、利用するユーザにとってもひと目で区切りがわかるので、とても重要です。 一方でhrタグは仕様上シンプルになりがち。カッコいいデザインにするために、hrタグ以外を使って水平線を表現しているサイトも多く見受けられます。本記事ではフォームの中でも「区切り線・水平線」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。 まずは基本！シンプルでわかりやすいhrタグ要素のCSSデザイン例。基本的なhrタグのバリエーション一覧 その①See the
アニメーション。 それはWEBサイトには欠かせない演出です。 最近のWEBサイトはアニメーションがかなり複雑になってきている印象です。 ただ、アニメーションって結構難しいですよね。 簡単なアニメーションならcssでちょちょっと書けばできますが、いくつものアニメーションが連動しているものになってくると難易度があがります。 とはいえ、そんな複雑なアニメーションでも、GSAPを使えばわりと簡単にできちゃいます。 この記事で実装する完成デモこの記事で実装するアニメーションの完成デモページは以下になります。 デモページを見る 結構複雑そうですよね。 でも、GSAPを使えば簡単に実装できます！ GSAPとは?GSAPとはアニメーションを実装するために特化したライブラリです。 公式サイト GSAPには2つのライセンスがあります。 1つは「Standard License」。 もう1つが「Business
今回は、cssのみでなんともおしゃれに動くハンバーガーメニューのサンプルを紹介する記事となっています🍔 webサイトといえばハンバーガーメニュー。ハンバーガーメニューといえばwebサイト。 そういっても決して言い過ぎではないくらい、ハンバーガーメニューはwebサイトにおける定番のUIの一つですよね。 とはいえ、実装には通常ではjavascript（jQuery）を使用する必要があり、ハンバーガーメニューのコーディングとなると身構えるwebクリエイターの方も多いのではないでしょうか？笑 僕もかれこれ6年ほどweb制作をやっていますが、なんだかんだいつも時間をかけてしまうところでもあるんですよね。 そこで今回は、面倒なjsのコーディングが必要無い、cssのみで作成されたおしゃれなデザインのハンバーガーメニューを厳選して紹介していきます。 本記事で紹介しているものは汎用性が高く、かつデザイン性
OpenAPI、コードから書くかスキーマから書くか | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]
株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 みなさんこんにちは、川崎です。 OpenAPI Specification（以下OpenAPI Spec）をAPI仕様書を設計するフォーマットに採用するとき この２つの選択肢があることはご存知でしょうか？ コードからOpenAPI Specに準拠したスキーマファイルを生成するコードファースト API仕様書からコードを生成するスキーマファースト 私はAPI仕様書を設計するフォーマットを決めるとき、OpenAPI Specをコードファーストまたはスキーマファーストとして採用するか非常に迷い、結果的にスキーマファーストを選択しました。 似たような悩みを持つ方は私以外にもいると思うので、今回はOpenAPI Specを採用したAPI仕様書におけるコードファースト、ス
![OpenAPI、コードから書くかスキーマから書くか | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/28fe57ce51374812cba56ff4cc3925bbaedc026f/height=288;version=1;width=512/https%3A%2F%2Ftechblog.raccoon.ne.jp%2Fwp-content%2Fuploads%2F2021%2F09%2Fdd-3.jpg)
サイトの読み込みが終わらないのでアニメーションを調べてみた
この記事は CAMPHOR- Advent Calendar 2019 2日目 の記事です。 こんにちは、ほないです。Advent Calender の記事を書くのは、CAMPHOR- 以外のものも含めて初めてなので、わくわくしています。 1日目のあたらんさんの記事、おもしろかったです。私も質問箱をつくりたくなりました。 今回はフロントエンドのアニメーションの話です。CSSやSVGのアニメーション、マイクロインタラクション、UIデザインに興味がある人におすすめの内容です。最後まで読んでいただけるとうれしいです。 ローディングでくるくる回るアレ 「あれ？ローディングが終わらない…」 スマホアプリやWebアプリで使われるインジケーター、みなさんも見たことがあると思います。データを取得しているときに表示して、ユーザーに「今がんばってるのでちょっと待ってね」ということを伝えるためのものですね。 あ
正直CSSは根本的に作り直してほしいと思うのですが、それはそれとして毎年大規模にJavaScriptの使用状況を調査しているThe State of JS(2018年日本語訳)という組織が、今年はCSSにも手を出しました。 以下はThe State of CSS 2019の日本語訳です。 The State of CSS 2019 ※↑元ネタは全部CSSで書かれてる Introduction Web開発ファミリーの中でも、JavaScriptは気が短く、毎年流行に流される10代の若者のように反抗的で、それを理解するには年を取り過ぎたと皆が感じています。 いっぽうCSSは勤勉で、礼儀正しく、決して妄断を下すことのない優等生です。 しかし、気を許さないでください。 CSSは既に20歳を超えているにも関わらず、今さらJavaScriptような激動の10代を迎えつつあるのではないかという兆候があり
はじめに この記事は『Picture perfect images with the modern img element』という記事を参考に画像最適化に関しての重要な観点をまとめたものです。 画像はWEBにおいても重要な役割を担っており、2021年時点で1つ以上の画像を含むWEBサイトは95.9%、faviconなども含めて1回でも画像取得のリクエストを送信するWEBサイトは99.9%であるという調査もあります。 さらには、LCP要素の約70%が画像であるという調査が出ています。 Largest Contentful Paint（LCP）は、Googleが提唱するCore Web Vitalsの1つで、ウェブページのパフォーマンスを測る指標です。詳しくは次の章で解説します。 つまり、WEBのパフォーマンスにおいて画像の最適化は重要な観点でありユーザ体験に直結することがわかります。 画像最
いつも読んで頂きありがとうございます。 たまに夜な夜なCSSで遊んでいるのんべえです！以前、ＬＳＳさんもCSSシェイプを記事 にして私もCSSシェイプの座標をExcelで調べるという記事を書きましたが、CSSシェイ プでアニメーションが作れるので紹介します。 こちらのサイトを参考にしています。 <basic-shape> - CSS: カスケーディングスタイルシート | MDN little-strange.hatenablog.com whisky-coke.hatenablog.com 同じ座標数であればいろんなアニメーションが可能 図形は座標で切出す(おさらい） 平行四辺形から四角形のアニメーション アニメーションに合わせて文字を大きくしたり色変更も可能 座標を多くすればハート方も可能 最後に 同じ座標数であればいろんなアニメーションが可能 図形は座標で切出す(おさらい） CSSシェ
SVGのマスクとアニメーションで動きのあるWEB制作【vivus.js使い方】 | 株式会社リースエンタープライズ
こんにちは、WEBデザイナーの板垣です。 最近、WEBサイトで動画やアニメーションを目にする機会が大変増えてきており、また、制作のご要望でも複雑なアニメーションが増えてきているように感じます。 以前もHTML5 Canvasを使用したアニメーションの記事をいくつか書かせていただきました。 湯気アニメーションについて本気出して考えてみた Canvasを使った動きのあるWebサイト・ホームページ制作をご希望の方へ ただ今回はCanvasではなく、『SVG』でいろいろ変わったアニメーションを作成しようと思います。 SVGについて SVG（Scalable Vector Graphics）とは、よく使われる写真などの「ラスタ形式」の画像とは違い、パス・テキスト・シェイプなどの集合を画像として扱う「ベクトル形式」の画像フォーマットの事です。 私自身は、よく、Adobe Illustratorでパスを
週刊Railsウォッチ（20200609後編）Rubyにカスタマイズ可能な軽量fiberスケジューラを実験導入、RailsとGraphQL、DBについて知って欲しいことほか｜TechRacho by BPS株式会社
2020.06.09 週刊Railsウォッチ（20200609後編）Rubyにカスタマイズ可能な軽量fiberスケジューラを実験導入、RailsとGraphQL、DBについて知って欲しいことほか こんにちは、hachi8833です。 追記（20200612）: 冒頭セクションにおけるツイートの引用方法がツイートの意図と異なるというご指摘をいただきました。大変申し訳ございません🙇♂️。 該当セクションを削除いたしました。削除前のスクショ: 1、2 各記事冒頭には⚓でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっついたときの会話の再構成です👄 ⚓Ruby ⚓Rubyに軽量なfiberスケジューラを実験的に導入（Ruby Weeklyより） issue: Feature #1678
Web Sessions at Google I/O 2023の気になった発表のまとめ - console.lealog();
まとめプレイリストが公開されてたので、その中から気になったやつを流し見した。 https://www.youtube.com/playlist?list=PLOU2XLYxmsIJGxIV8Lt8gF_79Z334LQ6h What's new in Web https://www.youtube.com/watch?v=x9rh0Du4Czg ブラウザで使える最新機能のご紹介 `dialog`要素はいいぞ `showModal()`のほう フォーカスやタブ管理までブラウザがやってくれるし、スタッキングコンテキストも安心 CSS transform `transform: scale(1)`を`scale: 1`って書けるように 複数の組み合わせでもコードがごちゃつかない 新しいCSSの単位 `lv(h|w|min|max)`、`sv(h|w|min|max)`、`dv(h|w|min|m
動画ストリーミング大手のNetflixが、日本とカナダ、アメリカを除く世界中でスタジオジブリ作品の配信をおこなうなど、海外でも高く評価、注目されているジブリ映画。 今回は、そんなスタジオジブリ映画への愛があふれるHTML/CSSスニペットをまとめてご紹介します。 スタジオジブリを代表する往年の人気キャラクターが、CSSを中心に再現されています。スニペットはどれも海外のウェブデザイナーが作成しており、ジブリ映画の人気の高さが伺えます。 トトロやカオナシも！ジブリ愛が止まらないHTML/CSSスニペットまとめ ■ Howl’s Moving Castle ハウルの動く城も無限ループでどうぞ。各パーツごとに切り分けることで、アニメーションをCSSで実装しています。 See the Pen Howl’s Moving Castle by Nathan Gordon (@gordonnl) on C
HTMLとCSSで作るインフォグラフィック（円／棒グラフ・レーダーチャート）【アニメーションつき】 更新日：2022/06/03 近年では、グラフやチャートといったインフォグラフィックを導入しているウェブサイトが増えてきています。インフォグラフィック化することでデータをよりわかりやすく表示出来たり、重要なポイントを強調したりできる、といったメリットを挙げることができます。 インフォグラフィックをウェブサイトに入れる場合、作成した画像を貼るだけでは問題ないですが、そこにアニメーションをつけるとなるとHTMLやCSS、JavaScriptを用いて作成する必要があります。HTMLやCSSでインフォグラフィックを作ろうとすると、なんだか難しそう…というイメージがあるかもしれませんが、実際には、とてもシンプルに作ることができます。どれくらい簡単か、ぜひ本記事で確認してみてください。 完成のデモはこち
Nuxt.js + Netlifyで社内向けPodcastを作った話 - タンバリン開発ブログ
タンバリン大阪オフィスでエンジニアアルバイトをしている平井です。 こちらはJAMstackアドベントカレンダー19日目の記事です qiita.com 内容 開発経緯 Podcastについて 技術的な話 所感 開発経緯 タンバリン大阪オフィスでは tambourine radio という名前で不定期に社内向けのラジオを収録しています。 何回か収録を重ねるにつれて社員の方から「ラジオのアーカイブを聞けるpodcastサイトを作ろう」 と提案を頂いたので、インターン生(僕を含めて3人)でチーム開発をしました。 大まかな技術選定やチケットの作成は3人で行ったのですが、コーディングの段階に入って諸事情(他の方のインターン終了など)があり、僕がほぼ個人で制作する形になりました Podcastについて 社内限定公開なので実際に見ていただくことはできないんですが、ざっくりとしたアプリの仕様等を画面のキャプ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【2021年4月】現場で使える！テキストエフェクトのまとめ | FASTCODING BLOG
フロントエンドのプロが語る、フロントエンドを学ぶ魅力とReact入門 - FLEXY（フレキシー）
平成最終版。僕が静的サイトを作る時に使う便利ツールやサービスまとめ – すきせか
【はてなブログ10周年特別お題】はてなブロガーに10の質問をやってみた - のんべえの気まぐれ
個人的によく使う、省スペースで表示できて雑然としないUI with TailwindCSS
SVG ANIMATIONS - JavaScriptも画像も用いないアニメーション集
和風 ホームページ制作する時に考えたい事 ｜ 枚方のホームページ制作｜和風デザイン専門店ひだちデザイン
imgタグで設置したSVGファイルをインラインSVGに変換してくれるJavaScriptライブラリ「deSVG」
【ブログ】言及感謝祭！ - Little Strange Software
イケてるローディング・アニメーション25選 | SONICMOOV LAB
webサイトで使えるオシャレなスライドショー20選【コピペOK】
カレーを例にしたCSSアニメーションのことはじめ - Qiita
駆け出しマークアップエンジニアのためのWebサイト制作フロー - Qiita
Figma×SVGatorでつくるSVGアニメーション - necco note | necco inc.
区切り線・水平線をおしゃれにするCSSスニペット10選。hrタグ要素だけじゃない！ | KodoCode
GSAPを使って複雑なオープニングアニメーションを作ってみよう | 東京のホームページ制作 / WEB制作会社 BRISK
【CSSのみ】おしゃれなデザインのハンバーガーメニュー13選【コピペOK】
1万人に聞いた、2019年の最新CSS使用状況 - Qiita
モダンWEBサイトにおける画像最適化について - Qiita
CSSシェイプでアニメーションを作ってみる - のんべえの気まぐれ
トトロやカオナシも！ジブリ愛が止まらないHTML/CSSスニペットまとめ
HTMLとCSSで作るインフォグラフィック（円／棒グラフ・レーダーチャート）【アニメーションつき】 | 東京のホームページ制作 / WEB制作会社 BRISK