HTML on Lin's Blog

HTML でリンクを強制ダウンロードさせる方法

Wed, 26 Apr 2017 09:56:50 +0000

最近のブラウザはとても賢く、リンク先がプレーンテキスト、PDF、CSS ファイルなどの場合、ダウンロードせずにブラウザ上でプレビューします。しかし、ときにはユーザーにブラウザで閲覧させるのではなく、そのままダウンロードしてほしい場合があります。たとえば以前、jQuery の公式サイトから jquery.js をダウンロードしようとしたときは、プレビューが開いてしまい、右クリックして「名前を付けて保存」を選ぶ必要がありました。しかし私の目的ははっきりしていて、ファイルを閲覧したいのではなく、ダウンロードしたいだけなのです！

HTML Anchor の本文がメニューに隠れる問題の解決方法

Mon, 20 Feb 2017 23:28:39 +0000

HTML の Anchor（アンカー）機能はとても便利です。ページが長いとき、Anchor を使えば訪問者は指定した段落へすばやく移動できます。この手法は多くの技術ドキュメントやブログで使われています。https://coder.tw/?p=123#section1 のような URL を見たことがあれば、それが HTML Anchor の特性を利用したものです。この機能は便利ですが、いくつか問題も生じます。最もよくあるのは、ページの最上部に固定のフローティングメニューがある場合です。訪問者が Anchor リンクをクリックすると、ブラウザは指定の章まで自動でスクロールしてくれますが、一部の文字がメニューに隠れてしまうのです。私はずっとこの問題に悩んでいました。今日たまたま Facebook の技術ドキュメントを読んでいたところ、彼らの解決方法を見つけ、なかなか良いと思いました。

ページの onFocus の後に input の onFocus が発火するのを防ぐ方法

Thu, 16 Feb 2017 11:27:59 +0000

最近の仕事で、ウェブサイトに Google Analytics のユーザーイベント追跡コードを組み込んでいました。HTML のイベントを使ってコードを input にバインドし、ユーザーが特定の欄やボタンをクリックするたびに Google Analytics へ記録を送信するようにしました。この方法自体には問題ありません。ところが、ユーザーが input 欄をクリックしたあとに別のページ（Chrome のタブ）へ切り替え、再び自分のページに戻ってきた（Page onFocus）とき、input の onFocus イベントが自動的に発火することに気づきました！

JSでフロントエンドのファイルアップロードを処理する：プレビュー、サイズ、寸法、形式

Thu, 09 Feb 2017 13:44:33 +0000

ファイルをアップロードするときに一番嫌なのは、5分後に「ファイルが大きすぎる」「サイズが正しくない」と言われることです。アップロードの検証は通常バックエンドに任せるため、条件を満たしているかを確認するには、まずファイルをアップロードしなければなりません。特に画像は縦横比も確認する必要があります。これらすべてをバックエンドに任せきりにすると、ユーザー体験が損なわれることがあります。以前、NewTalkでプロフィール画像のアップロードを調べていたとき、これらの多くはフロントエンドで処理できることがわかりました。JSとHTML5 APIを使えば、ファイルの形式、サイズ（20MB）、寸法（100x100）をチェックできます。プレビューやフロントエンドでの画像の切り抜き・変換まで行えるのです！

JavaScript でブラウザの履歴を操作し、URL を変更して、戻るボタンのイベントを扱う（SPA に必須）

Sat, 14 Jan 2017 12:59:02 +0000

今や JavaScript はどこにでもあります。Ajax、ページの切り替え、ポップアップウィンドウなど、JS でウェブページを操作することはますます一般的になっています。React JS や Vue JS など、Single Page Application（SPA）の開発を支援する JS フレームワークまで登場しています。JS でウェブページを操作するときに一番怖いのは、URL の変化と履歴です。たとえば jQuery でページを切り替えても、JS の操作なので URL は変わりません。さらにユーザーがブラウザ左上の「戻る」ボタンを押すと、履歴に JS の操作が記録されていない（実際には記録できない）ため、まったく別のページに戻ってしまいます。この一連の問題を解決するには、HTML5 が提供する history.pushState、history.replaceState、そして onpopstate イベントを使えます。

Zen Coding――Web サイトを素早く開発できる便利ツール。HTML を手で書く人の必須ツールです～

Mon, 22 Aug 2011 21:40:44 +0000

きっと多くの人と同じように、私も Web ページを書くときは、DW（Dreamweaver）でデザイン画面をドラッグして組み立てるより、Notepad を開いて HTML を直接書くほうが好きです～この方法の良いところは、自分の腕を磨けることです（XD）。ただ、欠点は開発のスピードがやや遅いことです（とはいえ、この書き方に慣れると DW より速くなるんですけどね…XD）。今日は Zen Coding を紹介します。これを使うと、Web ページを書く速度が何倍にも上がります！ CSS の記述のような書き方で、そのまま Web ページを書けるんですよ～

W3Cバリデーション：サイトのCSSが標準に準拠しているかを確認する

Sun, 06 Sep 2009 13:36:56 +0000

W3Cについて：

W3C は、ウェブの標準化に取り組む団体です。W3C は、ウェブに関するさまざまな仕様を策定しています。例えば、標準の CSS4 や XHTML は、W3C が策定したものです。なぜこうした仕様が必要なのでしょうか？理由はシンプルです。ウェブページは異なるブラウザで表示されます。もしブラウザごとに使える構文が違っていたら、ウェブデザイナーはとても大変です。しかし、すべてのブラウザメーカーに一つの標準で合意させるのは困難でした。おそらく主な理由は、メーカー同士が競争しているからでしょう。そこで、公正な第三者である W3C が生まれ、標準を策定し、IE、Opera、Firefox などの各ブラウザメーカーは、その基本的な構文に従わなければならなくなりました。もちろん、各ブラウザが独自の構文を追加することもできなくはありません。とはいえ、すべてのブラウザが W3C の仕様に従っているわけではありません。IE のような大手は従っていないため、多くのウェブデザイナーは IE に対して愛憎入り混じった感情を抱いてきました（愛は多くの人が使っているから、憎しみはルールを守らないから）。ここまで読んで、W3C についてある程度ご理解いただけたと思います。では、ウェブページが標準に準拠しているかを確認する方法を紹介しましょう。