こんにちは！ 最近、表示する行数を指定し、それを超える行数の場合には3点リーダ(...)を実装する機会がありました。 なぜかいつも忘れてしまうので、また調べてしまった訳なのですが、1つ疑問が浮かびました。 私：「あれ...、この-webkit-って何だっけ...？」 そこで今回は、この-webkit-とは何なのかを調べてみたので、まとめていこうと思います。 ※もし、記事への補足・改善点(修正点)などアドバイスがあれば、コメント頂けますと嬉しいです！ 事の発端！！ 冒頭でもお話ししたように、事の発端は、複数行に対応した3点リーダ(...)を実装しているときです。 ちなみに、複数行に対応した3点リーダ(...)を実装するコードは以下です。今回の主題ではないので、詳しくは紹介致しません。 display: -webkit-box; -webkit-box-orient: vertical; -w
GitHub - volfpeter/htmy: Async, pure-Python server-side rendering engine.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
The View Transitions API And Delightful UI Animations (Part 1) — Smashing Magazine
The View Transitions API is a new — but game-changing — feature that allows us to do the types of reactive state-based UI and page transitions that have traditionally been exclusive to JavaScript frameworks. In the first part of this mini two-part series, Adrian Bece thoroughly explains why we need the API and demonstrates its basic usage. Animations are an essential part of a website. They can dr
Using Claude Code: The unreasonable effectiveness of HTML | Hacker News
My concern here is that by gravitating to HTML you lose the ability for a human (you!) to easily co-author the document with the LLM. If it’s just an explainer for your consumption, that’s not a concern - but if it’s a spec sheet for something more complex, I deeply value being able to dive in and edit what is produced for me. With a HTML doc it is much harder to do that than with MD.Now of course
font-feature-settingsプロパティとは font-feature-settingsプロパティの読み方 font-feature-settingsプロパティは「フォントフィーチャーセッティングス」と読みます。 font-feature-settingsプロパティの説明 font-feature-settingsプロパティは、OpenTypeフォントの文字詰めを行う機能です。OpenTypeフォントとは、現在アドビが提供しているフォントのこと。異なるプラットフォーム（WindowsやmacOSなど）仕様が異なるシステム上で稼働するフォントとなっています。 OpenType形式の主なメリットとしては、クロスプラットフォームで活用できること（同じフォントファイルをMacintoshとWindowsの両方で利用できます）、そして豊かな言語サポートと高度なタイポグラフィを可能にする広
In my article on HTML web components, I said: But the unique power of web components (in the browser) is that they can render before JavaScript. React components cannot do this — full stop. There’s a lot in there I wanted to explain more in-depth, but I just never go to it. Then a reader kindly emailed me and asked: what do you mean? As far as I know, web components need a JS API to be defined. Ho
デベロッパー フィードバックのリクエスト: カスタマイズ可能な選択 | Blog | Chrome for Developers
<select> 要素などのフォーム コントロールのスタイル設定は、長年にわたってデベロッパーの最大の問題として報告されており、Google は解決策の開発に取り組んできました。この作業は複雑で、適切に行うまでに長い時間がかかりましたが、この機能のリリースは間近に迫っています。カスタマイズ可能なバージョンの select 要素は、WHATWG で正式にステージ 2 に移行しており、クロスブラウザでの関心が高く、Chrome Canary 130 からプロトタイプをテストできます。 ぜひお試しいただき、フィードバックをお寄せください Chrome Canary のインストールがバージョン 130 に更新され、試験運用版のウェブ プラットフォームの機能フラグがオンになっていることを確認します。このフラグを有効にするには、アドレスバーで chrome://flags に移動し、#experime
はじめに ReactをTypescriptで学んでいて いつもonclickとかのevent型の型がわからずany型を使ってとりあえずtypeエラーを回避していました。 「あっこれ調べて型指定できるんだ」と知ったので方法を共有したいと思います。 再現 この引数の型って何なのかわからない。。。 この型がわからずany型でこんな感じに解決していました。 型を指定する どうやって調べるか？ VScodeの型情報を使うことで調べることができます。 onSubmitやonChangeになにもしない関数を実装することで型推論から型情報を見れます。 eをホバーすると こちらの型情報が型になります。 型を指定しちゃいましょう。 React.を前につけて引数に型を指定。 同じようにonChangeも引数に型を指定。 関数をもとに戻して ハイ！きちんと型を指定することができました。 まとめ 「型推論を使うこん
HTMLでホームページを作成するにはどうすればいいんだろう？ ホームページを作るのにパソコン以外で必要なものってある？ 国内におけるIT人材不足の深刻化を背景に、ITエンジニアやWebデザイナーといったITスキルがある人材の需要は増し、他の職種に比べ高い報酬を設けるケースが増えてきました。 そんななか、転職や副業での収入獲得などに活かすため、ホームページの制作スキルを養おうと考えている人は多いですよね。 ただ、一から自力でホームページを作りたいと考えているものの、具体的な方法がわからない人もいるでしょう。実のところHTMLを活用したホームページは60分もあれば作成できるのです。 この記事では基本的な流れや必要なものも踏まえ、HTMLを用いたホームページの作り方を、ステップ形式で解説します。作成時のポイントや作成後に習得したいおすすめ言語も紹介するので、ぜひ参考にしてください。
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
HTML にグローバル属性として headingoffset と headingreset 属性を追加する議論が進んでいます。これが実現すれば見出し要素だけでなく、その祖先要素でも見出しレベルを調整できることになります。 Consider adding a headinglevelstart attribute · Issue #5033 · whatwg/html implement headingoffset & headingreset attributes by keithamus · Pull Request #11086 · whatwg/html 一方、そうなると現状のように <hn> = 見出しレベル N とは限らなくなり、「見出しレベル N の要素を選択する」ことが困難になるため、CSS 側でも :heading および :heading() 疑似クラスの導入が画策されて
この記事は HTML アドベントカレンダーの 20 日目の分、兼 JavaScript アドベントカレンダーの 20 日目の分です。 HTML のタグといえば、要素の開始位置、終了位置、そして属性を指定する記述のことですね。開始タグは小なり記号 (<) の後に要素名が続きます。しかしながら、タグに既述した名前とは別の名前の要素が生成される場合があります。 以下の JavaScript コードを実行すると、JavaScript コンソールには (IMAGE ではなく) IMG と出力されます。タグに記述された名前は image なのに、img 要素が生成されているのです。 const div = document.createElement('div'); div.innerHTML = '<image src="" alt="">'; console.log(div.firstChild.
Using Claude Code: The Unreasonable Effectiveness of HTML
Sponsored by: Datadog — Ship reliable AI faster with LLM Observability. Read the best practices guide Using Claude Code: The Unreasonable Effectiveness of HTML. Thought-provoking piece by Thariq Shihipar (on the Claude Code team at Anthropic) advocating for HTML over Markdown as an output format to request from Claude. The article is crammed with interesting examples (collected on this site) and p
Get All That Network Activity Under Control with Priority Hints
Get All That Network Activity Under Control with Priority Hints The browser is very good at prioritizing resources requests on its own. But it's not always great. Priority hints makes it easy to provide explicit instructions as to how and in what network activity occurs. Open up the browser's network tab and you'll see a lot of activity. Assets are being downloaded, information's being submitted,
GIFのようなアニメーションであれば<img>を用いて表示させられますが、MP4などの動画は<video>に埋め込んで利用してください。 IE非対応のサービスでWebPへの変換がデメリットに感じなければWebPを主な画像形式として利用することがおすすめです。WebPはその高い圧縮率から画像をより小さいサイズで扱うことができます。 ロゴやアイコンなどのシンプルな画像の場合はSVGを用いることがおすすめです。シンプルな画像の場合はファイルサイズの面で有利ですし、これらの画像を拡大縮小しても画質が荒くならないです。シンプルな画像というのは図形としてシンプルであることを指していて、文字などを含む画像はここで言うシンプルな画像ではありません。文字などが含まれている場合、SVGでは一見簡易な画像でもファイルサイズが想像よりも大きくなることに注意してください。 画像形式を適切に選ぶだけではなく、選択した
Customizable Select Element (Explainer)Table of ContentsSection titled Table%20of%20ContentsBackgroundOpting in to the new behaviorTesting out the customizable select elementHTML parser changesUse casesCustomizing basic stylesRich content in <option>sReplacing the buttonRendering the <option> differently in the buttonPutting custom content in the listboxAnimationsSplit buttonsButton behaviorThe se
With the new popover attribute in HTML, we can put elements in the top layer and allow them to disappear with ‘light dismiss’. This attribute adds behaviour, not semantics: you're supposed to add your own role when it makes sense. In this post, we'll look at different roles that could make sense for your popover-behaved elements. See also: Hidde's talk on popovers, and other posts about popover ac
GitHub - stephannv/blueprint: Write HTML in plain Crystal
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
概要 見出し要素とセクショニングコンテンツについて細かい部分を毎回忘れるので記憶定着のためにまとめる。 それとまた忘れても大丈夫なように標準へのリンク集の役割も兼ねて。 「セクショニングコンテンツとセクショニングルートの要素どれがどれだっけ」 「h1ってどこで使って良いんだっけ？」 「h1って一つのHTML文書の中に複数存在してても良いの？」 「h1がないのにh2使って良いの？」 みたいに思ったら読む文章です。 ただし、再確認の趣旨が強いため、わかる人にしかわからない文章になってるかも。 参考 参考にするのはもちろんこちらのHTML5 Living Standard。 英語：HTML Standard - WhatWG 日本語：HTML Standard 日本語訳 ありがたいことに日本語訳をされてる方がいるので利用させていただきます この記事執筆時点（2020/09/12）で（英語/日本語
Jina AIからHTMLから Markdown コンテンツへの変換に特化したJina Reader-LMが公表されていたので、ざっと試してみました。 モデル概要ノイズも含む生HTMLから、Markdownへの変換に特化した小型言語モデル(SLM) モデルのバリエーション reader-lm-0.5b と1.54Bのreader-lm-1.5b 多言語、長文脈サポート（256Kトークン） コンパクトなサイズにもかかわらず、このタスクで最先端のパフォーマンスを実現 ライセンスはCreative Commons Attribution Non Commercial 4.0で非営利利用に限定 Colabサンプルを試してみるGoogle Colabノートブックでサンプル用意されているので早速試してみます。実行環境は無料のT4 GPUです。
h1タグとは？正しい使い方とSEOに理想的な設定方法を解説
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. h1タグとは、ページの見出しを表す「hタグ」の中で最も上位のタグである。ページの最初に一番大きな文字で配置され、ページのタイトルを意味することも多い。 h1は最上位の見出しであり、ユーザーと検索エンジンが「ページに何が書かれているか」を把握するために最も重要なテキストと言える。 <h1>ページのタイトル</h1> <h2>1. 最初の大見出し</h2> <h3>1-1. 中見出し</h3> <h3>1-2. 中見出し</h3> <h3>1-3. 中見出し</h3> <h2>2. 二番目の大見出し</h2> <h3>2-1. 中見出し</h3> <h3>2-2. 中見出し</h3> <h2>3. 三番目の大見出し</h2> <h2>まとめ<
title: Exploring the DOMPurify library: Bypasses and Fixes (1/2) date: Nov 17, 2024 tags: Article Web mXSS 📜 Introduction 🔍 How does client-side HTML sanitizer works? ❓ Why are mutation XSS (mXSS) possible? ▶️ DOMPurify 3.1.0 bypass (found by @IceFont 👑) Node flattening HTML Parsing states Proof Of Concept ⏩ DOMPurify 3.1.1 bypass DOMPurify 3.1.0 fix DOM Clobbering issue Proof Of Concept ⏭️ DOM
はじめに 技術情報を色々見てる中で、ちょこちょこ以下の「DuckDB」をの情報を見かけます。 ●DuckDB – An in-process SQL OLAP database management system https://duckdb.org/ また DuckDB関連では、以下の「DuckDB-Wasm」もわりと情報を見かける感じがして、こちらのほうがより気になっていました。 ●DuckDB Wasm – DuckDB https://duckdb.org/docs/stable/clients/wasm/overview.html 今回、DuckDB-Wasm のほうを試してみます。 DuckDB-Wasm が気になったきっかけ DuckDB-Wasm の情報をいくつか見かける中、特に以下の記事に関するものが気になりました。 ●ブラウザでオフライン日本語インスタント全文検索を実現
Rails: ERBファイルで＜%==を使うときはセキュリティに注意（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Beware of <%== in your erb files - Andy Croll 原文公開日: 2023/07/17 原著者: Andy Croll 日本語タイトルは内容に即したものにしました。 参考: §7.3 クロスサイトスクリプティング（XSS） -- Rails セキュリティガイド - Railsガイド Rails: ERBファイルで<%==を使うときはセキュリティに注意（翻訳） クロスサイトスクリプティング（XSS）は、他のユーザーが閲覧するWebページに対して悪意のあるスクリプトを注入可能になる一般的な脆弱性です。こうしたスクリプトは、個人情報の抜き取りやページコンテンツの操作といった悪意のある操作を攻撃者に代わって実行するのに使われる可能性があります。 Railsのようなフレームワークを使うメリットのひと
HTMLを詳しく - Qiita
HTMLについて勉強したのでアウトプットもかねて説明させていただきます。 HTMLとは HTMLとはwebページの構造とコンテンツを定義するためのマークアップ言語です。 1 HTMLの基本構造 HTML文書は通常以下のような基本構造を持ちます： <!DOCTYPE html> <!-- 文書のタイプを定義 --> <html> <head> <meta charset="UTF-8"> <!-- 文書の文字エンコーディングを指定 --> <title>ページのタイトル</title> <!-- ページのタイトルを指定 --> </head> <body> <!-- ここにページのコンテンツを記述 --> </body> </html>
download（知名度が低いウェブ標準ひとりAdvent Calendar 2021 – 08日目） | Ginpen.com
知名度が低いウェブ標準ひとり Advent Calendar 2021 – 08 日目 今日は <a> で使える download 属性です。 <a>: アンカー要素 – HTML: HyperText Markup Language | MDN デモ：https://codepen.io/ginpei/pen/rNGeqry 基本的な使い方 通常 <a> のリンクをクリックすると画面遷移しますが download 属性を与えるとファイルをダウンロードするようになります。 属性の値は空か、ダウンロードするファイル名の初期値を指定することもできます。 利用可能なもの、不可能なもの 何でもダウンロードさせられるわけじゃなくて、ちょっと制限があります。 同一オリジンの URL blob: な URL data: な URL 他人のところのリソースをダウンロードさせることはできません。 使いどころ
One of the premises of the new popover attribute is that it comes with general accessibility considerations “built in”. What does “built in accessibility” actually mean for browsers that support popover? See also: Scott's post Popping preconceived popover ponderings and Hidde's talk on popovers, and other posts about popover semantics, positioning popovers and the difference with dialogs and other
GitHub - vuepress/core: Vue-Powered Static Site Generator
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
公開：2020年5月12日 自作したホームページを無料レンタルサーバーの XREA を使って、ネットで公開しよう！ ウェブサイトはHTML（ウェブサイトを表現するための言語）で作ることができます。基本的な書き方はかんたんです。初心者の方ならまず書店や図書館へ行ってご自身で読みやすいHTML入門書を探して読んでみることから始めましょう。 できるだけやさしそうな本から始めるのが挫折しないコツです！ ウェブサイトを公開するには、ウェブサイトのデータを用意して、そのデータを置いておくサーバーと、インターネットで公開するためのドメインが必要です。 ウェブサイトのデータを準備 この記事のために、以下のサンプルデータを準備しました。これらのデータを XREA サーバーへアップロードしてウェブサイトとして公開する手順を説明していきます（公開したウェブサイト）。 index.html css（ディレクトリ）
CSS だけでコンテンツをフィルタリング CSS のみを使ってコンテンツをフィルタリングする例です。 以下のようにラジオボタンを選択すると、ラベルに表示された内容と一致するコンテンツを表示します。 以下の例では表示するコンテンツは単に div 要素にスタイルを設定したものですが、同様の方法で画像ギャラリーやカードなどをフィルタリングすることができます。 サンプル（別ページで開く） 以下が上記の例の HTML のマークアップです。 フィルタのラジオボタンを１つのグループとして認識させるため name 属性に共通の名前（categories）を各 input 要素に指定します。 ラベルをクリックしてもラジオボタンが選択されるように（明示的なラベル付け）するため、label 要素の for 属性にラジオボタンの id 属性と同じ値を指定します。 初期状態で「全て（All）」のラジオボタンが選択さ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSでたまに見かける、-webkit-って何だろう...？
CSSで文字詰めができる【font-feature-settings】を使用してサイトの見栄えを良くしよう！
HTML Web Components: An Example
いつもHTMLのevent型がわからず、any型を使って逃げていた。 - Qiita
HTMLでホームページを作成する6STEP！60分でできる簡単な作り方 | 侍エンジニアブログ
GitHub - ku-suke/flightbooks
`headingoffset` と `headingreset` 属性による見出しレベルの調整
HTML の img 要素と image タグ: Days on the Moon
imgタグで行うウェブサイトの最適化 - Qiita
Customizable Select Element (Explainer) | Open UI
Semantics and the popover attribute: which role to use when?
見出し要素（h1~h6）とセクショニングコンテンツの関係 - Qiita
HTMLから Markdown コンテンツへの変換に特化したJina Reader-LMを試す｜はまち
Exploring the DOMPurify library: Bypasses and Fixes (1/2). Tags:Article - Article - Web - mXSS
DuckDB-Wasm の HTMLファイルのみで試せる公式サンプルを書きかえたりもして試す - Qiita
On popover accessibility: what the browser does and doesn’t do
HTMLサイトを無料レンタルサーバーのXREAで公開する方法｜XREAとコアサーバーの使い方
CSS でフィルタリング（絞り込み） JavaScript でも
sfujioka1.hatenablog.com
posfie.com
mahiro0.vp.bex.jp
www.huffingtonpost.jp
www.fashion-press.net
www.vogue.co.jp