令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
より良いWebを作るためのガイド
初学者の方を対象により良いWebを作るためのガイドとしてHTMLやCSSなどのWebサイトを作成するための情報を公開しています。 ここに掲載している情報は、作者自身が勉強してきたことを初学者の方たちにとってわかりやすくお伝えできるようにまとめた内容ですので、作者の知識に偏りがちであり、その内容の有用性、安全性等については、いかなる保証を行うものでもありません。 正確性には万全を期すよう努力してはおりますが、当サイトの利用者が掲載情報に基づいて下した判断および起こした行動により、いかなる結果が発生した場合においても、作者はその責を負いませんのであらかじめご了承ください。掲載情報が生きた情報なのかどうかは、各ページに記されている更新日時などのステータス情報や記述内容から各自で判断してください。常にクリティカル・シンキング（論理的・構造的に考えているかを批判する）のもとに情報を参照されることをお
配色の見本帳 | キーカラーで選ぶ配色パターン - ホームページで作る配色
Webで見るデジタル色彩見本として 配色の見本帳は無料のインターネットツールです。各色のページでは、Webカラー（RGBカラー）をベースとした色の系統（色相）と色の鮮やかさ（彩度）・明暗の度合い（明度）を数値で表しています。各種カラーモードでの色数値を掲載しています。DTPでチラシや看板を作るとき、ホームページといったWEBサイト作成、パワーポイントでの資料作成など、各種デザインでのカラーマネージメントに便利なカラーコードが一目でわかるWebで見るデジタル色見本です。 色を扱うときに頻繁にぶち当たるのが配色ですが、色の法則に沿った色の組み合わせがテンプレートとなり色彩設計の手助けをしてくれます。 色検索で見つかる新配色 ベースとなる色、キーカラーを選ぶとそこからおすすめな相性の良い色をマッチングしてくれるのが当サイトの色検索です。メインに使う色が決まっているとき求める配色がすぐに見つけられ
「戻る」ボタンで戻れないときがある - 日経トレンディネット
Webページを見ているとき、頻繁に使うボタンがInternet Explorerのツールバーにある「戻る」ボタンです。けれども一部のWebページでは、「戻る」ボタンを押しても、前のWebページに戻れないものがあります。これらは基本的に、同じページにループするように作られています。 一例を紹介します。Webページを[1]→[2]→[3]と順に移動したとします。ここで[3]のページから戻れなくなった場合、「A」という[3]へ強制的にジャンプするページが[2]と[3]の間に存在しています。[1]→[2]→[3]と移動してきたつもりが、実は、[1]→[2]→A→[3]となっていたわけです。[3]のページで「戻る」ボタンを押すと、一瞬Aのページに戻りますが、すぐさま[3]にジャンプする仕組みになっているわけです。利用者側からすれば、[3]のページが一度消えて再表示されたように見えます。 この[3]の
クロスブラウザはもう古い！ HTML5＋CSS3時代のプログレッシブ・エンハンスメント
IE 9が登場！ ユーザーの閲覧環境がますます多様化！ 4月26日、ついに日本でもInternet Explorer（以下、IE） 9が公開されました。また、マイクロソフトは早くもIE 10のプレビュー版を公開しており、CSS3やJavaScript周りが、さらに強化されるなどリッチなWeb表現が加速してきています。 IEのみならず、Firefox、Safari、Google Chrome（以下、Chrome）など他のWebブラウザもすさまじい勢いで進化してきており、スマートフォンやタブレットPCなどのデバイスも続々と開発され、ユーザーの閲覧環境がますます多様化してきています。 そうした流れの中で、必然的に欠かすことができなくなる知識が、この「プログレッシブ・エンハンスメント」という概念です。 プログレッシブ・エンハンスメントって何？ Webブラウザや端末などの閲覧環境が多様化してきていま
Fire Vox（Firefoxで音声読み上げ）｜ウェブユーザビリティ向上を支援するWebsite Usability Info
ブラウザ（ホームページ閲覧ソフト）のひとつであるFirefoxに「Fire Vox」という機能拡張があるのをご存知でしょうか？Firefoxで表示したWebページを、音声で読み上げてくれるツールです（ちなみにVoxとはラテン語で「声」という意味です）。 無料で入手できる機能拡張なので、本格的な読み上げソフト（JAWSなど）や音声ブラウザ（ホームページ・リーダーなど）ほど高機能ではありませんが、自分のWebサイトが音声でどう読み上げられるのかを簡易チェックするのにも適したツールと言えるでしょう。以下に、セットアップ方法および使用方法について、簡単にご紹介したいと思います。 別途必要な日本語音声合成エンジン 実は、Fire Voxを使って「日本語で読み上げる」ためには、Microsoft Speech APIのバージョン5（SAPI 5）に対応した日本語音声合成エンジンが必要です。あらかじめO
アクセシビリティ：視覚障がい者、音声ブラウザ(読み上げソフト)のシェア:WebClip - ウェブ制作、UXD／IA、アクセシビリティ
この記事のトピック Web担当者の悩み：音声ブラウザのシェアがわからない 視覚障害者のパソコン・インターネット・携帯電話利用状況調査2007 Web担当者の悩み：音声ブラウザのシェアがわからない こんにちは。“時代の3歩先をねらうWeb屋さん”ミキ・オキタです。 このブログ「WebClip ウェブデザインのニュース」では、Webデザイン・Webマーケティングの話題をお届けしています。 今回はWebアクセシビリティの話題。Web担当者なら必ず頭を悩ます音声ブラウザのシェアについて。 以前の記事でも書いたが、アクセシビリティはSEOではない。Web標準とも異なる(アクセシビリティはもっと広範囲にわたる)。かといって、結果の見えづらい「社会貢献」扱いでは、現場のモチベーションが保ちづらい。 企業がなぜアクセシビリティに取り組むのか、その動機づけははっきりさせておかなければならない。 上のことを踏
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
カラー配色で迷わない！シーン別配色見本32パターン | Web制作会社スタイル
http://www.dac.co.jp/net/index.html