https://b.hatena.ne.jp/papabeard/bookmark papabeardのはてなブックマーク (114) https://tomoyukiarasuna.com/make-images/ papabeard 2024-07-18T23:45:13Z プレゼン 1654 <blockquote cite="https://tomoyukiarasuna.com/make-images/" title="誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Ftomoyukiarasuna.com%2Fmake-images%2F" alt="" /> <a href="https://tomoyukiarasuna.com/make-images/">誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック</a></cite><p><a href="https://tomoyukiarasuna.com/make-images/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/f538025b2080dd9b3bbd83ce6297d9c8acf24f2e/backend=imagemagick;height=90;version=1;width=120/http%3A%2F%2Ftomoyukiarasuna.com%2Fimg%2Fimg_make-images_00.png" alt="誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック" title="誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック" class="entry-image" /></a></p><p>【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。 ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会...</p><p><a href="https://b.hatena.ne.jp/entry/s/tomoyukiarasuna.com/make-images/"><img src="https://b.hatena.ne.jp/entry/image/https://tomoyukiarasuna.com/make-images/" alt="はてなブックマーク - 誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック" title="はてなブックマーク - 誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/tomoyukiarasuna.com/make-images/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://ebisu.com/note/responsive-image-nowadays/ papabeard 2024-06-25T06:54:53Z wordpress Gatsby Next.js 画像最適化 4 <blockquote cite="https://ebisu.com/note/responsive-image-nowadays/" title="Gatsby・Next・WordPressから見た「いまどきのレスポンシブイメージ」 | エビスコム"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Febisu.com%2Fnote%2Fresponsive-image-nowadays%2F" alt="" /> <a href="https://ebisu.com/note/responsive-image-nowadays/">Gatsby・Next・WordPressから見た「いまどきのレスポンシブイメージ」 | エビスコム</a></cite><p><a href="https://ebisu.com/note/responsive-image-nowadays/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/879dea5d2493c6c0c0c2679386939493b9ff88ea/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Febisu.com%2F_astro%2Fresponsive-image-nowadays.DdrNORtF.png" alt="Gatsby・Next・WordPressから見た「いまどきのレスポンシブイメージ」 | エビスコム" title="Gatsby・Next・WordPressから見た「いまどきのレスポンシブイメージ」 | エビスコム" class="entry-image" /></a></p><p>「Gatsby・Next・WordPressから見た「いまどきのレスポンシブイメージ」」について記述した記事です</p><p><a href="https://b.hatena.ne.jp/entry/s/ebisu.com/note/responsive-image-nowadays/"><img src="https://b.hatena.ne.jp/entry/image/https://ebisu.com/note/responsive-image-nowadays/" alt="はてなブックマーク - Gatsby・Next・WordPressから見た「いまどきのレスポンシブイメージ」 | エビスコム" title="はてなブックマーク - Gatsby・Next・WordPressから見た「いまどきのレスポンシブイメージ」 | エビスコム" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/ebisu.com/note/responsive-image-nowadays/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://marpit.marp.app/directives papabeard 2024-06-25T06:53:36Z markdown 2 <blockquote cite="https://marpit.marp.app/directives" title="Marpit: The skinny framework for creating slide deck from Markdown"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fmarpit.marp.app%2Fdirectives" alt="" /> <a href="https://marpit.marp.app/directives">Marpit: The skinny framework for creating slide deck from Markdown</a></cite><p><a href="https://marpit.marp.app/directives"><img src="" alt="Marpit: The skinny framework for creating slide deck from Markdown" title="Marpit: The skinny framework for creating slide deck from Markdown" class="entry-image" /></a></p><p>The skinny framework for creating slide deck from Markdown</p><p><a href="https://b.hatena.ne.jp/entry/s/marpit.marp.app/directives"><img src="https://b.hatena.ne.jp/entry/image/https://marpit.marp.app/directives" alt="はてなブックマーク - Marpit: The skinny framework for creating slide deck from Markdown" title="はてなブックマーク - Marpit: The skinny framework for creating slide deck from Markdown" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/marpit.marp.app/directives"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://dev.classmethod.jp/articles/non-97-operation-manual/ papabeard 2024-06-25T06:53:11Z markdown 595 <blockquote cite="https://dev.classmethod.jp/articles/non-97-operation-manual/" title="自己流の手順書フォーマットを公開してみた | DevelopersIO"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fdev.classmethod.jp%2Farticles%2Fnon-97-operation-manual%2F" alt="" /> <a href="https://dev.classmethod.jp/articles/non-97-operation-manual/">自己流の手順書フォーマットを公開してみた | DevelopersIO</a></cite><p><a href="https://dev.classmethod.jp/articles/non-97-operation-manual/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/131fcc81ca667db783d364b71d0ba8bcd39b2b0a/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2022%2F01%2Feyecatch_workhack_1200x630.jpg" alt="自己流の手順書フォーマットを公開してみた | DevelopersIO" title="自己流の手順書フォーマットを公開してみた | DevelopersIO" class="entry-image" /></a></p><p>手順書フォーマットは千差万別 みなさんは自己流または、組織やプロジェクトで定められた手順書のフォーマットはありますか? 私は自己流の手順書フォーマットがあります。 自己流の手順書フォーマットがあるといっても、かなり扱いがふわふわしているので、備忘やメモの意味合い強めでまとめていきます。 「もっとこうし...</p><p><a href="https://b.hatena.ne.jp/entry/s/dev.classmethod.jp/articles/non-97-operation-manual/"><img src="https://b.hatena.ne.jp/entry/image/https://dev.classmethod.jp/articles/non-97-operation-manual/" alt="はてなブックマーク - 自己流の手順書フォーマットを公開してみた | DevelopersIO" title="はてなブックマーク - 自己流の手順書フォーマットを公開してみた | DevelopersIO" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/dev.classmethod.jp/articles/non-97-operation-manual/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://reffect.co.jp/react/gatsby-basic-tutorial-for-beginners papabeard 2024-06-25T06:52:18Z GatsbyJS Gatsby 18 <blockquote cite="https://reffect.co.jp/react/gatsby-basic-tutorial-for-beginners" title="基礎から始めるGatsbyJS入門 | アールエフェクト"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Freffect.co.jp%2Freact%2Fgatsby-basic-tutorial-for-beginners" alt="" /> <a href="https://reffect.co.jp/react/gatsby-basic-tutorial-for-beginners">基礎から始めるGatsbyJS入門 | アールエフェクト</a></cite><p><a href="https://reffect.co.jp/react/gatsby-basic-tutorial-for-beginners"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/31ebd83437daa7d759f15fe866253654048a21aa/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Freffect.co.jp%2Fwp-content%2Fuploads%2F2020%2F03%2Freact_gatsby.png" alt="基礎から始めるGatsbyJS入門 | アールエフェクト" title="基礎から始めるGatsbyJS入門 | アールエフェクト" class="entry-image" /></a></p><p>Gatsbyとは GatsbyはStatic Site Generator(静的サイトジェネレーター)でReactをベースに開発されているフレームワークです。Gatsbyを理解するためにはJavaScriptだけではなくReact, GraphQLなどの基礎知識が必要となります。 Gatsbyではデータを取得する際にはGraphQLを利用します。GraphQLを使って内部リソースのMarkd...</p><p><a href="https://b.hatena.ne.jp/entry/s/reffect.co.jp/react/gatsby-basic-tutorial-for-beginners"><img src="https://b.hatena.ne.jp/entry/image/https://reffect.co.jp/react/gatsby-basic-tutorial-for-beginners" alt="はてなブックマーク - 基礎から始めるGatsbyJS入門 | アールエフェクト" title="はてなブックマーク - 基礎から始めるGatsbyJS入門 | アールエフェクト" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/reffect.co.jp/react/gatsby-basic-tutorial-for-beginners"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://webdesign-trends.net/entry/13664 papabeard 2024-06-25T06:51:50Z javascript ライブラリ 95 <blockquote cite="https://webdesign-trends.net/entry/13664" title="パララックスの実装におすすめのJavaScriptライブラリまとめ【2021年版】 | Web Design Trends"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwebdesign-trends.net%2Fentry%2F13664" alt="" /> <a href="https://webdesign-trends.net/entry/13664">パララックスの実装におすすめのJavaScriptライブラリまとめ【2021年版】 | Web Design Trends</a></cite><p><a href="https://webdesign-trends.net/entry/13664"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/dd8061d9b5fc0c9fb76bb68d2d30fe49c2024673/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fwebdesign-trends.net%2Fwp%2Fwp-content%2Fuploads%2F2021%2F09%2Fparallax-libraries.jpg" alt="パララックスの実装におすすめのJavaScriptライブラリまとめ【2021年版】 | Web Design Trends" title="パララックスの実装におすすめのJavaScriptライブラリまとめ【2021年版】 | Web Design Trends" class="entry-image" /></a></p><p>Webデザインにおいて、定番テクニックの1つとして使われるのがパララックスです。パララックスはライブラリを使用することで手軽に導入することができ、Webサイトの印象を大きく変えることができます。 今回は、パララックスの実装におすすめのJavaScriptライブラリをご紹介します。 基本的にVanilla JSで作られているで...</p><p><a href="https://b.hatena.ne.jp/entry/s/webdesign-trends.net/entry/13664"><img src="https://b.hatena.ne.jp/entry/image/https://webdesign-trends.net/entry/13664" alt="はてなブックマーク - パララックスの実装におすすめのJavaScriptライブラリまとめ【2021年版】 | Web Design Trends" title="はてなブックマーク - パララックスの実装におすすめのJavaScriptライブラリまとめ【2021年版】 | Web Design Trends" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/webdesign-trends.net/entry/13664"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://b-risk.jp/blog/2022/07/splide/ papabeard 2024-06-25T06:51:24Z Splide 14 <blockquote cite="https://b-risk.jp/blog/2022/07/splide/" title="【最新バージョン4】Splideの使い方やオプションを解説！14個のデモ付き | 東京のホームページ制作 / WEB制作会社 BRISK"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fb-risk.jp%2Fblog%2F2022%2F07%2Fsplide%2F" alt="" /> <a href="https://b-risk.jp/blog/2022/07/splide/">【最新バージョン4】Splideの使い方やオプションを解説！14個のデモ付き | 東京のホームページ制作 / WEB制作会社 BRISK</a></cite><p><a href="https://b-risk.jp/blog/2022/07/splide/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/a1f423b0be7b39b461359b09c7e4b7596c10dd8b/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fb-risk.jp%2Fwp%2Fwp-content%2Fuploads%2F2022%2F06%2Fe4566ad2af4b73d1ae1c800713e3aec9.jpg" alt="【最新バージョン4】Splideの使い方やオプションを解説！14個のデモ付き | 東京のホームページ制作 / WEB制作会社 BRISK" title="【最新バージョン4】Splideの使い方やオプションを解説！14個のデモ付き | 東京のホームページ制作 / WEB制作会社 BRISK" class="entry-image" /></a></p><p>【最新バージョン4】Splideの使い方やオプションを解説！14個のデモ付き 更新日：2024/05/10 WEBサイトにスライダーを実装したことがある人は多いですよね。 そんなときいつも何を使用していますか？ スライダーのJSライブラリで有名どころとして以下の3つがあります。 ・slick ・Swiper ・keen-slider 私は今までslick...</p><p><a href="https://b.hatena.ne.jp/entry/s/b-risk.jp/blog/2022/07/splide/"><img src="https://b.hatena.ne.jp/entry/image/https://b-risk.jp/blog/2022/07/splide/" alt="はてなブックマーク - 【最新バージョン4】Splideの使い方やオプションを解説！14個のデモ付き | 東京のホームページ制作 / WEB制作会社 BRISK" title="はてなブックマーク - 【最新バージョン4】Splideの使い方やオプションを解説！14個のデモ付き | 東京のホームページ制作 / WEB制作会社 BRISK" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/b-risk.jp/blog/2022/07/splide/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://reach-script.com/ papabeard 2024-06-25T06:50:49Z デザイン 1 <blockquote cite="https://reach-script.com/" title="株式会社Reach Script"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Freach-script.com%2F" alt="" /> <a href="https://reach-script.com/">株式会社Reach Script</a></cite><p><a href="https://reach-script.com/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/e50b956ef04cc7966ca0a8c680827f1d8a017386/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Freach-script.com%2Fwp-content%2Fuploads%2F2021%2F06%2Fogp.jpg" alt="株式会社Reach Script" title="株式会社Reach Script" class="entry-image" /></a></p><p>私たちはアイデアとテクノロジーの力で 飼い主とパートナーが毎日をわくわく過ごせる ようなプロダクトを創りとどけていきます。</p><p><a href="https://b.hatena.ne.jp/entry/s/reach-script.com/"><img src="https://b.hatena.ne.jp/entry/image/https://reach-script.com/" alt="はてなブックマーク - 株式会社Reach Script" title="はてなブックマーク - 株式会社Reach Script" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/reach-script.com/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://zenn.dev/stripe/books/stripe-nextjs-use-shopping-cart/viewer/step1-1_nextjs_ssg papabeard 2024-06-25T06:50:10Z Next.js 3 <blockquote cite="https://zenn.dev/stripe/books/stripe-nextjs-use-shopping-cart/viewer/step1-1_nextjs_ssg" title="Next.jsで静的なサイトを作ってみよう｜Next.jsとStripeではじめるシンプルなECサイト開発ワークショップ"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fzenn.dev%2Fstripe%2Fbooks%2Fstripe-nextjs-use-shopping-cart%2Fviewer%2Fstep1-1_nextjs_ssg" alt="" /> <a href="https://zenn.dev/stripe/books/stripe-nextjs-use-shopping-cart/viewer/step1-1_nextjs_ssg">Next.jsで静的なサイトを作ってみよう｜Next.jsとStripeではじめるシンプルなECサイト開発ワークショップ</a></cite><p><a href="https://zenn.dev/stripe/books/stripe-nextjs-use-shopping-cart/viewer/step1-1_nextjs_ssg"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/a0c680ce1fb5f268bc3a02d0b2e363523e93c57d/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fstatic.zenn.studio%2Fimages%2Flogo-only-dark.png" alt="Next.jsで静的なサイトを作ってみよう｜Next.jsとStripeではじめるシンプルなECサイト開発ワークショップ" title="Next.jsで静的なサイトを作ってみよう｜Next.jsとStripeではじめるシンプルなECサイト開発ワークショップ" class="entry-image" /></a></p><p></p><p><a href="https://b.hatena.ne.jp/entry/s/zenn.dev/stripe/books/stripe-nextjs-use-shopping-cart/viewer/step1-1_nextjs_ssg"><img src="https://b.hatena.ne.jp/entry/image/https://zenn.dev/stripe/books/stripe-nextjs-use-shopping-cart/viewer/step1-1_nextjs_ssg" alt="はてなブックマーク - Next.jsで静的なサイトを作ってみよう｜Next.jsとStripeではじめるシンプルなECサイト開発ワークショップ" title="はてなブックマーク - Next.jsで静的なサイトを作ってみよう｜Next.jsとStripeではじめるシンプルなECサイト開発ワークショップ" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/zenn.dev/stripe/books/stripe-nextjs-use-shopping-cart/viewer/step1-1_nextjs_ssg"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://www.tailawesome.com/?price=free&type=template papabeard 2024-06-25T06:49:34Z TailwindCSS 3 <blockquote cite="https://www.tailawesome.com/?price=free&amp;type=template" title="Free Tailwind templates"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.tailawesome.com%2F%3Fprice%3Dfree%26type%3Dtemplate" alt="" /> <a href="https://www.tailawesome.com/?price=free&amp;type=template">Free Tailwind templates</a></cite><p><a href="https://www.tailawesome.com/?price=free&amp;type=template"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/3ad0779fd0c57614741b09f360233a318293e941/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fd1etqblq65l80m.cloudfront.net%2Fassets%2Fsocial_share-1dd1ce03.png" alt="Free Tailwind templates" title="Free Tailwind templates" class="entry-image" /></a></p><p>Free Tailwind templates TailAwesome is a curated list of the best Tailwind templates &amp; UI kits in the internet. We are actively searching, and curating the coolest resources out there.</p><p><a href="https://b.hatena.ne.jp/entry/s/www.tailawesome.com/?price=free&amp;type=template"><img src="https://b.hatena.ne.jp/entry/image/https://www.tailawesome.com/?price=free&amp;type=template" alt="はてなブックマーク - Free Tailwind templates" title="はてなブックマーク - Free Tailwind templates" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/www.tailawesome.com/?price=free&amp;type=template"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://flowrift.com/c/banner papabeard 2024-06-25T06:48:25Z TailwindCSS 12 <blockquote cite="https://flowrift.com/c/banner" title="Flowrift"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fflowrift.com%2Fc%2Fbanner" alt="" /> <a href="https://flowrift.com/c/banner">Flowrift</a></cite><p><a href="https://flowrift.com/c/banner"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/699e2bf9cb4bf870070d321d0b5abf15b863bc88/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fflowrift.com%2Fimg%2Fopen-graph.png" alt="Flowrift" title="Flowrift" class="entry-image" /></a></p><p>A library filled with Tailwind CSS UI blocks, components &amp; templates. Browse an ever-growing UI kit inside a highly optimized app. View / copy / customize.</p><p><a href="https://b.hatena.ne.jp/entry/s/flowrift.com/c/banner"><img src="https://b.hatena.ne.jp/entry/image/https://flowrift.com/c/banner" alt="はてなブックマーク - Flowrift" title="はてなブックマーク - Flowrift" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/flowrift.com/c/banner"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://webdesignshake.com/3100/ papabeard 2024-03-26T03:58:32Z css 7 <blockquote cite="https://webdesignshake.com/3100/" title="【迷ったらこれでOK】最短2行でできる！CSSで上下左右中央寄せする一番簡単な方法を解説！"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwebdesignshake.com%2F3100%2F" alt="" /> <a href="https://webdesignshake.com/3100/">【迷ったらこれでOK】最短2行でできる！CSSで上下左右中央寄せする一番簡単な方法を解説！</a></cite><p><a href="https://webdesignshake.com/3100/"><img src="" alt="【迷ったらこれでOK】最短2行でできる！CSSで上下左右中央寄せする一番簡単な方法を解説！" title="【迷ったらこれでOK】最短2行でできる！CSSで上下左右中央寄せする一番簡単な方法を解説！" class="entry-image" /></a></p><p>この記事にたどり着いたということは、あなたはCSSの中央寄せについて知りたいということだと思います。 display: flex;やposition: absolute;など、CSSで中央寄せする方法は現在ではたくさんありますが、本当に知りたいのは中央寄せの『一番簡単』な方法ではないでしょうか？ この記事ではCSS最短2行で書くことができる...</p><p><a href="https://b.hatena.ne.jp/entry/s/webdesignshake.com/3100/"><img src="https://b.hatena.ne.jp/entry/image/https://webdesignshake.com/3100/" alt="はてなブックマーク - 【迷ったらこれでOK】最短2行でできる！CSSで上下左右中央寄せする一番簡単な方法を解説！" title="はてなブックマーク - 【迷ったらこれでOK】最短2行でできる！CSSで上下左右中央寄せする一番簡単な方法を解説！" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/webdesignshake.com/3100/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://masata-blog.com/textnote/ papabeard 2024-03-22T09:47:11Z css 1 <blockquote cite="https://masata-blog.com/textnote/" title="【CSS】複数行のテキストをノートのように下線をつける方法 | まさたブログ"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fmasata-blog.com%2Ftextnote%2F" alt="" /> <a href="https://masata-blog.com/textnote/">【CSS】複数行のテキストをノートのように下線をつける方法 | まさたブログ</a></cite><p><a href="https://masata-blog.com/textnote/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/7a486101bb8df3e227b336e8e63d0905cf0c1ad6/backend=imagemagick;height=90;version=1;width=120/http%3A%2F%2Fmasata-blog.com%2Fwp-content%2Fuploads%2F2022%2F09%2Fe5d2f54d6248587e2c2c4cd7e3f3d236.jpg" alt="【CSS】複数行のテキストをノートのように下線をつける方法 | まさたブログ" title="【CSS】複数行のテキストをノートのように下線をつける方法 | まさたブログ" class="entry-image" /></a></p><p>.text { background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 98.5%, #000 100%); background-repeat: repeat-y; background-size: 100% 2.4em; line-height: 2.4; }</p><p><a href="https://b.hatena.ne.jp/entry/s/masata-blog.com/textnote/"><img src="https://b.hatena.ne.jp/entry/image/https://masata-blog.com/textnote/" alt="はてなブックマーク - 【CSS】複数行のテキストをノートのように下線をつける方法 | まさたブログ" title="はてなブックマーク - 【CSS】複数行のテキストをノートのように下線をつける方法 | まさたブログ" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/masata-blog.com/textnote/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://zenn.dev/tonkotsuboy_com/articles/css-subgrid-all-browsers papabeard 2024-03-22T08:17:40Z css 121 <blockquote cite="https://zenn.dev/tonkotsuboy_com/articles/css-subgrid-all-browsers" title="CSSのSubgridが全ブラウザ対応。Gridの入れ子の基本から応用までを完全理解する"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fzenn.dev%2Ftonkotsuboy_com%2Farticles%2Fcss-subgrid-all-browsers" alt="" /> <a href="https://zenn.dev/tonkotsuboy_com/articles/css-subgrid-all-browsers">CSSのSubgridが全ブラウザ対応。Gridの入れ子の基本から応用までを完全理解する</a></cite><p><a href="https://zenn.dev/tonkotsuboy_com/articles/css-subgrid-all-browsers"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/dcb9d13f064fe38248fb2284330ba767062427a9/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--b9aUlVl3--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3ACSS%2525E3%252581%2525AESubgrid%2525E3%252581%25258C%2525E5%252585%2525A8%2525E3%252583%252596%2525E3%252583%2525A9%2525E3%252582%2525A6%2525E3%252582%2525B6%2525E5%2525AF%2525BE%2525E5%2525BF%25259C%2525E3%252580%252582Grid%2525E3%252581%2525AE%2525E5%252585%2525A5%2525E3%252582%25258C%2525E5%2525AD%252590%2525E3%252581%2525AE%2525E5%25259F%2525BA%2525E6%25259C%2525AC%2525E3%252581%25258B%2525E3%252582%252589%2525E5%2525BF%25259C%2525E7%252594%2525A8%2525E3%252581%2525BE%2525E3%252581%2525A7%2525E3%252582%252592%2525E5%2525AE%25258C%2525E5%252585%2525A8%2525E7%252590%252586%2525E8%2525A7%2525A3%2525E3%252581%252599%2525E3%252582%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3A%2525E9%2525B9%2525BF%2525E9%252587%25258E%252520%2525E5%2525A3%2525AE%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2hwRUMxbUtjVjZsX01lT2R6N1Nsejk1SXR4WUZoYjB2LTNOdzNjV3c9czI1MC1j%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png%3F_a%3DBACAGSGT" alt="CSSのSubgridが全ブラウザ対応。Gridの入れ子の基本から応用までを完全理解する" title="CSSのSubgridが全ブラウザ対応。Gridの入れ子の基本から応用までを完全理解する" class="entry-image" /></a></p><p>CSS Subgridは、2023年9月から全主要ブラウザで実装されていましたが、2026年3月15日に正式にBaseline Widely Availableとなりました。これで安心してプロダクションで使えます🌻 Subgridとは、CSS Gridで新しく使えるようになった機能の1つ。行列（グリッド）を入れ子にして、親行列の行や列に子行列を整列させることが...</p><p><a href="https://b.hatena.ne.jp/entry/s/zenn.dev/tonkotsuboy_com/articles/css-subgrid-all-browsers"><img src="https://b.hatena.ne.jp/entry/image/https://zenn.dev/tonkotsuboy_com/articles/css-subgrid-all-browsers" alt="はてなブックマーク - CSSのSubgridが全ブラウザ対応。Gridの入れ子の基本から応用までを完全理解する" title="はてなブックマーク - CSSのSubgridが全ブラウザ対応。Gridの入れ子の基本から応用までを完全理解する" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/zenn.dev/tonkotsuboy_com/articles/css-subgrid-all-browsers"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://qiita.com/twrcd1227/items/7bce18167fb02ec22729?utm_source=Qiita%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%B9&utm_campaign=3fdfb5bb02-Qiita_newsletter_604_02_07&utm_medium=email&utm_term=0_e44feaa081-3fdfb5bb02-44431842 HTMX papabeard 2024-02-23T02:38:28Z 1 <blockquote cite="https://qiita.com/twrcd1227/items/7bce18167fb02ec22729?utm_source=Qiita%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%B9&amp;utm_campaign=3fdfb5bb02-Qiita_newsletter_604_02_07&amp;utm_medium=email&amp;utm_term=0_e44feaa081-3fdfb5bb02-44431842" title="もうjsなんていらない！世界で流行っているHTMXについてまとめてみた - Qiita"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fqiita.com%2Ftwrcd1227%2Fitems%2F7bce18167fb02ec22729%3Futm_source%3DQiita%25E3%2583%258B%25E3%2583%25A5%25E3%2583%25BC%25E3%2582%25B9%26utm_campaign%3D3fdfb5bb02-Qiita_newsletter_604_02_07%26utm_medium%3Demail%26utm_term%3D0_e44feaa081-3fdfb5bb02-44431842" alt="" /> <a href="https://qiita.com/twrcd1227/items/7bce18167fb02ec22729?utm_source=Qiita%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%B9&amp;utm_campaign=3fdfb5bb02-Qiita_newsletter_604_02_07&amp;utm_medium=email&amp;utm_term=0_e44feaa081-3fdfb5bb02-44431842">もうjsなんていらない！世界で流行っているHTMXについてまとめてみた - Qiita</a></cite><p><a href="https://qiita.com/twrcd1227/items/7bce18167fb02ec22729?utm_source=Qiita%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%B9&amp;utm_campaign=3fdfb5bb02-Qiita_newsletter_604_02_07&amp;utm_medium=email&amp;utm_term=0_e44feaa081-3fdfb5bb02-44431842"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/5018a9b4440ada11c1c9fe645d7010719be183dc/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGMTU2MDk2JTJGcHJvZmlsZS1pbWFnZXMlMkYxNzIyNzQ4MTE3P2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZiZz1GRkZGRkYmZm09cG5nMzImcz0yNmM0N2E0Mjk0NTcwMWJlOWU1YjRjMjRjZThhYjc0Zg%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D18a57652c840eb72153a43ed9fb114e1%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JUUzJTgyJTgyJUUzJTgxJTg2anMlRTMlODElQUElRTMlODIlOTMlRTMlODElQTYlRTMlODElODQlRTMlODIlODklRTMlODElQUElRTMlODElODQlRUYlQkMlODElRTQlQjglOTYlRTclOTUlOEMlRTMlODElQTclRTYlQjUlODElRTglQTElOEMlRTMlODElQTMlRTMlODElQTYlRTMlODElODQlRTMlODIlOEJIVE1YJUUzJTgxJUFCJUUzJTgxJUE0JUUzJTgxJTg0JUUzJTgxJUE2JUUzJTgxJUJFJUUzJTgxJUE4JUUzJTgyJTgxJUUzJTgxJUE2JUUzJTgxJUJGJUUzJTgxJTlGJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9MzI5NmExNDU5NTY1MWQ4NjBjNjQ1ZTc5NGYxMmQyODI%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDB0d3JjZDEyMjcmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz04MmUyNjAyOGUyYjE3M2E0NGZkZWNjOGUwMDQ3ODMyNw%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Daba29a0b1697210ee264069d7ade0751" alt="もうjsなんていらない！世界で流行っているHTMXについてまとめてみた - Qiita" title="もうjsなんていらない！世界で流行っているHTMXについてまとめてみた - Qiita" class="entry-image" /></a></p><p>はじめに この記事の内容はhtmx v1の記事です。 最新のhtmx v2に関する解説は以下の本にまとめましたので、そちらを参考にしてください！！ HTMXとは https://htmx.org/ HTMXは、JavaScript を記述せずに、Ajax通信や高度なUXを実現できるライブラリ。 軽量 で 高速 で、既存のサーバーサイドのフレームワークとシームレ...</p><p><a href="https://b.hatena.ne.jp/entry/s/qiita.com/twrcd1227/items/7bce18167fb02ec22729?utm_source=Qiita%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%B9&amp;utm_campaign=3fdfb5bb02-Qiita_newsletter_604_02_07&amp;utm_medium=email&amp;utm_term=0_e44feaa081-3fdfb5bb02-44431842"><img src="https://b.hatena.ne.jp/entry/image/https://qiita.com/twrcd1227/items/7bce18167fb02ec22729?utm_source=Qiita%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%B9&amp;utm_campaign=3fdfb5bb02-Qiita_newsletter_604_02_07&amp;utm_medium=email&amp;utm_term=0_e44feaa081-3fdfb5bb02-44431842" alt="はてなブックマーク - もうjsなんていらない！世界で流行っているHTMXについてまとめてみた - Qiita" title="はてなブックマーク - もうjsなんていらない！世界で流行っているHTMXについてまとめてみた - Qiita" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/qiita.com/twrcd1227/items/7bce18167fb02ec22729?utm_source=Qiita%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%B9&amp;utm_campaign=3fdfb5bb02-Qiita_newsletter_604_02_07&amp;utm_medium=email&amp;utm_term=0_e44feaa081-3fdfb5bb02-44431842"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://notai.jp/blog/cursor-how-to/ cursor papabeard 2024-02-23T02:38:05Z 2 <blockquote cite="https://notai.jp/blog/cursor-how-to/" title="AI搭載エディタCursor完全ガイド：全機能解説＆無料プランでGPT-4/Claude3のAPIを使う方法"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fnotai.jp%2Fblog%2Fcursor-how-to%2F" alt="" /> <a href="https://notai.jp/blog/cursor-how-to/">AI搭載エディタCursor完全ガイド：全機能解説＆無料プランでGPT-4/Claude3のAPIを使う方法</a></cite><p><a href="https://notai.jp/blog/cursor-how-to/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/52b97f1baf10ea102a2260343c0fabfa62e21026/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fnotai.jp%2Fog%2Fcursor-how-to.png" alt="AI搭載エディタCursor完全ガイド：全機能解説＆無料プランでGPT-4/Claude3のAPIを使う方法" title="AI搭載エディタCursor完全ガイド：全機能解説＆無料プランでGPT-4/Claude3のAPIを使う方法" class="entry-image" /></a></p><p>ChatGPT、特にGPT-4モデルを一度でもプログラミングのサポートに使ったことがある人ならば、GPT-4がどれだけ強力なアシスタントになるか分かっているはずだ。 何か実行したいタスクや書きたいプログラムがあるとき、その内容を自然言語で伝えるだけで、GPT-4が一発で動くコードを生成してくれることも多い。 何かエラー...</p><p><a href="https://b.hatena.ne.jp/entry/s/notai.jp/blog/cursor-how-to/"><img src="https://b.hatena.ne.jp/entry/image/https://notai.jp/blog/cursor-how-to/" alt="はてなブックマーク - AI搭載エディタCursor完全ガイド：全機能解説＆無料プランでGPT-4/Claude3のAPIを使う方法" title="はてなブックマーク - AI搭載エディタCursor完全ガイド：全機能解説＆無料プランでGPT-4/Claude3のAPIを使う方法" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/notai.jp/blog/cursor-how-to/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://coliss.com/articles/build-websites/operation/css/use-subgrid-give-child-elements-access-to-a-parents-grid.html papabeard 2024-02-23T02:37:40Z css 152 <blockquote cite="https://coliss.com/articles/build-websites/operation/css/use-subgrid-give-child-elements-access-to-a-parents-grid.html" title="CSSのsubgridがすべてのブラウザにサポートされたので、カード内の見出しやテキストを簡単に揃えることができます"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fcss%2Fuse-subgrid-give-child-elements-access-to-a-parents-grid.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/css/use-subgrid-give-child-elements-access-to-a-parents-grid.html">CSSのsubgridがすべてのブラウザにサポートされたので、カード内の見出しやテキストを簡単に揃えることができます</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/css/use-subgrid-give-child-elements-access-to-a-parents-grid.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/2b56bf829b26c68583c8dc74c2520981df470c51/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202304%2F2023100110%402x.gif" alt="CSSのsubgridがすべてのブラウザにサポートされたので、カード内の見出しやテキストを簡単に揃えることができます" title="CSSのsubgridがすべてのブラウザにサポートされたので、カード内の見出しやテキストを簡単に揃えることができます" class="entry-image" /></a></p><p>先日の記事（Chrome 117でサポートされたCSSの6つの新しい機能とプロパティ）で触れましたがCCSS Gridのsubgrid値が、grid-template-columnsとgrid-template-rowsの2つで設定できるようになりました。Safari, Firefoxではすでにサポートされていたので、これで主要ブラウザのすべてで利用できます。 CSSのサブグリッド（...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/use-subgrid-give-child-elements-access-to-a-parents-grid.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/css/use-subgrid-give-child-elements-access-to-a-parents-grid.html" alt="はてなブックマーク - CSSのsubgridがすべてのブラウザにサポートされたので、カード内の見出しやテキストを簡単に揃えることができます" title="はてなブックマーク - CSSのsubgridがすべてのブラウザにサポートされたので、カード内の見出しやテキストを簡単に揃えることができます" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/use-subgrid-give-child-elements-access-to-a-parents-grid.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://qiita.com/kota33/items/20a884cbd969cf1ce087 cursor papabeard 2024-02-23T02:37:13Z 80 <blockquote cite="https://qiita.com/kota33/items/20a884cbd969cf1ce087" title="次世代のエディター Cursor(カーソル) を使いこなす(2024年更新) - Qiita"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fqiita.com%2Fkota33%2Fitems%2F20a884cbd969cf1ce087" alt="" /> <a href="https://qiita.com/kota33/items/20a884cbd969cf1ce087">次世代のエディター Cursor(カーソル) を使いこなす(2024年更新) - Qiita</a></cite><p><a href="https://qiita.com/kota33/items/20a884cbd969cf1ce087"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/1c32862d8bf302279969da31cd2c51d42df054c3/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-7940cd1c8db80a7ec40711d90f43539e.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUU2JUFDJUExJUU0JUI4JTk2JUU0JUJCJUEzJUUzJTgxJUFFJUUzJTgyJUE4JUUzJTgzJTg3JUUzJTgyJUEzJUUzJTgyJUJGJUUzJTgzJUJDJTIwQ3Vyc29yJTI4JUUzJTgyJUFCJUUzJTgzJUJDJUUzJTgyJUJEJUUzJTgzJUFCJTI5JTIwJUUzJTgyJTkyJUU0JUJEJUJGJUUzJTgxJTg0JUUzJTgxJTkzJUUzJTgxJUFBJUUzJTgxJTk5JTI4MjAyNCVFNSVCOSVCNCVFNiU5QiVCNCVFNiU5NiVCMCUyOSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9ZTM3MDNhMGRmMWJjNmQ3NWU0MDk0NzI2M2Q0M2FlZGE%26mark-x%3D120%26mark-y%3D96%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9OTcyJnR4dD0lNDBrb3RhMzMmdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWZkMTA5ZDAyZjM3YzE1YjAwZmVkYzQ4Mzc0MTdlMzhk%26blend-x%3D120%26blend-y%3D445%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-SFJCcmFpbg%26txt-width%3D972%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25233A3C3C%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D134%26txt-y%3D546%26s%3Db458e723d80ec6ec32858343524054a4" alt="次世代のエディター Cursor(カーソル) を使いこなす(2024年更新) - Qiita" title="次世代のエディター Cursor(カーソル) を使いこなす(2024年更新) - Qiita" class="entry-image" /></a></p><p>はじめに こんにちは。 株式会社HRBrainでバックエンドエンジニアをしている、蔭山といいます。 株式会社HRBrainではアドベントカレンダーに参加しています。 本記事は5日目になります。 今回は、なにかと話題の生成AIに乗っかりまして「AI時代のエディター Cursor」を紹介したいと思います。 コードエディターであるCur...</p><p><a href="https://b.hatena.ne.jp/entry/s/qiita.com/kota33/items/20a884cbd969cf1ce087"><img src="https://b.hatena.ne.jp/entry/image/https://qiita.com/kota33/items/20a884cbd969cf1ce087" alt="はてなブックマーク - 次世代のエディター Cursor(カーソル) を使いこなす(2024年更新) - Qiita" title="はてなブックマーク - 次世代のエディター Cursor(カーソル) を使いこなす(2024年更新) - Qiita" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/qiita.com/kota33/items/20a884cbd969cf1ce087"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://note.com/komzweb/n/na631fb596f52 cursor papabeard 2024-02-23T02:36:37Z 2 <blockquote cite="https://note.com/komzweb/n/na631fb596f52" title="AI搭載コードエディタ「Cursor」で未来のプログラミングを体験せよ｜komz"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fnote.com%2Fkomzweb%2Fn%2Fna631fb596f52" alt="" /> <a href="https://note.com/komzweb/n/na631fb596f52">AI搭載コードエディタ「Cursor」で未来のプログラミングを体験せよ｜komz</a></cite><p><a href="https://note.com/komzweb/n/na631fb596f52"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/1d4393e9371527f72eb5306c5f61a7760771a9ad/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F118085879%2Frectangle_large_type_2_deca6bbf597739bd8e42b9be19c78f8d.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280" alt="AI搭載コードエディタ「Cursor」で未来のプログラミングを体験せよ｜komz" title="AI搭載コードエディタ「Cursor」で未来のプログラミングを体験せよ｜komz" class="entry-image" /></a></p><p>話題のAI搭載コードエディタ「Cursor」が気になっている方は、まず付属のチュートリアル用プロジェクトで機能を試してみると良いです。簡単なチュートリアルですが、未来のプログラミングを体験できます。CursorはVSCodeのフォークなので、安心の使い心地です。 チュートリアル用プロジェクトはJavaScriptとPythonがあり...</p><p><a href="https://b.hatena.ne.jp/entry/s/note.com/komzweb/n/na631fb596f52"><img src="https://b.hatena.ne.jp/entry/image/https://note.com/komzweb/n/na631fb596f52" alt="はてなブックマーク - AI搭載コードエディタ「Cursor」で未来のプログラミングを体験せよ｜komz" title="はてなブックマーク - AI搭載コードエディタ「Cursor」で未来のプログラミングを体験せよ｜komz" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/note.com/komzweb/n/na631fb596f52"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://qiita.com/ryamate/items/94a6170c4661242b4c1c?utm_campaign=popular_items&utm_medium=feed&utm_source=popular_items cursor papabeard 2024-02-23T02:36:13Z 1 <blockquote cite="https://qiita.com/ryamate/items/94a6170c4661242b4c1c?utm_campaign=popular_items&amp;utm_medium=feed&amp;utm_source=popular_items" title="AIエディターCursorを使い始める手順と基本的な使い方を、丁寧にまとめただけの記事。 - Qiita"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fqiita.com%2Fryamate%2Fitems%2F94a6170c4661242b4c1c%3Futm_campaign%3Dpopular_items%26utm_medium%3Dfeed%26utm_source%3Dpopular_items" alt="" /> <a href="https://qiita.com/ryamate/items/94a6170c4661242b4c1c?utm_campaign=popular_items&amp;utm_medium=feed&amp;utm_source=popular_items">AIエディターCursorを使い始める手順と基本的な使い方を、丁寧にまとめただけの記事。 - Qiita</a></cite><p><a href="https://qiita.com/ryamate/items/94a6170c4661242b4c1c?utm_campaign=popular_items&amp;utm_medium=feed&amp;utm_source=popular_items"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/1cd57ca1d090fde221e1c056a66d6433e669116e/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9QUklRTMlODIlQTglRTMlODMlODclRTMlODIlQTMlRTMlODIlQkYlRTMlODMlQkNDdXJzb3IlRTMlODIlOTIlRTQlQkQlQkYlRTMlODElODQlRTUlQTclOEIlRTMlODIlODElRTMlODIlOEIlRTYlODklOEIlRTklQTAlODYlRTMlODElQTglRTUlOUYlQkElRTYlOUMlQUMlRTclOUElODQlRTMlODElQUElRTQlQkQlQkYlRTMlODElODQlRTYlOTYlQjklRTMlODIlOTIlRTMlODAlODElRTQlQjglODElRTUlQUYlQTclRTMlODElQUIlRTMlODElQkUlRTMlODElQTglRTMlODIlODElRTMlODElOUYlRTMlODElQTAlRTMlODElOTElRTMlODElQUUlRTglQTglOTglRTQlQkElOEIlRTMlODAlODImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTkwYjQ0Yjk2NjBlZjI1YTU3MjBlNTI3MjcwYmRjOWU5%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDByeWFtYXRlJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0xOTM0NDEyNjQ3NzJkNTBiMzVmZGEwMGU0MWFkNTU1Mw%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44K544Oe44Os44K4%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25231E2121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D5aa055c4a119a31e9f40bdc937ac8e18" alt="AIエディターCursorを使い始める手順と基本的な使い方を、丁寧にまとめただけの記事。 - Qiita" title="AIエディターCursorを使い始める手順と基本的な使い方を、丁寧にまとめただけの記事。 - Qiita" class="entry-image" /></a></p><p>はじめに この記事は、AI エディタ Cursor （カーソル）について、使い始めるまでの手順と基本的な機能を試した内容を、丁寧にまとめただけの記事です。 Cursor 使ってみたい、導入の手順やできることを確認したい、という場合には、ぜひ読んでみていただけると幸いです。 使ってみたきっかけ 私が Cursor を使ってみよ...</p><p><a href="https://b.hatena.ne.jp/entry/s/qiita.com/ryamate/items/94a6170c4661242b4c1c?utm_campaign=popular_items&amp;utm_medium=feed&amp;utm_source=popular_items"><img src="https://b.hatena.ne.jp/entry/image/https://qiita.com/ryamate/items/94a6170c4661242b4c1c?utm_campaign=popular_items&amp;utm_medium=feed&amp;utm_source=popular_items" alt="はてなブックマーク - AIエディターCursorを使い始める手順と基本的な使い方を、丁寧にまとめただけの記事。 - Qiita" title="はてなブックマーク - AIエディターCursorを使い始める手順と基本的な使い方を、丁寧にまとめただけの記事。 - Qiita" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/qiita.com/ryamate/items/94a6170c4661242b4c1c?utm_campaign=popular_items&amp;utm_medium=feed&amp;utm_source=popular_items"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote>