[B! javascript][HTML] Lhankor_Mhyのブックマーク

Lhankor_Mhy id:Lhankor_Mhy

javascriptとHTMLに関するLhankor_Mhyのブックマーク (13)

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

html

css

javascript

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

html

javascript

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

html

javascript

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

html

css

javascript

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

html

javascript
リンク
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
Lhankor_Mhy 2021/01/04
html

css

javascript
リンク
ブラウザの仕組み: 最新ウェブブラウザの内部構造
How browsers work Stay organized with collections Save and categorize content based on your preferences. Preface This comprehensive primer on the internal operations of WebKit and Gecko is the result of much research done by Israeli developer Tali Garsiel. Over a few years, she reviewed all the published data about browser internals and spent a lot of time reading web browser source code. She wrot
Lhankor_Mhy 2020/12/26
html

javascript

CSS
リンク
HTMLElement.inert property - Web APIs | MDN
Lhankor_Mhy 2020/10/08
html

javascript
リンク
Focusable Elements - Browser Compatibility Table
The following tables show which elements individual browsers consider focusa ble or tabbable (keyboard focusa ble). The tables are based on the focusa ble test document. Note that touch devices (without a physical keyboard) only show elements as tabbable (keyboard focusa ble), that can be navigated to through the on-screen keyboard (or "virtual keyboard"). Document Elements Element Expected Chrome Mic
Lhankor_Mhy 2020/06/10
html

javascript
リンク
静的サイトジェネレーター Gatsby - Qiita
静的サイトジェネレーターとは？ Static Site Generator︵SSG︶ WebサイトのHTMLファイルを生成するツールのこと Wordpressのような従来CMSの仕組みは、MySQLなどのDBをもとに、サーバーでHTMLを生成して返すものだったそれに対し静的サイトジェネレーターは、コンパイル時にGraphQLやAPIからすべてのデータを取得し全てのHTMLを最初に生成するさらに、生成されたファイルを、Netlifyなどのホスティングサービスを用いて、サーバーレスで公開する仕組みが主流になっている静的サイトジェネレーターのメリット ※ Netlifyなどホスティングサービスを用いた場合レスポンスが速い。サーバーでHTMLを動的に生成しないからサーバー代 ¥0✨ サーバーが必要ないためサーバー落ちない。メンテが不要 ※ ただしホスティングサービスが落ちる可能性はあり
Lhankor_Mhy 2020/04/01
更新のたびに静的ページを全部作り直してデプロイ……ってどこかで聞いたやり方だな、と思ったら、われわれ不動産業界ではおなじみ、リングアンドリンクの＠Dreamじゃないか。10年以上前のソフトなのに。

html

javascript
リンク
マイクロソフト、Google、W3C、Mozillaらが協力。それぞれのWebブラウザのドキュメントをMozillaサイトに一本化。あちこちのWebサイトを見て回らなくても済むように
マイクロソフト、Google、W3C、Mozillaらが協力。それぞれのWebブラウザのドキュメントをMozillaサイトに一本化。あちこちのWebサイトを見て回らなくても済むように Mozillaは、マイクロソフト、Google、W3C、サムスンなどと協力して、それぞれのブラウザなどに対応した技術解説のドキュメントを一本化し、Mozilla Developer Networkの﹁MDN web docs﹂にまとめて掲載する取り組みを開始したと発表しました。 Webブラウザに関するHTMLやCSS、APIなどの機能の解説は、そのWebブラウザを開発するベンダのWebサイト、例えばマイクロソフトならMSDN︵Microsoft Develpers Network︶、GoogleならChromeのWebサイト、MozillaならMDN︵Mozilla Developer Network︶のWe
Lhankor_Mhy 2017/10/24
まあ最近は標準化が進んで独自実装が減ったし、caniuse見てベンダープレフィクスと対応確認すればわりとなんとかなる感じだったしな。

HTML

CSS

javascript
リンク
【レビュー】HTML5でiPhone用ウィジェットを作る・動かす――それなら『WidgetPad』で | ネット | マイコミジャーナル
HTML5を利用してみたいなら 2009年の後半になってHTML5の話題が各所で見られるようになってきた。2010年9月には最終版も出ると言われており、10年以上使われてきたHTML4に、現在の主流に合わせたAPIの強化や要素の追加を行っている。Firefox/ Safari/ Google Chrome/ OperaといったWebブラウザはHTML5への対応を強化しており、すでに多数の新機能が利用できるようになっている。多数のiPHone向けWebアプリが登録されているのですぐに試せる今後盛り上がっていくことが期待されるHTML5。しかし、現時点で実際に利用することを考えると、デスクトップPCの場合、多様なWebブラウザが存在し、実装も異なるところが問題になる。その点、スマートフォンであれば機種もWebブラウザも限定されてくる。本稿で紹介する﹃WidgetPad﹄は、iPhone向け
Lhankor_Mhy 2010/01/14
html

javascript

iphone
リンク
MS、無償のWeb制作者向けIEプラグイン「Internet Explorer Developer Toolbar」正式版公開：CodeZine
Microsoftは9日、IE用プラグイン﹁Internet Explorer Developer Toolbar﹂正式版をリリースした。以前からWeb開発者向けにリリースされていたプラグインだが、今回よりバージョン1.00の正式版となった︵リリースされたのは、バージョン1.00.2188.0︶。 Internet Explorer Developer ToolbarはMicrosoftのWebサイトより無償でダウンロードできる。IE7の場合、インストールするとブラウザの右上に小さなアイコンが現れ、これをクリックするとメニューが表示されるようになる。 Webサイトにおける画面デザインでは、HTMLのDOM構造やCSS適用内容、要素のサイズなど、実際にブラウザを通した表示を見ながら検証していく必要がある。Internet Explorer Developer Toolbarを使うと検証した
Lhankor_Mhy 2007/05/14
tool

javascript

html

CSS
リンク
1