令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
フルスタック Web フレームワーク HonoX を使ってみる
フルスタック Web フレームワーク HonoX を使ってみる 2024.02.10 HonoX は Hono と Vite をベースにしたフルスタック Web フレームワークです。Hono が提供するサーバーサイドやクライアントサイドの機能を使いつつ、ファイルベースルーティングや Islands Architecture などの新しい機能を使うことができます。 HonoX は 2024 年 2 月現在アルファステージとなっています。セマンティックバージョンに従わずに破壊的な変更が行われる可能性があります。 HonoX は Hono と Vite をベースにしたフルスタック Web フレームワークです。以下のような特徴があります。 ファイルベースのルーティング 高速な SSR BYOR（Bring Your Own Rerender）：レンダリングエンジンを自由に選択できます island
MozillaがAIでWebサイトを自動制作してくれる「Solo」を公開。基本的な情報を基に、説明文からレイアウト、適切なフリー画像の選択までおまかせ
Mozillaは、基本的な情報を入力するとAIが自動的にWebサイトのデザインを作成し、Webサイトの公開まで可能なサービス「Solo」を公開しました。 Soloは基本的に個人事業主が自分のビジネスのためのWebサイトを構築することを想定してWebサイトを作ってくれます。その理由をMozillaは次のように説明しています。 In 2023, website creation is still hard. While choosing a template is straightforward, sourcing images, writing content, and making a visually appealing site are really time-consuming. Add the requirements for showcasing reviews, schedul
ウェブブラウザ・Braveが非難されまくっているGoogleの「Web Environment Integrity」を無効化してリリースすることを発表
Googleが「健全なインターネット」のために策定を進めている「Web Environment Integrity(WEI)」に対して反対を表明している、ウェブブラウザ・Braveが、WEIを無効化する方針であることを明らかにしました。 Disables WebEnvironmentIntegrity feature and origin trials. by mkarolin · Pull Request #19476 · brave/brave-core · GitHub https://github.com/brave/brave-core/pull/19476 Google’s Plan To DRM The Web Goes Against Everything Google Once Stood For | Techdirt https://www.techdirt.com/2
デジタル庁のサイトやばすぎるwww - Qiita
はじめに みなさん、デジタル庁のサイトはご覧になったことはありますか？今話題のデジタル庁です。 こちらが2023年6月現在のデジタル庁のサイトです。やばくないですかこれ？最初見たときこれ「やっばw」と思いました。これからこのサイトのやばさを語っていきたいと思います。 洗練されたシンプルさ、そしてデザイン 僕は最初見たときびっくりしました。「なんてシンプルで見やすいんだ！」官公庁のサイトですよ？官公庁のサイトといえば、細かい字がずらっと並んで見づらいイメージでしたが、デジタル庁のサイトはとことんシンプルさを追求して見やすくしてます。フォントもNoto Sans JPを使われててとても読みやすい。黒も #000 でなく見やすい色になっている。 やばいですねこれ。 そしてこのレイアウトを見たとき、余白のおかげでとても見やすいなと思いました。そこでChrome Dev Toolでレイアウトを見てみ
Linuxコンテナの「次」としてのWebAssembly、の解説
はじめに WASMをブラウザの外で動かすトレンドに関して「Linuxコンテナの「次」としてのWebAssemblyの解説」というタイトルで動画を投稿したのですが、動画では話しきれなかった内容をこちらの記事で補完したいと思います。 2022年もWebAssembly(WASM)の話題が多く発表されましたが、そのひとつにDocker for DesktopのWASM対応があります。FastlyやCloudflareもエッジ環境でWASMを動かすソリューションを持っていますし、MSのAKS(Azure Kubernetes Service)でもWASMにpreview対応しています。WASM Buildersでも2023年のWASMの予想としてWASMのアプリケーションランタイム利用に関して言及されました。 WASMといえば元々ブラウザ上で高速にC++のコードなどを実行するところから始まっている
ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみた - feb19
ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみたdate2022.9.4(Sun.)tagsweb developmentFrontendJavaScript ウェブアプリケーション開発で React や Vue を使うのはよくある話かなと思うのですが、マーケティングや広報活動など広告クリエイティブ系のウェブサイト制作ではどれぐらい使われているのかなと思い、暇つぶしにリサーチしてみました。 調査方法母集団ウェブギャラリーサイトをいくつか見て比較的国内系のセレクトが多そうな https://io3000.com/ さんから 2022 年に紹介されている 175 件と、ウェブサイトのアワードサイトとして有名な https://www.awwwards.com/websites/ さんで 2022.8 以降に Winner と
機能開発・運用効率向上のためにKotlinからRustへ Webアプリケーションのリプレイスにおける設計・開発の考慮
受発注・サプライチェーン管理システムとサプライパートナー向けシステムに関する現状や課題などについて、開発を担当しているエンジニアが話す「Rustで負債を解消するために大幅刷新する複雑な業務Webアプリ」。ここでバックエンドエンジニアのKaribe氏が登壇。Kotlin製の業務WebアプリケーションをRustでリプレイスした経験について話します。 自己紹介 Takumi Karibe氏：「Kotlin製の業務WebアプリケーションをRustでリプレイス」というテーマで発表します。先ほど「Rust製の業務WebアプリケーションをRustでリプレイス」という話と、そのどさくさに紛れて「フロントエンドをリプレイス」という話もありましたが、今回もどさくさに紛れてKotlin製のWebアプリケーションをRustでリプレイスした話をします。 自己紹介です。Karibeと申します。2021年の9月に入社し
Webデザインの有料学習サイトが無料化 IllustratorやPhotoshop入門などが見放題
chot.design上のコンテンツは、実際にWeb／IT企業で働いている現役のクリエイターが制作したものという。ちょっと社代表の小島芳樹さんは自身のTwitterアカウントで「変なオンラインサロン入る前にここで勉強してみてください！」とアピールしている。 無料公開を決めたのは同サービスの運営から手を引くため。現在は全レッスンの無料公開と共に、有料サービスの利用者に対して返金対応を行っている。 ちょっと社が取り組んでいたデザインやフロントエンド開発の受託事業が急激に成長した影響で、chot.designに手が回らない状況が続いた。今後はサブスク型プログラミングスクールを提供するDonbler（東京都渋谷区）が事業を継承するとしている。 関連記事 穴埋め問題を簡単に作れるWebサイト、「試験勉強に役立つ」と話題に 教育系IT企業のCTOが作成 マウスやタッチ操作で直観的に穴埋め問題を作成でき
本当は教えたくないWebデザイン参考ギャラリーサイト37選
ウェブサイト制作には、常に新しいアイデアやインスピレーションが必要ですが、決まらずに悩んでしまうことも。 そんな状況を打開するには、たくさんの優れたデザインの実例を見ることで、次のアイデアを生み出してみましょう。 ここでは、最新ウェブデザインをいち早くチェックできるオススメWebギャラリーサイトを厳選してご紹介。 インスピレーションとしてはもちろん、クライアントの打ち合わせやイメージの共有にも活用できます。 積極的にインプットを増やし、デザインの引き出しを増やしてみましょう。 このリストは2年ぶりにまとめ直したアップグレード版となります。 コンテンツ目次 【2024追加分】最新Webギャラリーサイト landing.love Design Spells Godly BentoGrids 404s Footer Navbar Gallery 国内Webギャラリーサイト SANKOU! URA
SOGo | Free Open Source Webmail
SOGo, an Open Source Webmail for businesses and communities Share your calendars, address books and mails in your organisation with a completely free and open source Webmail. SOGo is a fully supported and trusted groupware server with a focus on scalability and open standards. SOGo is released under the GNU GPL/LGPL v2 and above. SOGo provides a rich AJAX-based Web interface and supports multiple
ティム・バーナーズ＝リー氏、Webの“誤用”を阻止する「Contract for Web」発表 Google、Facebookらがサポート
World Wide Web（WWW）を考案し、“Webの父”とも呼ばれるサー・ティム・バーナーズ=リー氏（64）は11月25日（現地時間）、政府、企業、個人によるWebの“誤用”を阻止するための「Contract for Web」を発表した。 本稿執筆現在、企業としてはGoogle、Facebook、Microsoft、Twitter、Redditなど150社以上がサポーターとして名を連ねている（記事末にロゴ一覧を転載した）。 バーナーズ=リー氏は声明文で「Webを悪用し、分裂させ、弱体化させようとする人々を阻止するために今すぐ団結して行動しなければ、阻止できなくなる危険がある」と語った。 FAQによると、Contract for Webは「人権に根ざした共通のコミットメントの下、政府、企業、市民団体など、Webの未来を形成するグループを団結させ、よりよいWeb構築に必要な具体的な行動を
クックパッド、ミクシィ、グリー、ネクストの品質管理マネージャが本音で語る。ソフトウェアテストの課題とこれからの可能性（前編）。JaSST'15 Tokyo
クックパッド、ミクシィ、グリー、ネクストの品質管理マネージャが本音で語る。ソフトウェアテストの課題とこれからの可能性（前編）。JaSST'15 Tokyo ソフトウェアテスト分野で国内最大のシンポジウム「JaSST'15 Tokyo」が2月20日、21日の2日間、東洋大学で開催されました。 そこで行われたセッションの1つ「Web.JaSST ～ウェブ開発のテスト～」」では、ミクシィ、ネクスト、クックパッド、グリーの品質管理（QA：Quality Assuarance）マネージャが登壇し、Web開発やモバイル開発分野の品質やテストにおいて、これまで乗り越えてきた課題、現状、そしてこれからの可能性について語りました。 本記事ではその内容をダイジェストで紹介します。 中野氏（モデレータ） 今日のパネリストの方々は現場でテストをリードしている方々です。その現場で取り組んでいる内容や品質管理について
フロントエンドエンジニアがオススメするWeb技術の書籍5選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 今年も残す所あとわずかですね。 今年はたくさん勉強会なるものに登壇させていただく機会があり、そのおかげか勉強する機会が去年よりも多かったように思えます。 去年まではせいぜい年に2万冊程度しか読んでいなかったんですが、今年は3万冊くらいは読んだかなあ…。 ちなみに去年はこんな記事「2013年厳選版！フロントエンドエンジニアがオススメするWEB系の技術書・指南書」も書きました。 そんなわけで、今回はフロントエンド界隈の勉強会に登壇するとき参考にさせていただいた本を5冊紹介したいと思います。 なんせ3万冊のなかから厳選した5冊ですから、名著であることは間違いないです。 2014年厳選版！フロントエンドエンジニアがオススメするWeb系の技術書 もくじ カルタ付 HTML5マークアップ 現場で使える最短攻略
ウェブサービス開発の現場におけるデザイナー不要論と5〜10年後の生存戦略 - 情報建築家 石橋秀仁
本稿では、まず「ウェブサービス開発の現場で、ウェブデザイナーの仕事はエンジニアに奪われつつある」という脅威を語る。次に、生存戦略を考えるヒントとして「分かりやすい生存戦略」を2つ提示する。「アートディレクター」と「フルスタックウェブデザイナー」という2つの生存戦略だ。 なお、「仕事を奪われていくプロセス」と「生存戦略を遂行するプロセス」について、5〜10年程度のタイムスパンをイメージしている。 ウェブデザイナーの仕事がエンジニアによって奪われつつある ウェブサービス開発の現場では、ウェブデザイナーの仕事がエンジニア／プログラマーによって少しずつ奪われつつある。とくに小さな組織や新規事業の現場では。 象徴的なのは「Bootstrapがあればデザイナー不要だよね」論。「もはや社員としてデザイナーを雇う必要はなくて、必要な時にランサーズで発注すればいいよね」「スタイルシートいじったり画像パーツ作
ウェブを広めるために、必要なのは哲学 | Booklap Webマガジン
ゲームから国語辞典へと熱中する幼少期 私は兄弟もいなくて、親も仕事で出ていたので、保育園の年長ぐらいから、ずっと家でゲームばかりやっていました。でも幼いので難しくてクリアできるわけもなく、親にお願いして攻略本買ってもらいました。けれども、攻略本が難しくて読めないのです。それで国語辞書を引いて攻略本を読んでクリアするということをずっとやっていました。それが保育園の年長から中学に入るぐらいまで、ずっとそんな生活をしていました。 ゲームの攻略本を国語辞典で調べるというのをやっているうちに、ゲームよりも国語辞典を読むのが楽しくなっていき、小さい国語辞典を買って、持ち歩いたりしていました。 辞典を開くと知らない言葉ばかりで、今読んでも新しい発見が常にあるので、今でもiPhoneに辞典のアプリとか入れていて、すごくよく使います。 ウェブを広めるために、必要なのは哲学 ウェブの歴史はすごく浅いです。本当
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Figmaで作ったデザインをWebサイトに即反映「STUDIO」 | 進化が止まらない！ 最新ツール
Redirect
Loading...
TechCrunch
