タグ

あとで読むに関するyoshi-naのブックマーク (1,890)

  • これは便利! HTMLはdiv要素一つ、あとはCSSをコピペするだけでさまざまな形状を簡単に実装できる -CSS Shape

    HTMLはdiv要素一つだけ、あとはCSSをコピペするだけでさまざまな形状のシェイプを実装できるコードをまとめたCSS Shapeを紹介します。 さまざまな形状はdivだけでなく、imgで画像にも実装することもできます。 The Ultimate CSS Shapes Collection The Ultimate CSS Shapes Collectionを作成したのは以前紹介したCSS Loaders(紹介記事)やCSS Ribbon Shapes(紹介記事)と同じ作者で、前回はCSSで実装されたローダーとリボンでしたが、今回はさまざまな形状を実装するシェイプです。

    これは便利! HTMLはdiv要素一つ、あとはCSSをコピペするだけでさまざまな形状を簡単に実装できる -CSS Shape
  • えっ!?まだ色の指定でrgba()関数を使っているの!? | TAKLOG

    最近次のようなポストをしましたが、主に不透明度を伴う色の指定に現在でもrgba()関数を使用している方が多い印象です。 ポストを別枠で表示する 今年に投稿されているCSS技術記事でもrgba()関数を使用したサンプルコードが散見されますが、現在rgba()関数はレガシーな指定とされています。 rgba()関数使っている人、全員時代に取り残されています過去のCSSでは色を指定する方法の一つとしてrgba()関数が使用されてきました。この関数はRGB値とアルファ値(不透明度)を組み合わせて色を表現するために用いられます。

    えっ!?まだ色の指定でrgba()関数を使っているの!? | TAKLOG
  • ストーリーも世界観もよくわからないままだが、気がつくと100時間以上『サガ エメラルド ビヨンド』を遊び続けていた|surumeikaman

    ゴールデンウィークの連休中、俺はずっと『サガ エメラルド ビヨンド(サガエメ)』を遊んでいた。なぜなら、俺はまだ『サガエメ』のことが、よくわからないからだ。たぶん、永遠にわからない気がする。 『サガエメ』は、とにかく変なRPGである。尖っているとも言えるし、サガシリーズの集大成であるとも言えるし、前作『サガ スカーレット グレイス』の延長戦上にあるようで、なんだか全然違うサガとしか言えないサガである。個性という面では、ほかに似たプレイ感のRPGが思い浮かばない。 Steamでは、スクエニの作品とは思えないほどレビュー数が少なく賛否両論である。この評価を見ても、後方彼氏面で腕組みをしながら「ああ、やっぱり賛否両論になるよなあ」とレビューを眺め、「まあ、でも俺(私)は、面白いと思うからいいや」と、納得しながらプレイに戻るタイプのゲームである。まさに今ハマっている人間の大半が、たぶん「自分は楽し

    ストーリーも世界観もよくわからないままだが、気がつくと100時間以上『サガ エメラルド ビヨンド』を遊び続けていた|surumeikaman
  • 古のオンラインゲームのような世界を体験できるVRChatワールド「NeoWorlds」が懐かしすぎてチャットも止まらなくなりそう。「3Dアバターをドット絵調の2Dに自動変換」する“謎技術”もユーザー間で話題に

    ソーシャルVRプラットフォーム「VRChat」のユーザーコミュニティ内にて5月2日(木)、どこか懐かしいオンラインゲームのような2D世界を体験できるワールド「NeoWorlds」が話題となっている。 VRChatは主にSteamやMeta Storeから無料でダウンロードでき、Meta Quest 2/Meta Quest 3やPICO 4などのVRヘッドセットでプレイ可能。また、VR機材がなくてもPC単体で体験できる「デスクトップモード」も存在する。 (画像はVRChat「NeoWorlds」より)「NeoWorlds」は、海外ユーザーのWidget365氏が制作途中の段階で試験的に公開しているバーチャルワールド。ワールドでは、古いPCを通して架空のMMOゲーム「NeoWorlds Online」の世界へダイブすることになる。 「ゲーム内でゲームを遊ぶ」メタフィクションの体験自体はそれ

    古のオンラインゲームのような世界を体験できるVRChatワールド「NeoWorlds」が懐かしすぎてチャットも止まらなくなりそう。「3Dアバターをドット絵調の2Dに自動変換」する“謎技術”もユーザー間で話題に
  • OBSのブラウザソースで動くものを作るあなたへ

    MacOSのみ一部バージョンが異なるのは26.1.1リリースのタイミングでブラウザソースがクラッシュする問題が発生し、hotfixとして26.1.2リリースのタイミングでMac版のみアップデートがなされたためです。 このようにバージョンアップのタイミングはまちまちで、XSplitに関しては最近までChrome 68系、OBSについても最新版の30.xでもChrome 103系と執筆現在(2024/04/22)での最新バージョンであるChrome 124から21バージョン遅れをとっている状況です。 これらのアップデートが進まないことの背景には、OBSがCEF経由でページの表示をテクスチャとして使用するためにテクスチャ共有を利用しながら、ゲームなどの他のソフトウェアやキャプチャを使用するためにもテクスチャ共有を利用していることと、CEFがOffscreen Rendering(OSR)時にハー

    OBSのブラウザソースで動くものを作るあなたへ
  • ブラウザキャッシュの仕組みについてまとめた

    Web開発において、ページの読み込み速度は非常に重要になります。 そのためにもブラウザのキャッシュは効率的なWebサイト運営に不可欠な機能です。 ブラウザのキャッシュには次のHTTPヘッダを設定することができます。 Expiresヘッダ Cache-Controlヘッダ Last-Modifiedヘッダ ETagヘッダ これらのキャッシュには強いキャッシュと弱いキャッシュで分類が可能です。 「Expires」「Cache-Control」は強いキャッシュであり、「Last-Modified」「ETag」は弱いキャッシュに分類できます。 強いキャッシュと弱いキャッシュ 強いキャッシュは設定された期間内は完全にローカルキャッシュを利用して、サーバーへのリクエストを行いません。 一方で弱いキャッシュはキャッシュされたリソースの検証が必要であり、ETagやLast-Modifiedヘッダを利用して

    ブラウザキャッシュの仕組みについてまとめた
  • れきちず

    過去から現代、未来までを現代風デザインのマップで。

  • Netflix実写版『シティーハンター』レビュー 現代の冴羽獠像の創造は大成功、だが現代の「シティーハンター」としては物足りない

    闇を抱えた世界有数の大都市、新宿。煌めく街並みを真っ赤なミニクーパーで走り抜け、街の裏にうごめくさまざまなトラブルを、愛銃のコルトパイソンで華麗に解決する超一流の始末屋(スイーパー)がいる。1980年代後半から1990年代初頭にかけて一世を風靡した「シティーハンター」の主人公・冴羽獠は、その複雑で魅力的なキャラクターで、確固たるヒーロー像を作り上げた。 2019年にはフランスで『シティーハンター THE MOVIE 史上最香のミッション』という実写映画が製作されたことを考えると、その影響の根強さと、当時「シティーハンター」を見ていたファンたちの憧憬の大きさがうかがえる。世界中の多くの人が、冴羽獠はかっこいい、冴羽獠みたいになりたい、と思ったのだ。 Netflixオリジナル映画である『シティーハンター』も、全体を通して、魅力的な冴羽獠をいかに現代の実写映画で表現できるかに多くの労力が割かれて

    Netflix実写版『シティーハンター』レビュー 現代の冴羽獠像の創造は大成功、だが現代の「シティーハンター」としては物足りない
  • 令和時代の API 実装のベースプラクティスと CSRF 対策 | blog.jxck.io

    Intro CSRF という古の攻撃がある。この攻撃を「古(いにしえ)」のものにすることができたプラットフォームの進化の背景を、「Cookie が SameSite Lax by Default になったからだ」という解説を見ることがある。 確かに、現実的にそれによって攻撃の成立は難しくなり、救われているサービスもある。しかし、それはプラットフォームが用意した対策の質から言うと、解釈が少しずれていると言えるだろう。 今回は、「CSRF がどうして成立していたのか」を振り返ることで、当にプラットフォームに足りていなかったものと、それを補っていった経緯、当にすべき対策は何であるかを解説していく。 結果として見えてくるのは、今サービスを実装する上での「ベース」(not ベスト)となるプラクティスだと筆者は考えている。 CSRF 成立の条件 例えば、攻撃者が用意した attack.examp

    令和時代の API 実装のベースプラクティスと CSRF 対策 | blog.jxck.io
  • 総務省|報道資料|「クラウドの設定ミス対策ガイドブック」の公表

    総務省は、今般、令和4年10月に公表した「クラウドサービス利用・提供における適切な設定のためのガイドライン」の内容を、わかりやすく解説するために「クラウドの設定ミス対策ガイドブック」を策定いたしました。 総務省では、クラウドサービス利用・提供における適切な設定の促進を図り、安全安心なクラウドサービスの利活用を推進するため、クラウドサービスの提供者・利用者双方が設定ミスを起こさないために講ずべき対策や、対策を実施する上でのベストプラクティスについてとりまとめた「クラウドサービス利用・提供における適切な設定のためのガイドライン」を、令和4年10月に策定・公表しました。 今般、クラウドサービスを利用する事業者において、情報の流失のおそれに至る事案が引き続き発生している中で、ガイドラインの活用促進を図るため、ガイドラインの内容をわかりやすく解説した「クラウドの設定ミス対策ガイドブック」を策定しま

    総務省|報道資料|「クラウドの設定ミス対策ガイドブック」の公表
  • 「かまいたちの夜」30周年インタビュー(前編)。“特異な書き手”である我孫子武丸氏と,常識にとらわれないスタッフが傑作を生んだ

    「かまいたちの夜」30周年インタビュー(前編)。“特異な書き手”である我孫子武丸氏と,常識にとらわれないスタッフが傑作を生んだ ライター:柳 雄大 カメラマン:永山 亘 今年(2024年)は,スーパーファミコン用ソフト「かまいたちの夜」の発売(1994年11月25日)から30周年にあたる。 チュンソフト(現在のスパイク・チュンソフト)が開発した同作は,テキストの面白さを中心に据えた「サウンドノベル」というゲームジャンルを確固たるものとし,現在に至るまで数々の後継作がリリースされた。 シリーズ累計販売数は200万を突破しており,今年3月には舞台「かまいたちの夜 〜THE LIVE〜」の上演が発表されるなど,今なお根強い人気を誇っている。 関連記事 舞台「かまいたちの夜 〜THE LIVE〜」,東京・大阪で6月に公演決定。我孫子武丸氏監修のオリジナルストーリーが描かれる キョードーメディア

    「かまいたちの夜」30周年インタビュー(前編)。“特異な書き手”である我孫子武丸氏と,常識にとらわれないスタッフが傑作を生んだ
  • 2024年版最近の実装に合わせた、HTMLでWebページを実装するための必要最小限をまとめたテンプレート一式

    Webページを作成する時に役立つ、HTMLをはじめとする必要最小限のファイルをまとめたシンプルな基テンプレート一式を紹介します。 最新版は、最近の実装に合わせた設計にアップデートされました。 HTML5 Boilerplate -GitHub HTML5 Boilerplateの特徴 HTMLの基テンプレート HTML5 Boilerplateの使い方 HTML5 Boilerplateの特徴 HTML5 Boilerplateは、Webサイトやアプリを実装するためのプロフェッショナルなフロントエンド用のHTMLの基テンプレートです。 実践的な基のテンプレート 200人を超える貢献者による10年間の分析・研究・実験を元にしています。 ブラウザの見え方を最適化 プログレッシブエンハンスメントを念頭において設計されています。 インクルード 推奨されるmetaタグやその他の利点を備えたH

    2024年版最近の実装に合わせた、HTMLでWebページを実装するための必要最小限をまとめたテンプレート一式
  • 2024年版 HTMLで作るフォームバリデーション - ICS MEDIA

    すべてのフォームが要件を満たしている場合のみ、送信できます。 フォームバリデーションのデザイン 上記の例では最低限のHTMLのみ実装されています。しかし、実際のサイトではバリデーションエラーをユーザーにフィードバックする必要があります。よりユーザビリティの高いフォームでは、以下の点を検討する必要があります。 エラー時のスタイル エラーメッセージの出し方 バリデーションエラーの表示タイミング 以下では、それぞれについて深堀りします。 エラー時のスタイル エラーを検知する方法として、CSSには:valid疑似クラスと:invalid疑似クラスがあります。これらの疑似クラスは『CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方』でも紹介されている、バリデーションエラーが起きている要素にのみ適用されるクラスです。 しかし、この疑似クラスには欠点があります。required属性を

    2024年版 HTMLで作るフォームバリデーション - ICS MEDIA
  • コメント乞食と言われてもいいので、今手に入るシレン風みたいなローグラ..

    コメント乞と言われてもいいので、今手に入るシレン風みたいなローグライクおすすめ教えてくださいませんか。 PCだろうがPSであろうがなんでも構いません。よろしくお願いいたします。 (追記) こんなにもおすすめと「シレン6をやれ」というご指示いただきまして、当にありがとうございます。 正直ここまでおすすめいただけるとは思っておりませんでした…… 実は先日からシレン6をプレイしていて十分に楽しめているのですが、 前にはてなで「シレンが国産ローグライトの代表作と言われているのはおかしい」みたいなブクマを見かけたな、と思い それならばシレン風のゲームのおすすめを聞いておけば、救助待ちの最中やクリア後も安心だろうと思いお聞きした次第です。

    コメント乞食と言われてもいいので、今手に入るシレン風みたいなローグラ..
  • Figma初心者でも大丈夫! レスポンシブWebデザインをFigmaで作るための3つのポイント

    この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 最近はスマホで見ることを前提にデザインされたWebサイトも増えてきていますが、そのようなWebサイトでもPCでみた時にも違和感のないデザインになっています。 また、総務省の「通信利用動向調査」を見ると、スマートフォンでもパソコンでもインターネットが利用されている事がわかります。 利用状況 2022年のインターネット利用率(個人)は84.9%となっており(図表4-11-1-2)、端末別のインターネット利用率(個人)は、「スマートフォン」(71.2%)が「パソコン」(48.5%)を22.6ポイント上回っている。 (出典)総務省「通信利用動向調査」 このようにスマホ、PCどのデバイスでも見ることが

    Figma初心者でも大丈夫! レスポンシブWebデザインをFigmaで作るための3つのポイント
  • 米津玄師「さよーならまたいつか!」インタビュー|“キレ”のエネルギー宿した「虎に翼」主題歌 - 音楽ナタリー 特集・インタビュー

    キレることが必要な気がした ──楽曲制作の取っかかりはどんな感じでしたか? 朝に聴くさわやかなバラードが求められてもいるんだろうなと思うと同時に「『虎に翼』ってそういう話だっけ?」という思いも抱いて、ゆったりとしたテンポではないなという感じがしたんですよ。主人公の寅子がエネルギッシュにずんずんずんずん進んでいく感じがあるんで、そこから四つ打ちみたいな小気味いいテンポで作っていかなきゃいけないんじゃないかと思ったのは覚えていますね。 ──朝ドラの曲はしっとりした大らかな曲調や切ないメロディを持つバラードが多いように思います。一方で飛び抜けて明るい曲もありますが、この曲はそのどちらでもない。どういう温度感がドラマにしっくりくる感触があったんでしょうか。 この曲を作るにあたっては“キレ”が必要だと思っていたんです。キレというのは「ブチギレる」とか「怒る」という、強いエネルギーを表す意味でのキレ。

    米津玄師「さよーならまたいつか!」インタビュー|“キレ”のエネルギー宿した「虎に翼」主題歌 - 音楽ナタリー 特集・インタビュー
  • 文章の折り返し指定のCSS最新版 - ICS MEDIA

    文章の折り返しはウェブ制作において意外と難しいものです。URLが文章に含まれている場合、URLがレイアウトを突き抜けてしまった、という経験をみなさんはお持ちではないでしょうか? この記事では、国内のウェブ制作において「開発者が考えることが少なくてよくなる」安全なCSS指定を紹介します。 結論から説明すると、以下の指定を提案します。 body { overflow-wrap: anywhere; /* 収まらない場合に折り返す */ word-break: normal; /* 単語の分割はデフォルトに依存 */ line-break: strict; /* 禁則処理を厳格に適用 */ } この記事では上記の指定にいたった理由と、折り返しの理解について必要なoverflow-wrapとword-breakプロパティを中心に解説します。 overflow-wrap overflow-wrapは

    文章の折り返し指定のCSS最新版 - ICS MEDIA
  • Webデザインで「紙っぽさ」を出す方法を考えてみる|akane

    こんにちは!株式会社Rabeeの新人デザイナーのakaneです🏋 今回は、Webデザインで「紙っぽさ」を出す方法を考えてみました。参考事例も掲載しながら紹介していくので、どうぞ最後までお楽しみください! はじめに:「紙っぽさ」とは?私が言う「紙っぽさ」とは、おもに「雑誌っぽさ」のことです。Webデザインだけど、雑誌っぽい。ディスプレイに映っているけれど、エディトリアル感がある。 たとえば、以下のようなデザインは私にとって「紙っぽい」例です。 出典:六木未来会議出典:DMN出典:ぼくのおじさんどうして、私はこれらを雑誌のようだと感じるのでしょう?自分なりに考えたポイントを、ひとつずつ紹介していきます。 その①:文字が「組まれて」いる最初に挙げたWebサイトのひとつをよく見てみると、画像左上にある「NO. 153」の文字のうち、「NO.」だけが縦向きになっています。「NO.」と「153」を

    Webデザインで「紙っぽさ」を出す方法を考えてみる|akane
  • なぜVTuber事務所「ライヴラリ」は崩壊した? 代表自ら語るその経緯

    『ライヴラリ』というVTuber事務所がある──いや“あった”と書くほうが、実態には即しているだろうか。 「今日は何の日」という動画でVTuber黎明期を彩った赤月ゆに。アダルトゲームや下ネタを臆せずくり出し話題をさらった月ひまり。「ものづくり」という特技が輝いた図月つくる。オカルト関連のトピックを仕掛けていった無月めもり──個性豊かで、今では珍しい動画中心の活動を展開していた所属タレントは、全員姿を消した。 そこに至るまでの道程は平坦とは言い難い。特に月ひまりは、クラウドファンディングの行く末が不安視され、ファンの中には返金をめぐって訴訟を計画する者まで現れるほどだ。公式声明も的確に発信されたとは言えず、混迷を極めた末に、ライヴラリはもぬけの殻となった。 客観的に見ても、まさに「VTuber運営の失敗例」である。ファンでなくとも、批判の矛先を向けるのも致し方ないだろう。 だが、失敗の

    なぜVTuber事務所「ライヴラリ」は崩壊した? 代表自ら語るその経緯
  • WordPress 6.5の新機能(フォントライブラリ、データビュー、Block Bindings API、Interactivity APIなど)

    WordPress 6.5の新機能(フォントライブラリ、データビュー、Block Bindings API、Interactivity APIなど) WordPress 6.5「レジーナ」が4月2日に正式リリースされました。この記事では、その新機能と改善点の数々をご紹介します。 特に強力なAPIが導入されていることで、WordPressの開発体験が大幅に改善されそうです。また、サイト構築やコンテンツ作成に関する嬉しい変更点も多数組み込まれています。 そして、新登場のフォントライブラリにより、コアブロックのコンテンツにカスタムフィールドの値を注入したり、サイトエディターから直接Google Fontsをダウンロードしてインストールしたりすることも可能に。新たなデザインツールとUIの強化により、全体的な編集体験もさらに向上します。 この記事でWordPress 6.5のすべてを網羅することはで

    WordPress 6.5の新機能(フォントライブラリ、データビュー、Block Bindings API、Interactivity APIなど)