タグ

HTMLに関するtimetrainのブックマーク (49)

  • マウスに猫が集まるだけのChrome拡張機能『ネッコサーフィン』に「阿部寛のホームページだけで猫が消える」という問い合わせが10件近く来ている


    .txt @Monya_sub 10  twitter.com/monyaizumi/sta 2024-01-08 19:07:39  @Monyaizumi  Chrome monyaizumi.com/cat-surfing/  便 # pic.twitter.com/MW0GwNydPq 2023-12-29 17:08:03
    マウスに猫が集まるだけのChrome拡張機能『ネッコサーフィン』に「阿部寛のホームページだけで猫が消える」という問い合わせが10件近く来ている
    timetrain
    timetrain 2024/01/09
    なんでだろと思ったらフレームセットのせいか
  • 「昔のインターネット」の精神を取り戻す、HTMLエネルギー運動

    今日のWebは商取引などの目的に最適化され、少数の企業によって所有されている。個人に力を与え、自己表現を促すかつてのWebの魅力を取り戻す「HTMLエネルギー(HTMLエナジー)」というムーブメントが密かに盛り上がりつつある。 by Tiffany Ng2024.01.08 363 9 Webサイトは、常に洗練されたデジタル体験だったわけではない。 かつて、ネットサーフィンをするには、自分の意に反して音楽が再生されるタブを開いたり、色つきの背景にタイムズ・ニュー・ローマン書体の文字がびっしり詰まったページを読んだりする必要があった。スクエアスペース(Squarespace、Webページ作成サービス)やソーシャルメディアが登場する以前の2000年代、Webサイトは個性を表現するものであり、コードの知識とインターネット上に存在したいという願望を持ったユーザーが、HTMLを使ってゼロから作るもの

    「昔のインターネット」の精神を取り戻す、HTMLエネルギー運動
    timetrain
    timetrain 2024/01/08
    現代のdivタグの山のようなページより、FontタグとTableタグを駆使していた頃のほうが、実際の情報密度は高かったと思う昨今。無駄が多すぎる
  • 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内に記

    2023年最新版: HTMLのheadの書き方、head内に記述する要素の総まとめ
    timetrain
    timetrain 2023/01/25
    まだTableタグで組んでいた頃の方がデータ量が少なくて済んだな、と振り返る
  • 10年弱エンジニアをやってきてわかった、あなたの開発効率を倍にしてくれるツール37選|苦しんでプログラミングを学んだ柴犬(くるしば)


    note   Web IT 8Twitter6000 10 pic.twitter.com/hK1ZhNavwh   (@shiba_program) September 13, 2022
    10年弱エンジニアをやってきてわかった、あなたの開発効率を倍にしてくれるツール37選|苦しんでプログラミングを学んだ柴犬(くるしば)
  • imgタグのwidthとheightを省略したらダメ! 画像によるレイアウトシフトを回避する最近登場した2つの優れた解決方法

    レイアウトシフトとは、Webページがロードされる時に画像のスペースが確保されず、画像が表示された時にその分レイアウトがずれてしまうことです。 このレイアウトシフトを回避するために10年以上もの間、アスペクト比を手動で適用する必要がありました。しかし、現在ではそんな馬鹿げたハックは必要ありません。最近登場した2つの優れた解決方法を紹介します。 Avoiding <img> layout shifts by Jake Archibald (@jaffathecake) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 レイアウトシフトとは aspect-ratioプロパティによるレイアウトシフトの回避方法 widthとheightによるレイアウトシフトの回避方法 どちらの方法を使用すべきか レイアウトシフトとは デフォルトでは、<im

    imgタグのwidthとheightを省略したらダメ! 画像によるレイアウトシフトを回避する最近登場した2つの優れた解決方法
    timetrain
    timetrain 2022/07/21
    20年以上前の記事かと思った
  • 書評『HTML解体新書』 - uhyo/blog


    2022419HTMLTypeScript : uhyoHTML TypeScriptReactHTML17HTMLHTML4.01
    書評『HTML解体新書』 - uhyo/blog
  • 阿部寛のHPで「HTMLがたった15行だからはやい」と”わかってる人感”を出されると恥ずかしくなる話

    𝗟𝗮𝗱𝗱𝗴𝗲 🔥 @laddge_ 阿部寛のホームページについて、「HTMLがたったの15行だから速いんやで」って感じで "わかってる人感"だすのやめてもらっていいですか見てて恥ずいっすわ 2022-04-05 17:55:29

    阿部寛のHPで「HTMLがたった15行だからはやい」と”わかってる人感”を出されると恥ずかしくなる話
    timetrain
    timetrain 2022/04/07
    トップページは表紙画像を含めて100kbまで、と言われた記憶から見ると、今のCSS盛沢山はTableタグの入れ子構造よりひどくなった気がする
  • SEOのプロ解説! HTMLの効果的な書き方やタグの使い方とは | JADEのSEOプロフェッショナル相談室

    SEOのプロ解説! HTMLの効果的な書き方やタグの使い方とは | JADEのSEOプロフェッショナル相談室
  • 「SEOに強いHTMLの書き方」についての個人的な見解

    SEO に強い HTML の書き方」というツイートがそこそこバズっていて、その内容に対して駆け出しエンジニアの方たちが「参考になった」などと称賛の声を挙げていたのを見かけて思うところがあったのでこの記事を書きました。 元ツイの概要は次の通り。 body > main > article > sectionに h1は 1 ページに 1 つ(要キーワード) 見出しタグは毎度 section で囲む ヘッダーメニューは nav で囲む 画像に適切な alt を設定する title / description を書く 階層を意識して書く div はあまり使わない 画像は p で囲む この記事は元ツイおよび元ツイの投稿者を批判する意図で書いたものではなく、あくまで挙げられている内容に対する個人的見解をまとめたものです。 正しいか正しくないかをそれぞれの項目のはじめに書いていますが、あくまで僕個人の

    「SEOに強いHTMLの書き方」についての個人的な見解
    timetrain
    timetrain 2021/02/05
    このあたりの書式だけきっちりしてて中身ゼロやコピペの方が上にくる問題はgoogleがどうにかしてくれるしかないのがつらい
  • 「vistaが出る直前の時期だもんなぁ」14年前に廃線になってしまったピーチライナーのブラウザゲームが時代を感じさせる

    桃花台新交通が運営していたAGT路線である。愛称は、一般公募から選出された「ピーチライナー」。1991年3月25日に開業したが、2006年10月1日に廃止となった。 リンク Wikipedia 桃花台新交通桃花台線 桃花台線(とうかだいせん)は、かつて愛知県小牧市のほぼ中央部にある小牧駅から同市東部にある桃花台ニュータウンの桃花台東駅までを結んでいた、桃花台新交通が運営していたAGT路線である。愛称は、一般公募から選出された「ピーチライナー」。1991年3月25日に開業したが、2006年10月1日に廃止となった。 小牧市のほぼ中央にある市街地と、同市東部に広がる桃花台ニュータウンを結ぶ交通機関で、1991年より2006年まで営業していた。小牧駅 - 小牧原駅間は、名鉄小牧線の同区間と並行し、小牧原駅北側で同線を西から 11 users 7

    「vistaが出る直前の時期だもんなぁ」14年前に廃線になってしまったピーチライナーのブラウザゲームが時代を感じさせる
    timetrain
    timetrain 2020/07/07
    ああ、昔のwebサイトだ・・
  • 【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年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか

    【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい
    timetrain
    timetrain 2020/07/03
    読み込み時にずれるのはそんな実装が原因だったのか。
  • 「会社の30歳前後の女性陣、なぜかみんなHTML書けるんだよな🤔」

    しぐれグランデ @signal_green @y_k_m_s_ 三ヶ月ほど前の話ですが、marqueeかblinkのどちらかはandroidchromeで動きましたよ 2020-01-17 09:33:43 tao @tao_chameau @asami_vtj キラキラサイトに夢中だった学生時代。平成のインターネット文化が、私の働き方の原点になっている - はたらく気分を転換させる|女性の深呼吸マガジン「りっすん」 e-aidem.com/ch/listen/entr… 2020-01-16 21:17:53

    「会社の30歳前後の女性陣、なぜかみんなHTML書けるんだよな🤔」
    timetrain
    timetrain 2020/01/18
    ど、どりきゃす・・
  • 実はHTMLだけで多くのことが実現できる!知っておくと便利なHTMLの使い方


    HTMLCSSJavaScript使HTML 便HTML使 HTML can do that? by Ananya Neogi CSS   1. datalist - 2. dialog -  3. progress - 4. detailssummary - 5. inputmode - 6. inpu
    実はHTMLだけで多くのことが実現できる!知っておくと便利なHTMLの使い方
  • HTMLを1999年のように書く


    HTML 1999divWriteHTML Like It's 1999 by Bradley Taunt : 1999使div1999tablenav   1990HTML HTML HTML    1990HT
    HTMLを1999年のように書く
    timetrain
    timetrain 2019/06/21
    つまり阿部寛を讃えよってことだな!
  • W3Cで現在公開されているHTMLとDOM仕様は将来廃止されます - 水底の血

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

    W3Cで現在公開されているHTMLとDOM仕様は将来廃止されます - 水底の血
    timetrain
    timetrain 2019/04/10
    最近勉強してなかったので衝撃だった
  • 📃 Webページをそのままの状態でローカルに保存するツールを作った話 - Qiita


    yamaimo (@yarnaimodev) Qiita稿... 1998  Web 3TypeScript / Firebase / Node.js / React   coliss  Can't Unsee 1 7,630 2 7,930 1 Mastodon  Helix  2  WSL + Hyper + fish shell  VSCode   Puppeteer 使
    📃 Webページをそのままの状態でローカルに保存するツールを作った話 - Qiita
    timetrain
    timetrain 2019/02/17
    また20年前のニュースかと・・
  • 若い世代が知らない2000年代のHTMLコーディングの地獄 - ICS MEDIA


    2000HTML1020HTML NetscapeIEIE62000  / spacer.gif XHTMLCSStable使Image ReadyFireworks <table border="0" cellspacing="0" cellp
    若い世代が知らない2000年代のHTMLコーディングの地獄 - ICS MEDIA
    timetrain
    timetrain 2018/05/18
    テーブルタグ時代の人間ですが、大体このあたりでついていくのを諦めた憶えがある。自分のサイトもその辺りで更新が止まってる
  • もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita


    HTMLPhotoshop...  便CSS  WebOpenType .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } 
    もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita
    timetrain
    timetrain 2017/11/21
    ネスケVSIEの不毛な戦争に終止符を打つ福音だったはずのCSSが混沌の魔王と化してる現状ってば。ルビってあんなタグになってたのか。IE独自仕様しか知らなかった
  • HTML文書は文字エンコーディングUTF-8でなければなりません - 水底の血


     使UTF-8 4.2.5.5  - HTML Standard  Requireutf-8 when specifying character encoding by sideshowbarker · Pull Request #3091 · whatwg/htmlHTML使UTF-8HTMLShift_JISISO-2022-JPEUC-JPUTF16LEHTMLNuHtml CheckerUTF-8
    HTML文書は文字エンコーディングUTF-8でなければなりません - 水底の血
    timetrain
    timetrain 2017/10/09
    HTML3時代に作ったSorry!Japanese Only!なサイトがまだ消えずに残ってるけどさすがに修正する気にならん
  • 5000兆円欲しい!.css

    About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-

    5000兆円欲しい!.css
    timetrain
    timetrain 2017/07/20
    とんでもなくすごいんだけど、昔のfontタグでのレインボーアートを罵倒した果てのCSSがやはり同じ所に行き着いてしまったような無常感も覚える。