2011年6月10日、Evernoteを使用開始。 2014年9月19日、有料プランに加入。 2024年3月23日、クソみたいなメールが届く。 プラン、廃止 いつも Evernote をご利用いただき、ありがとうございます。このたびは今後の Evernote 登録プランに関する変更についてご案内させていただきます。 お使いの Evernote アカウントは Plus から Personal に移行されました。Evernote Plus など、一般のお客様に数年間ご利用いただけなかった従来の登録プランが廃止となったためです。この変更により、Personal プランで利用可能な機能すべてをご利用いただけます。 今後はAnnualの登録プランが現在の Evernote Personal プランの料金 129.99 USD/Yearに合うように更新されます。この料金は次の更新日である2024/4/

Kansai WordPress Meetup@大阪『 WordCamp Tokyo 2023 をみんなで振り返る+α (https://www.meetup.com/ja-JP/kansai-wordpress-meetup/events/296857054/) 登壇資料です。

WebサイトやスマホアプリのさまざまなUIデザインにぴったりな、シンプルなソリッド・ベタ塗りからおしゃれなカラーまで揃ったSVGアイコンが完全無料で利用できるblendiconsを紹介します。 アイコンはなんと、200,000個以上！ ベーシックなUIをはじめ、ショッピングサイト、タッチジャスチャー、日用品や家具、飲食物、スポーツ、ミュージックなど、多種多様なアイコンが揃っています。 blendicons Blendiconsはデザイナーやデベロッパーが容易に必要なアイコンを手に入れられるように、200,000個以上の高品質なアイコンを作成し、ダウンロードできるようにしたサイトです。 アイコンの利用にあたっては個人でも商用でも無料で、Webサイトやスマホアプリをはじめ、プレゼンや印刷物などあらゆる用途に利用できます。アイコンをカスタマイズして利用することもOKです。ただし、アイコン素材をそ

CSSで便利な機能の1つがcalc()、ページのレイアウト、要素やフォントのサイズ設定に活躍します。特に異なる単位で加算減算（calc(1rem + 1px)）できることが便利ですが、乗算除算（calc(1rem / 1px)はできません。 そこでCSSの三角関数です。すべてのブラウザにサポートされているatan2()を使用すれば、異なる単位で計算ができます。tan(atan2())を使用して、スクリーンサイズやフォントサイズを取得するテクニックを紹介します。 CSS Type Casting to Numeric: tan(atan2()) Scalars br Jane Ori (@Jane0ri) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに tan(atan2())は単なる数値である 追記: 三角関数を学び直

追記: 10/11 ハテブでバズっているようで、色々指摘があったので追記 getElement*は動作が早いのでIDやクラス名が自明の場合はgetElement*を使う方がいいと言う意見もあり、また、ページの表示で大量に呼び出されるわけではないからボトルネックにはならないと言う意見もある。 getElement*で返されるオブジェクトは動的な変化に対応しており、querySelector*は動的な変化に対応していないため、場合によってはgetElement*を使うといい。このサイトで遊んでみよう。 https://ja.javascript.info/searching-elements-dom#ref-263 for await ... ofは非推奨なので Promise.allを現代的な書き方にした 顧客先のブラウザが古い場合も考慮して、あえてレガシーな書き方もする場合があるらしい。現

TechFeed Experts Night#26 〜 Web標準技術最前線 ー HTML/CSS/JSの「いま」で発表したスライドです。 https://techfeed.io/events/techfeed-experts-night-26 Zennの記事でも詳しく解説しています。 → CSSのSubgridが全ブラウザ対応。Gridの入れ子の基本から応用までを完全理解する https://zenn.dev/moneyforward/articles/css-subgrid-all-browsers

商用でも完全に無料で利用できる、SVGとPNG完備のおしゃれなイラスト素材を紹介します。Webやアプリ、プレゼン、提案書、ポスター、同人誌など、あらゆるメディアで無料で利用できます。 イラストはすべて手描きのベクターで、80年代のSF映画や日本のイラストにインスパイアされて描かれています。 Transhumans さっそく、イラスト素材のダウンロード方法から。 イラストをクリックすると各イラストのページに移動するので、「download SVG」「download PNG」ボタンをクリックすると、ダウンロードできます。登録など面倒なことは一切不要です。

私が書きました 山口 拓也（ 著者の記事一覧はこちら ）相続専門税理士 辻・本郷 税理士法人　シニアパートナー 相続税の相談実績は累計500件を超える。金融機関や各種メディアでの、お客様向けセミナー講師の実績も豊富。 Tweet Pocket 親との別れはいつやってくるか分かりません。 やがてくるその日に備えて、生前のうちに準備をしておくことで、相続の迎え方が大きく変わることとなります。 いざ相続が発生すると、悲しみに暮れる間もなく、次から次へと膨大な量の手続きが押し寄せてきます。 相続は人生で何度も経験するものではなく、多くの方は右も左も分からないまま手探りで進めていくことになります。 それが自分の親となれば、必要書類の収集や名義変更、遺産相続の話し合いなどは、子であるあなた自身に大きな影響を及ぼすことでしょう。 また、親が亡くなった直後ということもあり、心情的にもすぐに割り切って物事を

はじめに結論から ホバースタイルは、 :hover だけで指定するのではなく、次のように指定しましょう！ @media (hover: hover) { /* リンクの場合 */ a:any-link:hover { } /* ボタンの場合 */ button:enabled:hover { } /* 特定できない場合 */ .button:where(:any-link, :enabled, summary):hover { } } ポイント 1 マウスのときだけホバースタイルを当てる :hover 擬似クラスで指定したスタイルは、タッチデバイスの場合フォーカス状態で適用されてしまいます。 つまり、タッチしたあとのスタイルがずっとホバースタイルのままになってしまいます。 これは意図と合わないため、マウスで操作しているかどうかを区別してスタイルを当てる必要があります。 マウス（正確には、ホ

はじめに こんにちは、都内でソフトウェアエンジニアをしているYSasagoです。 私はフロントエンドの開発時に、Chromeのブラウザを使うことが多いです。 Chrome には開発を便利にするchrome 拡張機能がたくさんあります。 普段、フロントエンド開発時に私が使っている拡張機能を紹介したいと思います。 UI Build Assistant アイコンは IT 大学と面白いですが、こちらの拡張機能を使えば、ワンクリックで背景と線に色付けをしてくれて、レイアウトが見やすくなります。こちらの拡張機能を使うとマージンの調整等が簡単にできるようになりとても便利です。 また、作成者のしまぶーさんの Youtube 動画は、フロントエンド学習にとても有益なのでよく拝見させていただいてます。 OFF ON Responsive Viewer 次に紹介するのは、Responsive Viewer です

HTMLメールの実装で「tableか、、、」とため息をついていた人に朗報です。 tableを使用しなくてはいけなかった理由はWindows上のOutlookだったのですが、新しいOutlookではレンダリングエンジンがEdgeに切り替わります。これにより、tableによる実装は不要になります。 HTMLメールの最近の実装方法を解説します。 Modern HTML email (tables no longer required) by Ollie Williams 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLメールの実装でもっとも頭を悩ませている問題 今日、HTMLメールをどのように実装すべきか？ 電子メール用のAMPについて 終わりに はじめに MailChimpによるHTMLメール実装のベストプラクティ

先日公開したアニメ絵の実写版を作る記事はおかげさまで好評でした！ アニメ絵生成の第二弾に行く前に、アニメ絵実写版生成でも威力を発揮する「雑コラ」をAIでリアルにする手法について今回は説明します。 実はAIアートグランプリの時も「雑コラ」と言われたりしていたのでしたw 渚の妖精ぎばさちゃん対キモノアゲハ／koizoom1／漫画@gibasachan 雑コラに見えるけど すごい技術 登場人物より多いモデル これはゆるキャラの未来きたな…#AIArtGp pic.twitter.com/5A4wMUJsND — Dr.(Shirai)Hakase #AI神絵師本 #技術書典14 (@o_ob) March 12, 2023 AIといえばラーメン(？)ですが、こんな画像も作れちゃいます！ラーメンの中にいる秘書さん！ ラーメンの中にいる秘書さん絵面としては結構インパクトがありますが、実は作るのは全然

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

このnoteのターゲットChatGPTを使ってるけど、イマイチ使いこなせていない人 ChatGPTにどんな指示をしていいか迷っている人 このnoteで得られることゴールシークプロンプトの概要を理解できる ゴールシークプロントの使い方が分かる ゴールシークプロンプトとは聞き慣れない単語だと思うので、まずはそれぞれの言葉を説明しますね。 ■ ゴール：AIを使ってユーザーが達成したい目標 ■ シーク：探す, 探し求める ■ プロンプト：AIに指示するために入力する文章 つまり、ゴールシークプロンプトとは「ゴールを自ら探しに行ってくれるプロンプト」のことです。 ゴールシークプロンプトがすごい理由ゴールシークプロンプトがすごい理由は、以下の３点。 1. 曖昧なゴール設定でも、AIが明確なゴールを探してくれる 2. AIと対話しながらゴールを探せる 3. 汎用性のある形に変更もできる ChatGPTに

Webサイトを訪れたユーザーが、もっとも重要視するのはUIデザインです。 ユーザーが直感的に操作でき、使いやすく、美しくデザインされたWebサイトは、長期的な成功につながります。 しかし、どんなUIデザインを作成したらよいか分からない、という声もよく聞きます。 そこで今回は、コピペで利用できるUIデザインライブラリ UIverse をご紹介します。 1200を超えるUI要素が公開されており、HTML/CSSをコピペするだけで、だれでも手軽に利用できます。 これらを押さえて、あなたのWebサイトをユーザーにとって魅力的で、使いやすくしてみましょう。 UI要素1200以上！HTML/CSSを直接コピペできる便利ライブラリUIverse UIverseではあらゆるプロジェクトに対応できる、HTML/CSSで作成されたオープンソースのUI要素を作成、共有できるウェブサイトです。 すべてのコードはM

ChatGPTで文章を作成して、最後に『文章を書く時は以下のルールを忠実に守ってください。』と入力すると、自分の希望通りの文章を書いてくれます。具体的にはこんな感じです↓↓ pic.twitter.com/A4ABtkGN3u — ミスティー＠専業ブロガー (@misty_blog) March 19, 2023 ChatGPTで『〇〇 〇〇で検索するユーザーが思わずクリックしてしまうブログ記事のリード文を〇〇のプロ目線で書いてください」と指示すると、SEOで上位表示できるレベルの『リード文』が簡単に書けてしまう。詳しいやり方はこんな感じです↓ pic.twitter.com/e2wweMLfkr — ミスティー＠専業ブロガー (@misty_blog) March 22, 2023

プロダクト、サービス、アプリやソフトウェアなどのランディングページ用のHTMLテンプレートを無料でダウンロードできるHTMLrevを紹介します。 ランディングページ用のHTMLテンプレートはすべて無料で、商用プロジェクトでも帰属なしで利用できます。 HTMLrev HTMLrevは先日ローンチされたばかりのサイトで、ランディングページ用のHTMLテンプレートが無料でダウンロードできます。 HTMLテンプレートはMITライセンスで、商用プロジェクトでも無料で利用できます。詳しくはLicenseをご覧ください。

ドキュメンタリアンとは、役職に関係なく、ソフトウェア業界でドキュメントとコミュニケーションに関心を持つ人のことです。 www.writethedocs.org はじめに これは主に『ユーザーの問題解決とプロダクトの成功を導く エンジニアのためのドキュメントライティング』の書評です。私はSreakeにてSREという役職についています。SREはサービス概要、アーキテクチャの解説や図、各種構成図、各種手順書、ポストモーテム、ポリシー、SLA(SLO) … その他の様々な場面でドキュメントを書く必要があります。しかし、ドキュメントは価値が見えにくく時間と労力がかかり品質担保の面で重要度がとても高いのにその場での価値が見えにくいので浸透しにくいです。そのため、エンジニアとしてモチベーションが保ちづらいです。2021年 State of DevOps 2021 にもドキュメントに関する言及があり今後、

コンテナクエリがすべてのモダンブラウザの安定版でサポートされ、これからはメディアクエリからコンテナクエリを使用する機会が増えてくると思います。 コンテナクエリは親コンテナに基づいてスタイルを定義できるものですが、親のサイズによるクエリだけではありません。親のスタイル値によるクエリ（スタイルクエリ）も可能です。スタイルクエリの基礎知識と便利な使い方を紹介します。 スタイルクエリを使用すると、複数のバリエーションを持つ再利用可能なコンポーネントが簡単に実装できます。 Getting Started with Style Queries by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています CSSのスタイルクエリとは スタイルクエリの使い方 スタイルクエリで実装したUIコンポーネント 1 スタイルクエリで実装したUIコンポーネント