タグ

関連タグで絞り込む (17)

タグの絞り込みを解除

htmlに関するrryuのブックマーク (25)

  • JS+SVGで液晶画面風の表示をつくる | tech - 氾濫原


    液晶風の画面は決まった形をオン・オフするだけなので、canvas にコードで描くのは大変なだけで無駄が多い。かといってセグメントを1つ1つ画像にわけて座標指定で配置していくのも面倒くさい。 と考えていくと SVG を埋めこんで、SVG の要素をJSで操作するのが効率が良い。ワークフローとしては SVG の作成とJSの実装で綺麗に境界を作ることができる。 Inkscape Inkscape の良いところは以下の点 XML エディタが UIと連動している レイヤーやオブジェクトを選択すると該当箇所にエディタ上で跳べる 構造をコントロールしやすい 画像を編集するというより SVG の XML を編集するUIというイメージ Inkscape でオブジェクトに名前をつけると、svg 上では inkscape:label 属性に入る。これを利用してJSから操作すれば Inkscape で
    rryu
    rryu 2022/11/04
    リンク

  • お前らはまだ img タグの alt 属性の付け方を間違っている - Qiita

    1行で alt属性は、「全ての 画像をそのalt属性のテキストに置き換えたときにページの意味が変わらない 」ようにつける。 （HTMLの標準規格書より） マジでこれに尽きる。 具体例 例１：ロゴ ❌ 間違ったマークアップ

    お前らはまだ img タグの alt 属性の付け方を間違っている - Qiita
    rryu
    rryu 2022/06/03
    こういうHTMLちゃんと書こう系の記事でも「img要素」ではなく「imgタグ」と書かれるのはなぜなのだろう。
    リンク

  • 「阿部寛のホームページ」はHTML界のシーラカンスである - Qiita


    (2022/4/12) 英語版を書きました。よろしければ拡散お願いいたします。 説明する必要も無いと思うが、阿部寛さんと言えば日本を代表する名優の一人であり、数々の作品でその巨躯以上の存在感を見せつける、映像業界にはなくてはならない存在だ。実写に疎い私ですら、﹁TRICK﹂のポンコツだがプライドは一人前な上田教授、﹁テルマエ・ロマエ﹂の﹃未来﹄の日本に驚嘆し、その工夫を当時の技術で貪欲に取り込むローマ人温泉技師ルシウス、﹁下町ロケット﹂の熱血でより良い製品の開発に力を注ぎ、町工場の高みを目指す佃社長と、その名演はふと思い出せるくらい、語らずにはいられないくらい記憶に刻まれている。 その阿部さんのホームページは、その懐かしいデザインと、軽量高速なことであまりにも知られている。ホームページ一つでここまでミームになるのは、海外でも﹁スペース・ジャム﹂の四半世紀前のページくらいだろう。 しかし、そ
    「阿部寛のホームページ」はHTML界のシーラカンスである - Qiita
    rryu
    rryu 2022/04/21
    フレームセットとテーブルレイアウトを今時なHTMLで作り直したらどっちが速いのかは気になっている。
    リンク

  • HTML の `hidden` 属性が列挙型に変更され `hidden="until-found"` が追加


    すべての HTML 要素に指定できる hidden 属性 はこれまで真偽属性 でしたが、このたび列挙型に変更され、新たに until-found が定義されました。 hidden="": Hidden 状態 hidden="hidden": Hidden 状態 hidden="until-found": Until found 状態 ← New! 2022年3月24日現在、 Chrome 102 (canary) は hidden="until-found" に対応しており、本記事で例示する挙動を確認できます。 これは以下の issue で提案されていたものです。 Proposal: beforematch event and hidden=until-found attribute · Issue #6040 · whatwg/html 例えばこんな HTML の場合。 <section
    HTML の `hidden` 属性が列挙型に変更され `hidden="until-found"` が追加
    rryu
    rryu 2022/03/27
    検索すると見えるようになる要素の用途がよく分からないが、デフォルト閉の開閉する部分も検索できるようにするみたいな感じなのだろうか。
    リンク

  • Webのルビ仕様にはアクセシビリティを阻害している面がある。「日本DAISYコンソーシアム」が改善を求めてブラウザベンダ、WHATWG、W3Cらに公開書簡


    Webのルビ仕様にはアクセシビリティを阻害している面がある。﹁日本DAISYコンソーシアム﹂が改善を求めてブラウザベンダ、WHATWG、W3Cらに公開書簡 すべての人が等しく情報にアクセスできることを目指し、国際規格であるDAISY︵Digital Accessible Information System‥アクセシブルな情報システム︶規格の開発・維持・普及のために設立された国際団体﹁DAISYコンソーシアム﹂の正会員である﹁日本DAISYコンソーシアム﹂は、Web上の文書の文字や熟語にルビを振るためのWeb標準仕様が、弱視や失読症などを含むさまざまなハンディキャップを持つ人々にとってのアクセシビリティを阻害している面があるとして、改善を求める公開書簡をWebブラウザベンダ、WHATWG、W3C宛てに送付しました。 その一部を引用します。 The historical purpose of
    Webのルビ仕様にはアクセシビリティを阻害している面がある。「日本DAISYコンソーシアム」が改善を求めてブラウザベンダ、WHATWG、W3Cらに公開書簡
    rryu
    rryu 2021/10/22
    1文字ごとにルビを振るタイプのマークアップはやったらできたというだけで当初の仕様では想定していなかったと思う。そういう意味で仕様の改定が必要なのか。
    リンク

  • テンプレートとスロットの使用 - Web API | MDN


    この記事では、<template> と <slot> 要素を使用して柔軟なテンプレートを作成し、それをウェブコンポーネントのシャドウ DOM を表示するために使用する方法について説明します。 ウェブページで同じマークアップ構造を繰り返し再利用する必要がある場合、同じ構造を何度も繰り返すよりも、何らかのテンプレートを使用する方が理にかなっています。 これは以前から可能でしたが、HTML の <template> 要素によって、かなり容易になりました︵最近のブラウザーはよく対応しています︶。 この要素とその内容は DOM 内で描画されませんが、JavaScript を使って参照することは可能です。 簡単な例を見てみましょう。
    テンプレートとスロットの使用 - Web API | MDN
    rryu
    rryu 2021/06/21
    こんなのあったんだ。普通に使える日が来るのだろうか…
    リンク

  • ブラウザレンダリングの仕組み


    フロントエンド用語を100秒で解説するチャンネルを作りました！ よかったらチェックしてみてください！ はじめに 以前書いた記事﹁Webページがブラウザに表示されるまでに何が起こるのか？﹂で ブラウザレンダリングについて詳細に知りたいという意見をいただいたので、調べてまとめてみました。 全体図 レンダリングの大まかな流れです。 HTMLのダウンロード サーバから送られてきたHTMLをダウンロードします。 HTMLの解析 サーバから送られてきたHTMLファイルは、﹁0﹂と﹁1﹂でできたデータになっています。 ブラウザは、サーバから受け取ったデータをそのままHTMLとして解釈することはできないので、自分で扱うことができる形、つまりDOMに変換する必要があります。この作業を 解析 ( Parse ) と言います。 HTMLをダウンロードしたら、すぐにこの解析作業に入ります。作業は以下のようなステッ
    ブラウザレンダリングの仕組み
    rryu
    rryu 2021/05/07
    HTMLのトークンって < や </ じゃないのと思ったらHTMLのパースは巨大なステートマシンで区切りのいいところで結果をトークンとして置いていくという仕組みでやるらしい。
    リンク

  • `<meta charset="UTF-8">` を書く必要性があるケースとデメリット

    HTML 文書内に <meta charset="UTF-8"> を書いていますか? 書いているとしたら、その必要性を問われた時に理由を説明できますか? 実は私も勘違いしていた部分があり[1]、改めてまとめてみました。 <meta> による文字エンコーディング指定の歴史 Content-Type ヘッダーと <meta> の関係性と優先度 <meta> が必要なケース <meta> で文字エンコーディングを指定するデメリット <meta> による文字エンコーディング指定の歴史 § まず基本的なおさらいをします。<meta charset="UTF-8"> は HTML5 で登場した新しい記法で、 HTML4 以前は <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> などという長くて覚えにくい書き方をしてい

    `<meta charset="UTF-8">` を書く必要性があるケースとデメリット
    rryu
    rryu 2021/02/10
    1番のメリットはHTTPを介さないでHTMLを扱うことが多い製作者側にあると思っている。
    リンク

  • HTMLのhidden属性の使い方と弱点、要素の表示・非表示を切り替える便利なスタイルシート


    ページ上の要素、例えばメニューの中身などの表示・非表示を切り替える必要がある時があります。実装方法はいろいろありますが、要素を非表示にする一番簡単な方法はHTMLのhidden属性です。 HTMLのhidden属性の使い方と弱点、要素の表示・非表示を切り替える便利なスタイルシートを紹介します。 The 'hidden' Attribute is Visibly Weak 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 HTMLのhidden属性の使い方と弱点 要素の表示・非表示を切り替える便利なスタイルシート HTMLのhidden属性の使い方と弱点 HTMLには、hidden属性というあなたが期待する通りの機能があります。
    HTMLのhidden属性の使い方と弱点、要素の表示・非表示を切り替える便利なスタイルシート
    rryu
    rryu 2019/10/30
    hidden属性は意味的に要素を存在していないことにするためのものだが、スタイルにより見える状態にできるため意味と表示が食い違う状態にできてしまうという話。
    リンク

  • 制作者のためのHTML


    主にユーザー側の視点から語られることが多いアクセシビリティですが、制作という側からはどのように捉えることができるのでしょうか。2つの切り口から考えてみます。 # アクセシビリティという文脈において、何のためにHTMLを書くかという話になると マシンリーダビリティのため スクリーンリーダーのアクセシビリティのため というように、ユーザーが利用するため、というところにフォーカスした語られ方が多いように感じています もちろんユーザーのために作るというのは正しいのですが、今回はあえて視点を変えて、制作者自身の作るというところに視点を合わせて話してみたいと思っています 僕がどういうものなのかというと、 # 参照: 全部入りHTML太郎(@_yuheiy)さん | Twitter ツイッターでは﹁全部入りHTML太郎﹂という名前でやっています # 参照: シフトブレイン／スタンダードデザインユニット
    制作者のためのHTML
    rryu
    rryu 2019/03/11
    ボタンにbutton要素を使う。それだけでアクセシブルになる。
    リンク

  • HTMLでコピペできそうでできない要素を作る - mizchi's blog


    歌詞サイト内で湘南乃風の睡蓮花の歌詞がだんだん大きくなっていた﹁作詞XSSとか楽しすぎるものをみたけど…﹂ - Togetter うたまっぷといえばコピペ禁止、コピペ禁止といえば最近こういう嫌がらせを考えていたので、やってみました。 UOHYO--TNPC-XC-AEITYSOTNT ↑をマウスで選択してコピペしてみてください。うまく範囲選択できないし、できたとしても無意味な文字列になります 仕組み テキストをランダムに並び替える ランダムに並び替えた文字を, 元の位置に来るように flex の order 属性を指定 フレックスアイテムの並べ替え - CSS: カスケーディングスタイルシート | MDN コード React でさっくり書いた function Text() { const text = "YOU-CANNOT-COPY-THIS-TEXT"; const chars =
    HTMLでコピペできそうでできない要素を作る - mizchi's blog
    rryu
    rryu 2019/03/10
    ある意味CSSを復号キーとした換字式暗号と言えるかもしれない。
    リンク

  • Microsoft、手書きのUIスケッチをHTMLに変換する「Sketch2Code」を発表


    Microsoft、手書きのUIスケッチをHTMLに変換する﹁Sketch2Code﹂を発表‥AIで手書きの図形と文字を認識 Microsoftは、手書きでスケッチしたUI画面をHTMLコードに自動変換するWebベースソリューション﹁Sketch2Code﹂を発表した。 Microsoftは2018年8月30日︵米国時間︶、ホワイトボードなどに手書きでスケッチしたユーザーインタフェース︵UI︶画面を、AI︵人工知能︶を利用して、HTMLコードに変換するWebベースソリューション﹁Sketch2Code﹂を発表した。 Microsoftによれば、UIのデザインプロセスには無駄が多いという。通常は、まずアイデアレベルのスケッチをホワイトボードに描き、数人で検討してから写真に撮影し、HTMLコードを書き下す。これでは手間ばかりかかり、すぐにアイデアを形にできない。 画像認識技術とAIを組み合わせ
    Microsoft、手書きのUIスケッチをHTMLに変換する「Sketch2Code」を発表
    rryu
    rryu 2018/09/05
    これちゃんとform要素になるのだろうか。パターンマッチだろうから入力欄ぽい部分はinput要素になるのだと思うが…
    リンク

  • HTML5 入れ子チートシート | 吉川ウェブ

    HTML 5.2のそれぞれの要素が入れ子にできる「子要素」、包含されることが可能な「親要素」の一覧のルールを視覚化して表示します。 ※1 a要素の親要素が包含可能であること※1 audio要素の親要素が包含可能であること※1 canvas要素の親要素が包含可能であること※1 del要素の親要素が包含可能であること※1 ins要素の親要素が包含可能であること子要素省略※1 map要素の親要素が包含可能であること※1 noscript要素の親要素が包含可能であること かつ body要素の子孫であること子要素省略※1 video要素の親要素が包含可能であること ルート要素＆文書メタデータ html 親 子 head 親 子 title 親 子 base 親 子 link 親 子※HTML 5.2から可能。フレージングコンテンツが期待される場所※head要素の子孫であること meta 親 子※he

    HTML5 入れ子チートシート | 吉川ウェブ
    rryu
    rryu 2018/07/01
    3年前だともう仕様が変わっていたりしないだろうか。
    リンク

  • 若い世代が知らない2000年代のHTMLコーディングの地獄 - ICS MEDIA


    ウェブの黎明期である2000年頃と比べてはるかにHTMLはコーディングしやすくなりました。10〜20年前のHTMLコーディングはどのようなものだったのでしょうか。 この記事では、NetscapeとIEのブラウザ戦争に決着がついた後の、IE6が全盛期となった2000年代のウェブサイト制作を振り返ります。懐かさに浸たり、現代のウェブの成り立ちに通じる温故知新な情報として参照ください。 テーブルレイアウト / spacer.gif XHTML・CSSが普及するまではテーブルレイアウトが一般的でした。テーブルレイアウトとはtableタグを使い、格子状にレイアウトしていく手法です。テーブルレイアウトは、デザインファイル︵Image ReadyやFireworks︶から画像を切り出す﹁スライス機能﹂と相性のいい方法でした。 <table border="0" cellspacing="0" cellp
    若い世代が知らない2000年代のHTMLコーディングの地獄 - ICS MEDIA
    rryu
    rryu 2018/05/18
    テーブルレイアウトのヤバさはボーダーっぽく見えるものは実は入れ子になったテーブル同士の隙間から見える背景色なところ。線が増えるとテーブルの入れ子が増えてつらみが増していく…
    リンク

  • 阿部寛のホームページをモダン化する


    謝辞まず、﹁阿部寛のホームページ﹂関係者の皆様に敬意を評したいと思う。 更新を続ける労力、いち非公認ファンサイトが事務所の承認を得て公式サイトになるという快挙を成し遂げるまでの労力は並大抵のものではなかっただろう。また、今もなお変わらず更新を続けられている運営者に敬意を評したい。 そして、氏の事務所も"今風の格好いいサイト"にリニューアルするでもなく、これまでの"ホームページ"を尊重して、そのまま運用していることにも改めて敬意を評したい。 コンセプトレガシーサイトのお手本と言える作りなので、ざっくりイマドキの作りにしていきたい。 ここ最近、dev.to と比較して高速化するコンセプトの記事をよく見かけたが、まずは超レガシーなサイト構成をどげんかしていこうと思う。 ※ ﹁阿部寛のホームページ﹂は、移転前の@nifty 時代 - Wayback Machineからその様相は変わっていない。 関
    阿部寛のホームページをモダン化する
    rryu
    rryu 2017/12/05
    フレームを再現するためにSPAにして重くするよりも、普通にメニュー込みのHTMLに展開してしまえばよかったのに。
    リンク

  • HTML文書は文字エンコーディングUTF-8でなければなりません - 水底の血


    さよならレガシーエンコーディング。 文字エンコーディング宣言が存在するかどうかにかかわらず、文書のエンコードに使用される実際の文字エンコーディングはUTF-8でなければならない。 4.2.5.5 文書の文字エンコーディングを指定する - HTML Standard 日本語訳 Requireutf-8 when specifying character encoding by sideshowbarker · Pull Request #3091 · whatwg/htmlにより、HTMLで使用できるエンコーディングはUTF-8のみとなりました。これにより、古いHTMLでは許容されていた、Shift_JIS、ISO-2022-JP、EUC-JP、UTF16LEといった文字エンコーディングは適合するHTMLではなくなりました。すでにNuHtml CheckerでUTF-8以外の文字エンコー
    HTML文書は文字エンコーディングUTF-8でなければなりません - 水底の血
    rryu
    rryu 2017/10/09
    HTML5にしたいというだけでDOCTYPEだけ変えた系のサイトが爆死しそう。
    リンク

  • divとsectionとarticle要素それぞれの特徴、使い分けと組み合わせ方 -HTML5のセクショニング コンテンツ


    HTML5は、ドキュメントを構造化する際に用いるセマンティックなコードです。あなたがどんなタグを使うかによって、ユーザエージェントにその意味を伝えます。 HTML5のタグにはさまざまなものがあり、中でもsectionとarticle要素は、div要素より有意義な方法でコンテンツを区分する手段として導入されました。これら3つをどのように使い分けるか確認しておきましょう。 Sectioning Content in HTML5 -Div or Section or Article下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 divとsectionとarticle、それぞれの特徴 divとsectionとarticle、どれを使う？ sectionとarticleの組み合わせ方 divとsectionとarticle、それぞれの特徴d
    divとsectionとarticle要素それぞれの特徴、使い分けと組み合わせ方 -HTML5のセクショニング コンテンツ
    rryu
    rryu 2015/10/15
    普通に文章なら簡単なんだけどウェブアプリ的なものでも使うべきなのか悩んでしまう。
    リンク

  • HTML <base> TAG and local folder path with Internet Explorer

    I am trying to use < base> TAG to indicate the source folder containing the media files for my html pages located in separate folder. I have the following folder structure: A |- HTML_PAGES (contains html files) |- MEDIA_FOLDER (contains the media used by this html pages) I try to indicate the html files with the media used by html pages - so, in each html file i have something like this: <base hre

    HTML <base> TAG and local folder path with Internet Explorer
    rryu
    rryu 2015/08/27
    IEのワークアラウンドも謎が多いが、base要素に相対パスを指定するのは仕様的にOKなのだろうか。
    リンク

  • JavaScriptでリンク先URLがhttp/httpsか確認する方法 - 葉っぱ日記

    JavaScriptで動的にリンクを生成する際に、DOM-based XSSを防ぐためにリンク先がhttpあるいはhttpsに限定されていることを確認したい場合がある。典型的には以下のようなコードとなる。 var div, elm; // 変数 url は攻撃者がコントロール可能な文字列 if( url.match( /^https?:\/\// ) ){ div = document.getElementById( "info" ); elm = document.createElement( "a" ); elm.setAttribute( "href", url ); elm.appendChild( document.createTextNode( url ) ); div.appendChild( elm ); } この場合、変数urlに「http://example.jp」や「

    JavaScriptでリンク先URLがhttp/httpsか確認する方法 - 葉っぱ日記

  • 爆速HTML – Elmでの仮想DOM | POSTD


    新たな elm-html ライブラリでは、HTMLとCSSをElmで直接使用できます。FlexBoxも使ってみたいし、既存のスタイルシートも使い続けたいですか？　Elmは使いやすくなり、処理が 速く なりました。例えば、 TodoMVC アプリを再作成する場合、Elmの コード はとても単純で、 事前のベンチマーク でも、他の人気ライブラリに比べ処理速度が極端に速いという結果が出ています。 elm-html とMercuryは、どちらも virtual-dom プロジェクトを基にしているので、パフォーマンスが優れています。この記事では、前半で“仮想DOM”とは何か、 純粋性 と 不変性 によっていかに処理速度が上がるかということについて詳しく検証します。この検証によって、なぜOm、Mercury、Elmがベンチマークでこのような素晴らしい数字を出したかが分かるでしょう。 パフォーマンスは人
    爆速HTML – Elmでの仮想DOM | POSTD
  • 1 2 次のページ

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.