pandasが出力するHTMLテーブルを高機能にする - Qiita
pandasのデータをHTMLで出力したいときってありますよね。 Excelよりもブラウザのほうが軽快なので、ちょっと見るだけならHTMLのほうが早いです。 ですが、以下のようなコードが出力するHTMLは全然イケていません。 import pandas as pd URL = "https://opendata.ecdc.europa.eu/covid19/casedistribution/csv" # 世界各国別データ（ECDE オープンデータ） df = pd.read_csv(URL).iloc[:100, :] df.to_html('hoge.html') 出力したHTMLファイルをブラウザで開くとこんな感じ 装飾が全くなく、無骨すぎます。 そこで、こちらの記事で紹介されていたJavaScriptのライブラリ-DataTables-の力を借りて、高機能かつ見栄えをよくします。 一
【HTML/CSSのみ】ぬるっと動くスムーススクロールの実装 - Qiita
#はじめに スムーススクロールは、同じページ内を滑らかに移動させる機能のことです。 何か項目をクリックすると、画面がぬるっと動くWebサイトをよく見かけると思いますが、あの動きを実現するためのものです。 サイトに動きをつける際、個人的にこれまでは主にJavaScriptを使っていたのですが、スムーススクロールはHTML/CSSだけで実装できると知ったので、実際に試してみました。 #ソースコード・動作 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Scroll</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="box top" id="top"> <span class="text">Top</sp
HTML tableの実装がこれまでと変わる！Googleデベロッパーによる変更点の解説 -TablesNG
GoogleではCSSの新機能を導入するだけでなく、既存の機能を向上することにも取り組んでいます。その中の一つ「TablesNG」で、HTMLのtableの実装がこれまでと変わるのでその変更点を紹介します。 tableは古くからあり、その後さまざまなCSSの機能がブラウザに実装されました。当然、それらの新しい機能にtableは対応していません。それらに対応し、不整合を修正するのが今回の取り組みです。 TablesNG Resolves 72 Chromium Bugs for Better Interoperability by Una Kravets, Aleks Totic 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに TablesNGの取り組み 1. テーブルの行にposition: sticky 2. バック
ARIA in HTML仕様が勧告候補に | アクセシビリティBlog | ミツエーリンクス
W3Cからアナウンスがあるように、ARIA in HTML仕様（参考日本語訳）が勧告候補（Candidate Recommendation）になりました（W3C Invites Implementations of ARIA in HTML）。 ARIA in HTMLは、WAI-ARIAをHTMLで使用するにあたっての適合要件を定めるものです。 ご存じの方も多いとは思いますが、内容に関して具体的な例を通して簡単に見てみましょう。 例えばmain要素の場合、3章のテーブルをたどっていくと、2列目の暗黙のARIAセマンティクス（Implicit ARIA semantics）としてrole=mainが規定されていることがわかります。これは、HTML Standardのmain要素の冒頭の要素定義で、Accessibility considerationsのFor authorsのリンクからも
HTML/CSS初学者がつまづきやすい記述ミスと修正方法
2021年3月24日 CSS, HTML, Webサイト制作 Webサイトを制作中に、なぜかうまく表示されないことはよくありますよね。最初のうちは簡単なミスを見落としがちです。実際によく質問される項目を、拙著「ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座」にてまとめています。その一部、特にHTML/CSSについて頻繁に聞かれるケースを紹介します。 ↑私が10年以上利用している会計ソフト！ 記述したコードが反映されない ファイルが保存されていない 作業中のファイルとは別のファイルをプレビューしている コードのスペルミス よくわからないけど表示が変 正しいタグや属性の記述になっていない→記述方法の確認。リファレンスサイトも確認しましょう 開始タグと閉じタグの数が一致していない 閉じタグが正しい場所に記述されていない HTMLの文法エラーがないかチェック デベロッパーツ
表示速度を飛躍的に向上させるHTML/CSS最新仕様「content-visibility」「Lazy loading」「contain」をコード付き簡単解説
これまではJavaScriptを用いて実装するしかありませんでしたが、ついにimgやiframe要素であればloading="lazy"を付与するだけで、簡単に実装できます。 <!-- 画像に適用する場合 --> <img src="pic.png" alt="画像の詳細" loading="lazy"> <!-- iframeに適用する場合 --> <iframe src="external.html" loading="lazy"></iframe>画面外では読み込みが発生しないので、必要になった時（画面内に要素が入りそうになった時）に読み込みが発生するのでパフォーマンスが向上します。 また画像についてはsrcsetを用いたレスポンシブな画像に対しても指定できますし、picture要素を用いてfallback形式でも記述できます。 <img src="normal.png" srcse
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これは便利！ HTMLはdiv要素一つ、あとはCSSをコピペするだけでさまざまな形状を簡単に実装できる -CSS Shape
SEOのプロ解説！ HTMLの効果的な書き方やタグの使い方とは | JADEのSEOプロフェッショナル相談室
Google: Fine If AMP Page Has More Ads Than HTML Page