令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
【CSS】CSSの値と単位が新しくなっていますが、ついていけてますか？ - Qiita
はじめに 最近のCSSのアップデートは目覚ましいものがありますが、 みなさんは、CSSの値と単位がここ1年くらいで大きく変わっていることはご存知ですか？ Dynamic viewport が追加されたり、math 関数が追加されたりなどの大きな変更は、ご存知かもしれないですが、calc()で ネイピア数 e や 円周率 πなどが使えるようになったり、 フォントに相対的な長さ単位が追加されていたりと細かい変更も多くあります。 そのため、この記事では、CSS Values and Units Module Level 3 から CSS Values and Units Module Level 4の変更点を中心に紹介しようと思います。 Viewport単位 CSS Values and Units Module Level 3 から CSS Values and Units Module Le
デジタル庁のサイトやばすぎるwww - Qiita
はじめに みなさん、デジタル庁のサイトはご覧になったことはありますか？今話題のデジタル庁です。 こちらが2023年6月現在のデジタル庁のサイトです。やばくないですかこれ？最初見たときこれ「やっばw」と思いました。これからこのサイトのやばさを語っていきたいと思います。 洗練されたシンプルさ、そしてデザイン 僕は最初見たときびっくりしました。「なんてシンプルで見やすいんだ！」官公庁のサイトですよ？官公庁のサイトといえば、細かい字がずらっと並んで見づらいイメージでしたが、デジタル庁のサイトはとことんシンプルさを追求して見やすくしてます。フォントもNoto Sans JPを使われててとても読みやすい。黒も #000 でなく見やすい色になっている。 やばいですねこれ。 そしてこのレイアウトを見たとき、余白のおかげでとても見やすいなと思いました。そこでChrome Dev Toolでレイアウトを見てみ
TBSのニュースサイトヤバない？(追記)
はてぶの上位にちょいちょい載ってるTBS系のニュースサイト、newsdig.tbs.co.jpについて。 https://b.hatena.ne.jp/site/newsdig.tbs.co.jp/ 何がヤバいかって、くっそ巨大なCookie(LocalStorageとかも含むのか知らんけど)をしこたま保存してんのよ。 気付いた時点では640MBも占有してた。別に巡回チェックしてるわけでもなく、話題に挙がってたら見てみることもある程度のアクセス頻度なのだが。 Chromeユーザーはアドレスバーに↓コピペして確認してみてくれ。 chrome://settings/content/all?searchSubpage=tbs.co.jp&search=cookie 試しにCookie消去してから、ただ開いただけでサイト上で何の遷移もしてないのに279MBも保存された。 次点ではpresi
初学者に教えたい、MicrosoftがGitHubで公開している教材が最高だった！ - Qiita
はじめに エンジニアやデータサイエンティストの人材育成のためのオープンソースな教材を探していたらMicrosoftがGitHubでかなり質の高い教材をweb開発、データサイエンティスト、機械学習、IoTの四項目を対象に提供してるのを発見したため共有したいと思う。 正直、マイクロソフトと聞くとGoogleやらFacebookに比べていけてないイメージを持っていたけど、実際にMicrosoftのGitHubレポジトリを見て、彼らはここ数年で大きく変わったように思える。特に人材育成や学習教材に関しては世界一かもしれないなんて思っています。本記事では筆者が自信を持っておすすめするMicrosoftのオープン教材を紹介するのでぜひ自身の勉強や人材育成に生かしてもらえれば本記事を執筆した甲斐があります。（もちろん僕がお勧めしているだけでなくてGitHubのスター数も多く世界的に認められています！） こ
JavaScriptを完全無料で学習できる最強の厳選コンテンツを大公開！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、JavaScript初心者から中級者までをカバーできる学習コンテンツを厳選してご紹介します。 完全無料で公開されているものばかりを集めており、なおかつ質の高いコンテンツを選んでいますので独学したい方にも最適です。テキスト、動画、本、Webアプリなど、さまざまな種類のコンテンツを楽しみながらぜひ学習に役立ててください！ ■学習を始める前に これからJavaScriptの学習コンテンツについて解説をしていく前に、ひとつだけ以下のサイトをご紹介しておきます。 【 The Modern JavaScript Tutorial 】 これはJavaScriptの基礎構文・DOM操作・非同期処理・サーバ通信など、ほとんどの学習項目を網羅したリファレンスのようなサイトです。海外で作られたサイトですが、うれしいことに日本語化されているので初心者にも扱いや
ブラウザレンダリングの仕組み
フロントエンド用語を100秒で解説するチャンネルを作りました！ よかったらチェックしてみてください！ はじめに 以前書いた記事「Webページがブラウザに表示されるまでに何が起こるのか？」で ブラウザレンダリングについて詳細に知りたいという意見をいただいたので、調べてまとめてみました。 全体図 レンダリングの大まかな流れです。 HTMLのダウンロード サーバから送られてきたHTMLをダウンロードします。 HTMLの解析 サーバから送られてきたHTMLファイルは、「0」と「1」でできたデータになっています。 ブラウザは、サーバから受け取ったデータをそのままHTMLとして解釈することはできないので、自分で扱うことができる形、つまりDOMに変換する必要があります。この作業を 解析 ( Parse ) と言います。 HTMLをダウンロードしたら、すぐにこの解析作業に入ります。作業は以下のようなステッ
庵野秀明 個人履歴
庵野 秀明（あんの ひであき） 脚本・監督・プロデューサー等 1960年5月22日 山口県宇部市にて誕生 双子座のＡ型 株式会社カラー代表取締役 私立和光幼稚園、宇部市立鵜ノ島小学校、同市立藤山中学校を卒業。幼い頃から色々なマンガ、アニメ、特撮、戦記物等の魅力に次々と、とりつかれる。幼い頃から絵を描くのが好きだった。 中学時代は美術部に所属。基礎デッサンもせず、マンガと油絵を描く日々が続く。 1976年、山口県立宇部高校に入学。地元では有名な進学校だったが入学式の時、もう無駄 と感じる勉強はしないと決意。美術部にて、ひたすらマンガやアニメ・特撮モノ、地学部天文斑にて星の観察、友人との麻雀等に没頭する。各種試験の結果は８点から９８点までと好き嫌いによって振幅が激しく、学校からは問題児とされる。その中でも特に英語は中１の時担当の先生に反発して以来、ほぼ赤点をキープ。だが、予め答えを教えてくれて
続・続・国産ブラウザアプリSmoozはあなたの閲覧情報をすべて外部送信している
この記事は過去2回にわたる検証記事の続きとなります。 国産ブラウザアプリSmoozはあなたの閲覧情報をすべて外部送信している 続・国産ブラウザアプリSmoozはあなたの閲覧情報をすべて外部送信している 前回の記事では、おすすめ記事機能を有効にしていると、Smoozがユーザーの閲覧しているURL情報を送信してしまうことについて解説しました。 ユーザーID、URLと共に送信されているbc、bt、bdという項目の内容がわからないままでしたが、これもユーザーの情報であるはずだと思い、調査を続けてきました。 ▼これがおすすめ記事のために送信される内容 （この内容は記事の最後にテキスト情報としても掲載しておきます） URL情報に関連するもので 『c、t、d』 と呼ばれそうなものは何か。 ・cのデータ量は飛び抜けて多い ・cとdは一致が見られることがある ・一部が一致しながらもcのほうが長かったりもする
Android7.1以前でLet's Encrypt証明書のサイトが見られなくなる | おそらくはそれさえも平凡な日々
追記: その後の動きについて書きました → Let's Encryptの証明書切替周りその後 このサイトはLet's Encryptで証明書発行しているのでタイトルの件が気になったのだが、どうもあまり話題になっていない。恥ずかしながらSSL周り詳しいわけじゃないので、誤っているかも知れない。識者の意見を求む。 Let's Encryptが使われているサイトがAndroid7.1以前のバージョンで今年の9月29日以降見られなくなる可能性がある 延命策は用意されそうだが、それも来年の9月29日まで Let's Encryptのルート証明書切り替え計画に起因している Let's Encryptのルート証明書の変更 Let's Encryptはルート証明書を自身(ISRG)の認証局のルート証明書(ISRG Root X1)に切り替えようとしている。現在は、IdenTrustのルート証明書(DST
あの頃の記憶がよみがえる！ メルカリ90年代アップデート！
平成から令和へ。 1つの時代がついに幕を閉じます。 平成の歴史、それはインターネットと共にありました。 沢山の人が夢中になった90年代のインターネット。 その存在に最大限の感謝と敬意を込めて、 ホームページを90年代版にアップデートします。 さあ、メルカリで圧巻の体験を。 From Heisei to Reiwa. The end of one era. The history of Heisei was the history of the internet. Tons of people were fascinated by the 90's internet. With our utmost gratitude and respect, we update our website to the 90's version. Experience the masterpiece on M
今なぜHTTPS化なのか？インターネットの信頼性のために、技術者が知っておきたいTLSの歴史と技術背景
今なぜHTTPS化なのか？インターネットの信頼性のために、技術者が知っておきたいTLSの歴史と技術背景 WebサイトをHTTPS化する最も大きな理由は、インターネットの信頼性を維持することです。TLS技術の現状や、安全なHTTPS化に何が必要かを、ヤフー株式会社の大津繁樹氏が解説します。 「SEO対策のためには、WebサイトをHTTPS化しないといけない。」 —— そう聞かされて対応を迫られている技術者の方も多いのではないでしょうか？ 確かに、Googleは「HTTPSページが優先的にインデックスに登録されるようになります」と表明し、HTTPS化されたWebサイトが同社の検索結果で有利になると示唆しています。はたして、WebサイトのHTTPS化が必要な理由は、SEO対策だけなのでしょうか？ そして、それはGoogleという一社だけの意向で推奨されていることなのでしょうか？ こうした疑問に答
クソ酷いウェブサイト
他に何がほしいってんだ、クソ野郎 お前はウェブサイトを作ってその糞サイトを最高だと思ってるんだろ？ お前は13MBに及ぶパララックスエフェクト付きのクソ重いページがアホらしいグッドデザイン賞をとるとでも思ってるんだろ？ お前は20kgあるjQueryファイルと83個のpolyfilがIE7をまともに動作させると思ってるんだろ？ どアホ、お前は間違っている。俺様が俺の考える最強のウェブページを教えてやる。 クソ軽量でクソ速いページ 全てのデバイス幅に対応できる どんなうんこブラウザでも見た目が一緒 お前のサイトに訪れるどんな糞野郎でもアクセス可能 読みやすく伝えたいことが明確（もっともお前が5MBサイズのシャレオツなコーヒー写真ではなくて伝えたいことがあればの話だがな） よく聞け、糞野郎ども お前らはハッキリ言ってオーバー・デザインだ。この史上最強のウェブサイトを見てみやがれ。俺がごみコンテ
成功者のみが知っているたった1つの真実、5選 - もはや日記とかそういう次元ではない
少し前に、偶然web関係者っぽい人とお会いさせて頂くことがあった。僕の実力不足もあり残念ながら彼のインターネットに関する話は殆ど理解出来なかったのだけど、彼の話で1つだけ印象に残っているものがあって、それはwebで記事を書くに際しては「タイトル付けが最も重要」だと言うこと。 彼曰く、殆どのwebの読者はタイトルだけでその記事を読むか読まないか判断するのだと言う。ほお、言われてみればそうかもしれない。私自身、記事を読むかどうかは基本的にタイトルで判断しているような気もする。 そして彼によれば、本当に記事を読ませたいと思っているライターは、タイトル付けに最も時間を割くと言うのだ。そんな阿呆な話があるんだろうか？タイトルなんてたった数文字なのに。これは常人の想像を遥かに超えたプロフェッショナルの世界である。1時間で記事を書いて、3時間使ってタイトルを考える。そう、例えるならばたった5分間の挿入の
あまり知られていないCSSの12の事実(続編) | POSTD
1年以上前に、私は最初の 12 Little-known CSS Facts（あまり知られていないCSSの12の事実） を発表しました。SitePointで最も人気の高い記事となりました。この記事を書いた後も、私はCSSのアドバイスやちょっとした情報の収集を続けました。だって、大ヒット映画も必ず続編を制作するじゃないですか。 注釈 SitePoint/ Natalia Balska によるイラスト それでは、早速今年も開発のヒントになる12の事実について話しましょう。もちろん、中にはもうすでにご存じのこともあると思いますが、この中で初めて知ったという事実がありましたら、コメントでお知らせください。 1. border-radius プロパティに”スラッシュ”シンタックスを使用できる事実 このプロパティについてはSitePointに4年以上 前に書いた のですが、この機能が存在することを、未
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
あなたが教わってるそのCSSテクニックはもう古い ｜ TAKLOG
ウェブサイトの「コメント機能」が終わりを告げようとしている
第三次ブラウザ戦争がそろそろ閉幕します - latest log