令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
変なドメイン取るな.net
このサイト is 何 ドメインの取得と運用は慎重に行ったほうがいいということを身をもって伝えるために生まれたサイトです。 変なドメイン取るなとは インターネット上のドメインは、未登録であれば、多くは簡単な操作ですぐに取ることができます。 費用についても、(ものにもよりますが) 企業や自治体などの団体からすれば大した金額ではありません。 そのため、一時的なキャンペーンなどのために気軽にドメインを取得・運用する例が跡を絶ちません。 取得するのはいいのですが、問題が起こるのはそのドメインを使って運営していた Web サイトが役目を終えたときです。 ドメインの取得は早いもの勝ちなので、誰かが取得済のドメインを取ることは基本的にできません。 しかし、元の持ち主が手放したドメインは別です。 いったん放出されたドメインは、誰の手に渡るかわかりません。 そのドメインで運用される Web サイトがどんなもの
どうしてもドメインを永久保持できない企業向け 企業はどうドメインを捨てるべきか - web > SEO
コロナ禍中に取得された地方自治体のドメインがオークションで高値売買され、中古ドメインとして悪用されるなど、公的機関のドメイン放棄問題が注目されています。 11月25日のNHKニュース7でドメイン流用の件が報じられました。私も取材を受け少しご協力をしています。 www3.nhk.or.jp 公的機関のドメイン放棄問題の理想の解決は、今後は lg.jp、go.jp などの公的機関しか使えないドメインだけを使うようにすることです。 ただ今回の問題はコロナ禍初期の大混乱時、非常にスピーディにサイト立ち上げが求められていた時の話です。 信頼が求められる lg.jp などのドメインの利用には厳格なルールがあるのも当然です。あの混乱時期にルール改定も難しかったと思います。新規ドメインが選ばれた事は仕方がない事と思っています。 ただ、コロナ禍が落ち着いた今、無責任に放棄されるのは明らかな問題です。 今回の
見分けが不可能な偽サイトがGoogle検索最上位に堂々と表示されてしまう、「i」をURLに含む全てのサイトが信用できなくなる極悪手法
Googleは独自のルールに従って検索結果の表示順位を決めていますが、Googleの広告枠を購入すれば任意のウェブサイトを検索結果の最上部に表示することができます。この広告枠を悪用して人気画像処理ソフト「GIMP」の公式サイトになりすました偽サイトが検索結果の最上部に表示されてしまう事態が発生しました。偽サイトはドメインの見た目までソックリで、インターネットに慣れている人でも見分けることは困難となっています。 Dangerous Google Ad Disguising Itself as www.gimp.org : GIMP https://www.reddit.com/r/GIMP/comments/ygbr4o/dangerous_google_ad_disguising_itself_as/ Dangerous Google Ad Disguising Itself as www
一般ユーザに払い出すと危険なサブドメインやメールアドレス - ASnoKaze blog
ユーザに対して、そのユーザ名のサブドメインやメールアドレスを払い出すWebサービスがあります。 しかし、特定のサブドメインやメールアドレスは特別な用途で使われているものもあります。そのようなサブドメインやメールアドレスを一般ユーザに払い出してしまうと危険です。 現在、IETFでは仕様上利用用途が決められている、それらのラベルをとりまとめる「Dangerous Labels in DNS and E-mail」というdraftが提出されています。 今回はそれを眺めていきます。 （あくまでIETFの取り組みであり、仕様上定義されているものをとりまとめています。クラウドサービスや特定ベンダーで特別利用しているものは現在含まれていません。） サブドメイン ここでとりあげるサブドメインは、利用用途が決まってるため一般ユーザに払い出すべきではありません。(例: mta-sts.example.com)
これだけは押さえよう！住所フォームの作り方 - ケンオールブログ
まとめ 住所フォームの作り方 住所フォームを作るときには以下の4つを押さえましょう。 オートコンプリート機能に最適化する 郵便番号フィールドは1フィールドにしてハイフン有無どちらも対応する モバイルUX優先なら郵便番号が入力されたら即座に補完。精度優先なら郵便番号補完ボタンを設置 住所フィールドは「都道府県」「市区町村」「町名以下」の3フィールドが基本。「建物」フィールドはオプション 本文 地域SNSのユーザー登録、ECサイトの配送先入力、資料請求、自治体サイトでの電子申請など、ウェブサービスを活用する上で住所入力は欠かすことができません。 住所入力をシンプルかつ正確に行えるような入力インタフェース（住所フォーム）は、離脱率を減らし、コンバージョン率を向上させる上で重要です。 郵便番号を入力すると対応する住所を自動入力する機能（郵便番号による住所補完）は、住所フォームの改善方法として最も効
ヤフーのIE11 サポート終了の進め方
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。第11代黒帯（Webフロントエンド／ヤフー内のスキル任命制度）の伊藤（@koh110）です。 普段はCTO室にあるWebフロント技術室で、全社のフロントエンドに関わる仕事をしています。 最近の仕事のひとつとして、IE11 の非推奨の案内 がありました。 Yahoo! JAPANでは、Internet Explorer 11を推奨ブラウザーとしていましたが、Microsoft社のInternet Explorerサポート終了に伴い、2021年9月7日をもってYahoo! JAPANにおけるInternet Explorer 11でのご利用を非推奨とさせていただきます。 この案内についてTwitterや記事などで触れていた
Webのルビ仕様にはアクセシビリティを阻害している面がある。「日本DAISYコンソーシアム」が改善を求めてブラウザベンダ、WHATWG、W3Cらに公開書簡
Webのルビ仕様にはアクセシビリティを阻害している面がある。「日本DAISYコンソーシアム」が改善を求めてブラウザベンダ、WHATWG、W3Cらに公開書簡 すべての人が等しく情報にアクセスできることを目指し、国際規格であるDAISY（Digital Accessible Information System：アクセシブルな情報システム）規格の開発・維持・普及のために設立された国際団体「DAISYコンソーシアム」の正会員である「日本DAISYコンソーシアム」は、Web上の文書の文字や熟語にルビを振るためのWeb標準仕様が、弱視や失読症などを含むさまざまなハンディキャップを持つ人々にとってのアクセシビリティを阻害している面があるとして、改善を求める公開書簡をWebブラウザベンダ、WHATWG、W3C宛てに送付しました。 その一部を引用します。 The historical purpose of
CORSの仕様はなぜ複雑なのか
Webアプリケーションを実装していると高確率で CORS の問題にぶつかります。CORSがどのようなものかはリンクしたMDNなど既存の解説を読むのが手っ取り早いと思いますが、「なぜそのように設計されたのか」という観点での説明はあまり見ないため、昔の資料の記述や現在の仕様からの推測をもとに整理してみました。 CORSとは 現代のWebはドメイン名をもとにした オリジン (Origin) という概念 (RFC 6454) をもとに権限管理とアクセス制御を行っています。その基本となるのが以下のルールです。 Same-origin policy (同一生成元ポリシー): 同じオリジンに由来するリソースだけを制御できる。 上記Wikipedia記事によるとSOPの概念は1995年のNetscape 2.02に導入されたのが最初のようです。当時のドキュメンテーションを読む限り、これはウインドウ越しに別
IEからEdgeへの転送を開始 | Web品質Blog | ミツエーリンクス
先だって「IE」で一部のサイトを開くと「Edge」に転送--脱IEの一環で - ZDNet Japanなどで報道されていたとおり、一部のサイトに関してInternet Explorer（以下「IE」）でアクセスされた際、Microsoft Edge（以下「Edge」）で開くよう転送する処理がスタートしていますが、その対象サイトに当サイト（mitsue.co.jpドメイン）が追加されました。 IEとEdgeの両方がインストールされた環境において、上述の転送が有効であることを既に確認しています。これは当社からの申請に基づくもので、必要な手続きの詳細はMoving users to Microsoft Edge from Internet Explorer - Microsoft Edge Development | Microsoft Docsにある通りです。11月23日にメールで申請をしまし
新Edgeブラウザ登場に伴うIEサポート終了についてチームのコンセンサスを得るためのシンプルなテンプレ - Qiita
ポエムです。コードは一行もでてきません。 Chromiumベースの新Edgeブラウザもベータに突入し、いよいよ IE のサポートを切れるタイミングが見えてきました。 とはいえ、私が関わっている現場のように、既にリリースしているサービスの場合は IE のサポートを突然切るわけにも行かず… そのような場合は、まずはチーム内への根回しやコンセンサスからになるでしょうか。 かれこれ2年前(2017年)。 今のサービスがまだ設計段階だったころに、 「2年後の2019年にはIEシェア1%とかなんだから、あらかじめ IE 対応だけは切らせてくれぇぇ」 と訴えていたのですが、 ちょうどサービスのグロースや顧客層を最大化して考える時期(風呂敷を大きめに広げている時期)というタイミングの悪さもあり、 「今の段階でIE切るとか、事業というか、ビジネス的にありえないでしょ!!」 という、 なかなか強烈な拒否反応が
語彙力がとても重要なのは、検索が「知っていること」しか教えてくれないから。
最近、テトリスが我が家ではブームになっています。 というのも、ニンテンドースイッチのオンラインサービスとして、『テトリス99』なる対戦テトリスゲームが遊べるようになったからです。 この対戦テトリスは合計99人で争われるバトルロワイヤル形式で、一見、とても難しそうにみえますが、最初はブロックの落下速度がゆっくりなので初心者でもそれなり遊べます。 上手な人同士が勝手に潰しあってくれたり、途中で嫌になってやめてくれる人もいるので、10位ぐらいまでならちょっと頑張れば入れるのではないかと思います。 ただ、残り10人ぐらいになるとさすがに難しいというか、ブロックの落下速度も速くなり、慣れやテクニックが求められてくるのですが。 でもって、子どもが「テトリスの良い動画が観たい」といってパソコンで動画検索をはじめていました。 さすがに今時の子どもというか、わからないことは文章で検索する前に動画検索で調べる
「え？それそんなかかるの？」簡単そうに見えて案外時間のかかるWebサイト上のJavaScriptあるある仕様8選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
多！ そのため、仕様の洗い出しが不十分になりがちになる、という点で厄介です。 ただし、今はSwiper, Slickといった優秀なプラグインがあります。こいつらは大抵の仕様は満たしてくれますので、積極的に使うと良いと思います。 参考 Swiper Slick フィットスクロール 厄介度：★★★ 紙芝居スクロールなどといったりもします。 海外のオサレなブランディングサイトや、ランディングページなんかでたまに見かけますね。 カッコイイ！うちもこんなんやりたい！と思うかもしれません。がしかし…… イメージ ハマりポイント スクロールに関する他の機能実装 これを実装する場合ブラウザにデフォで備わっているスクロールは使わず、別の方法（CSSのtransformとJSを組み合わせるなど）で実装することになるかと思います。 するとまず、スクロールイベントが取れないんですね。 そのため、スクロールに合わせ
韓国政府が有害サイトへのアクセスを遮断、反対請願も 日本では「明日は我が身」の声
韓国政府が11日からアダルトサイトなど有害と判断したサイトへの接続を全面的に遮断し、議論を呼んでいます。日本国内では2018年に「サイトブロッキング」に関する議論が盛んになったことから、「明日は我が身」などの意見も上がっています。 中央日報が報じたところによると、韓国内のISPが11日から「サーバーネームインディケーション（SNI）フィールド遮断方式」を利用したサイト遮断を開始し、多くの韓国国外のサイトにアクセスできない状態に。一部から表現の自由に対する萎縮や検閲の問題が指摘され、ネット上では「成人が自由にアダルト動画も見られないのはおかしい」などの意見が上がっているそうです。 このことは日本国内でも注目を集めることに。特に日本では2018年に海賊版漫画サイトへの対策として「ブロッキング」に関する議論が活発になったことから、「明日は我が身」「日本政府のネット規制のいい先行事案」などの意見が
URLが複数存在する同一ページでコメント一覧ページが分散する仕様を、統合されるよう変更します - はてなブックマーク開発ブログ
平素よりはてなブックマークをご利用いただきありがとうございます。 はてなブックマークでは現在、システム全体の抜本的なリニューアルに向けた開発を進めております。 その一環として、これまで同一ページでURLが複数存在する（例：httpとhttpsの混在、異なるパラメーターを複数持ったページなど）場合にブックマーク数やコメント一覧ページがそれぞれに分散していた仕様を、同一ページへのブックマークとして統合されるよう変更いたします。 これまでは、以下のようにブックマークしたURLによって、同じコンテンツであったとしてもコメント一覧ページが分散することがありました。 コメント一覧ページA (ユーザー1) http://example.com/ コメント一覧ページB (ユーザー2) http://example.com/?page=2 これは、一つのエントリーとしてのURLだけでなく、ユーザー様ご自身が
なぜスクショ？スマホネイティブ世代がコピペしない理由
文字列をコピペする機会がない なぜURLのコピペをしないのか。スマホのWebブラウザーでURLをコピーし、LINEのトークへ貼り付ける手順を娘に見せたところ、「面倒臭い」の一言が返ってきた。それでもコピペ操作を教えてみると、ある事実に気付いた。彼女は文字列を選択し、コピーしてペーストするという操作に慣れていない。スマホの使い過ぎと親である筆者に叱られるほど、彼女はスマホのヘビーユーザー。なのに、文字列をコピペする機会がほとんどないようだ。 背景には、若い世代はWebブラウザーをあまり使わないという実態がある。TesTee（テスティー）は2018年11月に「【スクショ解析】スクリーンタイムに関する調査（https://lab.testee.co/screen-time）」を公表した。この調査はスマホアプリの利用時間が分かる「スクリーンタイム」というiPhoneの機能を利用し、全年代の男女68
静的HTMLのためのテンプレートエンジン - 共通部分が多いHTML | CodeGrid
静的HTMLのためのテンプレートエンジン 第1回 共通部分が多いHTML 共通部分が多いHTMLを効率よく作るには、さまざまな手法が考えられます。このシリーズでは、テンプレートエンジンを使用してHTMLを生成するという手法を取り上げ、解説していきます。 はじめに ピクセルグリッドでは、企業サイトのリニューアル案件やWebアプリケーションのフロント側の制作が主になっています。中でも、リニューアル案件では、ページの量産は行わず、量産のもととなるページのHTMLを作成しています。量産は行いませんが、サイトの規模によっては、それなりの量のHTMLを作成していく必要があります。 最近関わった案件ではPC用40ページとSP用40ページ、合計80ページを作成する必要がありました。それらのHTMLには、ヘッダーやフッターであったり、サイドバーであったりと、共通する部分が多く存在します。筆者はその80ページ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
キーワード検索 Good Keyword
What is the difference between fixed, fluid, adaptive and responsive layouts and why should I care?
これからのWebセキュリティ フロントエンド編 #seccamp
