令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
JavaScriptは無し、スクロールした時にヘッダの高さを縮ませて上部に固定表示させるCSSの実装テクニック
スクロールした時にヘッダの高さが縮んで上部に固定表示させるWebページを見たことがあると思います。今まではJavaScriptを使用する必要がありましたが、CSSのposition: sticky;を一工夫して使用することで簡単に実装できます。 高さを縮ませるのはヘッダに限らず、パネルやバナーなど他の要素でも簡単に実装でき、汎用性にも優れていると思います。 Shrinking Header on Scroll Without JavaScript by Håvard Brynjulfsen 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 デモページのデザインがシンプルなので、一見見落とすかもしれませんが、ページをスクロールするとヘッダの高さが縮んで上部に固定表示されます。 デモページ 仕組みは、簡単です。 ヘッダは外側と内側の2
閲覧者のユーザーエージェントを三角関数で判定できるか？ - Qiita
概要 先日ふと自分のPCのフィンガープリントを取ってみたところ「IPアドレス」など様々な項目が並ぶ中に「Math.tan」という変な項目を見つけました。 「なぜ三角関数が出てくるの？」と気になって調べてみたところ、**三角関数の値はブラウザやOSの実装により微妙に異なることがあり、特定の式をブラウザに計算させることで利用者を識別する手段になり得る1**という話でした。 面白そうだなと思ったので、本記事ではその手法で実際どの程度までブラウザ/OSを判別できるのか調査してみました。 検証方法 今回は様々な文献12の情報を参考に、以下の式を各OSの各ブラウザに計算させました。 tan(-1e300) cosh(10)（厳密には三角関数の類似ですが） これら以外も10数種類ほど試したのですが、判別に使えたのはこの2つのみでした。 試したOSとバージョン macOS Catalina (ver.10
MEGA HOKI : SLOT GACOR & BANDAR TOGEL TERBAIK 2024 SITUS SLOT PULSA TANPA POTONGAN #1
Ratehoki88 situs slot online yang selalu memberikan Mega hoki dan Big hoki terbesar sepanjang masa dengan menyediakan Mesin slot gacor terbaik saat ini yang selalu menurunkan scatter hitam dan Megawin terbesar di dalam permainan pragamtic play dan Pg shoft salah satunya di game online yang sangat di incar adalah Mahjong ways 1, 2 dan 3, 88 Mega 777 juta juga menyediakan pasaran togel atau situs to
Webブラウザ、レンダリングエンジン、JavaScriptエンジンを整理して図視化してみた - Qiita
最近、次世代のMicrosoft EdgeがChromiumをベースにするという記事を読んだことがきっかけでブラウザの中身が気になって調べたので、その備忘録として記事にしたいと思います。 ※2020/3/17追記: Microsoft Edgeは既にChromiumベースになりました。 それに伴い記事を更新し、以下のように表記を変更しました。 現世代Microsoft Edge → 旧世代Microsoft Edge 次世代Microsoft Edge → 現世代Microsoft Edge もし変更のし忘れがあった場合はご指摘お願いします。 Webブラウザとは まずWebブラウザとは ウェブブラウザ（インターネットブラウザ、web browser）とは、 World Wide Web (WWW) の利用に供するブラウザであり、ユーザエージェント (UA) である。具体的には、ウェブページ
知っていれば恐くない、XMLHttpRequestによるXSSへの対応方法
知っていれば恐くない、XMLHttpRequestによるXSSへの対応方法：HTML5時代の「新しいセキュリティ・エチケット」（3）（1/2 ページ） 連載目次 皆さんこんにちは。ネットエージェントのはせがわようすけです。前回は、同一オリジンポリシーを突破する攻撃の代表的事例であるXSSについて、特にDOM based XSSと呼ばれるものについて解説しました。今回はその続きとして、XMLHttpRequestによるXSSを解説します。 XHR Level 2によるリモートからのコード挿入によるXSS 従来、XMLHttpRequest（以下、XHR）は、表示しているドキュメントと同じオリジン（オリジンについては第1回を参照）としか通信できませんでしたが、現在の主要なブラウザーではXHR Level 2と呼ばれる実装により、オリジンを超えて通信することが可能になっています。 これは、Jav
setTimeoutとUIスレッドを学ぶよ JS Advent Calendar, オレ標準コース - ぶれすとつーる
JS Advent Calendar, オレ標準コース 20日目, id:nazomikan です jsで素人から玄人までみんな愛するsetTimeoutについて色々見直してみる 基本的な話 まずは定義 timeoutID = window.setTimeout(func, delay); timeoutID は、window.clearTimeout で使うことのできるタイムアウトの ID です。 func は delay ミリ秒後に実行したい関数です。 delay はミリ秒(1/1000 秒)で、関数呼び出しはこれにより遅延します。 MDN とまぁ、こうなっている。 色んな語弊を含んでるのを理解の上であえてまるくいうと、setTimeoutはタイマーメソッドで第一引数に与えられたfunc(関数)をdelay ミリ秒後に実行するというもの。 ためしに簡単な例 (function(win,
スクロールするとサイドバーの広告が追いかけてくる風の作り方 : IT速報
こんにちは！このブログを作って2ヶ月が経ちました(^^) 少し間が空きましたが、サイト制作日記を書いてみます！ 今回は２ｃｈまとめサイトにありがちなスクロールするとサイドバーの広告が追いかけてくるようなものを作ってみました。 まとめ記事じゃなくて申し訳ありません(>_<)たまーーーに。ほんとたまーーーーーに、こんなサイト制作日記たるものを書いちゃいます。ご容赦くださいm(__)m 何のことだ？って人は当ブログの右サイドバーを見てください。Amazonの広告が追いかけてくるはずです。 これ難しそうに見えて、めちゃくちゃ簡単に実装できるので是非ここでコードを盗っていってください(^^) jqueryを使う 簡単に実装するためにjqueryを使います！jqueryとはjavascriptライブラリです(^^) このjqueryを使うためには下準備が必要になります。 本家のhttp://jquer
MacでもLinuxでも使える! 無償の Visual Studio Code を使用した Cordova 開発 - monoe's blog - Site Home - MSDN Blogs
In Visual Studio 2022 17.10 Preview 2, we’ve introduced some UX updates and usability improvements to the Connection Manager. With these updates we provide a more seamless experience when connecting to remote systems and/or debugging failed connections. Please install the latest Preview to try it out. Read on to learn what the Connection ...
Flash を HTML5＋JavaScript に変換する「Smokescreen」 | スラド
ストーリー by reo 2010年06月03日 11時00分 俺は Flash をやめるぞ ! 部門より 以前「JavaScript で書かれたオープンソース Flash プレイヤー」なるものが話題になったが、今度は Flash を HTML5 ＋ JavaScript に変換して実行させる Smokescreen なるものが登場している。 いくつかの デモが公開されているが、Flash で作成された広告なども Flash で動かすのとほぼ同じように動作している。対応ブラウザは Firefox 3.6、Safari 4.0.5、Chrome 5 beta、iPhone OS 3.x の Safari だそうだ。Opera 10.53 や IE ではいまのところ動作しないが、Opera 10.5 系については対応可能で、IE9 についても対応したいとのこと。
| ＾＾ |秒刊SUNDAY | 鼻血が出るほど高センスなWEBデザインサイトギャラリー集まとめ
2009年06月08日 鼻血が出るほど高センスなWEBデザインサイトギャラリー集まとめ カテゴリ：WEBデザイン デザインサイト集というのは、こんなにも沢山出来上がっているとは知らなかったのですが、仕事柄かなり活用しますのでここで抑えておきたいと思います。 ◆いけてるサイト.com このサイトを紹介しないと、この記事のコンセプトがわからないので、とりあえずフリということで。 ■WEBデザイン リンク集 : ikesai.com --- いけてるサイト ドットコム（WEBデザインの参考にどうぞ） ◆Webデザイン・Webデザイナーのまとめサイト 膨大なデータベースです。色やキーワードで検索できる。ここにいけばほぼそろうか？ ■Webデザイン・Webデザイナーのまとめサイト | Webデザインに優れたサイトのリンク集 ≪デザインリンクデータベース≫ ◆WEBデザイン・データベースWEBdeDB
無料でX(旧Twitter)・Facebook・Mastodonにまとめて投稿や予約投稿ができるオープンソースの「Mixpost」をセルフホストしてみた
MixpostはXやFacebook、MastodonなどさまざまなSNSの複数のアカウントを一括で管理できるツールとのこと。同時投稿のほか時間を指定して投稿することも可能とのことなので、さっそくセルフホストして使ってみました。 Self-hosted, Open Source Social Media Management - Mixpost https://mixpost.app/ 公式サイトにアクセスし、「Get started」をクリック。 「Free」の欄に表示されている「Github」をクリックします。 Laravelアプリケーションに追加することも可能とのことですが、今回はスタンドアローンアプリ版を使用するので「use Composer to create this standalone app」をクリック。 さらに今回はDocker版を使用します。Docker版の詳細につい
はてなブックマークのコンテンツの JavaScript を高速化する - IT戦記
はじめに 「新はてなブックマーク」になったということで、とっても便利になったのですが、ブックマーク一覧ページ*1が若干 JavaScript に時間が掛かっているみたいです。 というわけで 調査してみたいと思います。調査して、改善できそうなところは後で纏めて「はてなアイデア」にでも登録しようと思います。 この日記は調査しながら、過程を書いていくつもりです。 準備 まずは、人のサイトの JavaScript を書き換えて試してみるための環境を作ります。 作業用ディレクトリを作る とりあえず、ホームに HatenaJS というディレクトリを作ります。 $ mkdir HatenaJS $ cd HatenaJS CocProxy をダウンロードしてくる 以下から CocProxy というツールをダウンロードしてきます。 http://coderepos.org/share/wiki/CocPr
はてなブックマークが重い件について、Page Detailerというツールを使って調べてみる - VTuberになったプログラマーの魂の残滓
JavaScriptの部分は というわけでid:amachangに任せましょう。 というわけでそれ以外の部分でいったいどこが重いのか 何が重いの？ということで重たい箇所を分析していきましょう。 IBM PageDetailer 解析ツールとしてIBM PageDtailerを利用します。 alphaWorks Community 解説するよりも見てもらうほうが早いと思うのでさっそく使ってみるよ。 ちなみに上記ソフトのダウンロードにはIBMアカウント（無料）が必要なので、使いたい人は登録しよう！ http://b.hatena.ne.jp/HolyGrail/ の結果 こんな感じのグラフが出てきます。 では、詳細を見てみましょう。 このグラフですが、長い部分が http://b.hatena.ne.jp/HolyGrail/ のHTMLそのもののロード時間になっています。 内訳としては 濃い
出しゃばりJavaScriptを検出、Obtrusive JavaScript Checker登場 | エンタープライズ | マイコミジャーナル
Robert's talk - Web development and Internet trends Robert Nyman氏は2日(デンマーク時間)、Obtrusive JavaScript Checkerの最新版となるObtrusive JavaScript Checker 0.7を公開した。Obtrusive JavaScript CheckerはWebページの内容をチェックしインラインイベントが指定されたHTML要素を探し出して強調するためのツール。Unobtrusive DOMプログラミングを実現するために活用できるチェッカーだ。 0.7ではアクセシビリティとSEOの双方で問題となりやすい"javascript: links"を検出する機能が追加されたほか、検出した要素や"javascript: links"を選択すると詳細情報を表示する機能が追加されている。またウィンドウの
IT news, careers, business technology, reviews
Heads on: Apple’s Vision Pro delivers a glimpse of the future
visited疑似クラスのビーコンを拾うサービスが登場 | 水無月ばけらのえび日記
行動ターゲティング広告は以前から存在していたが、今年の動向として新しいのは、行動を追跡する手段として、自サイトでの閲覧行動だけでなくよそのサイトでの閲覧行動まで追跡するタイプが現れたことだ。 (～中略～) 仕組みはこうだ。Webページのリンクは標準では青色で表示されるが、訪問済みのリンクは紫色に変わる。このリンクの表示色をJavaScriptなどのプログラムで取得することができれば、閲覧者が特定のサイトに行ったことがあるか否かを調べることができてしまう。 <style type="text/css> #sita-A a:visited{background:url("/beacon/site-A.gif")} #sita-B a:visited{background:url("/beacon/site-B.gif")} </style> <ul> <li id="sita-A"><a hr
More Malware-Laced Codecs - Computer Security Research - McAfee Avert Labs Blog
McAfee+ Products Worry-free protection for your privacy, identity and all your personal devices. Individual and family plans McAfee+ Ultimate Our most comprehensive privacy, identity and device protection with $1M ID theft coverage. Total Protection Protection for your devices with identity monitoring and VPN Device Protection Antivirus Virtual Private Network (VPN) Mobile Security Free Tools & D
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Explore DOM Events
IDEA * IDEA
