[B! html] kibitakiのブックマーク

ここ1~2年くらいで使えるようになった(主要ブラウザーの最新版がすべて対応した ) ウェブの新機能についてランダムに喋る!

2024.03.15 福岡フロントエンド勉強会 #1

kibitaki 2024/03/18

PopoverAPIはFirefoxで未対応じゃないですかーやだーばかー

css
html

リンク

これは便利！ HTMLはdiv要素一つ、あとはCSSをコピペするだけで100種類のツールチップを簡単に実装できる -CSS Tooltips & Speech Bubbles

HTMLはdiv要素一つだけ、あとはCSSをコピペするだけで約100種類のールチップとスピーチバブルを実装できるCSS Tooltips & Speech Bubblesを紹介します。このツールチップって実装すると、けっこう面倒ですよね。ベタ塗りのツールチップをはじめ、グラデーションの枠、しっぽの位置、しっぽの形状など、さまざまなデザインが、ここを見ればコピペで簡単に実装できます。 CSS Tooltips & Speech BubblesCSS Tooltips & Speech Bubblesを作成したのは以前紹介したCSS Loaders︵紹介記事︶やCSS Ribbon Shapes︵紹介記事︶と同じ作者で、前回はCSSで実装されたローダーとリボンでしたが、今回は100種類のツールチップとスピーチバブルです。

kibitaki 2024/03/06

リンク

2023年最新版: HTMLのheadの書き方、head内に記述する要素の総まとめ

HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「HEAD」を紹介します。 HEAD: A simple guide to HTML <head> elements 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。以前の版からいろいろと変更されています。 2016年版: head内に記述する要素の総まとめ 2018年版: head内に記述する要素の総まとめ head内に記述する最小限の構成 head内の要素 meta要素 link要素ソーシャル関連のhead内の要素ブラウザ・プラットフォーム関連のhead内の要素メモ head内に記述する最小限の構成下記はシンプルなWebサイトで必須となるhead内に記

kibitaki 2023/01/26

リンク

便利なのが登場！最近見かけるさまざまなUI要素600種類以上をシンプルなHTMLとCSSで簡単に実装できる -UIverse

button { --border-radius: 15px; --border-width: 4px; appearance: none; position: relative; padding: 1em 2em; border: 0; background-color: #212121; font-family: "Roboto", Arial, "Segoe UI", sans-serif; font-size: 18px; font-weight: 500; color: #fff; z-index: 2; } button::after { --m-i: linear-gradient(#000, #000); --m-o: content-box, padding-box; content: ""; position: absolute; left: 0; top: 0; wi

kibitaki 2023/01/18

リンク

2024年のファビコンを極める: 本当に必要なファイルはほぼ6つ（翻訳）｜TechRacho by BPS株式会社

はじめにモダンブラウザで使われるファビコンの作り方を見直して、今こそアイコン生成であくせくするのを終わりにしましょう。昨今のフロントエンド開発者は、ブラウザタブやらタッチ画面やらにWebサイトの小さなロゴを表示する、ただそれだけのためだけに静的なPNGファイルを20個以上扱わなければなりません。よりスマートな方法で、現代のニーズに合う最小限のアイコンセットを使う方法を紹介します。ファビコンは見かけよりもずっと幅広く奥深いトピックで、実は誰もがファビコンについてしっかり学びたいと思っていることもわかってきました。本記事全体の内容を実質わずか2行のスニペットに凝縮したものも紹介していますので、今ファビコンで苦しんでいる方は（正確な使い方をご存知なら）そちらをお使いいただけますが、そこをぐっとこらえて記事を最後までお読みいただくことをおすすめいたします。 🔗 忙しい人向け: ウルトラショー

kibitaki 2021/06/26

リンク

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

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

kibitaki 2021/06/21

事象はまあいいけど、リーナス・トーバルズ抜きでLinuxの説明するのと同様、この件でイアン・ヒクソンを出さないと全然解像度がぼやける。あと各ブラウザ事業者が双方にどうリソースを出し利用してたか

リンク

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

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

kibitaki 2021/05/07

おっ？最近じゃあレンダリングの話なんて珍しいねぇ。よおしおじちゃんがさぼるレンダラに蹴り入れるにはとかお手軽メモリリークとかテーブルネストとかの話を・・・って違うの？あ、そう。

リンク

最近の実装に合わせたHTMLテンプレート、基本のコードとすべての要素の役割も解説

最近の実装に合わせた、Webページ用のHTMLテンプレートを紹介します。レスポンシブ用のHTML、ソーシャルメディア用のHTMLをはじめ、高速表示に欠かせないrel="preload"なども含まれています。IEなどの古いブラウザはプログレッシブエンハンスメントで対応しています。 HTMLテンプレートはすべての要素の役割を各行ごとに解説しているので、自分に不必要なものを削除したり加えたりすることもできます。 My current HTML boilerplate by Manuel Matuzović 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに HTMLのテンプレート（最終形） HTMLのテンプレートを1行ずつ解説ページのタイトルと説明文、外部ファイルソーシャルメディア用のHTML アイコンとアドレスバーもう

kibitaki 2021/04/27

普段はコリス有難がる方ではないけど、先ほど目が腐るようなガイドライン記事を見たばかりなので目が潤う。

リンク

現在のGoogle HTML/CSS Guide コーディング規約/日本語訳

コーディングを勉強している方や、普段当たり前のようにコーディングしているけれど、上手く使えているのか不安な方向けにGoogle HTML/CSS Guideの翻訳記事を書きました。︵2024年02月29日更新︶色んな方のコーディングを見ていると実に様々。情報や知識が古いままで、今では推奨されない書き方も散見されます。特に仕事で使っていると、誰かに指摘されない限り自分のコーディングを見直す事は無いかもしれません。ですがW3Cの定めたHTML5の廃止など、変化の速い業界では定期的な見直しは勿論、何か指標となる物があると安心です。そこで今回はGoogleが用意しているgoogle html/css style guideのドキュメントを元に、Googleコーディング規約と要点を解説。このコーディングガイドラインが絶対的な正解では無いかも知れませんが、参考になれば嬉しいです。 Google

kibitaki 2021/04/27

最新のgoogleガイドラインには当たってないがあいつら自社でも守ってないし、最低限RFCでOKなことをダメ言い切ってんのはアウト／xserverやConoHaのアフィリエイトを無節操にやっててお察しレベルだった。

リンク

Webページ高速化に必須の知識！ブラウザがWebページをどのようにレンダリングしているか、図を用いて解説

ブラウザがWebページをどのようにレンダリングしているか、図を用いてやさしく解説した記事を紹介します。レンダリングの仕組みを理解することで、HTMLやCSSやJavaScriptなど実装時にも気をつける点があります。 How the browser renders a web page by James Starkie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに 1. HTMLの解析︵パース︶を開始する 2. 外部リソースを取得する 3. CSSを解析し、CSSOMを構築する 4. JavaScriptを実行する 5. DOMとCSSOMをマージしてレンダリングツリーを構築する 6. レイアウトとペイントを計算するはじめに私の考えとしては、高速で信頼性の高いWebサイトを構築するには、実装中に各ステップを最適

kibitaki 2020/11/12

リンク

「(HTML) + CSS」のみを使って、今「リアルな電卓」を作ってみた - Qiita

続編を書きました。CSSも大幅改善してるので、一度見てみてください。︻小数点実装︼﹁(HTML +) CSS﹂のみを使って、今﹁もっとリアルな電卓﹂を作ってみた - Qiita完成品まずは、CodePenで完成品を紹介します。ボタンを押して計算を試してみてください。 ※ スマホだと反応が悪い場合があります。 See the Pen qiita_calc_last by j5c8k6m8 (@j5c8k6m8) on CodePen. はじめにはじめて、CSS カウンターの存在をはじめて知ったときは驚きました。テーブルの行番号は (必要であればJavaScriptで動的に) HTMLに記載するしか方法がないと思っていたからです。Qiitaにも、CSSカウンターのサンプルを載せた良記事があります。 CSS でテーブルに行番号を振る - QiitaCSSで見出しタグに連番をつけ

kibitaki 2020/07/16

リンク

【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい

そうなんです。 2020年夏、ページの読み込み中にレイアウトがシフトしないように、img要素にはwidthとheight属性を記述するのがいいらしいんです。 <img src="link/to/image.jpg" width="300" height="400" alt="画像の説明"> その昔、これが普通の時代もあったんですけどね。レスポンシブな時代にはwidthとheight属性を書かないのが一般的（？）になっていました。また、widthとheight属性が記述してあってもCSSでwidth: 100%; height: auto;が指定されているとレイアウトシフトが発生してしまっていました。参考： img要素のサイズ属性の記述の有無についてのTwitterのアンケートなんでいまさら？なぜなら、2019年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか

kibitaki 2020/07/03

リンク

HTMLチェッカーはchecker.html5.orgを推してみたい - 水底の血

次の3つのチェッカーについて、 Validator.nu Living Validator https://validator.nu/ Nu Html Checker https://validator.w3.org/nu/ Nu Html Checker https://checker.html5.org/ 次のHTMLコードを投入して比較してみたよという話。 <!DOCTYPE html> <html> <head> <title>Test</title> </head> <body>  <dl> <div> <dt> Last modified time </dt> <dd> 2004-12-23T23:33Z </dd> </div> <div> <dt> Recommended update interva

kibitaki 2019/05/29

リンク

W3Cで現在公開されているHTMLとDOM仕様は将来廃止されます - 水底の血

まえがき W3C（とWHATWG）からの公式なアナウンスはまだ確認していませんが、何度目かに結成されるW3C HTML WorkingのDraft Charterと、このCharterから辿れるDRAFT Memorandum of Understanding Between W3C and WHATWG（Memorandumは日本語で覚書などと訳されるので、ここでも覚書と呼びます）がブログエントリーのタイトルのソースになります。もっとも、今確認できる覚書もドラフトですから、変更があるかもしれません。しかしながらURLで観測できるわけですから、大筋でW3CとWHATWGとの間で合意が取れているのではないかと推測します。あとは、覚書だけでなくCharterもドラフトということになっていますが、以下の文章では面倒なので省略します。最後にお約束ですが、このブログエントリーは「だいたいあってる」感

kibitaki 2019/04/10

くっきりはっきり、って言い回しが苦手。おっさんが両瞼を指で広げて煽ってる図が脳裏から離れない。（関係ない）

リンク

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 =

kibitaki 2019/03/10

面白がられて即破られて斜め上に広げられるところまで定型だけど、よろしいんじゃないでしょうか。

html

リンク

スクリーンサイズに合わせてフォントサイズを変更 | Web Design Leaves

<section> <h1 class="title">Media Queries</h1> <p class="main-text">Animi sint corrupti ipsum sunt...</p> <section> <h2 class="title">Break Point</h2> <p class="main-text">Vitae, nam, aperiam pariatur dicta officia...</p> <p class="main-text">Possimus, error, a id totam cumque fugiat ...</p> </section> <section> <h2 class="title">Grid System</h2> <p class="main-text">Sapiente dolorum impedit commo

kibitaki 2018/04/09

リンク

フロントエンドチェックリスト（日本語訳） - Qiita

GitHubで公開されているフロントエンドチェックリストというドキュメントが、網羅されている内容が幅広く便利そうだったので、日本語に翻訳しました。日本語版は、以下のGitHubリポジトリにあります。GitHub側と自動的に連携するようにしておりますので、誤訳や誤りなどがあれば GitHub のプルリクエストまたは Issue で報告していただけると幸いです。 https://github.com/miya0001/Front-End-Checklist 日本語版への貢献方法最終更新日時: 2017-11-19 03:50:47+09:00 (未翻訳) Front-End Checklist The Front-End Checklist is an exhaustive list of all elements you need to have / to test before lau

kibitaki 2017/10/24

項目には不満言わないけど、うーん、HTML文書的うんたら部分とWebAP的かんたら部分を切り分けたい、切り分けるべきって感じがすごくてもにょる。

リンク

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以外の文字エンコー

kibitaki 2017/10/09

こういう煽りがWeb上に残ると実装でアジャストしろよとか内部エンコーディングは別とかwhatwgじゃねーかとか勧告とはって話になると全部イヤイヤ期に退行する子の温床になるので困る。

リンク

2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA

HTML・CSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、2016年11月にHTML 5.1が勧告されたり、2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたりといったニュースがありました。また、2017年4月にはWindows Vistaのサポートも終了するため、今後対応すべきはWindows7のIE 11以降となります︵※︶。当たり前だと思っていたコーディング技術を今一度見直す時期にきているのではないでしょうか。本記事では2016年に見直した、今の時代に即したコーディング技術を紹介します。 ※ 参考記事﹁Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft﹂ 1. meta keywords設定は検索順位に関係がないウェブコンテンツのキーワードを指定するmeta keyw

kibitaki 2016/12/20

Flexboxを自然と使う案件て実はほとんどなくてなぁ。

リンク

そろそろ真面目に、HTMLで帳票を描く話をしようか - Qiita

帳票といえばPDFとして生成するのが一般的でしょうか?でも、2015年の今、あえてHTMLで描くのがホットです(個人的に)。ミリ単位で設定された高度な帳票も、CSSを駆使して簡単に作ることができます。業務システムでもモダンブラウザを選択することが増え、@pageなども積極的に使えるようになったこと、SPA(Single Page Application)の台頭、いろいろと条件が揃ってきました。書いてたら結構長くなっちゃったので、さくっとコードだけ見たい方は、Paper CSSリポジトリをどうぞ。はじめに HTML帳票のメリット 2015年現在、HTML帳票を選択する幾つかのメリットがあります。ライブリロードで、リアルタイムなスタイル調整バックエンドではなくフロントエンドで生成できる前者は、gulpやGruntの普及で、CSSにしろHTMLにしろ、リアルタイムにプレビューできる環

kibitaki 2015/10/05

リンク

はてなブックマーク

タグ

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

htmlに関するkibitakiのブックマーク (26)

お知らせ

今週のはてなブックマーク数ランキング（2024年6月第4週）

今週のはてなブックマーク数ランキング（2024年6月第3週）

今週のはてなブックマーク数ランキング（2024年6月第2週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス