令和のHTML / CSS / JavaScriptの書き方まとめ

2024/05/13 1152 users CSS 令和 JavaScript 書き方まとめ

Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コ... 続きを読む

Is Secure Cookie secure? - CookieのSecure属性・__Host-プレフィックス・HSTSを正しく理解しよう - Flatt Security Blog

2024/05/13 12 users SameSite doc secure okazu_dm 前回

こんにちは、 @okazu_dm です。 前回の記事 に引き続きCookie関連のセキュリティに関する記事となります。 今回は、Cookieの仕様を定めたRFC6265(https://datatracker.ietf.org/doc/html/rfc6265)自体に含まれるSecure属性の問題点と、その対策について紹介していきます。 CookieのSecure属性自体は前回紹介したSameSite... 続きを読む

これは便利！ HTMLはdiv要素一つ、あとはCSSをコピペするだけでさまざまな形状を簡単に実装できる -CSS Shape

2024/05/08 136 users CSS 形状 div img div要素一つ

HTMLはdiv要素一つだけ、あとはCSSをコピペするだけでさまざまな形状のシェイプを実装できるコードをまとめたCSS Shapeを紹介します。 さまざまな形状はdivだけでなく、imgで画像にも実装することもできます。 The Ultimate CSS Shapes Collection The Ultimate CSS Shapes Collectionを作成したのは以前紹介したCSS Loa... 続きを読む

HTMLを直接読み書きせず、スクリーンリーダーも使わずに、アクセシビリティを向上させられないだろうか（と思ってブラウザ拡張を作ってる）

2024/05/07 10 users アクセシビリティ 障壁 Webアクセシビリティ ブラウザ拡張

HTMLを直接読み書きせず、スクリーンリーダーも使わずに、アクセシビリティを向上させられないだろうか（と思ってブラウザ拡張を作ってる） これまでの何年間か、Webアクセシビリティまわりのことをやってきた中で、「Webアクセシビリティに取り組む」上でいろいろな障壁を感じてきました。 「なぜWebアクセシビリティを... 続きを読む

「Linux」のセキュリティ--独自CVE公開とサポート期間短縮の影響

2024/04/30 7 users Linux カーネル開発 動向 PDF セキュリティ

印刷する メールで送る テキスト HTML 電子書籍 PDF ダウンロード テキスト 電子書籍 PDF クリップした記事をMyページから読むことができます 「Linux」カーネル開発の動向を知りたければ、「Linux Kernel Mailing List」を購読するといい。Linuxカーネルの実状を深いレベルで知りたいが、細かな部分まですべて追跡した... 続きを読む

Twilogが有料プラン導入予定！自動更新は有料機能になる他、いいねの取り込みなど新機能を構想中

2024/04/25 18 users twilog main 手動 プレスリリース イイネ

Twilog公式 @twilog_official 【お知らせ】 API制限回避のため、自動更新を停止します。引き続き手動での更新（ツイート取得）は可能となっており、自動更新は5月1日導入の有料プランにて対応する予定です。 詳細はプレスリリースをご確認ください。 prtimes.jp/main/html/rd/p… 引き続きTwilogをよろしくお願いいたしま... 続きを読む

「帰蝶呼びは知識マウント」ってマジ！？

2024/04/24 165 users 帰蝶 知識マウント 言い掛かり 書状 entry

“信長を気にかける貴重な資料” 義父 斎藤道三の書状を発見 | NHK https://b.hatena.ne.jp/entry/s/www3.nhk.or.jp/news/html/20240424/k10014431231000.html ブコメに「なんじゃこりゃ？」ってレベルの言い掛かりがあったので migurin 「帰蝶と書きなおした！知識マウント欲が溢れ出ていていとおかし！」migurin 素直に... 続きを読む

TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線 (Svelte)

2024/04/24 14 users Svelte コンパイラ フレームワーク プレゼンテーション

このPDFは、Svelteというフロントエンド開発フレームワークに関する最新情報を提供するプレゼンテーションの内容をまとめたものです。主な内容は以下の通りです： 【Svelteとは】 HTMLのスーパーセットを使った、コンパイラを活用するフレームワークで、軽量なランタイムをエンドユーザーに提供します。 【チームの強化... 続きを読む

ゼロトラストを誤解してほしくない--提唱者が説く正しい定義

2024/04/24 15 users 正しい定義 提唱者 ゼロトラスト 警鐘 定義

印刷する メールで送る テキスト HTML 電子書籍 PDF ダウンロード テキスト 電子書籍 PDF クリップした記事をMyページから読むことができます 近年のサイバーセキュリティトレンドに「ゼロトラスト」がある。その提唱者で知られるJohn Kindervag氏は、「誤解されている」と警鐘を鳴らす。同氏がゼロトラスト本来の定義を... 続きを読む

2024年版最近の実装に合わせた、HTMLでWebページを実装するための必要最小限をまとめたテンプレート一式

2024/04/23 14 users テンプレート一式 実装 必要最小限 Boilerplate

Webページを作成する時に役立つ、HTMLをはじめとする必要最小限のファイルをまとめたシンプルな基本テンプレート一式を紹介します。 最新版は、最近の実装に合わせた設計にアップデートされました。 HTML5 Boilerplate -GitHub HTML5 Boilerplateの特徴 HTMLの基本テンプレート HTML5 Boilerplateの使い方 HTML5 Boilerp... 続きを読む

2024年版 HTMLで作るフォームバリデーション - ICS MEDIA

2024/04/19 257 users フォームバリデーション ユーザビリティ ICS MEDIA

すべてのフォームが要件を満たしている場合のみ、送信できます。 フォームバリデーションのデザイン 上記の例では最低限のHTMLのみ実装されています。しかし、実際のサイトではバリデーションエラーをユーザーにフィードバックする必要があります。よりユーザビリティの高いフォームでは、以下の点を検討する必要があり... 続きを読む

IPAの登氏に聞く、「分散型クラウド基盤ソフトを作れるクラウド人材育成」

2024/04/19 188 users IPA 産業サイバーセキュリティセンター 室長 VPNソフト

印刷する メールで送る テキスト HTML 電子書籍 PDF ダウンロード テキスト 電子書籍 PDF クリップした記事をMyページから読むことができます 「日本にもチャンスがある」。VPNソフトなどを開発してきた情報処理推進機構（IPA） 産業サイバーセキュリティセンター サイバー技術研究室 室長の登大遊氏は、分散型クラウド... 続きを読む

【HTML】dl, dt, ddで組みたくなる表、tableにするのがいいかもね（スクリーンリーダーと検索エンジンのために）

2024/04/07 8 users dictionary Object メタデータ map 議論

詳しくは以降で説明します。 想定する表の内容 この記事の議論では、名前と値の組が複数並んでいる、メタデータの表を想定します。 プログラミング言語でいうところの、連想配列 (Map, Dictionary, JS では Object) の構造に相当します。 具体的には以下のようなものです。 会社概要（「会社名：〇〇、所在地：〇〇、資... 続きを読む

一人暮らしの元大学教授が自宅で倒れて病院で亡くなった→近所に親族がいるのに無縁仏扱いになり共同墓地に放り込まれた現代のホラー

2024/04/05 94 users 無縁仏 火葬 Shin Hori ホラー NEWS

Shin Hori @ShinHori1 ホームレスではなく元大学教授だった人が自宅で倒れて救急車を呼んで搬送され病院で亡くなったら、無縁仏扱いになって共同墓地に放り込まれて親族もわからなくなった…という現代のホラー 「誰が火葬のOK出したんや」兄はどこへ消えたのか？ | www3.nhk.or.jp/news/html/2024… 2024-04-04 23:57:32 ... 続きを読む

タブやアコーディオンの非表示コンテンツにはhidden="until-found"を使うべし ｜ TAKLOG

2024/04/02 12 users Hidden None TAKLOG display タブ

タブやアコーディオンの非表示コンテンツにはdisplay:noneがよく用いられますが、hidden="until-found"を利用するほうがメリットがあります。 hidden=“until-found”で非表示にしたコンテンツはページ内検索でアクセスできるhidden="until-found"はhidden属性に新たに追加された属性値です。 hidden - HTML: ハイパーテキ... 続きを読む

RFC の URL はどのドメインで貼るのが良いか | blog.jxck.io

2024/03/27 153 users RFC doc www.rfc-editor.org 結論

Intro IETF の RFC は、いくつかの場所で同じものが公開されている。 どの URL が最適なのか、という話。 結論は www.rfc-editor.org だ。 RFC Hosting Site 例えば RFC 9110 - HTTP Semantics で言うと、以下の 4 つがある。 https://tools.ietf.org/html/rfc9110 https://datatracker.ietf.org/doc/html/rfc9110 https... 続きを読む

HTMLにカスタム要素を実現する標準技術Web Components。事例をもとに技術特徴を解説 | レバテックラボ（レバテックLAB）

2024/03/21 24 users レバテックラボ レバテックLAB テクニカルライター 事例

HTMLにカスタム要素を実現する標準技術Web Components。事例をもとに技術特徴を解説 2024年3月21日 執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に... 続きを読む

「Copilot Pro」と「ChatGPT Plus」、月額20ドル払うとすればどっち？

2024/03/21 12 users Copilot Pro ChatGPT Plus PDF

印刷する メールで送る テキスト HTML 電子書籍 PDF ダウンロード テキスト 電子書籍 PDF クリップした記事をMyページから読むことができます Microsoftの「Copilot」とOpenAIの「ChatGPT」にはどちらも無料版と有料版があり、月額20ドルの「Copilot Pro」や「ChatGPT Plus」に加入すれば、無料版にはない高度なAIの機能... 続きを読む

シスコ、Splunk買収を完了--セキュリティやクラウドにオブザーバビリティを統合

2024/03/19 10 users オブザーバビリティ Splunk シスコ Cisco 買収

印刷する メールで送る テキスト HTML 電子書籍 PDF ダウンロード テキスト 電子書籍 PDF クリップした記事をMyページから読むことができます Cisco Systemsは米国時間3月18日、Splunkの買収を完了したと発表した。今後はCiscoのAIやセキュリティ、クラウド、ネットワークとSplunkのオブザーバビリティ（可観測性）の統... 続きを読む

Tailwind CSSにおけるHTMLのコンポーネント化とCSSのコンポーネント化

2024/03/18 7 users CSS Tailwind CSS コンポーネント化 Alt

Tailwind CSSにおいて、スタイルの組み合わせを抽象化したいと考えたとき、対処としてはいくつかの方法が考えられる。 もっとも一般的なのは、コンポーネントやパーシャルとして、クラス属性値とHTMLをセットで抽出する方法。 <template> <div> <img class="rounded" :src="img" :alt="imgAlt" /> <div class="mt-2"> <d... 続きを読む

半角スペースを表示したいなら&nbsp;ではなくwhite-space: pre;を使いましょうという話 - Qiita

2024/03/17 7 users 特殊文字 Qiita pre white-space 複数

はじめに 連続する複数の半角スペースは1つにまとめられたり、先頭末尾の半角スペースは省略される これははじめてHTMLに触れた人が戸惑う部分だと思います。 ではその半角スペース分の空白をどのようにして表示すればいいのかと調べれば、&nbsp;などの特殊文字を紹介する記事が数多くヒットします。 HTMLでの半角スペー... 続きを読む

天王寺動物園の動物が逃げた想定の訓練、クマやライオンが関節技を仕掛けてくる

2024/03/17 23 users ライオン クマ 捕獲 nhk_video NEWS

NHKニュース @nhk_news 大地震の影響でホワイトタイガーが逃げ出したという想定で、捕獲の手順を確認する訓練が埼玉県宮代町の動物園で行われました www3.nhk.or.jp/news/html/2024… #nhk_video pic.twitter.com/W2hlWDZIjV 2024-03-13 17:47:46 続きを読む

マイクロソフト、「Copilot」無料版にも「GPT-4 Turbo」を搭載

2024/03/14 26 users LLM COPILOT chatgpt 脚注機能 PDF

印刷する メールで送る テキスト HTML 電子書籍 PDF ダウンロード テキスト 電子書籍 PDF クリップした記事をMyページから読むことができます 「Microsoft Copilot」の無料版は、より高度な大規模言語モデル（LLM）や、脚注機能、インターネットへのアクセス機能といった、「ChatGPT」の無料版に備わっていない数多くの... 続きを読む

【令和最新版】Google Fontsの読み込み最適化の結論 ｜ TAKLOG

2024/03/12 12 users TAKLOG CLS href link rel 結論

当ブログで行ったGoogle Fontsの読み込み最適化を紹介します。CLSを大幅に改善できたので個人的にはこれが最適解だと思っています。 結論いきなり結論ですが、次のHTMLのhrefの値を使用しているGoogle Fontsのそれに変更し、head内で読み込んでください。 <link rel="preconnect" href="https://fonts.googleapis.com" /... 続きを読む

Go 言語だって minify されたい！「mingo」の紹介

2024/03/11 18 users CSS DOCTYPE html フロントエンド 速度 web

HTML/CSS や JavaScript など、 Web フロントエンドにおいては配信時にファイルを minify することが一般的です。 ファイルを minify する = ファイルサイズを小さくすることでネットワークの通信量を削減し、結果として Web ページの読み込み速度を向上させることができます。 <!-- 例えばこれが --> <!DOCTYPE html> <... 続きを読む