#444444:root { --ion-color-primary: #0054e9; --ion-color-primary-rgb: 0,84,233; --ion-color-primary-contrast: #ffffff; --ion-color-primary-contrast-rgb: 255,255,255; --ion-color-primary-shade: #004acd; --ion-color-primary-tint: #1a65eb; --ion-color-secondary: #0163aa; --ion-color-secondary-rgb: 1,99,170; --ion-color-secondary-contrast: #ffffff; --ion-color-secondary-contrast-rgb: 255,255,255; --io

ChatGPTを使用するとWeb制作で困ったときやプログラミングの勉強をしていて知らないことが出てきた時に素早く調べることができる…はずでした。 なぜ「できます」ではなく「できるはずでした」と記載しているのかと言うと、高品質な回答を得るためには質問文に毎回さまざまな定型文を記載しなければならない、回答が表示されるまでに時間がかかるなど、意外と面倒なことが多いからです。 ChatGPTで高品質な回答を得るために たとえばWeb制作全般に関して質問するときは「あなたは世界最高のWeb制作者です。」と質問文の先頭につけると良いです。 あるいは、質問する方がプログラミングを学びたての初心者の方であれば「プログラミング初心者でも理解できるようにわかりやすく解説してください」と質問文の最後につけると良いです。 さらに重要なのが「英語で調べて日本語で回答してください」と最後に付け加えることです。 これは

こちらの記事は随時追加更新していきます 記事の内容 何かと話題のChatGPTですが、今回はこのChatGPTをプログラミング学習として活用し、 「最強の学習ツール」にしてしまおうという記事になります。 内容を書き換えれば、英語学習などにも置き換えることができます。 筆者の関連記事 ChatGPTはそのチャット内で質問した内容を記憶しそれによって回答が異なるケースがあります。 もし、意図した回答が得られない場合などは「New chat」から新たに質問するなどの工夫が必要です。 そして、ChatGPTからの回答内容はあくまでも一つの例であるという認識で向き合いましょう。 アジェンダ 登録方法 質問のコツについて ロードマップ(カリキュラム)を提案してもらう ふんわりとした内容を具体的にしていく 更に深掘りして手順を教えてもらう 「何がわからないかわからない」状態をなくしていく 次のレベルアッ

指定した音声ファイルを、楽器ごとのパートに分解してくれるソフトです。 音声ファイルをドラッグ＆ドロップで放り込むと、該当のファイルを ボーカル ベース ドラム その他（キーボード、ギター 等） ボーカル以外のインストゥルメンタル といった 5 つのファイルに分解してくれます。 処理を GPU（CUDA）で実行することもできます。

Web制作のお供に！最新オンライン時短ツール32個まとめ これから使いたい、あまり知られていない便利ツールが大集合 Web制作の効率化を図りたいというひとにオススメしたい、最新オンライン時短ツールをまとめてご紹介します。 「もっと早く知りたかった」と思ってしまう、便利なツールを中心に、クリエイターの日々のデザイン業務を軽減してくれる、目からウロコな素材やツールが揃います。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. デザインツール 2. Webデザイン便利ツール 3. モックアップ・UIツール 4. アイコンツール 5. クリエイティブ・面白ツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ デザインツール Womp 3D 立体感たっぷりな3Dデザインを、ブラウザ上で直感的に作成できる、新世代のオンラインツー

Visual Studio Code（VsCode）本体のインストール まだインストールされていない方は、以下からVsCode本体をダウンロードしてください。 VsCodeのおすすめプラグイン（コーダー・マークアップ・フロントエンドエンジニア視点） 私が導入しているVsCodeのプラグインを紹介します。 フロントエンドエンジニアとして働いている自分の普段の業務ではHTML CSS Sass(Scss) EJS Pug JavaScript TypeScript React Next.js PHP WordPress Markdownファイル等を触ることが多いので、それらに関連したプラグインが多くなっています。 共通 プラグイン名 機能

この記事を書いた人 だいちPENGIN BLOGメディア編集長。Web業界とは異業種の仕事をしながら、独学でWeb制作の世界に。副業でHP制作やコーディング代行、個人ブログの運営などに取り組み、現在はPENGINにてWebライティングやディレクションをしつつ、メディア運営全般を担当しています。（個人運営ブログ：https://daib-log.com/ ） 今回はVSCodeで使っている拡張機能を紹介します。 他記事では利用シーンや用途分けがされてないことも多く、とりあえず入れてみたもののどんな機能だったのか忘れた、、、なんてこともよくあると思うので、この記事ではザックリと用途別にカテゴリ分けしています。 基本的には紹介する拡張機能全て入れてしまってもいいとは思うんですが、個人的な優先度を星マークでつけています。導入する順番の参考にしてみてください！

IT Leaders トップ ＞ テクノロジー一覧 ＞ 開発ツール／プラットフォーム ＞ 事例ニュース ＞ LIXIL、現場社員3963人がノーコード開発で1万7007個のアプリケーションを開発 開発ツール／プラットフォーム 開発ツール／プラットフォーム記事一覧へ [事例ニュース] LIXIL、現場社員3963人がノーコード開発で1万7007個のアプリケーションを開発 経営陣全員がGoogle AppSheetでアプリケーション開発を経験 2022年6月24日(金)日川 佳三（IT Leaders編集部） リスト 住まいの水まわり製品と建材製品を開発・提供するLIXILは2022年6月24日、Google Cloud Japanが開催した説明会に登壇し、ローコード開発によるアプリケーション開発の民主化の取り組みを説明した同社は、社員みずからGoogle AppSheetを使ってアプリケーシ

はじめに 皆さんVisual Studio Code(以下VSCode)使ってますか？ 私はメインで使っているのですが、自分なりにしっくりくる設定や拡張機能がある程度揃ってきたので公開しちゃいます。 おすすめ設定だけではなく、おすすめの機能もできる限り紹介したいと思いますので、最後までぜひお付き合いください。 ※プログラミング言語固有の設定の解説は軽めですのでご了承ください。 GIF画像が小さい場合は、クリックして頂けると拡大して表示が可能です デフォルト機能編 Local History機能 Gitは非常に便利なので、皆さん使われていると思います。 Gitはコミット単位で履歴が管理できますが、保存単位で履歴が見れると嬉しいな、保存単位で復元できると嬉しいな、と思うことはないでしょうか。 私はVSCodeは自動保存をオフにして、手動で保存するので、保存単位で履歴が見れると嬉しいなと思うこと

この記事では、2021年に公開された便利なWebオンラインツール・ベスト100個+をまとめてご紹介します。 定期的にリストアップしている最新オンラインツールまとめ記事では、2021年にかけて合計338個の新しいツールやサービスを紹介してきました。 その中でも、特にWebデザイン制作に便利なツールを選りすぐったコレクションで、「無料で利用できるツール」を揃えています。 これらのツールやサービスを活用すれば、Webデザイン制作をより快適に進めることができるでしょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. CSSツール（11個） 2. パターンツール（3個） 3. イラスト系ツール（9個） 4. デザインツール（17個） 5. 配色ツール（7個） 6. グラデーションツール（12個） 7. SVGツール（9個） 8. スクリーンシ

日頃の忙しい業務を少しでも楽にしたい、効率化したいと考えている人にぴったりな、Web制作で使える最新オンラインツールをまとめてご紹介します。 コピペで利用できるお手軽CSSツールやSVGツール、コード知識不要のノーコードツール、色に困ったときに便利な配色ツールなど、クリエイティブな案件で活用したい新しいツールを揃えています。 カテゴリごとに整理しているので、制作フローに新しく追加してみてはいかがでしょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. プロトタイプ、アイコンツール 5. コラボ、リモートワークツール 6. 面白、クリエイティブツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ Web制作便利ツール クリックで一発コピペできる、120種類以上のCSSボタンを集めたライブラリ。3Dやグラデーション、レトロな

Chrome拡張機能にはWeb制作に便利なものが多く、私もよく利用しています。特に1〜2クリックでさっとチェックできるものは頻繁に使い制作の中で馴染んだものであるため、これらがないと手間どってしまうくらい依存性の高いものばかり。今回は私がよく利用しているChrome拡張機能を12個紹介します。初見のものがありましたら、ぜひ試してみてください。 Eagle – 効率的に画像を保存する Eagle サイト上にある画像をドラッグ＆ドロップだけで保存できるChrome拡張機能。あとで見返したい画像を効率的に保存できるのは嬉しい。ページ全体のスクリーンショットの撮影も可能。撮影後は専用のアプリに保存されます。この手のものは他にもあったのですがサービス終了してしまい、他を探してようやく見つけたのがEagleでした。重宝しています。 Eagle – 効率的に画像を保存する 専用アプリのダウンロードはこち

あなたのWeb制作をサポートしてくれるWebツール13選Update2023.05.24Release2023.04.28Tools HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する Web制作をサポートしてくれるツールを10個紹介します。mix-blend-modeやgridレイアウト、transformなどのコードの他にもフォントチェックや背景画像を作成できるツール、VSCodeのテーマ作成ツールもあります。あなたのWeb制作を快適に進めるためにチェックしてみてください。 Fuze – CSS Gradient AnimatorFuzeグラデーションアニメーションのCSSジェネレーター。色を複数指定するだけでCSSアニメーション用のコードを作成してくれます。背景色やテキストカラーなどに使えます。 ちなみに、テキストカラーは当サイトのト

はじめに この記事では、IT エンジニアである/ないに関係なく、Visual Studio Code (以下、VS Code) をこれから初めて使い始める人が、最初に入れておくと後々便利になるだろうと思われる拡張機能を紹介しています。 拡張機能 (Extension) とは、サードパーティー製の追加機能のようなものであり、誰でも自由に開発・公開することができるようになっているものです。VS Code は無償で提供されているテキストエディタですが、それだけでは不便というユーザーの悩みを解消してくれるものです。 (という立ち位置で存在していた当初でしたが、最近は標準機能のみでも最早テキストエディタという範疇を超えている気がしなくもないです) まだ拡張機能を使い始められていない/使いこなせていないという方は、是非この記事を参考に、VS Code の拡張機能を使い始めるきっかけにしてもらえれば幸い

Visual Studio Code（以下、VS Code）が素晴らしいエディタである理由の一つは、デベロッパーの生産性を向上させるVS Codeの機能拡張の巨大なライブラリがあることです。 その中から、HTMLやCSSやJavaScriptのコードを書く時に便利なVS Codeの機能拡張を紹介します。 My 12 Favorite VSCode Extensions by Katherine Peterson 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 VS Codeとは VS Codeの機能拡張 VS Codeのおすすめ機能拡張 VS Codeとは VS Code(Visual Studio Code)は、Microsoftが提供する統合ツールを備えた強力で軽量なコードエディタです。MITライセンスで、商用でも完全に無料

アプリの方はまだ日本語版のみですが少しずつ改善を続けています。このnoteの中でオススメの英語ツールについて記事を書くと宣言していたものの、なかなか時間がとれず遅くなってしまいすみません。数年前の記事の書き直しではありますが、誤っていた部分を修正し、情報を最新版にして改めて書いてみます。 というわけで、今回は英語の補助ツールの紹介です。知っている人からすれば定番中の定番ではありますが、だからこそ英語を勉強中の方でも設定してしまえばきっと長い間使うことになると思うので、まだ設定していない方はぜひこの機会にやってみてください。パソコンでのGoogle Chromeを使った設定になります。 爆速ポップアップ辞書 英文のドキュメントを読んでいるときに意味を知らない単語が出た場合、いちいち翻訳サイトに飛んだり、辞書を開いたりするのは面倒ですよね。そんなときに使えるのがポップアップ辞書になります。ポッ

ここでは、最強のMarkdownエディタTyporaについて紹介する。 機能に関しては随時更新予定。 ざっくり概要 Typoraを使ってMarkdown書いているときの様子は以下のような感じになる。 後述するが、記述したその場でスタイリングしていく仕組みなので、「プレビュー表示」という概念がない。 そのため、目線を行ったり来たりさせる必要がない。 例えば、 上記のように#記号に続いて文字入力を行い、Enterキーで改行すると.... このように、自動的にその場でMarkdownの見出し表示になってくれる。 Typoraのいいところ 記述したその場でスタイリングしていく仕組み そのため、2つの画面を目で行ったり来たりする必要がない 操作が極めて直感的 高機能であるにも関わらず、インターフェースがとてもシンプル 数式・画像の挿入、表の作成など、通常のエディタだと苦戦するような操作も非常に簡単に

こんにちは、らくからちゃです。 今週は、職場で使っているお仕事道具をあれこれ紹介して行きたいなあと思います。一応、見習いのITコンサル屋さんなので、普段のお仕事は、 なんかよく分かんないデータをエクセルで分析する 集計したデータから謎のグラフに変換し、紙芝居（別名パワポ）にする 後は　歌って踊るだけ　それらしく語る といった感じです。 自社で作業をすることも多いのですが、お客さんのところに行って、『あれとこれを足してそれで割りたい』とかいう謎の呪文に対し、ならば『あっちのフラグとこっちの区分を変えてそっちのボタンを押せばOKっす！』などという呪文の掛け合いを行っております。 普段、パソコンばっかり弄るお仕事をさせて頂いておりますので、お客さんのマシンをいじらせてもらう際、『すみませんねえ、お仕事の邪魔して』なんて言ったところ、『いえいえ、パソコンなしでも出来る仕事してますんで』と返され 『