GIF Manga Reader by AC-bu
How to useClick on your desired button and copy the HTML & CSS.CodeGitHubDownloadNew?Learn HTML & CSSCSS CheatsheetCSS Scan extension
alt属性について調べる機会があり、自分なりにまとめてみました。 間違い・ご指摘などあればご教示いただければと思います。 alt属性に結局何入れればいいのか問題 alt属性は入れるべきというのは聞いたことあるけど、実際どのように入れればいいのかわからないという方は多いと思います。明確な決まりがなく、適切ではない文言を入れたとしても目に見えてエラーが出るわけでもないため、曖昧な理解になりがちだと思います。 W3C WAIというWEBのアクセシビリティに関してのガイドラインの作成などをしている組織が「画像チュートリアル」というものを公開しています。「画像チュートリアル」ではalt属性の指定の仕方、具体的な事例や考え方が記載されています。このガイドを基準にしてalt属性を決めると、無駄に悩むことが減り、なぜこのような指定にしているかという根拠や参照元としての説得力もあるので、非常に有用だと思いま
ダウンロードはこちら 「HTMLはプログラミング言語か否か」という議論が、開発者の間でしばしば生じる。辞書的な定義から、HTMLはプログラミング言語ではないと主張する人がいる。一方で実質的な役割を基に、HTMLをプログラミング言語に分類する考え方もある。 詰まるところHTMLはプログラミング言語なのか、そうではないのか。そもそも、この議論に意味はあるのか。本資料は、そうした疑問への答えと共に、HTMLが開発者にもたらすメリットを紹介する。 中身を読むには、「中身を読む」ボタンを押して無料ブックレットをダウンロードしてください。 連載:命令型プログラミングと宣言型プログラミングを比較する Copyright © ITmedia, Inc. All Rights Reserved.
The WHATWG's living standards incorporate new features on an ongoing basis. The default process is to propose an idea on the relevant standard's issue tracker, hash out the details and gather implementer interest, and then work together with the editors to land a pull request. However, we've found that for larger features, or for community members less experienced with standards contributions, som
ちょっと良いUIおれおれAdvent Calendar 2024 – 11日目 普通にフォームをマークアップすれば Enter キーで送信できるようになるんですが、なんかそうなってない場合があります。しときましょう。 デモ: https://codepen.io/ginpei/pen/MYgjgXP <form> で括る Enter キーで送れるようにするには、単に <form> 要素で括るだけです。簡単です。やらない理由がない。 JavaScript からは submit イベントを使う ボタンのクリックではなくフォーム送信 submit のイベントを使います。ボタンはイベント管理する必要ありません。 JS で全部管理する場合は HTML レベルでの送信を event.preventDefault() で止めます。 逆に送信しないボタンは type="button" にする フォーム内の
この記事は HTML アドベントカレンダーの 14 日目の分です。 HTML の属性値のパース規則は、(一般的な要素の内容として出現する) テキストのパース規則とは少し異なります。 わかりやすいところでは、属性値においては小なり記号 (<) をそのまま書けます。以下の HTML コードにおいて、span 要素の title 属性の値も内容のテキストも結果的には " < " という値になりますが、テキストに関しては内部的にパースエラー (invalid-first-character-of-tag-name; タグの名前の 1 文字目が無効) が発生しています。 <span title=" < "> < </span> 文字参照の扱いにも差異があります。以下のように amp という文字参照の名前の後に ASCII の英数字が続く場合、属性値においては "&m" という値に解釈されます。
Can it be done? This plucky front-end developer intends to find out. We looked at the Popover API and how it’s made it’s way across all browsers already just last week. One of the things I should have done is looked at the accessibility considerations more closely. Thanks to Melanie Sumner there is a great explainer with demos. I tried to adhere to the points made in there the best I could while m
HyperFrames は、HTML をベースに動画コンポジションを記述し、CLI で preview / render を回せる OSS の動画フレームワークです。公式ドキュメントでは、HTML-native、agent-friendly、deterministic rendering が中核コンセプトとして打ち出されています。 HyperFrames を調べてみて、もっとも重要だった論点はひとつだけでした。 HyperFrames の価値は、HTML で動画を作れることではありません。動画を Web 開発と同じ運用対象へ寄せることにあります。 この見方に立つと、HyperFrames は便利な動画ライブラリではなく、動画をコード、CLI、再現可能なレンダリング、エージェント実行の対象へ変える基盤に見えてきます。 まだ early stage の OSS です。長期安定性や大規模運用の実
RubyではWebサイト作成以外にも様々なシステム開発が可能ですが、Webスクレイピングに関しても簡単に実装することが可能です。 本記事では、Rubyでのスクレイピングに利用可能なライブラリ「Nokogiri」について、インストール方法から簡単な使い方までご紹介していきます。 Nokogiriについて Nokogiriは、Rubyでスクレイピング処理を実装したい際に利用される代表的なライブラリです。 スクレイピングって何? スクレイピングは、WebサイトからHTMLデータを抽出する技術で、特定の要素や画像などを抽出・加工することが出来ます。 具体的な利用用途としては、見出しだけを抽出して目次を作成したり、商品の価格や画像を抽出して一覧として加工するなど用途で利用されます。 Nokogiriのインストール方法 Nokogiriのインストールには、Rubyのパッケージ管理システムである「gem
ソフトウェア・エンジニアであれば、情報セキュリティについてある程度精通していなければなりません。 静的コード・スキャン、脆弱性スキャン、侵入テストなど、仕事の一環でセキュリティ監査を受けたことがあるかもしれませんし、より高度なレベルで、包括的なレッドチーム演習を行ったことがあるかもしれません。 もしかすると、OWASPのことを聞いたことがあるかもしれませんし、OWASP Top 10とはなにか、一般的なセキュリティの脆弱性が何であるかを知っているかもしれません。 しかし、範囲を「Webフロントエンドにおけるセキュリティ」に限定すると、多くの人はXSSについてだけ知っていて、あとは何も知らない事が多いのです。 (This also has an English version) Webフロントエンドセキュリティの分野を宇宙に例えるなら、XSSは多くの人の注目を集める最も大きく明るい惑星かもし
書籍執筆しました!『改訂版 1冊ですべて身につくHTML & CSSとWebデザイン入門講座』多くの方に読んでいただいたWebサイト制作の入門書、『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』。発売から5年の月日が経ったので、改めて内容を精査し、加筆もした『改訂版 1冊ですべて身につくHTML & CSSとWebデザイン入門講座』が2024年3月2日発売! カバーイラストはこれまでと同様ICHIRAKU STUDIO 様に描いていただきました!今回も素敵なイラストをありがとうございます! こんな人におすすめこれから Web サイトを作り始める初心者HTML と CSS を基本から学びたい人美しいデザインの Web サイトを作りたい人Web サイト制作の最新技術を学びたい人初心者向けに Web サイト制作を教えている人メインターゲットは「これから Web サイトを作って
こんにちは!今回は4x4のミニオセロゲームをHTML、CSS、JavaScriptのみで実装する方法をご紹介します。盤面が小さいミニオセロは通常の8x8オセロよりも戦略が単純でわかりやすく、JavaScriptの学習にもぴったりです。 この記事では以下の内容について説明します: ゲームの要件と仕様 設計方針(オブジェクト指向アプローチ) 実装の詳細 ユーザーインターフェースの構築 AI(コンピュータ) の実装方法 完成イメージ 完成したゲームでは以下の機能が実現できます: 4x4のオセロ盤面 黒と白の石を交互に置ける 有効な手の表示 石を裏返すアニメーション シンプルなコンピュータ対戦 ゲームログの表示 デバッグモード ゲームの要件と仕様 基本要件 4x4のゲーム盤を作成 プレイヤーが交互に石を置ける オセロのルールに従って石を裏返す 有効な手がない場合はパス ゲーム終了時に勝者を表示 追
[2026-02-11] 改訂 [要約]数字と単位の間には「スペース」を入れる。通常の(半角)スペースでもいいが、LaTeX なら「改行されない狭いスペース」\, が推奨。例えば 9.8 m/s2 なら $9.8\,\mathrm{m/s^2}$ と書く(あるいは同じことだがsiunitxパッケージを使う)。Unicodeで \, に相当するものは U+202F (NARROW NO-BREAK SPACE) である(HTMLでは   または  )。°C や % の前にもスペースを入れるが、角度の度分秒を表す ° ′ ″ の前にはスペースを入れない。 BIPMの SI Brochure: The International System of Units (SI) には、数字と単位の間には「スペース」を入れると書かれている: The numerical value
対象読者 TailwindCSSを初めて聞いた人 一方、HTMLとCSSは把握していている人 駆け出しフロントエンドエンジニア TailwindCSSとは 人気の高いCSSフレームワークの1種となります。 まずは公式ドキュメントを一読しましょう。 Rapidly build modern websites without ever leaving your HTML. HTMLから離れることなくモダンなウェブサイトを高速に作れるみたいです。 早速、TailwindCSSを導入して使ってみましょう。 セットアップ手順 息を吸うかのごとく、当たり前のように公式ドキュメントに目を通しましょう。 WEB系の技術は、トレンド変化が速いので、一次ソースから調べるのが吉です。 npmと呼ばれるノードパッケージマネージャを利用したコマンドによるインストールが推奨とのことです。 今回、Node.jsの環境が
Leapcell: The Best of Serverless Web Hosting JavaScriptに完全に囚われたフロントエンド開発かつて、私はDjangoのTemplateを使って簡単にウェブUIを構築することができました。ページ上のサイズの異なる反復部分については、テンプレートやフラグメントを利用して抽象化またはカプセル化しました。もちろん、必要があれば、ページにインタラクティブ性を追加するためにJavaScriptを書くことも避けませんでした。 しかし、このように構築されたUIには明らかな欠点があります。ユーザーがページとインタラクトするたびに、バックエンドは完全なHTMLページを再送信する必要があります。これはバンドウィドウを浪費するだけでなく、インタラクションを不器用でスムーズでないものにしています。インタラクション機能を強化するために、いくつかのAJAXライブラリが
こんにちは、技術推進部の谷黒と申します。 スパイダープラスでは日々の業務での出来事や向き合った技術的課題を定期的にブログとして発信しております。 さて、今回はiframeをテーマにします。こちらは外部サイトなどをHTML内に埋め込みたい時などに使うことが一般的です。 ご存じの方もいらっしゃると思いますが、iframeはフレーム内の値をフレームの外の世界に渡すことができます。 今回、私たちはヘッドレスなAPIを使わずiframeをデータ受け渡し専用に用いた手法を採用し、機能開発を行いました。その方法を紹介いたします。 背景 私が開発を担当しているBIM(*Building Information Modelingの略で図面上により詳しい属性情報などがついたモデリングのこと)のサービスは、基本機能を提供するSPIDERPLUSとはマイクロサービス的な関係にあり、SPIDERPLUSとは独立した
ESP32:Chart.jsを使ったグラフ表示公開講座(春夏)「AI/IoTセンサのしくみを知ろう」の補足です。 ESP32のウェブサーバ上で,センサで取得したデータをグラフ表示します。グラフの描画には,Chart.jsというグラフ描画用javascriptライブラリを使用します。グラフの更新には,WebSocketプロトコルを使用して,リアルタイムでセンシングしたデータの表示を行います。 1.ファイルの準備まず,次のライブラリをArduinoにインストールし,必要なファイルを準備します。 <インストールするライブラリ> Arduinoライブラリに追加 arduinoWebSockets , elapsedMillis <ダウンロードするファイル> dataフォルダ内に配置し,ESP32 Sketch Data Uploadにより書き込み Chart.min.js (画面の下の方:Ch
フロントエンドカンファレンス北海道2025で視聴したトークごとの個人的なメモと感想をまとめたもの。全部ではなく視聴したトークのみ。オンライン参加なので北海道の美味しい食べ物情報はありません。リアルタイムで書いていたスクラップをちょっと加筆した程度なので、読み物としてはだいぶ雑。 イベント概要 開催日時:2025 年 9 月 6 日(土)10:00AM–6:00PM 場所:エア・ウォーターの森(札幌市 桑園) オンライン配信:YouTube(限定公開のためアカウントのリンクのみ添付) イベントハッシュタグ:#frontendo #フロントエンドチョットデキルルーム #ガウディルーム HTMLの品質ってなんだっけ? -“HTMLクライテリア”の設計と実践 登壇者:うな @unachang113 さん(LayerX) 視聴中のメモ 前職PR TIMESの活動についての発表 きっかけ 建前:HTM
<meta charset="UTF-8" /> <img src="xxx.jpg" alt="xxx" /> なぜHTMLの空要素の最後に"/"が入るのか? Prettierのissue "Add an option to prefer void tags over self closing tags. #5246"、 ざっと読んだところこの仕様の理由は XML(XHTML)との互換性 読みやすさ などであり、設定で変更することはできない。 また別のissue"The formatting of self-closing tags in HTML5 #5641"によると、HTMLのフォーマッティングの開発時にそう決まったからだそう。 そして、オプションの理念ページには Prettier has a few options because of history. But we won’t
CSSで要素の幅などを指定するとき、「vw」という単位があります。そのままだとちょっとクセの強い「vw」ですが、CSSのカスタムプロパティとJavaScriptを用いればもっと安心して使えるようになるよ。というお話です。 「vw」が破綻を招くワケ 「vw」は、便利ですが使いどころによってはレイアウトの崩壊を引き起こします。まず、「vw」を理解するために「%」との違いや、その問題点についてお話しします。 親要素を基準とした「%」 「%」は、CSSでよく利用される単位のひとつです。親要素の幅を100%としたときに何%になるか、を指定します。例えば、親要素の幅が500pxのとき、子要素に「width: 10%;」と指定すれば、500pxの10%なので50px幅になります。 ビューポートを基準とした「vw」 次に「vw」ですが、こちらはビューポートの幅を100%としたときの相対的なサイズを指定しま
Vue.jsとは JavaScriptのフレームワークです。 Vue.jsのメリット 学習コストが低い ライブラリやツールが豊富 速くて軽い(Vue.jsを使うと、ウェブページがとても速くて、サクサク動く) 何かが変わるとすぐにわかる( Vue.jsを使うと、何かが変わったら、自動的にその変化が表示される) いろんなパーツを組み立てられる HTML要素を部品化 安定してプロジェクトを進められる Reactと比べたらどうか? 現場で使っているならVue.jsやればいいですが、どちらもやっていないならReactがおすすめです。 ただ求人と給与を見てもReactもVue.jsはあまり大差ないみたいです。会社と個人によるかなと。 Reactの方が割と学習者が多いので、競合がReactより少ないVue.jsをやるのもありかと思います。 最終的は、どちらもできるといいと思います。 Vue.jsの3系に
2024.09.05 HTMLDialogElement: showModal() はHTMLの長年の課題を解決する期待の星かと思ったら実際はだめな子 <dialog> 要素の showModal() は全てのモダンブラウザで実装され、そろそろ使っても良いかなという方も多いと思います。しかし実際に使ってみると(主にChromium系ブラウザで)重大な落とし穴があり、適用できるケースは限定的なことがわかりました。 背景 HTMLでモーダルダイアログを表示するとき、伝統的には以下のような実装をしていました。 <aside class="backdrop"> <div class="dialog"> ダイアログの中身 </div> </aside> .backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.3); displa
Send feedback Fenced frames overview Stay organized with collections Save and categorize content based on your preferences. Securely embed content onto a page without sharing cross-site data. Implementation status This document outlines a new HTML element: <fencedframe>. In general availability in Chrome. Chrome Platform Status. Proposal Status
htmx 1.9.0 Release I’m happy to announce the 1.9.0 release of htmx. New Features Support for view transitions, based on the experimental View Transitions API currently available in Chrome 111+ and coming to other browsers soon. Support for “naked” hx-trigger attributes, where an hx-trigger is present on an element that does not have an hx-get, etc. defined on it. Instead, it will trigger the new h
参加方法 YouTubeでのオンライン配信で参加は無料です。事前登録不要で、どなたでもご参加いただけます。connpassでの登録は必須ではありません。以下のURLから直接ご参加ください。 https://youtu.be/gicxddOl6rM Twitterハッシュタグ #HTML解体新書 アジェンダ(予定) (以下の内容は変更となる可能性がありますのでご了承ください) 開催の挨拶と諸注意 (5分) 書籍の紹介 (5分) 著者のセッション (15分x2) HTML解体新書ができるまで / (中村 直樹): この書籍の企画意図や背景、ポリシーについてご紹介します HTML解体新書 — 2本の橋をかける物語 / (太田 良典): この書籍の内容や執筆時に苦慮したことなどをご紹介します (休憩10分予定:セッションの状況により短縮する場合があります) 座談会 (30分) HTMLについてのあ
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 @�]ժ�View in English �N�֪�Always switch to English ポップオーバー API は、他のページコンテンツの上に表示するポップオーバーのコンテンツを表示するための、標準的な、一貫性のある、柔軟な仕組みを開発者に提供します。ポップオーバーのコンテンツは、HTML 属性を用いて宣言的に、または JavaScript を用いて制御することができます。この記事では、この機能のすべてを使用するための詳細なガイドを提供します。
<div class="container-fluid"> <div class="row"> <div class="col">A</div> <div class="col">B</div> <div class="col">C</div> <div class="col">D</div> <div class="col">E</div> </div> </div> .w-100 を用いて、width: 100% の div を入れることで、強制的に改行することができます。
The HTML Working Group has published a Working Draft of HTML Ruby Markup Extensions. Ruby, a form of interlinear annotation, are short runs of text alongside the base text. They are typically used in East Asian documents to indicate pronunciation or to provide a short annotation. This specification revises and extends the markup model established by HTML to express ruby.
Published: March 24, 2025 From Chrome 135, web developers and designers can finally unite on an accessible, standardized and CSS styleable <select> element on the web. This has been many years in the making, many hours of engineering and collaborative specification work, and the result is an incredibly rich and powerful component that won't break in older browsers. Here's a video of customized sel
@page { size: 280mm 5000mm; margin: 15mm; } html, body { margin: 0; padding: 0; font-size: 14px; line-height: 1.6; } * { page-break-inside: avoid !important; page-break-before: avoid !important; page-break-after: avoid !important; break-inside: avoid !important; break-before: avoid !important; break-after: avoid !important; } h1 { font-size: 1.8em; } h2 { font-size: 1.5em; } h3 { font-size: 1.3em;
複数のAPIツールを行き来する時代は終わり。Apidogなら、APIの設計から開発、テスト、ドキュメント作成までをオールインワンで完結できる。Postman、Swagger、MockServerなど、よく使うツールの機能を1つのプラットフォームに統合。直感的なUIと自動Mock生成機能で、開発効率を劇的に向上。特に、チーム開発でのAPI設計やドキュメント共有がスムーズになると、多くの開発現場で好評だ。 フロントエンド開発者が試すべき必須ツール10選を紹介しよう: 1.AITDK SEO拡張機能 AITDK SEO拡張機能は、重要なSEOメトリクスを総合的に分析し、Webサイトのパフォーマンスを向上させるためのGoogle Chrome用プラグインだ。 -タイトル、説明文、URL、ドメイン登録、有効期限などの重要な要素を含むサイトのSEO情報を素早く把握できる。SEO戦略の最適化に欠かせない
この記事は HTML アドベントカレンダーの 7 日目の分です。 HTML の属性値の先頭または末尾にスペースなどの空白文字を記述したとき、それらの文字がそのまま扱われる場合と無視される場合があります。例として form 要素の属性を見ていきましょう。 <form method=" post " action=" /edit " target=" _blank " rel=" noopener "> method 属性の値は特定のキーワードであり、空白文字を含む値は指定できません。" post " は無効な値として無視され、デフォルト値である "get" を指定したのと同じ扱いになります。 action 属性の値はスペースで囲まれる可能性のある空でない妥当な URL であり、先頭と末尾の空白文字の並びは無視されます。この場合は "/edit" を指定したのと同じ扱いになります。 targe
特殊文字をアンエスケープしたいと思って、もろもろ調べました。 Mozillaのサイトによると、 < 👉 < > 👉 > " 👉 " ' 👉 ' & 👉 &こちらの5文字が特殊文字として挙げられています。 developer.mozilla.org 最小の構成であれば、この5文字をreplaceすることでアンエスケープすればOKなのかもしれません。 念の為、他の人が作ったライブラリ、unescape-htmlというパッケージのソースを確認してみると、 'use strict' /** * un-escape special characters in the given string of html. * * @param {String} html * @return {String} */ module.exports = functio
[Ed. note: While we take some time to rest up over the holidays and prepare for next year, we are re-publishing our top ten posts for the year. Please enjoy our favorite work this year and we’ll see you in 2023.] I’ve been writing code for at least 15 years. While I’ve used a lot of technologies and built a lot of stuff over the years, the thing I have done the most is the front end, i.e. HTML, CS
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く