タグ

webに関するsoresoのブックマーク (109)

  • 2024年のファビコンを極める: 本当に必要なファイルはほぼ6つ(翻訳)|TechRacho by BPS株式会社

    はじめに モダンブラウザで使われるファビコンの作り方を見直して、今こそアイコン生成であくせくするのを終わりにしましょう。昨今のフロントエンド開発者は、ブラウザタブやらタッチ画面やらにWebサイトの小さなロゴを表示する、ただそれだけのためだけに静的なPNGファイルを20個以上扱わなければなりません。よりスマートな方法で、現代のニーズに合う最小限のアイコンセットを使う方法を紹介します。 ファビコンは見かけよりもずっと幅広く奥深いトピックで、実は誰もがファビコンについてしっかり学びたいと思っていることもわかってきました。記事全体の内容を実質わずか2行のスニペットに凝縮したものも紹介していますので、今ファビコンで苦しんでいる方は(正確な使い方をご存知なら)そちらをお使いいただけますが、そこをぐっとこらえて記事を最後までお読みいただくことをおすすめいたします。 🔗 忙しい人向け: ウルトラショー

    2024年のファビコンを極める: 本当に必要なファイルはほぼ6つ(翻訳)|TechRacho by BPS株式会社
    soreso
    soreso 2021/06/25
    ?を!に置換されたらエンジニアは死ぬ……
  • CAMPFIRE 10周年を迎えて|CAMPFIRE 公式note

    こんにちは。梅雨時期はいかがお過ごしでしょうか?CAMPFIRE事業部 マネージャーの山田です。 CAMPFIREは2021年6月2日でサービスインから10周年を迎えました。10年は長いようで早いですね。非常に感慨深いです。 さて、CAMPFIREも10年の中でいろんなことがありました。私はというと。2014年・28歳の年にCAMPFIREにキュレーター(クラウドファンディングで何かに挑戦したい起案者さんのサポート・伴走をする役割)として入社しました。その後、PMやモバイルアプリケーション*の事業部長などを経験し、現在はCAMPFIRE事業部で地域・飲・エンターテインメント関連の3つの領域のグループを担当しています。 私が入社をした2014年当時というと、”クラウドファンディング”といった言葉は日ではまだまだ日の目をみない存在ではありました。そんな頃からクラウドファンディングの趨勢を垣

    CAMPFIRE 10周年を迎えて|CAMPFIRE 公式note
  • どうしてHTML5が廃止されたのか | フューチャー技術ブログ

    フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては「何をいまさら」という話題かと思います。 しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。 HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。 そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。 広義のHTML5 / 狭義のHTML5HTML5

    どうしてHTML5が廃止されたのか | フューチャー技術ブログ
  • 何故 Fastly を使うのか

    数ある CDN のなかでも Fastly は圧倒的に優れた特性を持つものだと思うので、障害にかこつけてその優れた点を紹介していく。 キャッシュが消えるのがはやいCDN とは世界各地にあるキャッシュサーバーにコンテンツをキャッシュして配信してもらうことで、オリジンサーバーの負荷を軽減したりユーザーへの配信速度を上げたりするリバースプロキシのホスティングサービスだが、 Fastly の最大の特徴としてはそのキャッシュが消えるのが速い。普通の CDN が数十秒〜数分とかかるのにたいして 0.2 秒で全部消えることが保証されているし、キャッシュにたいしてキーをつけておけば(HTTP ヘッダーに Surrogate-Key って入れるだけ)特定のキーがついているキャッシュだけ 0.2 秒以内に消したりということができる。 これにより、 CDN による配信高速化の恩恵を受けながら、コンテンツをリアルタ

    何故 Fastly を使うのか
  • https://web.archive.org/web/20080305225407/http://www.c-sawat.com/index2.html └ https://web.archive.or..

    https://web.archive.org/web/20080305225407/http://www.c-sawat.com/index2.html └ https://web.archive.org/web/20080723202836fw_/http://www.c-sawat.com/release/yumeoto/dl.html これじゃね ユメミルオトメ:音楽&映像 主題歌:the everlasting light ~約束の夢~ ---------------------------- 自分に架せられた運命に立ち向かう強い決意と 愛する人を想い、まっすぐに見つめる主人公琴音の 姿が表現された主題歌に仕上がりました。 https://www.alchemics.co.jp/users/bandit/vocal9999_damepo.html によると、 (*1)#7(3:5

    https://web.archive.org/web/20080305225407/http://www.c-sawat.com/index2.html └ https://web.archive.or..
  • CSS3 アニメーション(使い方やサンプル)

    関連ページ: JavaScript でアニメーション Web Animation API CSS モーションパス(offset-path offset-distance)の使い方 CSS3 アニメーション概要 CSS3 でアニメーションを実装する方法は大きく分けて以下の2種類があります。 transition プロパティでの定義 animation プロパティでの定義 Transition 始点終点の2点間のアニメーション機能を提供 別の言い方をすると、始点から終点までの2点間のアニメーションしか行えない 設定時間の中でアニメーション中の変化を自動的に設定し、終了後に自動で逆のアニメーションで元に戻る(hover で動かすロールオーバーなどが簡単に設定できる) 自動再生はできず、:hover などのきっかけが必要 ループの設定不可 Animation 設定時間の中で開始・終了するタイミング

  • 【コピペでOK】サイトに動きをつけるCSSアニメーションまとめ(デモ・サンプルコード付き) | 東京のホームページ制作 / WEB制作会社 BRISK

    最近ではアニメーションが実装されたWebサイトも多くなり、趣向を凝らしたリッチな演出を取り入れているサイトもそう珍しくなくなってきました。 特に重要な要素を動かすことで興味を引かせたり、飽きずに読み進めてもらうためのきっかけになったり、といったメリットがありますよね。 ただ、アニメーションのイメージはなかなか文面でも口頭でも伝えにくいもの。 「ふわふわ」「しゅっと」「するする」「ぬるっ」などとオノマトペを駆使して説明しても、ディレクターとコーダーの間の認識の共有は結構難しいのです。 結局、イメージに合った動きをしているサイトを見つけて「この動きで!」と伝えるのが楽なんですよね。 そこで記事では、そういった言葉にしにくい部分にフォーカスを当てて、シンプル・綺麗、ポップ、スタイリッシュ、柔らかい印象などのイメージ別にCSSアニメーションをご紹介します。 デモ・サンプルコード付きですので、ぜひ

    【コピペでOK】サイトに動きをつけるCSSアニメーションまとめ(デモ・サンプルコード付き) | 東京のホームページ制作 / WEB制作会社 BRISK
  • 簡単CSSアニメーション&デザイン20選(ソースコードと解説付き) | knowledge / baigie

    CSSは使いようによっては様々な表現が可能な奥深い言語です。しかし、アニメーションなど凝った動きをするものに関してはコードは見れても実装方法を詳しく解説している記事は多くないように思えます。 この記事では、私(さかっちょ)がTwitterで過去にツイートしたCSS技術をCodePenで改めて実装し、Twitterでは解説しきれなかった実装方法をより詳しく説明しています。CSS初学者の方にもわかりやすいように解説していますので、ぜひ参考にしてみてください。 その1. 一文字ずつ登場するテキストアニメーション See the Pen [CSS Tips] Text Show-up Motion by Takuro Sakai (@sakaccho) on CodePen. 一文字ずつtransformで移動させています。文字が途切れることなく流れるようにtransition-delayを調整

    簡単CSSアニメーション&デザイン20選(ソースコードと解説付き) | knowledge / baigie
  • 世の中に溢れる「うざい広告」をプロが徹底解説!マーケターは必見です | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    みなさんこんにちは、LIGのマーケターのまこりーぬ(@makosaito214)です。 ネットサーフィンをしていると頻繁に出会う「うざい広告」ってありますよね。広告を制作、運用する立場としてこの手の広告がなぜ存在するのか、そして今後こういった広告はどうなっていくのかを、今回はしっかり勉強したいと思います。 今回講師としてお招きしたのは、マーケティング会社の「株式会社キーワードマーケティング」の代表である、滝井さんです。以前よりTwitterやブログを読ませていただき勉強していたので、今回は非常に楽しみです。それではご覧ください。 滝井 こんにちは。株式会社キーワードマーケティングの滝井です。日は、まこりーぬさんに「うざい広告」についていろいろと説明したいと思います。「うざい」と思う広告を勉強することで、ユーザーに訴求する最適な広告とは何か? を考えることにつながると思いますよ。 まこりー

    世の中に溢れる「うざい広告」をプロが徹底解説!マーケターは必見です | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
    soreso
    soreso 2021/05/25
    LIG沙汰しております☺/マトリックス楽しい……見てる内容に沿った広告でこれやられたらかなり刺さりそう/新聞社とか週刊誌とか、内容スカスカで8ページ分割とか平気でしますもんね(貴社絶対に許さない、となる)