フォントを軽量化 使うweightを3つに絞ったとはいえ、1ファイル16~17MB。フォントファイルを軽量化(サブセット化)していきましょう サブセットフォントメーカーをダウンロードします。 https://opentype.jp/subsetfontmk.htm Windows用とMac用が別ですので選んでください。 ダウンロード後、インストールし起動するとこのようなソフトが開きます。 ①作成元フォントファイル 参照から選択できます。今回はNotoSansCJKjp-Regular.otfを例にします。 ②作成後フォントファイル 基本的には元のファイルと同じ名前で良いです。場所は混乱しないように別の場所を指定すると良いでしょう。 ③フォントに格納する文字 第1水準漢字、非漢字文字、アスキー文字をコピペします! 唖娃阿哀愛挨姶逢葵茜穐悪握渥旭葦芦鯵梓圧斡扱宛姐虻飴絢綾鮎或粟袷安庵按暗案闇鞍
今日からはじめるDiscord。基礎の基礎からサーバー運用まで,Discordの基本的な使い方をこの記事で覚えよう ライター:ワニウエイブ インターネットを介して対戦/協力するゲームはすっかり当たり前のことになり,スポーツ観戦や映画鑑賞のような「趣味」の一つとして嗜まれている。音声通話を用いてゲーム中の意思疎通や雑談を行うような文化も広く一般的なものとなり,日々さまざまな場所で行われている。 主にPCでゲームを遊ぶプレイヤーにとって,今もっとも使われているボイスチャット(音声通話)用のツールはおそらく「Discord」であろう。元々ゲーマーのためのソフトウェアとして開発されていたDiscordだが,今ではゲーマーだけではなく,さまざまなユーザーに広く親しまれている。 というのも,Discordはボイスチャット以外にも便利な機能と扱いやすさを携えており,誰にとっても重宝するツールだからだ。筆
PDF形式のファイルを御覧いただく場合には、Adobe Acrobat Readerが必要な場合があります。 Adobe Acrobat Readerは開発元のWebページにて、無償でダウンロード可能です。
とにかく Material Design Icons を開きます Search... ボックスに face と入力します 一覧からお好みの SVG をクリックします </> ボタンを押し、プルダウンメニューから View SVG を選択します テキストエリアの中身をすべてコピー…するのではなく、 d 属性の中身のみコピーします。 <path fill="#000000" d="..." /> の ... です 下記のようなスタイルシートを記述し、 ... の部分にコピーした内容をペーストして完了です <style> .c-icon--face { background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24"
はじめに Tailwind CSS v3.4より、:has()疑似クラスが使用できるようになりました。 今回は追加された3つのクラスの紹介と、それぞれをCSSとTailwind CSSの両者で書いてみたいと思います。 :has()疑似クラスとは :has() は CSS の疑似クラス関数で、引数として渡される相対セレクターのいずれかが、 その要素から辿ってアンカーとして少なくとも一つの要素とマッチする場合に、その要素を表します。 この疑似クラスは、相対セレクターリストを引数として取ることで、参照している要素に関して親要素や前の兄弟要素を選択する方法を提供します。 CSSでの使用方法 以下の指定で、子要素にchildクラスを持っているparentクラスの要素だけ対象になります。 <div class="parent"> <div class="baby"></div> </div> <div
再びーー 一人でも多くのイラストレーターに、知って欲しいことがあります。 知って欲しいこととはーー 【「著作者人格権を行使しない」契約には、イラストレーターの名誉や声望をおとしめる用途(アダルト系サービス等)に利用されるリスクがある】 という問題に関してです。 たとえばーー イラストレーターであるあなたが、企業Aの依頼を受けて、衣類を着た真面目なテーマの女性イラストレーションを納品したとしましょう。 「これがもし「著作権譲渡+著作者人格権不行使」の契約だったとしたらーー 企業Aが、そのイラストレーションを、あなたの知らぬ間に一糸まとわぬ姿に改変して、アダルトゲームで利用する。 ーーというということも可能になってしまうのです。 「そんなことあるわけないよ!」と思うかもしれません。 しかしそれに近い事例が、実際にありました。 【「切ないエッチシーン満載で…」乙女ゲームのイケメン、エロゲーで〝野
自分のデザインに合ったローダーを簡単に実装したい! そんな要望に応えるオンラインで簡単にカスタマイズができるCSSで実装されたローダーを紹介します。 ローダーはHTMLとCSSをコピペするだけで簡単に実装でき、カスタマイズもオンラインでサイズ・カラー・アニメーションなどを変更できます。 Loadership Loadershipの特徴 Loadershipの使い方 Loadershipのローダー Loadershipの特徴 Loadershipは、CSSで実装されたローダーをコピペで簡単に利用できるオンラインツールです。ローダーはオンラインでカスタマイズもでき、自分のデザインに合ったローダーを作成できます。 ローダーのCSSは依存関係はなく、HTMLとCSSをコピペするだけで利用できます。MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。詳しくは、Aboutをご覧ください
内田氏の自己紹介 内田太志氏:それでは、「個人開発のオープンソースで起業&マネタイズ」というタイトルでLTをします。私は株式会社インプリムの内田と申します。今は個人開発ではなくなってしまったのですが、「プリザンター」という製品を作って、独立起業をして7期目の人間です。 もともとは富士通エフサスという会社でSEやプロマネをやっていて、19年ぐらい、エンジニアをやっていました。その後、独立しました。 趣味は“昭和のインドア”と言っているのですが、麻雀やカラオケが大好きで、会社には全自動の麻雀卓を置いたり、カラオケスナックに通ったり、そんなことをやっています。 個人開発した「プリザンター」について (スライドを示して)今回、この「プリザンター」を個人で開発しました。オープンソースで公開しています。ノーコード・ローコード開発ツールです。いわゆる業務システムでUIを作ったりデータベースを作ったりみた
M3 Maxを選んだ理由として画面出力は3画面以上欲しかったこと、M1 MaxからM3 Proはダウングレードになるということ、メモリは48GB以上欲しかったということ、によりM3 Max搭載のMacBook Proにしました。価格は60万8800円。筆者の人生で一番高いPCになりました。 データ移行 前回、14TBのデータ移行に苦労した経験を元に、使用しなくなったデータはNASへバックアップする癖をつけ、移行するデータは1TB以下で済むようにしました。ゆえに移行はすんなり完了しました。 また基本的なデータはM1 MaxのMacBook Proにも入れており、こちらはThunderboltケーブルでつなぐことでわずか十数分で数百GBのデータが移行できました。 周辺機器 Windows環境から引き続き使用する周辺機器は以下の通りです。 オーディオインターフェースとしてYAMAHA MG12X
HTMLはdiv要素一つだけ(もしくはimg要素一つだけ)、あとはCSSをコピペするだけで三角形を実装できるCSS Triangle Shapesを紹介します。 CSSの三角形は、一昔前はborderで実装していましたが、最近では2つのプロパティ(aspect-ratio, clip-path)で実装します。どうやって実装するんだっけ? というときに覚えておくと、さくっと利用できるので便利です。 CSS Triangle Shapes CSSで三角形を実装する最近の方法 CSSで三角形を作成するジェネレター CSSで三角形を実装する最近の方法 まずは、三角形をCSSで実装する方法を見てましょう。 これまでのCSSだと、divなどの矩形にborderプロパティで太いボーダーを設定し、三角形の部分だけ残して使用していました。
やっぱりドナルド・トランプ前大統領(77)は強かった。いよいよ開幕したアメリカ大統領選で、返り咲きを目指すトランプ氏が共和党指名候補争いの序盤2戦で連勝し、破竹の勢いを見せつけている。既に「事実上の共和党候補」だとの見方を疑う声はほとんどない。法や民主主義を軽視する言動で問題視されながらも、なぜ熱狂的な人気を集めるのだろうか。ポイントは、トランプ氏の「行儀の悪さ」だ。(共同通信ワシントン支局=比嘉杏里、武井徹) ※この記事は記者が音声「共同通信Podcast」でも解説しています ▽マラソンレース、心身ともにタフさ必要 大統領選は、二大政党の民主党と共和党が候補者を絞り込む「指名争い」と、各党の指名候補が対決する「本選」の2段階で進む。トランプ氏は2022年11月に出馬を表明しており、選挙戦は長期にわたるマラソンレースだ。この間、一挙一動が耳目を集め続けるため、人並み外れた体力や精神力が必要
Tailwind CSS はすべてをユティリティクラスで書くという特性上、HTML にはクラスがたくさん書かれることになります。1 つの要素に対してクラスがたくさん並んでいると、視覚的にどのようなスタイルが適用されているのかを把握するのが難しくなります。条件によってクラス名を付け替える処理を行っていると更に複雑になります。 <button className={` ${variant === "primary" && "border border-blue-500 bg-blue-500 text-white"} ${ variant === "secondary" && "border border-gray-500 bg-gray-500 text-white" } ${variant === "default" && "border border-gray-500 bg-white
アプリの画面をデザインする際、エンジニアさんに 「なにも登録データがない場合、どう表示しますか」「選択したときの状態ってどんなデザインですか」などと聞かれて 「ウワア考えてなかったすみません、今作ります。。」 (なんて自分はポンコツなんだ、、ウウウ) と、なりたくないですよね。 UI Stackは👆のような状況を回避するのに便利で大事な考え方だと思ったので、言葉の意味を知らない方はぜひ読んでってください! UI Stack アメリカのプロダクトデザイナー Scott Hurff さんが世に出した 「UIの考慮すべき5つの状態」という考え方です 5つの状態 ・Blank State(空っぽの状態) ・Loading State(ローディング状態) ・Partial State(部分達成状態) ・Error State(エラー状態) ・Ideal State(理想状態) 一つ一つ参考を交えな
ChatGPTは自分オリジナルのGPTを作ることができる。 それを好きな時に呼び出すこともできる。 つまり、こういうことができる。 おわり GPTsの正しい使い方 去年の11月にChatGPTでは、誰でも簡単にカスタマイズされたチャットボットを作れるGPTsという機能が追加された。挙動を自然言語で指示し、名前とアイコンを付けたら完成する。しかも自分だけでなく、他のユーザーに公開することができる。俺も本しゃぶりの知識を覚えさせたAishabriを公開してみた。 chat.openai.com OpenAIとしては、様々な目的に特化したGPTsを作ることを想定しているらしい。例としてOpenAIが作成したGPTsがいろいろ公開されているが、データ分析や文章構成など、実用的なGPTだらけだ。 OpenAIのChatGPTチームが作ったGPTsの例 GPTsはいろいろと可能性がありそうな機能だが、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く