タグ

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

タグの絞り込みを解除

htmlに関するLhankor_Mhyのブックマーク (46)

  • 若い世代が知らない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
    Lhankor_Mhy
    Lhankor_Mhy 2024/05/22
    懐かしいな。もっと以前だと、ネットスケープの document.layers とかあった気がする。
    リンク

  • 令和のHTML / CSS / JavaScriptの書き方50選


    Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は﹁2024年のWeb制作ではこのようにコードを書いてほしい！﹂という内容をまとめました。 質より量で、まずは﹁こんな書き方があるんだ﹂をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
    令和のHTML / CSS / JavaScriptの書き方50選
    Lhankor_Mhy
    Lhankor_Mhy 2024/05/14
    hgroup、生きとったんかワレ / CSSネストや:nth-child( of S)やカスケードレイヤーが書いてないけど、その辺りは平成時代でも常識、ということなのかしら。
    リンク

  • contenteditableについてのメモ書き17選 - Qiita


    この記事の話はすべてedgeでの話です。他のブラウザの挙動も大体同じだとは思いますが、思うだけです。すみませぬ。 contenteditable contenteditableというものを知っていますか？ textareaではプレーンテキストを扱うことができますが、contenteditableな要素では様々な種類のNodeを扱うことができます。 色付のテキストから、図形、画像、動画まで、いろいろ扱える高機能なもの、それがcontenteditableな要素です。Twitter(X)のツイート画面がイメージしやすいかもしれません。 contenteditableについてのメモ contenteditableについてのメモをつらつら紹介していきます。 僕はtextareaで特定文字にハイライト表示するようなもの(リッチテキストエディタ)を目指していたので、それ前提のものが多いです。さきにこの
    contenteditableについてのメモ書き17選 - Qiita
    Lhankor_Mhy
    Lhankor_Mhy 2024/04/05
    めんどくさぁ！
    リンク

  • HTML: object要素で変な物を仕込む - Qiita

    <object onload="title=data,delete data,data=title,width=height=border=Math.random()*5,write(outerHTML)" data="data:,"> <object onload="write('<canvas id=C>');f=R=>{R=n*3**.5/4,p=p.flatMap(([x,y])=>{t=[[x-n/4,y-R],[x+n/4,y+R],[x-n*3/4,y+R]];return~k?k?t:[t[0]]:p}),n/=2;p.map(([x,y])=>{with(C.getContext`2d`)beginPath(),moveTo(x,y),lineTo(x-n,y),closePath(lineTo(x-n/2,y+(~k?R:-R))),stroke()});k++<M&&

    HTML: object要素で変な物を仕込む - Qiita
    Lhankor_Mhy
    Lhankor_Mhy 2024/04/01
    わあ、きもい
    リンク

  • decoding="async" について詳しく調べてみる


    この記事は2023年7月19日時点の Chrome の最新版 115.0.5790.98 を使って検証しました。今後 Chrome の実装によって挙動が変わる可能性はございます。 はじめに 画像表示のパフォーマンス改善において、﹁decoding="async" をつけましょう﹂というのをよく見かけますが、おそらくほとんどの人がその実際の挙動を理解していない、あるいは誤った認識をしていると思います。今回詳しく調べる前の僕も含めて。 loading と decoding の違い 画像のパフォーマンス改善で decoding="async" のほかに、もう一つよく言及されるのが loading="lazy" です。decoding 属性について詳しく見る前に、まずは loading 属性との違いについて理解したほうがいいと思います。 loading とは、ブラウザがどのように画像を読み込むかを
    decoding="async" について詳しく調べてみる
    Lhankor_Mhy
    Lhankor_Mhy 2024/03/13
    Chromeでの話なので、その他のブラウザが同じくふるまうかどうかは要確認。
    リンク

  • HTML: iframeを使った手品 - Qiita


    iframeのidは既定値で空文字。加算処理で0としても扱える。当然outerHTMLはiframeのものを指す。 面白い事にonloadの処理を反復している。ただの反復ではなく再帰処理ッポイのだ。 setIntervalのようなsetTimeout
    HTML: iframeを使った手品 - Qiita

  • 想定外の新機能！ HTMLの<input type="checkbox" switch>だけで、スイッチUIが実装できるようになるぞ


    WebサイトやアプリのUIで、スイッチを実装するのはなかなか面倒です。CSSで書くと、なかなかのボリュームになってしまいます。 そんなスイッチがHTMLだけで実装できるようになります。 Release Notes for Safari TP 185によると、HTMLの新機能としてswitch属性がサポートされました。これにより、スイッチUIがHTMLで簡単に実装できるようになります。 switchについては、かなり前から実装についてGitHubで議論されていました。スイッチは人気のあるUIコントロールだけど、CSSで実装するのは簡単じゃないよね、簡単に実装できるようにしよう。という感じです。 スイッチUIを実装するHTMLは、下記の通りです。
    想定外の新機能！ HTMLの<input type="checkbox" switch>だけで、スイッチUIが実装できるようになるぞ
    Lhankor_Mhy
    Lhankor_Mhy 2024/02/01
    スキュモーフィズム時代に現実のスイッチを模して作られたはずのデザインが、フラットデザインやマテリアルでも生き残ってるの、なんか不思議。HTMLが見た目を記述するの、良くないと思う。CSSのappearanceを追加するとか
    リンク

  • コンポーネントごとに考えるアクセシビリティのカレンダー | Advent Calendar 2023 - Qiita


    はじめに みなさん初めまして。🎅🏻 Qiita株式会社で マネージャー・PdM・デザイナーをしている、自分のことをデザイナーであると自認 @degudegu2510 です。 去年に続き、今年のQiita Advent Calenar 2023でも、1人で25記事以上投稿した方 全員 に完走賞がおくられる企画を開催しています。🎉 🎉 Qiita運営として、ユーザー様だけに25記事完走してもらうのは、とても忍びないので、今年も25記事完走してやろうとこのカレンダーを作成しました。 ﹁有給を使ってでも、25記事完走するぞ！💪🏻﹂という気概でいるので、購読・応援していただけると嬉しいです。 ※ 2022 完走賞‥︻完走賞ゲットだぜ！︼CSSでポケモンマスターになってやる Advent Calendar 2022 テーマ このカレンダーは、 UIコンポーネントごとに考えるアクセシビリティ
    コンポーネントごとに考えるアクセシビリティのカレンダー | Advent Calendar 2023 - Qiita

  • MDN を過信してはいけない - Qiita


    はじめに この記事は 2023 年の MDN 翻訳 Advent Calendar 向けに作成したものです。 こんにちは。debiru です。HTML のことを考えるのが趣味です。 今回は MDN に記載されている内容が正しいとは限らない、盲目的に信用してはいけない、Wikipedia と同じくらい誤りがある可能性があるものである、MDN というものは懐疑的に解釈すべきものであるということをお伝えしていきたいと思います。 h1 要素は複数使うべきではない？ ここでは﹁h1 要素は複数使うべきではない﹂という MDN の主張に対して私が殴りにいった話をしていきましょう。 ときどき、﹁h1 要素はページに1つだけにすべき﹂﹁h1 要素を複数使ってはいけない﹂という主張を Twitter 等で見かけます。そういう人に根拠を訊くと MDN を提示してくることが多いです。 この Togetterh
    MDN を過信してはいけない - Qiita

  • MDNとかをみんなで編集！翻訳！ のカレンダー | Advent Calendar 2023 - Qiita


    オープン Web の開発者向けドキュメント MDN Web Docs には、Web アプリ開発に役立つノウハウなど、英語ドキュメントが日々どんどん追加されていっています。ただそのぶんドキュメントの日本語化(l10n=localization)は後手後手になっています。 新しいウェブ技術やウェブ標準に興味ある 翻訳に興味あるけど、どうしたらいいか分からない 英語は苦手だけど、日本語の文書を読みやすくするとかならできるかな Mozilla のコミュニティ活動に参加してみたい フォクすけに萌える MDN を翻訳してきたけど最近ご無沙汰気味 などなど、色々な方面からの参加をお待ちしています。 参考情報: みんなで編集！翻訳！カレンダー 2021 みんなで編集！翻訳！カレンダー 2020 みんなで編集！翻訳！カレンダー 2019 みんなで編集！翻訳！カレンダー 2018 MDN Web Docs ド
    MDNとかをみんなで編集！翻訳！ のカレンダー | Advent Calendar 2023 - Qiita

  • なぜインライン要素・ブロック要素概念は依然として有用なのか：現代的なWeb制作への適用


    当記事では﹁HTML Standardからインライン要素・ブロック要素の記述が削除されたことを受けても、それらの概念が消えたわけではない﹂という主張を展開しています。 そして、記事内ではMDN Web Docs にその表記があることを根拠のひとつとしています。 ﹃MDNの記述が変更されたことの意味︵inline-level element, block-level element︶﹄に記したとおり、すでにMDNの記述は変更されています。 この記事の趣旨はそれによって変わることはありませんが、MDN から記述が消えていることにつきましては充分にご留意頂ますようお願い致します。 詳しくは記事をご確認くださいませ。 https://zenn.dev/coedo/articles/updated-mdn-contents Web制作に関するディスカッションの中で、HTML Standard の内容
    なぜインライン要素・ブロック要素概念は依然として有用なのか：現代的なWeb制作への適用
    Lhankor_Mhy
    Lhankor_Mhy 2023/12/15
    ここで言う「性質」とは何のことだろう？それはどのように確認できるのだろう？ふんわりしすぎてない？→『あくまで表示方法が変わっただけであり、<a> タグ自体の性質はインライン要素のままです』
    リンク

  • なぜ HTML の form は PUT / DELETE をサポートしないのか? | blog.jxck.io

    Intro 10 年ほど前に同じことを調べたことがある。 なぜ html の form は PUT / DELETE をサポートしないのか? - Block Rockin' Codes https://jxck.hatenablog.com/entry/why-form-dosent-support-put-delete 当時は全くの素人で、素人なりに調査はしたが、ほとんどが推測の域を出ない結論だった。 この問題についてあらためて記す。 仕様策定の経緯 表題の通り、 <form> の method には GET と POST しかサポートされていない。 HTTP には他にも PUT や DELETE といったメソッドもあるのに、なぜサポートされていないのかという疑問から始まった。 仕様が決定した経緯は、以下に残っている。 Status: Rejected Change Descriptio

    なぜ HTML の form は PUT / DELETE をサポートしないのか? | blog.jxck.io
    Lhankor_Mhy
    Lhankor_Mhy 2023/12/06
     PUT/DELETEの話は枕で、本番は後段。大変興味深い。﹃構造化データを公開してるだけ。あとは受け手の問題﹄みたいな思想が、技術者利用を主に想定していた時代と違って、現実にそぐわないのかもしれない。  

    ●html
    ●http
      
    リンク

  • HTMLにsearch要素が追加されたぞ！


    先週、HTML Living Standardの仕様にsearch要素が追加されました。 ブラウザへの実装はまだ先になると思いますが、検索フォームを実装する時は下記のようなHTMLを使用できるようになります。アクセシビリティの面でも率先して使用していきたいですね。 参考: The search element 2023年3月24日、HTML Standardの仕様にsearch要素が追加されました。 Add the <search>elementhttps://t.co/AlmyHd0qxI — HTML Standard (@htmlstandard) March 24, 2023 追加されたsearch要素は、下記で確認できます。 カテゴリは、フローコンテンツです。 4.4.15 The search element -HTML Standard search要素は、検索またはフィル
    HTMLにsearch要素が追加されたぞ！

  • 『なぜインライン要素・ブロック要素概念は依然として有用なのか：現代的なWeb制作への適用』という記事について


    なぜインライン要素・ブロック要素概念は依然として有用なのか‥現代的なWeb制作への適用 https://zenn.dev/coedo/articles/html-css-inline-element-block-level-element この記事では、﹃なぜインライン要素・ブロック要素概念は依然として有用なのか﹄という記事︵以下﹁元記事﹂といいます︶の説明について見ていきます。 この記事の対象者 この記事は、ウェブ制作を学んでいる人や、﹁インライン要素﹂﹁ブロック要素﹂という用語の扱いに困っている人を想定しています。 はじめに‥ 結論 この記事の結論は次の2つです。 今日のHTMLから﹁インライン要素﹂﹁ブロックレベル要素﹂という表記はなくなった。 ある要素にどのような要素を入れるのかは、﹁インライン要素﹂﹁ブロック要素﹂という考え方を使わなくてもできる。 詳しく説明したいと思います。
    『なぜインライン要素・ブロック要素概念は依然として有用なのか：現代的なWeb制作への適用』という記事について
    Lhankor_Mhy
    Lhankor_Mhy 2023/03/27
    わかる。このほか、ブロックボックス・インラインボックスとかいう言葉もあるのでまたややこしい。
    リンク

  • inline-blockの右側にゴミ文字が表示される（原因わからず） - Qiita


    表題の件、CSSでfont-familyに日本語のGoogle Fontsを指定したテキストを旧バージョンのiOSで表示した時に、特定のフォントのいくつかで発生することがわかり、原因がわからずお手上げだったので備忘録としてここに書きます。 現象はこのとおり。(iPhone X, iOS12.2, font-family: BIZ UDGothic︶ ここで、先頭の青い矩形はinline-blockで内容は空です。矩形の右側に現れているバツ印の四角がゴミ文字で、﹁情﹂という文字に被さっています。下側の例は﹁情﹂の前に全角スペースを入れたものです。全角スペースの位置にバツ印が出てしまってます。
    inline-blockの右側にゴミ文字が表示される（原因わからず） - Qiita
    Lhankor_Mhy
    Lhankor_Mhy 2022/06/29
    へえ、MacOS Safari だとどうなんだろ。
    リンク

  • テキストエリアに自動的に改行が入る場合がある

    Lhankor_Mhy
    Lhankor_Mhy 2022/06/01
    Chromeのバグらしい
    リンク

  • br要素だけがフレックスアイテムやグリッドアイテムにならない

    Lhankor_Mhy
    Lhankor_Mhy 2022/04/04
    仕様で決まっていない、ということのよう。
    リンク

  • どうしてHTML5が廃止されたのか | フューチャー技術ブログ


    フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては﹁何をいまさら﹂という話題かと思います。 しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。 HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。 そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。 広義のHTML5 / 狭義のHTML5HTML5
    どうしてHTML5が廃止されたのか | フューチャー技術ブログ
    Lhankor_Mhy
    Lhankor_Mhy 2021/06/21
     え、2021年まではHTML5.2って生きてたんだ。知らなかったわ。2019年に統合されたものだとばかり。  

    ●html
    ●web
      
    リンク

  • iframeのsandbox属性とフレーム禁止ヘッダーの関係

    1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>Document</title> 9</head> 10 11<body> 12 <p>A. sandboxなし・リンク先：X-Frame-Options: DENY（正しく表示できる）</p> 13 <iframe 14 srcdoc="&lt;a href=&quot;https://twitter.com&quot; target=&quot;_blank&quot;&gt;

    iframeのsandbox属性とフレーム禁止ヘッダーの関係

  • CSSのcanvasとviewportとposition:fixedとpinch zoom - saneyuki_s log

    specを元にした概念の整理 間違いあったら教えて欲しい CSS 2.1におけるviewport CSS 2.1におけるviewportを説明するにあたり、以下のterminologyが必要となる canvas For instance, user agents rendering to a screen generally impose a minimum width and choose an initial width based on the dimensions of the viewport. viewport User agents for continuous media generally offer users a viewport (a window or other viewing area on the screen) through which users co

    CSSのcanvasとviewportとposition:fixedとpinch zoom - saneyuki_s log
  • 1 2 3 次のページ

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

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

  • @hatebu

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

はてなブックマーク

公式Twitter

はてなのサービス

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