サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1.HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
CSSのサブグリッド（subgrid）がChrome 117でサポートされ、Safari, Firefoxではすでにサポートされていたので、これで主要ブラウザのすべてで利用できるようになりました。 先日の記事でもお伝えしたように、subgridを使用するとカード内の見出しやテキストの水平グリッドを簡単に揃えることができますCSSのサブグリッド（subgrid）の基礎知識と使い方、プログレッシブエンハンスメント、デベロッパーツールによるデバッグ方法などを紹介します。CSS Subgrid by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに サブグリッド（subgrid）の基礎知識 ページレベルの「マクロ」グリッドを共有する サブグリッドのサポートをチェ
株式会社Emposy（代表取締役：木谷真也）は、8月中旬にリリースした「AIの島」のメディアにエンジニア向けのChatGPTのプロンプトを20選公開いたしました。 プロンプト集の内容 今回、エンジニア向けに本当に使える厳選したプロンプト20選をまとめた記事をアップいたしました。 よく利用する以下の３項目に分けて、ご紹介しています。 ①コーディング ②バグの特定/修正作業 ③その他（便利なプロンプト） プロンプトはすべて、１クリックコピーですぐ使える状態にしているので、エンジニアの方は一度目を通して見てください。 プロンプト集のURL: https://ai-island-media.com/2023/08/28/chatgpt-prompt-20/ 今回はプロンプト５選をご紹介（一部） ①深津式プロンプトChatGPTに役割を与え、ChatGPT自身が「何を書くべきか」を事前に知らせるこ
プロジェクトのキックオフ前後に作成する要件定義書。確認の抜け漏れを最小限に抑えるには、どのようなことを記載しておくべきか。そして、メンバーへのスムーズな共有と、その後の円滑なプロジェクト進行のための、良い要件定義書とはどのようなものだろう。自分たち用のメモも兼ねて「Webサイト制作プロジェクトの要件定義書」の確認項目をnoteに整理してみます。 1.プロジェクト概要1-1. 背景プロジェクトを発案するに至った背景です。現状の課題、ビジネス要件の変化、ユーザーの変化、社会的要請など、プロジェクトの存在意義や必要性を記載します。 1-2. ゴールゴールとは「完了条件」です。何を達成すれば終わるのか、どこに行けば終わるのかを記載します。通常は5W1Hのうち、WHATやWHEREをゴールとします。 1-3. 目的プロジェクトを何のために進めるのかという意図です。ゴールよりも広い視野で捉えます。5
どうも、読書中毒ブロガーの ひろたつです。一生寝てたいタイプです。 今回は界隈が大盛りあがりだった企画。 いらん前置き まだ続くいらん前置きSFが生み出す“熱” 集計の概要 40位 4票 39位 5票 38位 6票 37位 7票 36位 8票 35位 9票 34位 10票 33位 11票 32位 12票 31位 13票 30位 14票 29位 15票 28位 16票 27位 17票 26位 18票 25位 19票 24位 20票 23位 21票 22位 22票 21位 24票 20位 25票 19位 26票 18位 29票 17位 31票 16位 34票 15位 35票 14位 39票 13位 42票 12位 49票 11位
本書はFigma によるデザインシステムコースの日本語訳になります。デザインシステムに興味がある人や構築しようとしている人もチェックしてみてください。デザインシステムに縁のないデザイナーや開発者のためにプロダクトと向き合った最適なデザインシステムを探求するための材料になれば嬉しく思います。 (原文 : https://help.figma.com/hc/en-us/sections/14548397990423-Course-Introduction-to-design-systems) この記事は、Figmaから許可を得た上で翻訳され、BrandGuidelineに則った内容となっております。(BrandGuideline: https://www.figma.com/ja/using-the-figma-brand/) ## 更新情報 [2023/7/1] - 表紙画像に、このコ
だれもがスマホからウェブサイトを閲覧するようにになったいま、あらゆる端末からでも見やすいサイトづくりが当たり前になっています。 この時に必要になるのが、レスポンシブWebサイトの制作です。 しかし、デスクトップやタブレット、スマホ用のレイアウトを個別に調整するとなると、「Web制作に時間がかかってしまう」と悩んでしまうひとも多いかもしれません。 あらかじめデザインやレイアウトが施されたテンプレートを利用することで、Webサイト制作を効率的に進めることができます。 今回は、商用利用できて無料ダウンロードできるHTML・Figmaテンプレートを公開しているTemplates Jungleをご紹介します。 ライセンスについて 素材を公開しているTemplates Jungleでは、HTMLとFigma用でライセンスが異なるため、注意が必要です。HTMLテンプレートは、フッターに表示してあるクレ
HTML 全体の CSS を取得して Shadow DOM に適用する以下のコードでHTML 全体のCSS を取得して Shadow DOM に適用することができます。 最近まで replaceSync() と adoptedStyleSheets() の存在を知らなかったのですが、 この 2つを使うと毎回 style タグを書き出すより効率的に処理できるらしい。 これまで Shadow DOM の中に link タグを書くような方法を使っていたのですが、link タグだと最適化がしにくい問題があります。CSS はインライン化したほうが高速なので、その時にも同じように使える方法が欲しかったのですが、この方法でいけるとわかりました。 document.styleSheets も知らなかった…。 function getGlobalCSS() { letcssText = ""; for (const stylesheet of document.sty
ヘッダやコンテンツの区切りを斜めにしたいとき、どのように実装していますか？CSSの三角関数が主要ブラウザのすべてにサポートされたことで、今まではかなり複雑なCSSやJavaScriptが必要だった斜めのレイアウトがシンプルなCSSで実装できます。 コンテンツ自体を斜めにすることも、水平のままにしておくことも可能です。 Diagonal Layouts in2023 斜めのレイアウトを実装するこれまでの方法は、下記をご覧ください。 ヘッダやコンテンツを区切るラインを斜めに実装するCSSやSVGのテクニック総まとめ 1. rotateではなく、skewを使用する 2. 疑似要素を使用する 3.CSSの三角関数で適切なpaddingを設定する 4.CSSカスタムプロパティでpaddingを管理する 斜めのレイアウトを実装したデモ 1. rotateではなく、skewを使用する width
Prompt EngineeringGuide プロンプトエンジニアリングは、言語モデル（LMs）を効率的に使用するためのプロンプトを開発および最適化する比較的新しい学問分野です。プロンプトエンジニアリングのスキルを身につけることで、大規模言語モデル（LLMs）の能力と限界をより理解することができます。 研究者は、プロンプトエンジニアリングを使用して、質問応答や算術推論などの一般的なおよび複雑なタスクのLLMsの能力を向上させます。開発者は、LLMsやその他のツールとのインタフェースとなる強固で効果的なプロンプテクニックを設計するためにプロンプトエンジニアリングを使用します。 プロンプトエンジニアリングは、プロンプトの設計と開発に限らず、LLMsとのインタラクションおよび開発に役立つ幅広いスキルと技術を含みます。これは、LLMsとインタフェースすること、ビルドすること、能力を理解すること
コーディング後や納品時に確認する62のチェックリストUpdate2024.02.07Release2023.03.17Development TipsHatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録するWebデザイン制作中に使用している、コーディング後や納品時に確認すべき62項目のチェックリストを紹介します。 このチェックリストは、Webサイトの品質基準を定め、品質を維持することを目的としています。 感覚的に確認すると見落としが発生する可能性が高いため、私は常にチェックリストを参照しながら確認しています。 また、このチェックリストを使用して表示確認を行い、それをクライアントに提出することで、安心感を与えることもできます。 クオリティの高いWeb制作体験を提供するために、参考にしていただければ幸いです。 使い方このチェックリストは、コーディ
Chat GPT用、チャットで異世界の幼馴染に現代知識を送りつけて無双させるゲームです。 以下ストーリーとプロンプトです。 ストーリー 突然、あなたのもとに数年前に死んだ幼馴染からメッセが届きました。なんと彼女は、異世界に転生して魔王と戦っていたのです。彼女はチート能力として、幼馴染の貴方とチャットする力を授かりました。 貴方はチャットで、現代の知識や技術を幼馴染に伝え、彼女を無双させ異世界を救ってください。貴方がどんな知識や技術を伝えるかで、異世界の運命が決まります。ChatGPTのサイトからGPT-4を起動して、チャット欄に以下のプロンプトをコピペすると遊べます。 ver 0.4 As anAI Game Master, you'llguide "Chat Reincarnation: My Childhood Friend, Who Should Have Died, Beca
ここでの「ゆっくり解説」の定義：ゆっくりボイス又はボイロを使って解説をしている、まんじゅうが居なくても良い 「ちょっと調べた」とかコタツ記事のレベルを超えてるゆっくり解説をまとめる 難しすぎるとかマニアックすぎるタイプは除いてる 他にあったら教えて （なんかYoutubeへのリンクが貼れなくなってる？量多いからかも） 奇書の人三崎律日/Alt F4 著書持ち ニコ動からやってて有名なので今更かとは思う @altf4854 しくじり企業の人カカチャンネル こちらもニコ動からやってた古参、最近は起業家の話とか調査報告書の解説もやってる @cakachannel 地理の人地理の雑学ゆっくり解説 この人の動画は雑学というレベルではない、地理ｘ人類史が非常に面白い、参考にした本もたまに教えてくれる @GeoYukkuri 生き物系へんないきものチャンネル 著書持ち、ざんねんないきものブームの火付け役
帝京大学経済学部で用いた講義資料です。2022年度の統計学I及び統計学IIの講義スライドを編集したうえでUPしています。 目次本資料について 統計学の講義資料 1．本資料について 帝京大学経済学部で用いた講義資料です。2022年度の統計学I及び統計学IIの講義スライドを編集したうえでUPしています。 もとの講義資料とは異なる点もあるのでご注意ください。 万が一何か問題があれば、当ブログにコメントをいただけますと幸いです。 スライドにも記載の通り、以下の利用を想定しています。 想定①：講義の受講者が復習に利用する 想定②：未受講者が統計学入門資料として利用する 基本的には想定①ですが、文系の学生をメインターゲットとした統計学の本格的入門資料は少ない印象です。 未受講者の方にも役に立つかもしれないと思いWeb上で公開することにしました。本資料は1年間にわたる講義資料となっています。数回
ふかた・あきえ／ファイナンシャルプランナー（CFP）、生活設計塾クルー取締役。1967年北海道生まれ。外資系電器メーカー勤務を経て96年にFPに転身。現在は、特定の金融機関に属さない独立系FP会社である「生活設計塾クルー」のメンバーとして、個人向けコンサルティングを行うほか、メディアや講演活動を通じて「買い手寄り」のマネー情報を発信している。20年間で受けた相談は4000件以上。日本経済新聞、日経WOMAN、レタスクラブ等でマネーコラムを連載、ほかに「ダイヤモンド・オンライン」での『老後のお金クライシス！』の連載も好評。 主な著書に『30代で知っておきたいお金の習慣』『投資で失敗したくないと思ったらまず、読む本』『住宅ローンはこうして借りなさい』（いずれもダイヤモンド社）、『共働き夫婦のための「お金の教科書」』、『図解 老後のお金安心読本』、『知識ゼロの私でも！日本一わかりやすいお金の教
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
