もうjsなんていらない！世界で流行っているHTMXについてまとめてみた - Qiita

2024/01/18 313 users Qiita htmx SSE WebSocket DOM

HTMXとは HTMXは、JavaScript を記述せずに、Ajax通信や高度なUXを実現できるライブラリ。 軽量 で 高速 で、既存のサーバーサイドのフレームワークとシームレスなやり取りができる。また、AJAX通信の発火、フォームの送信処理、DOMの更新などを既存のHTML要素を拡張するだけで可能とする。WebSocketやSSEにも対応してい... 続きを読む

strong, b, em, i, u, …、違いがわからんHTML要素の仕様を調べて「新しい見た目」を考えてみたら理解が深まった

2023/08/20 186 users strong 太字 イタリック体 強調 HTML

「strongもbも太字になるのにどう違うんだ…？」 「emもiもイタリック体になるけど、そもそもイタリック体ってなんなんだよ…？」 「strongの重要と、emの強調って何が違うんだ…？」 などなど、使い方がよくわからなくなりがちな HTML 要素（主にテキストレベルセマンティックスに分類される要素）の違いを調べてみました... 続きを読む

HTML要素をグラフィカルにアニメーション化できるJavaScriptライブラリ「Theatre.js」を使ってみた！ - paiza開発日誌

2022/11/09 135 users グラフィカル paiza開発日誌 アニメーション化 操作 特徴

どうも、まさとらん（@0310lan）です！ 今回は、HTML要素を簡単にアニメーション化できるJavaScriptライブラリをご紹介します。 初期設定はJavaScriptで書きますが、実際のアニメーション作りに関してはタイムラインエディタを利用した直感的な操作で実現しているのが大きな特徴です。ちょっとしたインタラクションから3... 続きを読む

JavaScriptで任意のHTML要素をPicture-in-Pictureする

2021/04/29 363 users pip 外側 JavaScript ウィンドウ デスクトップ

みなさんはPicture-in-Picture(PiP)という機能を使ったことがありますか。PiPは動画コンテンツなどを浮遊する小窓に表示する機能です。小窓はウィンドウの外側を自由に移動できます。 デスクトップが賑やかになりがちなPCでもPiPは大活躍なのですが、特にスマートフォンにおいては数少ない「ウィンドウ」機能になります... 続きを読む

CSSだけでHTMLは一切無し！Webページを構成するすべてのマークアップをCSSで構築するフレームワーク -CJSS | コリス

2019/08/02 116 users コリス CSSベース CSSファイル body内 CSS

当ブログで「CSSで実装できる」という言葉を使いますが、厳密に言うとHTMLが必要です。しかし、今回紹介するのは、HTMLのマークアップも、データも、そしてJavaScriptもCSSファイルに記述するCSSベースのフレームワークを紹介します。 かなり特殊なフレームワークです。body内にHTML要素を一切記述したくない時にいいか... 続きを読む

1クリックでHTML要素の構造を可視化し、セマンティック要素が正しく実装されているか検証できる -Trashy.css | コリス

2018/09/20 345 users コリス NAV header article main

Webページに実装されているHTML要素の構造を可視化し、header, nav, main, articleなどセマンティック要素が正しく実装されているか検証できるスタイルシートを紹介します。 デバッグ機能も備えており、不正なマークアップや問題のあるマークアップを表示することもできます。 Trashy.css Trashy.css -GitHub Trashy.css... 続きを読む

Chrome拡張「Scraper」でWEBページ情報を手軽にスクレイピングしてデータ化する方法

2015/05/04 1020 users Scraper スクレイピング スク Chrome拡張 特定

Scraperとは Scraperは、WEBページ上の規則性のあるデータを手軽に取得することができるChrome拡張です。 例えば、テーブルデータや、Aリンクデータ、のような特定のHTML要素に入っている情報を、片っ端から取得してテーブルデータ化することができます。 また、その取得したデータをワンクリックでGoogleスプレットシートに保存することができます。 テーブルデータのスクレイピングは以下... 続きを読む

たった一行でさまざまな要素をレスポンシブ対応にするスタイルシート -Fluidity | コリス

2014/03/25 676 users コリス SVG 一行 レスポンシブ対応 iframe

画像やテーブル、地図などを配置するiframe, video, canvas, svgなど、主にボックス系のHTML要素をシンプルなコードでレスポンシブ対応にするスタイルシートを紹介します。 外部ファイルとして使用するのでそれでも一行ですが、中身も一行（115文字）の超軽量スタイルシートです。 Fluidity Fluidity -GitHub Fluidityのデモ Fluidityの使い方 F... 続きを読む

スマホサイトの作り方で、あんまり書かれてないことを書いてみた - Kaleidoscope

2011/01/26 619 users iPhone Kaleidoscope 縦スクロール 内側

スマホサイトの作り方関連のブログとかを見てて、viewport周りの基本的な設定は書かれているのですが、個人的に重要だと思うポイントが、なかなかどなたも書いてらっしゃらないような気がするので、まとめてみました。それは、とにかく内側のHTML要素をハミ出さないように作るどうしてか？ふつうは、スマホサイトというのは縦スクロールしかさせたくないですよね。例えば、iPhoneで言うPortrait（縦）表... 続きを読む

今更聞けないcanvasの基礎の基礎 : tech.kayac.com - KAYAC engineers' blog

2010/04/26 433 users canvas KAYAC engineers nagata

はじめまして。新入りのnagataです。 入社式で自転車乗ってた野郎です。 先輩方から「ブログ、書いてね！」とのお達しがあったので、 日報で書いたらウケがよさげだったcanvasのことについて書いてみようと思います。 ※各種サンプルはMac上のSafari4.05、Firefox3.6.3、Chrome5.0で動作を確認しています。 canvasってなんぞ？ 図を書き込めるhtml要素です。 Op... 続きを読む

WEB製作者の為のSEOチートシート[to-R]SEOmozで配布されているSEOチートシートが素敵ですので日本語にしてみました

2008/05/02 999 users SEOmoz レンタルサーバー to-R title要素

WEB製作者の為のSEOチートシート 【PR】初心者でも安心なレンタルサーバー。２６３円から使えます。 【PR】HP登録でSEO対策！アクセスアップにコチラ！ SEOmozで配布されているSEOチートシートが素敵ですので日本語にしてみました。 重要なHTML要素 title要素にキーワードを含みましょう。 h1,h2,h3要素にキーワードを含みましょう。 b要素、strong要素でキーワードを包み... 続きを読む

JavaScriptで図形を描くHTML要素「Canvas」の実例 - GIGAZINE

2007/01/11 303 users GIGAZINE canvas Ajax Dashboard

JavaScriptを使ったAJAXが昨年前半まで大いに注目を集めていましたが、その根本になったJavaScript自体は古くからあり、AJAXというのは新しい応用法みたいな側面が非常に強かったのが特徴です。 しかし今回紹介する「Canvas」要素はそういうのとは明らかに一線を画しています。グラフの描画、写真合成、アニメーションなどが可能で、実際にはMac OS X のDashboardに初導入さ... 続きを読む

html2regexp - Regular Expression Generator for HTML Element

2006/10/18 113 users HTML Element Japanese 自動生成 動作例

はじめに デモ ダウンロード インストール English / Japanese はじめに html2regexpとは html2regexpはHTML要素を抽出する正規表現を自動生成するツールです。 抽出対象のHTML要素を指定したHTMLファイルを入力すると、それらのHTML要素のみを全て抽出する正規表現を出力します。 動作例 次のHTMLファイルをhtml2regexpに入力します。 このと... 続きを読む

Javascriptで指定のHTML要素を動的に角丸デザインにする方法:phpspot開発日誌

2006/03/15 253 users JavaScript phpspot開発日誌 角丸デザイン

Nifty Corners This is the original article. The technique has been improved with better browser support and a lot of new features. The new article has been published on the 6th of April 2005. Javascri... 続きを読む