CSSはこんなにも進化していたのか！ CSSのかなり高度なテクニック -Expert CSS: The CPU Hack

2023/09/28 153 users CSS CPU スクリーン テクニック JavaScript

当ブログの記事でも、JavaScriptで実装していたのがCSSで実装できるようになりました、と今までにいくつか紹介してきましたが、今回紹介するのはそれらとはかなり異なるCSSのかなり高度なテクニックです。 CSSでCPUのようにデータを継続的に解析し、状態を再評価します。簡単に言うと、スクリーンの高さや幅を取得したり... 続きを読む

もうこれでSVGアイコンを探すときに困らない！ 無料で利用できるアイコンライブラリを横断検索できる便利サイト -Icônes

2023/05/31 237 users ひとまとめ アイコンライブラリ ライブラリ SVGアイコン

当ブログでもたくさんのSVGアイコンのライブラリを紹介してきましたが、それらのほとんどがひとまとめに閲覧・検索できる便利なサイトを紹介します。 複数のアイコンライブラリから探せるだけでなく、異なるライブラリのアイコンをま...記事の続きを読む 続きを読む

脳外科医 竹田くん

2023/05/14 376 users 竹田くん 脳外科医 稀有 後遺 市民病院

当ブログで連載している漫画の概要は以下のまとめ画像をご覧ください。 漫画ページのみを続きで読みたい方は以下のリンクでご覧ください。 1～55話： こちらから 56話～85話： こちらから 市民病院 <<物語の概要>> <<第一部>>　医療事故篇　1話～55話 竹田くんという稀有の脳外科医が来て以降、脳外科患者に手術後、後遺... 続きを読む

3日間限定「Visual Studio Code完全入門」が全文無料公開されています！ Web制作とプログラミングに特化された解説書

2022/05/19 338 users Visual Studio Co 好評 プログラミング

当ブログでも好評だった「Visual Studio Code完全入門」が重版出来🎉を記念して、3日間限定（5/19-5/21）で全文無料公開されているので、紹介します。 「Visual Studio Co...記事の続きを読む 続きを読む

インデックス投資で億りました

2021/12/13 720 users インデックス投資 インデックスファンド ポートフォリオ 新刊

新刊に書いたのでいずれ明らかになるため自分で言います。億りました。 資産1億円を達成したということです。当ブログの読者さまならご存知のとおり、ほぼインデックス投資（国際分散投資したインデックスファンドの積み立て投資）だけでここまできました。 私のポートフォリオの期待リターンは年率+4.4％、リスク（標準... 続きを読む

日本人を海外挑戦させようとした10年で見えた、日本企業がグローバル化しない本当の理由 | バンクーバーのうぇぶ屋

2021/11/09 191 users お世話 人たち 人達 ブログ 一度

実は今年はこのブログを開設してからなんと10年目だったらしく、2年以上放ったらかしだった当ブログではありますが、今までお世話になった人たちへ、そして最近仲良くなった人たちに、あとこれから仲良くなる人達に向けて、ちょっとこの10年を振り返りつつ、僕が何をしていて何がしたいのかを一度ちゃんとと書いておこう... 続きを読む

デザインに少し手を加え、フォームを改善する実践的なUIのテクニックのまとめ | コリス

2021/09/14 207 users コンバージョン コリス UIデザイン ユーザー 翻訳記事

フォームを改善するUIデザインのテクニックを紹介します。 フォームのデザインに少し手を加えるだけで、ユーザーにとって使いやすい、コンバージョンを高めるための実践的なテクニックが満載です。 15 UI Tips for Better Forms by Jim Raptis 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト... 続きを読む

傑作ゲーム『Outer Wilds』をこれからプレイする人へ伝えておきたいこと全部 - やや最果てのブログ

2021/06/27 840 users Outer Wilds アウターワイルズ 傑作ゲーム 最果

Steamサマーセールの季節ですね。 ここに、おすすめのゲームがあります。 Outer Wilds【アウターワイルズ】というゲームです（PS4とXboxでも発売中、夏にSwitch版発売予定）。当ブログでも、クリアした人向け記事をはじめ散々記事を書いてきたので名前に聞き覚えがある方もいらっしゃるかもしれません。 store.steampowe... 続きを読む

GitHubで注目をあつめているHTML, CSS, JavaScriptのライブラリ・リソースのまとめ | コリス

2021/06/15 230 users GitHub コリス リソース CSS ライブラリ

GitHubで注目をあつめているHTML, CSS, JavaScriptのライブラリ・リソースを紹介します。 当ブログでもよく紹介しますが、見逃していたものがありました。 1年間分、52個もあるので、時間のあるときにチェックしてみてください。 The 52 most popular projects from the last year of Trending Projects by Iain Freesto... 続きを読む

知っておくと実装に役立つ！JavaScriptのテクニックのまとめ | コリス

2021/04/22 137 users コリス デベロッパー 実装 テクニック ヒント

デベロッパーのコミュニティには、実装に役立つテクニックやヒントが満載です。その中から特に有用なJavaScriptのテクニックとヒントを紹介します。 8 JavaScript Tips & Tricks That No One Teaches ? by Garvit Motwani (@GarvitMotwani) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様... 続きを読む

CSSの見過ごしがちだけど興味深い実装テクニック、ホバーでラインを引いて逆方向で元の状態に戻すエフェクト | コリス

2020/12/14 119 users ホバーエフェクト コリス ポパー アニメーション エフェクト

先日、当ブログで紹介したThe State of CSS 2020（紹介記事）に使用されているホバーエフェクトが話題になっていたので、紹介します。 テキストリンクをホバーすると、ラインを引くまでは普通のアニメーションです...記事の続きを読む 続きを読む

フロントエンドのデベロッパーが2021年に向けてチェックしておきたいこと | コリス

2020/12/10 159 users コリス デベロッパー ライセンス 上級職 転職

フロントエンドのデベロッパーが2021年に向けて何に注目すべきかを紹介します。 特に上級職や転職など、ステップアップを目指す人は要チェックです！ 10 Things Front-End Developers Should Learn in 2021 by Simon Holdorf 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得... 続きを読む

Webページ高速化に必須の知識！ブラウザがWebページをどのようにレンダリングしているか、図を用いて解説 | コリス

2020/11/12 1084 users レンダリング CSS コリス HTML 実装時

ブラウザがWebページをどのようにレンダリングしているか、図を用いてやさしく解説した記事を紹介します。 レンダリングの仕組みを理解することで、HTMLやCSSやJavaScriptなど実装時にも気をつける点があります。 How the browser renders a web page by James Starkie 下記は各ポイントを意訳したものです。 ※当ブログ... 続きを読む

知っておくと便利なHTML5の機能、要素や属性のまとめ | コリス

2020/10/06 235 users コリス ライセンス 属性 翻訳記事 下記

今まであまり使用されていなかったけど、現在の環境では有用であるHTML5の便利な機能、要素や属性を紹介します。 10 useful HTML5 features, you may not be using by Tapas Adhikary 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに details要... 続きを読む

CSSを最適化してページの読み込み時間を高速化する方法 | コリス

2020/09/30 251 users コリス テクニック 大規模プロジェクト ファイル CSS

CSSを最適化して、ページの読み込み時間を高速化する方法を紹介します。 シンプルなCSSのファイルをはじめ、大規模プロジェクトで使用されるCSSまで、すべてのCSSに効果があるテクニックです。 Optimizing CSS for faster page loads by Tomas Pustelnik 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は... 続きを読む

画像の遅延読み込みにloading属性とJavaScriptを併用した最大限のパフォーマンスを発揮させる実装方法 | コリス

2020/09/10 251 users iframe コリス アプローチ loading属性 翻訳記事

画像やiframeの遅延読み込みに使用するloading属性と非サポートブラウザ用にJavaScriptを併用した現代的なアプローチで、最大限のパフォーマンスを発揮させる実装方法を紹介します。 Best way to lazy load images for maximum performance by Adrian Bece 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事... 続きを読む

CORSの仕組みをGIFアニメで分かりやすく解説 | コリス

2020/08/20 326 users Cors コリス クロスオリジン ライセンス リソース共有

クロスオリジンのリクエストを安全にするための同一生成元ポリシーとオリジン間のリソース共有（CORS）の仕組みをGIFアニメで解説した記事を紹介します。 ✋?? CS Visualized: CORS by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 は... 続きを読む

Webページでよく使用されるレイアウトに役立つCSS Gridの実装テクニックのまとめ | コリス

2020/07/30 163 users コンポーネント コリス 実装 ライセンス 翻訳記事

CSS Gridを使用して、Webページでよく使用されるレイアウトやコンポーネントの実装で起きる問題を解決する実装テクニックを紹介します。 Modern CSS grid solutions to common layout problems by Kevin Pennekamp 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳して... 続きを読む

CSSでロゴのようにサイズが異なる画像を美しく揃えて配置するスタイルシートの実装テクニック | コリス

2020/07/16 171 users テクニック コリス 実装時 ロゴ画像 参考

ロゴ画像のようにさまざまなサイズ、さまざまな形の画像を美しく揃えて配置するスタイルシートのテクニックを紹介します。 CSSのテクニックだけでなく、デザイン上の注意点も解説されており、実装時の参考になります。 Aligning Logo Images in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログで... 続きを読む

CSSの新しい疑似クラス:is()と:where() なんだこれ便利すぎる！ | コリス

2020/06/17 200 users where コリス セレクタ CSS Safari

複数のセレクタを1つにまとめられる:is()、セレクタの詳細度を0にする:where()、CSSの新しい疑似クラスが、SafariとFirefoxで利用できるようになりました。 そんな:is()と:where()の便利な使い方を紹介します。 CSS :is() and :where() are coming to browsers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳... 続きを読む

JavaScriptの非同期処理Promise、AsyncとAwaitの仕組みをGIFアニメで解説 | コリス

2020/05/19 477 users async await コリス Promises GIFアニメ

JavaScriptの非同期処理Promise、AsyncとAwaitの仕組みをGIFアニメで解説した記事を紹介します。 ⭐️? JavaScript Visualized: Promises & Async/Await by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに コールバック地獄 Promis... 続きを読む

CSSでアイコンをテキストに揃えるのはこれで簡単になる！CSSの新しい単位「lh」「rlh」が登場 | コリス

2020/05/18 217 users コリス CSS アイコン テキスト 新しい単位

アイコンのサイズをテキストに揃えて配置する時、どのように実装していますか？ テキストのサイズぴったりにアイコンを簡単に配置できるCSSの新しい単位「lh」「rlh」が登場します。 'lh' and 'rlh' units 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。... 続きを読む

『ゆるキャン△』聖地巡り必須！旅行雑誌るるぶ買っちった～！ - 格安^^キャンプへＧＯ～！

2020/03/02 74 users ギャン 聖地巡礼 必読 聖地巡り キャンプ

今まで、当ブログでも数回『ゆるキャン△』ネタを取りあげてきましたが、ここへきて聖地巡りには必読な『ゆるキャン△』るるぶ仕様が2月に発売され、行ったところが多数ありますが、ついつい買っちゃいました～ｗｗ 『ゆるキャン△』聖地巡り版るるぶ 『ゆるキャン△』聖地巡礼のルール 『ゆるキャン△』るるぶの特徴 其の壱 ... 続きを読む

JavaScriptエンジンの仕組みをGIFアニメで分かりやすく解説 | コリス

2020/01/28 397 users Chromiumベース GIFアニメーション ライセンス

Node.jsおよびChromiumベースのブラウザで使用されるJavaScriptエンジンの仕組みについてGIFアニメーションで分かりやすく解説された記事を紹介します。 ⚙️ JavaScript Visualized: the JavaScript Engine by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て... 続きを読む

JavaScript イベントループの仕組みをGIFアニメで分かりやすく解説 | コリス

2019/12/25 124 users ライセンス GIFアニメーション コリス 翻訳記事 下記

JavaScript イベントループの仕組みについてGIFアニメーションで分かりやすく解説された記事を紹介します。 ✨♻️ JavaScript Visualized: Event Loop by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 JavaScriptを視覚的に解説: イベント... 続きを読む