令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
ゲーム内の「村人のセリフ」をChatGPTで大量生成する方法（第1回）。RPG村人が住む世界を作るまで | テクノエッジ TechnoEdge
生成AIをゲーム開発の現場で活用している筆者が、ゲーム内テキストの作成、中でもいわゆるRPGの村人たちのセリフの生成を一から行う流れを解説します。第1回は、とにかく作ってみて、それに条件を加え、世界を構築していくところまで。 ChatGPTがこれほど広く雑多な目的に適用できるのは未だ驚きです。このままいわゆるAGIに到達する道にあるのか、規制や資源の問題はどうなるのか、未来への関心は尽きませんが目の前の実用も重要です。 私にとっての実用は主にゲーム制作への応用で、ChatGPTやLLMを使えそうなシーンはいろいろ考えられます。たとえばゲームそのものを生成させたり、ゲームという構造をLLMで取り扱う実験などもしていますが、こうした大きな試みはまだ実用的ではありません。 すぐに実用できる用途としては「ゲーム内テキスト作り」が挙げられます。用途はLLMの本筋ですし、制作では地味に負荷の高い作業で
親が亡くなる前にやっておきたいこと10選
私が書きました 山口 拓也（ 著者の記事一覧はこちら ）相続専門税理士 辻・本郷 税理士法人 シニアパートナー 相続税の相談実績は累計500件を超える。金融機関や各種メディアでの、お客様向けセミナー講師の実績も豊富。 Tweet Pocket 親との別れはいつやってくるか分かりません。 やがてくるその日に備えて、生前のうちに準備をしておくことで、相続の迎え方が大きく変わることとなります。 いざ相続が発生すると、悲しみに暮れる間もなく、次から次へと膨大な量の手続きが押し寄せてきます。 相続は人生で何度も経験するものではなく、多くの方は右も左も分からないまま手探りで進めていくことになります。 それが自分の親となれば、必要書類の収集や名義変更、遺産相続の話し合いなどは、子であるあなた自身に大きな影響を及ぼすことでしょう。 また、親が亡くなった直後ということもあり、心情的にもすぐに割り切って物事を
ユーザのための要件定義ガイド 第2版 要件定義を成功に導く128の勘どころ | 書籍・刊行物 | IPA 独立行政法人 情報処理推進機構
編集・発行元 独立行政法人情報処理推進機構（IPA） 社会基盤センター 発行日 2019年12月20日 サイズ B5変形判 ページ数 498ページ ISBN 978-4-905318-72-9 定価 2,500円（税込） 書籍概要 概要 デジタル技術を活用して企業のビジネスを変革し、自社の競争力を高めていく「デジタル・トランスフォーメーション（DX）」が注目を集めるなか、従来のようなITベンダやシステム部門が中心になって要件定義をすすめるスタイルから、業務部門のユーザが主体的に関与するスタイルへの変革の必要性が増しています。 システムの要件を定義する責任は、構築されたシステムを利用してビジネスに貢献する役目を負うユーザにあると言われています。しかしながら、システム開発の遅延の過半は要件定義の失敗にあると言われるように、要件定義においては、その過程で様々な問題に直面します。 そこでIPAでは
作ることの哲学をデザイナーと哲学者と実務家と語る：グッドマン『世界制作の方法』読書会｜newQ
私たちはいつも何かを作っています——デザイン・プロダクト・サービス etc. 現象の論理的な再構築から研究をスタートして、最終的に「私たちは世界を作っている」という地点にまでたどり着いた哲学者ネルソン・グッドマン。その古典『世界制作の方法』を手がかりに、デザイナー・哲学者・実務家とともに「作ることの哲学」を語り合いました。 哲学者、経営者、教育者であり、芸術家とともに生きた男難波 グッドマン研究を行っている難波です。本日は、デザイナー、哲学者、実務家の方々と一緒に『世界制作の方法』を読み、作ることとは何か？を考えていきたいです。 一同 よろしくお願いします。 山本さん 美大でもみなグッドマンに関心はあるのですが、読み通すことが難しい……となりがちなので、今回グッドマンの発想をアートにどれくらい役立てられるのか気になっています。 Mさん 自分も、まだ読んでおらず、Amazonの『世界制作の方
アクセシブルなフロントエンドコンポーネントの完全ガイド - 前編 | POSTD
クイックサマリー ‐ 私たちは一連の短い記事で開発者とデザイナーにとって有用なツールやテクニックを紹介しており、直近の記事ではCSS監査ツールとCSSジェネレータを取り上げました。この記事ではタブやテーブルからトグルやツールチップまで、信頼性の高いアクセシブルなコンポーネントを見ていきます。 目次 以下にすべてのアクセシブルなコンポーネントをアルファベット順に記載しました。目次をスキップするか、スクロールして1つずつお読みください。 :focus styles autocomplete buttons carousels "close" buttons content sliders checkboxes color systems color palettes comics component libraries cookie consent prompts dark mode data
ウェブデザインにおけるline-heightについて
ウェブデザインにおけるline-heightってけっこう曲者で、CSSを理解してデザインしないと「空き」の設計が破綻したりコーディングで苦労することになります。FigmaやAdobe XD、Affinity Designerなどのグラフィックアプリでline heightの扱いが異なるので、使うツールの挙動を理解するのも大切です。 ということで、今回はCSSのline-heightについてまとめてみます。 実は調べれば調べるほど奥が深いCSSのline-heightの世界ですが、まずは基礎からまとめていこうと思います。 目次 以下はページ内のセクションへのリンクです。 CSSのline-heightでは文字の上下にスペースができる ウェブで使われるハーフ・レディングとは 印刷とウェブにおけるレディングの違い デザインツールでのline heightの扱いの違い 上下のハーフ・レディングを帳
けしからんSoftEther VPNを作ったら怒られた 登大遊氏のVPN構築ソフトを日本政府が配布停止した理由
情報科学若手の会とは、情報科学に携わる学生、若手研究者、エンジニアのディスカッションと交流の会です。NTT東日本特殊局員の登氏が政府に配布停止要請されたVPNソフトの話など、シン・テレワークシステムの開発のもととなった数々の経験を開発秘話として講演しました。まずは登氏が作ったSoftEther VPNについて。全4回。 ネットワークをもっとやりたいという方々を増やしたい 登大遊氏（以下、登）：本日は長い歴史があり、名誉ある「若手の会」で講演の機会をいただき、ありがとうございます。先ほどコメント欄も拝見しましたが、自宅の1Uサーバーを持っている方がどうとか。 本日の主題は、どうすればそういうみなさんのような方々が、日本の中でもっとたくさん増えるのかなということが1つ。2つ目は、自宅ラックのようなことを大規模にやろうとすると、どうしても家の中だけでは壁がありまして、そこをどう乗り越えるかという
フロントエンド開発者のための便利なオンラインツール11選 - Qiita
私が愛用するオンライン開発ツール インターネット上には、フロントエンド開発者の生活を楽にしてくれる素晴らしいツールが沢山あります。この記事では、私が開発の仕事で頻繁に使っている11のツールについて簡単に説明します。 1. CanIUse Web APIが特定のブラウザで互換性があるのか、モバイルブラウザで使用できるのか、分からないことはありませんか？このオンラインツールを使えば、ブラウザの互換性についてWeb APIを簡単にテストできます。 Can I use―HTML5、CSS3などの対応表。 「Can I use」は、デスクトップとモバイルにおけるフロントエンドWebテクノロジーを支援する、最新のブラウザ対応表を提供します。 caniuse.com Web Share APIのnavigator.share(...)に対応しているブラウザとバージョンを知りたいとします。 結果を見てくだ
Figmaの生産性を高めるTips50選｜三上蒼太 / Sota Mikami
このような記事を参考にすることで設定可能です。 僕は ⌘ + Shift + M で設定しています。 3: Figma Walkerはショートカット設定しよう一押しPluginの一つ、Figma Walker。 日本人のエンジニアさんが開発されました。 SkecthでいうRunnnerのようなPluginです。 特に、特定のFrameやMainComponentがある位置にすぐさま移動するのに便利です。 プロジェクトが進みファイルが大きくなってきた際にとっても便利です。 これもどんどん使う機会が多くなってくるため、Macにて独自のショートカットとしておくと便利です。 僕は ⌘ + Shift + F としています。 4: ショートカットのチートシートの存在 ショートカットに苦手意識がある方は、ぜひ「ショートカットのチートシートがある」ということをだけでも覚えておいてください。 全てではない
JavaScript入門: 基礎知識をGIFアニメで分かりやすく解説 -総まとめ
JavaScript QuestionsのLydia Hallie氏の「JavaScript Visualized」シリーズすべての翻訳を完了したので、まとめて紹介します。 JavaScriptエンジンの仕組みをはじめ、イベントループ、スコープチェーン、プロトタイプ継承、非同期処理、ジェネレータ関数、Hoisting（巻き上げ）など、GIFアニメを使用して詳しく解説しています。 シリーズ7本すべてと、プラス1として楽しく学べるクイズもあります。 JavaScript イベントループの仕組み JavaScriptでエラーの原因となるHoisting（巻き上げ）の仕組み JavaScriptのスコープチェーン・変数参照の仕組み JavaScriptエンジンの仕組み JavaScript プロトタイプ継承の仕組み JavaScriptのジェネレータ関数とイテレータの仕組み JavaScriptの
配信や動画にVC音を入れない方法、Voicemeeter Bananaの使い方と設定の解説。USBヘッドセットもOK
【お知らせ】当サイトが管理・運営する「Valheim」マルチサーバができました！ぜひ遊びにきてください
Starship: Cross-Shell Prompt
GitHub (opens new window) HomeGuideAdvanced InstallationConfigurationAdvanced ConfigurationFrequently Asked QuestionsPresets Compatibility First Works on the most common shells on the most common operating systems. Use it everywhere! Rust-Powered Brings the best-in-class speed and safety of Rust, to make your prompt as quick and reliable as possible. Customizable Every little detail is customizabl
CSSスプライトとstepsを使ってアニメーション画像を作ろう
2023年7月25日 CSS CSSで動かすアニメーションには、私自身まだまだ使いこなせていないプロパティーがたくさん眠っています。その中のひとつが steps というプロパティーでした。これまでよく使っていた滑らかな動作ではなく、段階ごとに要素を動かすことができます。実際にはどんな場面で使えるんでしょうか？今回はそんな steps プロパティーにフォーカスしてみます。 ↑私が10年以上利用している会計ソフト！ steps の記述方法 steps は animation や keyframes プロパティーとともに利用します。steps() のカッコの中には、いくつの段階を経て動作させるのかを記述。例えば5段階で変化させるなら、steps(5) と記述します。 .element { animation: img-move 5s steps(5); } @keyframes img-move
コロナ禍とネット配信の現在 DJバー MOGRA店長が発する「MU2020」と未来への視座
POPなポイントを3行で DJバー・MOGRA代表／店長のD-YAMAインタビュー コロナ禍の影響と「Music Unity 2020」成立の背景 日本のクラブシーンと配信との相性、その現在地 新型コロナウイルス感染症（COVID-19）による影響で、さまざまなイベントが中止を余儀なくされている。 外出自粛による経済の停滞は、外食産業や小売業などイベントスペース以外の業種にも深刻な影響を与えている。 そんな中で開催されたのが全国の音楽拠点が協力して開催するストリーミングフェス「Music Unity 2020」だ。 MOGRA主催の配信フェス「Music Unity 2020」4月18日（土）早くも第2回開催 全国の音楽拠点が協力して開催するストリーミングフェス「Music Unity 2020」の第2回開催が発表された。 開催日時は4月18日（土）の15時から25時。配信サイトは前回と同
上達したいVim初心者のための設定・プラグインの見つけ方、学び方〈エディタ実践入門〉 - エンジニアHub｜Webエンジニアのキャリアを考える！
上達したいVim初心者のための設定・プラグインの見つけ方、学び方〈エディタ実践入門〉 Vimの深淵はとても深く、学ぶことは簡単ではありません。本記事では、初心者がVimをどのように学べばよいか？ を解説しています。Shougoさんの寄稿です。 こんにちは。Shougo（@ShougoMatsu）です。今回は、Vim初心者のための記事を執筆することになりました。よろしくお願いします。 私のことを知らない人のために簡単に自己紹介しておきます。私はこれまで10年以上もの間Vimに関わっており、deoplete、dein、denite、defx、neosnippetといった各種プラグインを作成したり、ときにはVim本体にパッチを書くなどといった活動を行っています。 今回、初心者向けの記事を執筆することに決めたのは、勉強会などで「Vimをどのように学べばよいか？」について質問されることが多く、皆が同
丁寧でやさしい「スローデザイン」を実践し日々良い選択をする
近年、デジタルプロダクトがもたらす社会的な影響が大きくなってきました。これはプロダクトやサービスを作る私たちにとって、よりエシカル（倫理的）な観点でのアプローチが必要になってきていると言えます。 UXデザインという観点からも、エシカルな考慮は避けて通れません。環境・プライバシー・ジェンダー・中毒性など多様な問題がデジタルプロダクトによって引き起こされています。 この新連載「それぞれのエシカル」では、エシカルデザインに関心を持つクリエイターに焦点を当て、それぞれの観点からのエシカルデザインに迫ります。 今回お話をお聞きするのは株式会社エクサの安藤幸央さんに日々のデザインで意識していることや日々の生活でどうやって取り入れていくかを聞いてみました。 登場人物 株式会社エクサ UXリサーチャー・デザインスプリントマスター 安藤 幸央さん 株式会社メンバーズ UXディレクター / UX MILK編集
BEM Naming Cheat Sheet by 9elements
When it comes to finding the right class name, it can quickly drive you to despair. Even the most experienced CSS developers don't always find the right class name right away. This tool aims to help you to not get lost in the BEM cosmos by giving you naming-suggestions for some of the most common web components. If you still have no idea what BEM means, we have added some helpful links below. For
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
女の子になれる。変幻自在のAIボイスチェンジャー「Voidol3」
Colorbase
