クライアントサイドとサーバーサイドの違い 知っておくべきこと - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
クライアントサイドとは？ サーバーサイドとは？ クライアントサイドレンダリング サーバーサイドレンダリング 静的サイト生成 3つの主な違い 最後に ここ数年の傾向は、Webサイトのデザインがアプリに似てきています。 高度な応答性と双方向性は、幅広いコンテンツと同じくらい重要です。 現代では、主にWebプロジェクトをレンダリングするために提示されている3つの戦略であるCSR・SSR・SSGがございます。 当記事ではWeb初心者のために最も基本的なCSRとSSRおよびSSGについて解説していきます。 SSRおよびSSGはこちらのReactを使用した静的Webサイト制作のためのレンダリング戦略 - deve.K's Programming Primer - プログラミング初心者のための入門ブログでも触れておりますので参照下さい。 また、4つ目のISR「Intelligent Sampling a
はじめに 皆さんはaタグにaタグを入れ子にしたいと思ったことはありませんか？もしかしたら意外とないかもしれないですね笑🤓 例えばQiitaの記事カードのUIなどは複数のリンク先を内包するカードになっていますが、カード全体もaタグとして機能しています。 （出典: https://qiita.com/ ） こういった場合に単純に下記のようにマークアップすることはできません。 <a href="/article/1"> <a href="/user/1">@UserName</a> <a href="/article/1">記事のタイトル</a> </a> Next.jsの場合、開発環境では下記のようにエラーになります。 In HTML, <a> cannot be a descendant of <a>. This will cause a hydration error. 理由は、aタグは
PjaxとSPAが全く同じ技術構成なのを知らずにPjaxを過去の技術だと思ってる知ったかぶりが多いので最も高度で完成度の高いPjaxライブラリであるpjax-apiの作者の自分が説明しておこう。 SPAとはPjaxをバンドルしたフレームワーク Pjaxとはその語源からしてpushState+Ajaxである。そしてSPAの技術構成はフレームワーク+pushState+Ajaxである。すなわちSPAとは本質的にPjaxをバンドルしたフレームワークに過ぎない(Pjaxと対比されるSPAはツールセットとしてのSPAでありこれはアプリケーションフレームワークとしてしか存在し得ない。Reactはライブラリを自称しているがAngularやVueがフレームワークを自認していることからも明らかなようにSPAとして使用する場合はルーターなどと組み合わせフレームワーク化しなければならないものでありこれが主たる使
HTML Web Components
I think the word “component” in “web components” confused a lot of people — at least it did me. “Web components” sounded like the web platform’s equivalent to “React components”. JSX had <MyComponent> and now the web had <my-component>. But when you try building web components the same way you build React components, it’s easy to get frustrated and give up because web components don’t work like Re
画像をdataURLで表示させてみた※速度比較あり
この記事はQiitaに投稿していたものです。最終更新:2021年09月03日 普通、画像を表示するときには<img src="./img/hoge.png">とか、<img src="http://example.com/hoge.png">とかやるわけですが、HTMLやCSSファイルに直接データを書く方法があるようなので試してみました。 やり方 HTMLに埋め込み <img src="data:[<mediatype>][;base64],<data>"> 画像はbase64エンコードするのが一般的です。 <mediatype>の部分にはいわゆるMIMEタイプが入ります。代表的なものは以下の通りになります。 ファイル形式 MIMEタイプ
<head> <meta charset="utf-8"> <meta name="viewport" content="=device-width, initial-scale=1"> <meta http-equiv="Content-Security-Policy" content=""> <meta name="application-name" content=""> <meta name="theme-color" content=""> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="robots" content=""> <meta name="googlebot" content=""> <meta name="google" content=""> <m
はじめまして。テクニカルディレクターの横川です。CINRA, Inc.でクライアントワークや自社メディアCINRAなどに携わっています。 今回は、ウェブサイトを構築するうえで、土台ともいえる技術選定についてお話したいと思います。 エンジニア向け記事に見えますが、ウェブサイト構築の技術選定は、スケジュールやデザイン、そのあとの運用など、開発フェーズ以外の与件も考慮して決定されるため、自分には関係ないと思った非エンジニアの方（とくにウェブディレクター、プロジェクトマネージャーなどサイト制作全体のディレクションをする方々）にもぜひ読んでいただきたい記事です。 技術選定はエンジニアのものだけではない ウェブサイト（アプリケーション）は、複数の技術の組み合わせによって実現されます。技術の組み合わせが示す範囲はさまざまですが、ある程度パターン化され、SPA、Jamstack、SSR、SSG……といった
概要 CSSでのフォントサイズ指定に使用できる単位にはいろいろなものがあります。 その中でも、先日初めてremを使用する機会があったので、学びの整理として記事にまとめたいと思います。 remとは ルート要素のフォントサイズを1とした時の相対的なサイズ指定を表します。 ルート要素についての記述は以下のとおりです。 https://developer.mozilla.org/ja/docs/Web/HTML/Element/html <html> は HTML 要素で、 HTML 文書においてルート (基点) となる要素 (最上位要素) であり、ルート要素とも呼ばれます。他のすべての要素は、この要素の子孫として配置しなければなりません。 つまり、<html>に指定されているフォントサイズを1とした時の相対的な文字サイズを表すのがremです。 例 以下のように、<html>に10pxを指定したと
The 2022 Web Almanac
Web Almanac HTTP Archive’s annual state of the web report Our mission is to combine the raw stats and trends of the HTTP Archive with the expertise of the web community. The Web Almanac is a comprehensive report on the state of the web, backed by real data and trusted web experts. The 2022 edition is comprised of 23 chapters spanning aspects of page content, user experience, publishing, and distri
HTML spec change: escaping < and > in attributes | Blog | Chrome for Developers
Build with Chrome Learn how Chrome works, participate in origin trials, and build with Chrome everywhere.
11 HTML best practices for login & sign-up forms—Martian Chronicles, Evil Martians’ team blog
Most websites have login or sign-up forms; they’re a critical part of business conversion. However, even popular sites fail to implement the 11 best practices mentioned in this article, and thus have at least one mistake. So, read on, then check your forms and improve your UX by using HTML technologies the way they should be used. Editor’s note: This post has been updated and checked for accuracy
Introduction Last week Meta open-sourced a new library called react-strict-dom, its goal is to improve and standardize the way of writing React components for Web and Native. In this article, I'd like to go through the historical background of building a universal codebase that shares components between Web and Native, and how react-strict-dom changes the way we can do it. Historical background As
HTMLに埋め込んだYouTube動画の状態を監視して、指定した再生位置になったら何かする方法 - Qiita
本記事では、HTMLに埋め込んだYouTube動画プレーヤーを監視 ＆ その再生情報を取得してJavaScriptであれこれする方法についてまとめています。 機能実装には 「YouTube IFrame Player API」 を使用します。 （仕様の詳細は公式のリファレンスをご覧ください。） YouTube IFrame Player APIとは？ YouTubeさんが提供してくれている無料のAPIで、JavaScriptで制御可能な動画プレーヤーをウェブサイト上の任意の場所に <iframe> として配置するものです。 API経由で配置したYouTube動画については、動画プレーヤーの状態変化をイベントとして検知できるほか、JavaScriptでプレイヤーを直接操作することも可能。 再生 / 一時停止 / 再生終了の状態 再生位置（シークバー）の変化 再生速度、音量、画質の変化 などな
MEFILASメンバーがキュレーターとなって体験性の高いWebサイトを紹介するシリーズ「MEFIMEMO」。今回は「ホラー」をテーマに紹介していきます。 残暑もヒヤリと涼しくなるホラーなWebコンテンツを集めました。いかにユーザーを怖がらせるか…その一心で制作された作品ばかりです。一体どんな演出が施されているのでしょうか。どうぞ【閲覧注意】でお楽しみください。イヤホン、ヘッドホン推奨です。 01. 株式会社 闇 ホラーと言えば…でお馴染み、ホラーコンテンツ専門制作会社「株式会社闇」のコーポレートサイト。テクノロジーを駆使してた新感覚恐怖体験を生み出しています。 💡 POINT 怖いながらもワクワクする、エンタメ性の高い新感覚ホラー。伝統的なホラー要素を抑えつつ今までにはなかったデバイスに特化した体験型の演出が面白い。隅々までこだわって作られており、ソースコードまで怖い。ホラー×テクノロジ
掲載：2022年9月20日 更新：2024年4月8日 更新履歴 2024年4月8日：本調査の報告会のレポートへのリンクを追加 参考：イベント・レポート：第2回支援技術利用状況調査結果報告会 はじめに この報告書は、日本視覚障害者ICTネットワーク (JBICT.Net) が2022年4月から5月にかけて実施した第2回支援技術利用状況調査の結果をまとめたものです。 各設問（報告書末尾の「参考：設問一覧」を参照）への回答状況と、これらに基づいた集計結果を示します。また、参考情報として、2021年に実施した前回調査の結果との比較を示している項目もあります。 参考：第1回支援技術利用状況調査報告書 調査概要 調査期間 本調査は、2022年4月27日から5月31日の期間実施し、Webとメールで回答を受け付けました。 回答者数 上記期間中に266件の回答が寄せられました。このうち、Webによる回答が2
ジェン鬱 on Twitter: "前に視覚障害者の方が「画像を読み込むと叫び声が聞こえてきたりする悪戯が多い」ってツイートしているの見て（あっ多分ALTに無意味にああああああって書いたんだろうな）と思ってから、初めて見えてる人間の無邪気さが人に迷惑かけてることに気… https://t.co/6xK1EOGBiy"
前に視覚障害者の方が「画像を読み込むと叫び声が聞こえてきたりする悪戯が多い」ってツイートしているの見て（あっ多分ALTに無意味にああああああって書いたんだろうな）と思ってから、初めて見えてる人間の無邪気さが人に迷惑かけてることに気… https://t.co/6xK1EOGBiy
Performance-Optimized Video Embeds with Zero JavaScript – Frontend Masters Blog
Every embedded video comes with a real cost to page load performance. Each player loads extra resources, whether the user ever hits play or not, as Chris Coyier noted in his blog post on “YouTube Embeds are Bananas Heavy and it’s Fixable”. The approach of using <lite-youtube> in that article works well when the video appears further down on the page and loads outside of the initial viewport. If th
任意のHTML要素を動的に生成する - かちびと.net
Result 上記のように任意のHTML要素を動的生成するスクリプトです。 軽量且つ非依存で、HTMLタグの生成、プロパティの適用、コンテンツ追加、DOM要素の選択が容易に行えます。 javascript (() => { const assignDeep = (elm, props) => Object.entries(props).forEach(([key, value]) => typeof value === 'object' ? assignDeep(elm[key], value) : Object.assign(elm, {[key]: value})) const tagNames = [ 'a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'blo
いろんなサイトを検証モードで調べてみると、たまにscriptタグの中にdeferという記述を見ることがあるんあだけど、deferってなんだ？ この記述を入れるとどうなるんだろう？ 他社サイトの構造とかをデベロッパーモードで見てみると<script>タグの中にdeferやasyncという文字列が入ってたりしませんか？ 「defer属性」と「async属性」を正しく使うことでJavaScript（以下JS）の読み込みタイミングを調整でき、結果としてページの読み込み速度を改善することができます。 では詳しく解説していきます。 deferとasyncは何者？ deferとasyncは<script>タグ内に記述することができる属性です。 これらの属性はJSファイルの読み込みと実行のタイミングを調整するために使われます。 適切に使うことでWebページの読み込みスピードの改善につながります。 ページ読
ヘッドレスブラウザはフル機能のChromiumをまるごと含むため200MB以上になることもありますが、SatoruのWasmバイナリは必要な機能に絞り込まれているため、ごく小さなサイズに収まります。Cloudflare Workersのような、デプロイサイズや起動レイテンシに厳格な制限がある環境において、これは決定的な差となります。 現在実現できていること Playgroundを用意しました。ぜひ触ってみてください。 左がChromeのレンダリング結果、右がSatoruのレンダリング結果です。 1. コアライブラリの選定と役割 Satoruの変換プロセスは、ゼロからすべてを作るのではなく、ブラウザも採用するような実績のある強力なC++ライブラリを組み合わせて構成されています。 1.1 Gumbo (HTMLの構文解析) Googleが開発した純粋なC言語のHTML5パーサーです。 軽量であ
//html <input type="text" id="text" required> <span id="errorMessage"></span> //js const input = document.getElementById('text'); const errorMessage = document.getElementById('errorMessage'); if (input.checkValidity()) { // 標準のバリデーション機能 errorMessage.textContent = input.validationMessage; // 標準のバリデーションメッセージ } 標準機能を用いたバリデーション なにが嬉しいの？ Web APIにはクライアントのバリデーションに必要な機能が標準でいくつも実装されており、これらを利用することで「自分で書くコード
HTML即公開！Cloudflare Drop が面白そう
まだまだ新しいサービスなので色々変更があるかもしれません！あと調査が割と甘いかもしれない。あくまで参考程度！ TRANs(生徒会情報機構)のKombumori/FRLPです！ すっごいZennさぼってた(n回目)。 Cloudflare Dropとは？ Cloudflareが現地時間7月8日に公開した(静的)WebサイトのHTMLや画像などが入ったZipやフォルダをドロップするだけWebサイトを公開できるサービスです。 たとえば、ClaudeなどにWebサイトを制作させ、Zip出力させてアップロードすれば、Cloudflareの安定したネットワークでWebサイトを配信することができます。 使い方 超お手軽。 HTMLを準備する。 もちろん周辺ファイルも。AI生成ならZip出力に強いClaudeに「Zipで出力して！」といえばやってくれます。一応注意点としてはフォルダのZip圧縮の場合、その
はじめに 文章中に改行で<br>入れるのやめてください これは各種CMSにお願いしたいことです。テキスト投稿サイトでも同じです。 スクリーンリーダーで読み上げた時にめちゃくちゃ読みづらくなるからです。 なぜか スクリーンリーダーは基本はキーボードで操作します。タグ内に文字が書いてあれば、それを読み上げてくれます。しかし、<br>タグがあると、そこで一旦文章が途切れます。MacのVoiceOverの場合、「空のグループ」と読まれます。もしそのまま<p>タグ続きであれば、段落続きで連続で読み続けることができます。しかし、<br>が改行目的で使われていると、その度に「空のグループ」と読まれます。これがブログサイトや小説投稿サイトなどの文章メインのサイトだと、スクリーンリーダーを使うユーザーにとってはUXが最悪です。 プログラミングは、コンピュータに特定のタスクを実行させるための手段です。 コンピ
Reduce the JS Workload with no- or lo-JS options I have nothing against JS, but it has better things to do than manage your accordions and nav menus… For years, JavaScript has been the web’s workhorse. If HTML or CSS couldn’t do what we wanted, we grabbed JavaScript to do it. While that has helped push the user’s experience forward, the web is choking on JS. So as HTML and CSS continue to get stro
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
i-html is a drop in tag that allows for dynamically importing html, inline. It's a bit like an <iframe>, except the html gets adopted into the page. You might have used something similar before, it might seem familiar to other techniques such as hotwired turbo or similar. You might have even used an element very close to this one, for example the popular include-fragment-element by GitHub. This el
In this post I want to share thinking on how to build a color adaptive and accessible loading bar with the <progress> element. Try the demo and view the source! Light and dark, indeterminate, increasing, and completion demoed on Chrome. If you prefer video, here's a YouTube version of this post: Overview The <progress> element provides visual and audible feedback to users about completion. This vi
GitHub - lexbor/lexbor: Lexbor is development of an open source HTML Renderer library. https://lexbor.com
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
textlintでHTMLファイルを扱うtextlint-plugin-html v1をリリースしました！ Release v1.0.0 · textlint/textlint-plugin-html 自分が使うプロジェクトを持ってないのでずっと放置していましたが、textlint v13.0.0のリリースに合わせて全部書き直しました。 textlint v13.0.0 - ESMで書かれたルールを扱えるように 🔥 Breaking Changes textlint v13.0.0以降が必要になりました Pure ESMで書かれたプラグインなので、ESMで書かれたプラグインを扱えるtextlint v13.0.0以降が必要になります Node.js 16.6.0以降が必要になりました TypeScriptに書き直しました 🆕 Features HTMLのパーサにrehypeを使うように
Webサイトを閲覧していると、テキストが右から左に流れていく帯（バナー）を見たことがある方が多いかと思います。 主に新着情報やお知らせ、セールの情報を告知する際に使われていますね。 もともとHTMLにはテキストを自動的にスクロールさせるmarqueeというタグがあったのですが、現在は廃止され非推奨になりました。 この機能は廃止されました。まだいくつかのブラウザーで動作するかもしれませんが、いつ削除されてもおかしくないので、使わないようにしましょう。 マーキー要素 (廃止) – HTML: HyperText Markup Language | MDN そこで今回の記事では、CSSのみで横に流れるテキストを実装する方法を紹介していこうと思います！ サイト上で新着情報などを効果的に告知したいという方は、ぜひ参考にしてみてください。
Webページの見た目をそのまま保持しながら単一のHTMLファイルでローカル保存できるオープンソースのブラウザ拡張・「SingleFile」 - かちびと.net
SingleFileはWebページの見た目をそのまま保持しながら単一のHTMLファイルでローカル保存できるオープンソースのブラウザ拡張です。 通常のWebページの保存のようにレイアウトが崩れたり画像が表示できない事がありますが、SingleFileを使えば見た目を維持したまま単一HTMLでDLする事が出来ます。 単純に相対パスを絶対パスに置き換えている、というわけではなく、別ファイルのCSSはインラインに変換し、画像はbase64に変換してDLしているようです。よって、JSは同じように起動しません。 自分用の魚拓として良いかも？OSSとしてソースコードも公開されています。ライセンスはAGPL。 SingleFile
# ReactのdangerouslySetInnerHTMLを安全に使うために React に素の HTML (string)を挿入する場合は dangerouslySetInnerHTML を使
aria-expandedの理想的な使い方 -- 名前と状態は適切に区別したほうが良い - ARIA-Barriers
@yncat です。 近頃のAIとの対話は本当に楽しいです。今回の記事でも、具体例のコードや、考えの整理のために大いに役立ってくれています。技術者としては、新しいツールのネイティブになっていかないと、すぐにおいて行かれるなと思って、精進する毎日です。 aria-expanded と aria-label 重複はよくないという意見 先日、 こういう意見をGithubに送りました 。 内容を簡単に要約します。 GitHubのマイページ で、自分の行ったコミットやpull requestの実績が出るところで、 aria-expanded で状態が示されている項目に対して collapse や expand などの aria-label がついているのが不要だという主張です。 これは、 WAI-ARIA を利用してアクセシビリティを実装しているウェブサイトでたびたび見られる、典型的な誤用であると私
Warning: Undefined array key "author" in /home/xs485436/wdidearecipe.com/public_html/wp-content/themes/wdir/functions.php on line 94
Visually Hiddenパターンでアクセシビリティに配慮したマークアップを意識する | ビジネスとIT活用に役立つ情報（株式会社アーティス）
React Testing Library や Chrome の開発者ツールでアクセシビリティツリーが見えるようになるなど、最近はただ見た目通りにマークアップするだけではなく、アクセシビリティに配慮したマークアップも必要なスキルセットになってきている流れを感じます。 筆者といえば、最近HTMLやCSSをよく書くようになり、マークアップ完全に理解したからマークアップなんも分からんとなっている状況です。（アクセシビリティも同様） 今回はマークアップなんも分からんといった状況の筆者が、アクセシビリティに配慮したマークアップを意識するといった内容になります。HTML、CSS、アクセシビリティは難しいので鵜呑みにせずに適宜MDNなどのドキュメントをご確認ください。 例えばチェックボックスを装飾したい 無性にチェックボックスを装飾したいとき、あると思います。 例えばこんな感じのチェックボックスですね。
Webサイト構築において、デザインの表現にはCSSを用います。とはいえ、Webサイト制作の毎に新たなCSSを作ることは効率的ではないため、デザインや部品をまとめたCSSフレームワークの活用がおすすめです。この記事ではおすすめのCSSフレームワーク37選を紹介します。 ＜業界実績18年＞ ミドル・シニアフリーランス専門 エージェントSEES 40～60代以上のシニアエンジニア案件探しは、私たちにお任せください！ ご登録者様限定で、Webに公開していない非公開案件をご提案いたします。 無料登録して 案件を紹介してもらう 「Web制作の中でもデザイン関係に時間がかかる」 「複数のWebサイトのデザインに統一感を持たせたい」 「CSSフレームワークとは？簡単に利用できる？」 CSSの活用、CSSフレームワークの利用について、上記のような質問、疑問を持っている方もいるでしょう。また、CSSフレームワ
the html review 05
The HTML Review is an annual journal of literature made to exist on the web.
メンヘラテクノロジーの高桑蘭佳です。今回、2022年5月にAnacondaが公開したPyScriptというライブラリを使ってみました。PyScriptはHTML内に直接Pythonを記述できるので、Pythonが大好きかつ、フロントエンドよわよわな私のためのライブラリでは……!? と以前から気になっていました。 ▼PyScript 公式サイト 公式サイトには以下のように記載されており、まだまだ発展途上ではあるものの、国内でもすでに使ってみた系の記事が多くあるなど注目されているようです。 Please be advised that PyScript is very alpha and under heavy development. There are many known issues, from usability to loading times, and you should ex
この記事ではFigmaで作ったデザインからHTMLやCSSコードを出力する方法を紹介します。 Figmaで作成したデザインからCSSコードを生成したり、HTMLとCSSでコードを取得することができます。 Figmaからコードを生成するには？Figmaのデザインからコードを生成する方法は以下のようなものがあります。 開発モードを使う プラグインを使う テンプレートを使う それぞれ詳しく紹介します。 Figmaの開発モードでCSSコードを取得する開発モードはFigmaの機能の1つで、デザインのCSSコードを取得することができます。 開発モードではCSSコードの取得に加えて次のような機能が実装されています。 デザインからCSSコードを取得 VSCodeとの連携 アセットのエクスポート コンポーネントのプレビュー コーディングを効率化してくれる開発モードですが、使えるのは有料プラン(¥1,800/
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
aタグにaタグを入れ子にしたい！（がHTMLはそれを許さない）
PjaxとSPAの違い - falsandtruのメモ帳
HTML<head>の中をちゃんと理解する - Qiita
オウンドメディアやコーポレートの技術選定どうしてる？ 非エンジニアでもわかる基礎知識｜CINRA, Inc.
フォントサイズを表すremって何者!? - Qiita
【海外記事紹介】LLM時代のサーバーサイド新常識？Acceptヘッダをちゃんと見て、HTMLの代わりにマークダウンを返そう
"react-strict-dom", why it's so great?
【閲覧注意】身の毛がよだつホラーコンテンツ7選｜MEFILAS
第2回支援技術利用状況調査報告書 | 日本視覚障害者ICTネットワーク
【徹底解説】scriptタグにdeferやasyncをつけるとどうなる?
WebAssemblyを使って、自力でHTMLを画像に変換する仕組みの技術解説
【HTML】フォームバリデーションの実装方法をもう一度見直してみる【生JavaScript】
文章中に<br>タグ入れるのやめてください - Qiita
Reduce the JS Workload with no- or lo-JS options
【HTML＆CSS】初心者が躓きがちなスタイリングについて解説してみた - Qiita
i-html, an inline-html import element
Building a loading bar component | Articles | web.dev
textlint-plugin-html v1をリリースした
お知らせテキストが横に流れていくバナーをCSSで実装する方法 | WebDev Tech
ReactのdangerouslySetInnerHTMLを安全に使うために - HackMD
デザイン目次 | 現場で使えるWebデザインアイデアレシピ サポートサイト
おすすめのCSSフレームワーク37選｜メリットやデメリットも紹介
HTMLにPythonを記述できるPyScriptを使い、ポケモンの種族値をデータ化してみた
FigmaからHTML/CSSコードを生成する方法｜しばデザイン
www.chosunonline.com
gigazine.net
comic-walker.com
www.iwate-np.co.jp
comic-walker.com
www.aran-egg.com