2013年6月27日木曜日

Feedly のカテゴリーを整理 - 正常に登録されてないフィードを Organize 画面で削除

1. 登録されているはずのフィードに +add to my feedly ボタンが表示される

Google Reader から Feedly にインポートしたフィードの中に、正常に登録されていなものがあった。

SnapCrab_No-0322左メニューのカテゴリー内にフィードが表示されているにも関わらず、そのフィードを選択すると、フィード名の隣に、+add to my feedly ボタンが表示される。

フィードが登録されているなら、このボタンは表示されないはずなのに。

そのため、当該フィードを削除したくなっても、Remove ボタンを押すことができない。

 

2. Organize 画面でフィードを削除する

これに対処するには、

  1. もし、対象のフィードが必要なものであるなら、一度、+add to my feedly ボタンを押し Feedly へ登録する。
  2. 左側に表示されるメニューより、 Organize を選択する。

SnapCrab_No-0323

この Organize 画面に表示されるフィードから、正常に登録されてないフィードを削除できる。

SnapCrab_No-0324

追記(2014/9/9): もし、登録してあるカテゴリーとフィードの数が多い場合、Google Chrome を使う方がよい。Firefox の方が処理が遅い。

Firefox で「プラグイン」を自動的に読み込ませないために`Click to Play’を有効にする - アドオン Switch plugins.click_to_play と Click-to-Play Manager を併用

1. Flash Player をデフォルトでブロックしたい

Firefox 22.0 がリリースされた。以前より明らかに動作が軽くなった。 ^^

しかし、残念なことに、Adobe Flash Player 11.7.700.224 との相性を確認したところ、相変わらず「ウィンドウが非アクティブ」になる現象が生じる。そのため、「保護モード」を無効にして Flash Player を利用せざるを得ない。問題の生じない過去のバージョンを使用したいけれど、もうすぐサポートが打ち切られてしまう

そこで、Flash Player を利用したサイトが下火になって現在、デフォルトで Flash Player をブロックすることにした。

 

2. Click to Play で「プラグイン」の読込みをコントロールする

SnapCrab_No-0314Flash Player をブロックする定番のアドオンと言えば、

これに対して、Firefox 14 から `Click to Play’ と呼ばれる、プラグインの読み込みをコントロールする機能が実装されている。

SnapCrab_No-0315Firefox、プラグイン向けに「click-to-play plugins」を実装 | 開発・SE | マイナビニュース 

「click-to-play plugins」は、Firefoxのプラグインを制御する機能。この機能はすでにFirefoxのナイトリーチャンネル(Firefox 14)に導入されているという。

この機能はFirefox 14に実装されているが、標準では無効となっている。有効にするには、アドレスバーで「about:config」を入力し、オプション「plugin.click_to_playplugins.click_to_play」のvalue値をfalseからtrueにする必要がある。(訂正は引用者による)

古い Flash Player は、Click to Play の対象となっている。

Mozilla、「Adobe Flash Player」の旧バージョンを“Click-to-Play”の対象に - 窓の杜

今回無効化されたのは「Adobe Flash Player 10.2」以前の古いバージョンで、既知の脆弱性が存在するかどうかに関わらず“Click to Play”機能が有効になる。

Flashblock と違い、Click to Play は全てのプラグインをコントロールの対象としている。

プラグインのコントロールはユーザの手に | Mozilla Japan ブログ

Mozilla は、Flash、Java、Silverlight など、サードパーティ製のプラグインを Firefox で読み込む方法を変更します。この変更は Firefox のパフォーマンスと安定性の向上に役立ち、セキュリティ上も大きなメリットがある一方、プラグインに対するユーザのコントールをより強化することができます。…

設計が不十分なサードパーティ製プラグインは、Firefox がクラッシュする最大の原因であり、ユーザの Web 体験を著しく損なうことがあります。このような状況は、プラグインのロードやアンロード中の一時的な停止、Web サイト閲覧中にメモリ使用率が高くなったとき、その他、予期しない Firefox のクラッシュが生じたときによく見られます。

 

about:config で設定する方法

最新バージョンの Flash Player も対象にするには、Click to Play を有効にする必要がある。

  1. ロケーションバーで about:config を入力
  2. plugins.click_to_play を検索
  3. 「値」ダブルクリックして、false から true に変更

 

Click to Play を有効にしたときの表示

Click to Play を有効にすると、プラグインを必要とするサイトでは、ロケーションバーの左側に「ブロックの形をアイコン」が表示される。

例えば、Youtube の動画にアクセスすると、ロケーションバーの左側にブロックの形をしたアイコンが表示される。

プラグインを有効にしたい場合は、「ブロックの形をしたアイコン」クリック。

  • 一時的に有効にしたい場合、表示された吹き出しに表示される「有効化」ボタンを押す。
  • 永続的に有効にしたい場合、「すべてのプラグインを有効化」ボタンを押し、「このサイトでは常にプラグインを有効にする」を選択する。

SnapCrab_No-0319

もしくは、一時的に有効にしたい場合、ブロックされたプラグインが表示するコンテンツの中に表示される「再生ボタン」をクリックする。

SnapCrab_No-0315

 

3. Click to Play を管理するアドオン

about:config の設定は面倒であるし、ブロックしたサイトを管理できない。そこで、お手軽に Click to Play のオン・オフを切り替え、ホワイトリストを管理するためのアドオンを利用することにした。

インストールしたのは、以下の2つのアドオン。

 

Switch plugins.click_to_play

SnapCrab_No-0317Switch plugins.click_to_play をインストールすると、アドオンバーにアイコンが表示される。

SnapCrab_No-0316このアイコンをクリックすると、Click to Play のオン・オフを切り替えることができる。

アイコンに「矢印」が表示されているとき、Click to Play が有効となる。もう一度クリックすると、「矢印」が消え、Click to Play が無効になる。

 

Click-to-Play Manager

SnapCrab_No-0318Click-to-Play Manager を併用すると、ブロックしたサイトを管理することができる。

  • メニューより、ツール > Click-to-Play Manager

を選択すると、現在、許可されている「ドメイン」と「プラグイン」の一覧が表示される。

SnapCrab_No-0320

許可してあったドメインをブロックしたい場合、対象を選択し、Remove ボタンを押す。

 

参考サイト

2013年6月25日火曜日

Firefox の KeySnail で設定したホットキーをマウスジェスチャーから呼び出す

1. ホットキーをマウスジェスチャーから呼び出す

SnapCrab_No-0310前回、KeySnail で「最小フォントサイズ」を変更するホットキーを設定した。ホットキーとして割り当てたのは、

Alt + 0

今回は、マウスジェスチャーを利用するためののアドオン FireGestures から、KeySnail で設定したキーバインドを呼び出したい。

 

2. FireGestures のスクリプトでキー入力を行う

  • Firefox ボタン > アドオン > FireGestures の設定ボタンを押す

「マッピング」タブを選択し、画面下部にある「スクリプトを追加」ボタンを押すと、編集ダイアログが表示される。

「名前」フィールドを「最小フォントサイズを変更」とした。

SnapCrab_No-0311

「スクリプト」欄には、以下を貼り付ける。

var event = document.createEvent("KeyEvents");
event.initKeyEvent("keypress",
		   true,
		   true,
		   null,
		   false,  // holds Ctrl key
		   true,   // holds Alt key
		   false,  // holds Shift key
		   false,  // holds Meta key
		   0,      // presses a special key   , @see http://mxr.mozilla.org/mozilla/source/dom/public/idl/events/nsIDOMKeyEvent.idl
		   event.DOM_VK_0  // presses a normal key, e.g. "A".charCodeAt(0),
		   );
document.documentElement.dispatchEvent(event);

ジェスチャーは RL とした。これは自分の環境では、マウスジェスチャー R に対して「表示の拡大」、L を「表示のリセット」に割り当てているため、類似した動作にした。

 

3. スクリプトについて

上記のスクリプトは、以下を参考にした。

キーイベントを初期化するためのメソッドの解説は、

 

関連記事

2013年6月24日月曜日

Firefox のアドオン KeySnail で「最小フォントサイズ」を変更するホットキーを設定する

1. Firefox で「最小フォントサイズ」を指定すると表示が崩れる

SnapCrab_No-0291Firefox 21 で Google ドライブのスプレッドシートを開くと、表示が崩れる。「行番号」が大きくなるに連れ、隣のセルが徐々にズレていく。

このような表示になった原因は、「最小フォントサイズ」を指定していたため。

  • オプション > コンテンツ > フォントと配色 > 詳細設定

において、「最小フォントサイズ」を「なし」に設定すると、正常に表示される。

最近では、Feedly のバージョン 16.0.500 でも同じような問題が生じていた。

だたし、Google Chrome で「最小フォントサイズ」を指定しても、どちらのアプリケーションとも問題なく表示される。

 

2. KeySnail で最小フォントサイズを変更するホットキーを設定する

Firefox で「最小フォントサイズ」を指定するには、いくつか手順を踏む必要がある。「最小フォントサイズ」を指定したり、「なし」に設定する操作に対してホットキーを付けたい。

SnapCrab_No-0305keysnail は特定の操作に対してキーを割り当てることができるアドオン。このアドオンを用いて、「最小フォントサイズ」を切り替えるホットキーを設定する。

最初に、KeySnail のインストールと初期設定を行う。

次に、「最小フォントサイズ」を設定する操作に対して、ホットキーを設定する。

  • アドオンバーにある KeySnail アイコンを右クリック > 設定ダイアログを開く

キーバインド」タブを選択し、下部に表示される「追加」ボタンを押し、「オリジナルのコマンド」を選択する。

SnapCrab_No-0306

  1. コマンド名」を「最小フォントサイズを変更する」とした。
  2. 今回は、Alt + 0 をホットキーとして割り当てる。「キー」フィールドで同キーを入力する。
  3. 「関数」の欄には、以下のコードを挿入して、OK ボタンを押す。
function (ev, arg) {
    const MIN_FONT_SIZE = 14, // 最小フォントサイズ
	CONFIG_PREFIX = "font.minimum-size.",
	COUNTRY_CODES = ["ar", "el", "he", "ja", "ko" , "th", "tr",
			 "x-armn", "x-baltic", "x-beng", "x-cans", "x-central-euro",
			 "x-cyrillic", "x-devanagari", "x-ethi", "x-geor", "x-gujr",
			 "x-guru", "x-khmr", "x-knda", "x-mlym", "x-orya", "x-sinh",
			 "x-tamil", "x-telu", "x-tibt",
			 "x-unicode", "x-user-def", "x-western",
			 "zh-CN", "zh-HK", "zh-TW" ];
    var minFontSizeNow = util.getIntPref(CONFIG_PREFIX + "ja"),
	setMinFontSize = function(fontSize){
	COUNTRY_CODES.forEach(function(countryCode){
		util.setIntPref(CONFIG_PREFIX + countryCode, fontSize);
	    });
    };
    minFontSizeNow == MIN_FONT_SIZE ?
	setMinFontSize(0) :
	setMinFontSize(MIN_FONT_SIZE);
}

ここでは「最小フォントサイズ」を 14 とした。もし、別の大きさに設定したい場合、この値を変更すれば良い。

 

3. 関数について

about:config で最小フォントサイズを変更

最小フォントサイズは、abuot:config の設定において、

  • font.minimum-size.

により設定名を抽出し、各々の値を変更した。

 

about:config の設定値を KeySnail で変更

KeySnail で、about:config の値を変更するには、

KeySnail 0.5.2 をリリースしました - mooz deceives you > お手軽 about:config によると、

util.setPrefs() メソッドを追加しました。このメソッドを使うと about:config の値を .keysnail.js 内で簡単に設定することが出来ます。

util.js · mooz/keysnail Wiki · GitHub に util のドキュメントが存在する。ただし、全ての関数の解説があるわけではない。

より、getIntPref(), setIntPref() 関数が定義されていたので、これを利用して about:config の値を設定した。

2013年6月23日日曜日

無線 LAN が頻繁に途切れるので、Aterm の「デュアルチャンネル機能」を無効にした – inSSIDer で無線の混雑状況を確認

1. インターネットが途切れる

無線 LAN 親機として Aterm を利用している。最近、インターネットを利用中に回線が途切れるようになった。動画を再生中に止まることがよくある。リンクをクリックしても、反応が悪い。

自分の部屋は無線親機から遠いが、以前は今ほどネットが不安定になることはなかった。

 

2. 「デュアルチャンネル機能」を無効にした

安定しない原因は、Aterm の「デュアルチャンネル機能」にあった。

価格.com - 『ニコニコ動画だけ途切れる』 NEC AtermWR8700N PA-WR8700N-HP のクチコミ掲示板 によると、

チャネルに空きがないにも関わらず、デュアルチャネルにしてしまって不安定になっているのではないでしょうか?

「デュアルチャンネル」機能とは、無線通信を高速化する技術。

デュアルチャネルで無線LANがスピードアップ!|トピックス|AtermStation によると、

… Atermはこの先端規格により、まず複数の無線部により2つのデータストリームを1つのチャネル上で空間多重する「MIMO」で伝送速度を倍速化。…、2つの無線チャネルを束ねる[デュアルチャネル(※2)]モードによって2倍以上に高速化!理論値で300Mbps(※1)、実効スループットでも有線接続にせまるハイスピードを実現します。

SnapCrab_No-0308

ただし、周囲の無線利用状況によって、接続が安定しないようだ。

デュアルチャネル によると、

周囲に同帯域を使用する無線LAN機器が多数存在する環境でデュアルチャネル通信機能を動作させた場合、無線接続ができない場合があります。
そのような場合には使用するチャネルを変更するか、デュアルチャネル通信機能を無効にしてご利用ください。

そこで、無線親機にアクセスし、[無線LAN設定] における「デュアルチャンネル機能」を無効にした。

SnapCrab_No-0303

この設定により、インターネットが途切れなくなった。また、リンクをクリックしたときのレスポンスが良くなった。

 

3. 無線の混雑状況を確認

inSSIDer を用いると、周囲の無線 SSID を調べることができる。使用されているチャンネル、電波の強さをグラフで示してくれる。

確認したところ、以前より無線の利用が増えていることが分かった。このため、無線親機から遠い自分の部屋では接続が安定しなかったようだ。

SnapCrab_No-0304

無線LAN が頻繁に途切れるので、ルータのプロテクション機能を利用 (コミュファ光) にづづく…

 

関連記事

Xmarks が原因で Firefox が固まる - 関連ファイルの削除と重複したブックマークの削除

1. Xmarks の同期処理が終了しない

Firefox と Google Chrome のブックマークを同期するために Xmarks を利用している。

しかし、アドオン Xmarks が原因で Firefox が固まるようになった。

Firefox で「応答なし」と表示されるとき、必ずアドオンバーにある Xmarks のアイコンが同期中であることを示している。試しに、Xmarks をアンインストールしたところ、Firefox が固まらなくなった。

最近、Xmarks が同期を行う時間が長かった。また、手動で同期ボタンを押したところ、一向に処理が終わらない。

SnapCrab_No-0300

 

2. Xmarks の関連ファイルを削除する

最初に、念のためブックマークをバックアップした。

  • Firefox ボタン > ブックマーク

を選択。「インポートとバックアップ」より、バックアップを行った。

Firefox を終了する。

次に、Firefox の「プロファイル」フォルダにある、xmarks に関連するファイルを削除した。

  • xmarks.log
  • xmarks.sqlite
  • xmarks-baseline-ランダムな文字列.json

通常、プロファイルは、以下のフォルダ内に存在する。

  • %APPDATA%\Mozilla\Firefox\Profiles\

プロファイル | Firefox ヘルプ によると、

Windows の スタート ボタンをクリックし、スタートメニュー下部の検索ボックスに %APPDATA%\Mozilla\Firefox\Profiles\ と入力してまだ Enter キーは押さないでください。スタートメニューにプロファイルのリストが表示されます。

Firefox を起動し、再度、Xmarks Sync をインストール。

Xmarks のセットアップウィザードを起動し、最初の同期で「サーバーに保存されているブックマークを保持し、コンピューター内のブックマークを捨てる」。

これにより、Xmarks を同期させたとき、すぐに同期されるようになり、Firefox が固まらなくなった。

もし、Xmarks をインストールしていて、Firefox が「応答なし」となるなら、そのとき xmarks が同期をしていないか確認する必要がある。

 

3. Xmarks に保存されているブックマークを整理する

ついでに、重複したブックマークがいくつかあったので整理した。

にアクセスし、メニューより、 Tools > Duplicate Bookmarks を選択する。

SnapCrab_No-0299

次に、「START THE BOOKMARK DUPLICATE DETECTOR」ボタンを押す。

SnapCrab_No-0301

これでも駄目なら、新しくアカウントを作り直すと良い。

 

関連記事

参考サイト

2013年6月22日土曜日

Firefox でフィード(Atom, RSS)の登録先を設定する - Feedly Cloud へ追加したい場合

1. 「購読」ボタンの設定

Firefox でサイトのフィードを登録したい場合、フィードの「購読」ボタンを押す。

購読」ボタンの配置は、「ツールバーのカスタマイズ」で行う。

  • メニューより、表示 > ツールバー > カスタマイズ…

SnapCrab_No-0294

「購読」ボタンを押すと、フィードのプレビューが表示され、登録先を選択する画面が表示される。「この購読に使用するフィードリーダー」をカスタマイズしたい。

SnapCrab_No-0296

 

2. 購読に使用するフィードリーダーを追加

a. 設定名と値

登録先を追加するには、about:config の設定より、以下の設定名に準じた値を設定する。

  • browser.contentHandlers.types.0.title
  • browser.contentHandlers.types.0.type
  • browser.contentHandlers.types.0.uri

ただし、上記に含まれる数字(ここでは 0)は、「他の登録先で使われている数字」と重複しないこと。

(cf. Browser.contentHandlers.types.*.uri - MozillaZine Knowledge Base)

手順としては、最初にブラウザのロケーションバーに about:config と入力する。

その後、検索フィールドに

browser.contentHandlers.

と入力して、設定名を絞り込み、既に設定してある値を表示。

設定名に含まれる数字を確認し、「これまでに使われている数字」を控えておく。

 

b. Feedly Cloud の場合

SnapCrab_No-0298例えば、フィードの追加先として、Feedly Cloud を追加したいとする。

自分の環境では、「これまでに使われている数字」の中で最も大きい数は 5 だった。そこで、新しく追加する設定名には、重複しないように 6 を使うことにした。

設定名を追加するには、設定値が表示されている部分で、

  • 右クリック > 新規作成 > 文字列

を選択し、下記の値を入力する。

設定名

browser.contentHandlers.types.6.title

feedly

browser.contentHandlers.types.6.type

application/vnd.mozilla.maybe.feed

browser.contentHandlers.types.6.uri

http://cloud.feedly.com/#subscription/feed/%s

※ 値の末尾に空白がないことを確認すること。

一度、Firefox を再起動する。これにより、上記の …. title で設定した値がフィードリーダーの候補として、ダイアログに表示されるようになる。

SnapCrab_No-0297

 

関連記事

2013年6月17日月曜日

Firefox で Feedly v16 にアップグレードしてサイドバーの中身が消えたら、最小フォントサイズを 12 ポイント以下に設定する

1. サイドバーのカテゴリーが消えた

Firefox 21 で Feedly のバージョンを 16 にアップグレードした。その結果、サイドバーに表示されていたカテゴリーが消えてしまった。ただし、Google Chrome 27 では正常に表示されている。

ウィンドウを横に目一杯広げ、常にカテゴリーを表示する状態にしても何も表示されない。

feedly

アップグレードは、http://www.feedly.com/index.html より行った。インストールされたバージョンは 16.0.500 。

からもインストールすることができる。 (2013/06/17 現在、削除されてしまった。)

このバージョンは、Google Reader から Feedly へ完全に移行する上で重要なものと位置づけられている。

[IMPORTANT] Preparing to be upgraded to the new feedly cloud | Building Feedly によると、

We are in the process of finalizing the migration from the Google Reader back end to the new feedly cloud backend. …

On the desktop, you can go to http://www.feedly.com/index.html and manually re-install the app and restart the browser. The latest feedly desktop number is 16.0.512.

Over the next 2-3 days you should expect to receive a green banner message (desktop) or a green card (mobile). This is the notification that your feeds and categories and up to 1,000 starred items have been successfully migrated to the feedly cloud and the articles you are seeing are coming from the feedly service.

Firefox では、2013/06/17 現在、バージョンは 16.0.500 。Google Chrome の方は、16.0.512 となっている。

追記(2013/06/17 23:47): その後、再びアップグレードを行ったら、Firefox でもバージョンが 16.0.512 となった。

 

Feedly Cloud では問題ない

追記(2013/06/21)クラウドに対応した Feedly では、最小フォントサイズを指定しても、サイドバーが消えることはなくなった。 バージョンは 16.0.515 。このバージョンでは、アドオンが不要となる。

利用するためには、Feedly Cloud is Now Available to All Users | Building Feedly によると、

Step #1: Go to http://cloud.feedly.com
Step #2: Login
Step #3: Restart feedly and your browser on all your devices

その後、これまで利用していた Feedly のアドオンを削除した。

 

2. 最小フォントサイズを 12 以下に設定する

サイドバーのカテゴリーが表示されない原因は、Firefox の「最小フォントサイズ」の設定だった。

自分の場合、「最小フォントサイズ」を 13 にしていた。これを 12 以下に変更したら、サイドバーのカテゴリーが標示されるようになった。

[Q&A] My firefox left sidebar has disappeared | Building Feedly によると、

This was due to the fact that he had a setting where he was using custom fonts and had a minimum font size configured in firefox. Unfortunately feedly is not flexible enough to adapt to those constraints (we opened a bug to look into this). Between now and then, the solution is to change the firefox settings:

“Yep! I changed the minimum font size to 12 point from 17 point and selected “Allow pages to choose their own fonts”, and now the sidebar is populated.”

Firefox で「最小フォントサイズ」を変更するには、

  • Firefox ボタン > オプション > コンテンツ > フォントと配色 > 詳細設定 > 最小フォントサイズ

で行う。

SnapCrab_No-0289

しかし、なぜか Google Chrome で最小フォントサイズを 12 以上に設定しても、サイドバーのカテゴリーは表示される。

2013年6月3日月曜日

HTML の「ブロックレベル、インライン要素」内における改行は空白となる場合がある

1. 「ブロックレベル要素」と「インライン要素」の違い

HTML のタグには「ブロックレベル要素」と「インライン要素」がある。

7.5.3 ブロックレベル要素と行内要素 によると、

HTMLの要素のうち、BODY要素に出現し得る要素のあるものは「ブロックレベル」と呼ばれ、他のものは「行内」 (これは「テキストレベル」としても知られている)と呼ばれる。

大雑把に言えば、ブロックレベル要素とインライン要素-HTMLの基本 によると、

ブロックレベル要素には、以下のものがあります。

<address>、<blockquote>、<center>、<div>、<dl>、<fieldset>、<form>、<h1>-<h6>、
<hr>、<noframes>、<noscript>、<ol>、<p>、<pre>、<table>、<ul>

インライン要素には、以下のものがあります。

<a>、<abbr>、<acronym>、<b>、<basefont>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、
<em>、<font>、<i>、<img>、<input>、<kbd>、<label>、<q>、<s>、<samp>、<select>、
<small>、<span>、<strike>、<strong>、<sub>、<sup>、<textarea>、<tt>、<u>、<var>

この2つの要素には「配置のルール」が存在する。

ブロックレベル要素の中には、他のブロックレベル要素やインライン要素を配置することができます。

一方、インライン要素の中には、文字データや他のインライン要素を配置することができますが、 インライン要素の中にブロックレベル要素を配置することはできません。

(同上より)

詳しくは、HTML 4 Document Type Definition を参照。

<!--
    HTML has two basic content models:

        %inline;     character level elements and text strings
        %block;      block-like elements e.g. paragraphs and lists
-->

上記の読み方は、Document Type Definition – Wikipedia を参考に。

 

2. HTML における改行、空白文字の扱われ方

a. インライン要素に改行を入れてしまった場合

注意することは、「改行」や「空白文字」の扱われ方。

例えば、インライン要素である a タグの中に span タグを、次のように配置してみる。

<div>
	<a href="">
		<span>
			ほげ
		</span>
	</a>
</div>
<div>
	<a href=""><span>ぴよ</span></a>
</div>
<div>
	<a href=""><span>ふが</span></a>
</div>

SnapCrab_No-0239ブラウザ(Firefox 21)に表示される「ほげ ぴよ ふが」の文字は、一見変わらないように見える。しかし、ソースを表示すると、「ほげ」と入力した文字の周囲に空白が表示されている。

Firefox 上で文字をコピーし、テキストエディターに貼り付ければ、空白があるのが分かる。ただし、ブラウザによって、コピーされた内容が異なる。Google Chrome 27, IE 10 では全く違う。

このように「空白」が表示される理由は、「インライン要素」に「改行」が含まれているため。

ブロックレベル要素とインライン要素 - Web標準普及プロジェクト > インライン要素 によると、

要素中に改行が混じるとやや複雑な形で表示されます。 これはインライン要素によって生成されるボックスは改行によって複数に分割されることがあるためです。

この場合、整形するつもりで、誤ってインライン要素である span タグ内に改行を2つ入れてしまった。そのため、改行が空白に変換された。

		<span>
			ほげ
		</span>

 

b. 改行が空白になる仕様

改行が空白に解釈される理由は、仕様による。

9.1 空白類 によると、

HTMLでは、次に挙げる文字だけが空白類文字であると定義される。

  • ASCIIスペース (&#x0020;)
  • 水平タブ (&#x0009;)
  • 書式送り (&#x000C;)
  • ゼロ幅スペース (&#x200B;)

行区切り類もまた、空白類文字である。

9.3.2 行区切り類の制御

1つの行区切りは、1つの復帰 (&#x000D;)か、1つの改行 (&#x000A;)か、1つの復帰/改行組であると定める。すべての行区切り類は、空白類である。

 

3. ブロックレベル要素内における改行

ブロックレベル要素でも、改行に注意しなければならない。改行が空白となる場合がある。

落とし穴になる空白文字と改行文字 によると、

以下のHTMLファイル(かなり簡略化してある)は2段落のテキストを表示する。表示後の見かけは段落ごとに同じか、違うか。違う場合はどこが違うか。

1: <html>
2: <body>
3: <p>abcdef</p>
4: <p>abc
5: def</p>
6: </body>
7: </html>

何が問われているのかピンとこなかった人は、少し考えてみよう。

正解は、「表示後の見かけは違う」「相違点は2段落目のcとdの間に空白が挿入されている」というものだ。

なぜ、こういう動作になるのかは、英語テキストを頭に描いてみれば分かるだろう。例えば、以下の2行があったとしよう。

1: The Extensible Markup Language (XML) is a subset
2: of SGML that is completely described in this document.

1行目のsubsetと2行目のofを結合するときには、そのまま結合して"subsetof"としてはおかしくなる。ここは単語の区切りなので、空白文字を入れねばならない。つまり、HTMLでは、改行は空白文字に等しい扱いを受けているのである。ただしここで補足しておくと、日本語などの文字を区切る改行は、空白扱いしないのが現在のHTMLである。

 

改行が問題とならない場合

ただし、ブロックレベル要素を見やすいように整形しても「空白」が入らない。

[HTML] ソース上の改行・タブ・空白(スペース)の扱い――インライン要素とブロック要素 | Ouka Studio

インライン要素以外の要素(ブロックレベル要素など)では、開始タグと終了タグそれぞれの前後の改行・タブ・半角スペースは、すべて無視される

よって、以下の整形は問題とならない。インライン要素とは異なることに注意する。

<div>
	<a href=""><span>ぴよ</span></a>
</div>

HTML における「空白」の仕様は、以下を参照。

 

4. 画像における空白

a タグimg タグを組み合わせるときは、特に注意が必要。両者とも「インライン要素」に分類されるため、上記の span タグと同じ扱いにしなければならない。

<div>
	<a href="">
		<img src="http://goo.gl/FgON8" alt="メニュー1">
	</a>
</div>
<div>
	<a href=""><img src="http://goo.gl/1SIHV" alt="メニュー2"></a>
</div>
<div>
	<a href=""><img src="http://goo.gl/5WFw0" alt="メニュー3"></a>
</div>

Firefox 21 で表示したところ、1番目と2番めの画像の間に隙間ができてしまった。

SnapCrab_No-0242

ただし、ブラウザによって表示が異なる。Google Chrome 27 では隙間ができない。

IE 10 では、画像にアンカーが付いていることを示すために枠が表示され、その分全体の高さが長くなる。ただし、1番目と2番目の画像に隙間はないようだ。

SnapCrab_No-0246

これに対して、HTML ソースの改行を半角スペースにしない方法 : full of universe には、以下の2つ書き方が述べられている。

タグ「後」の改行が表示されるんだったら、タグ「中」で改行してしまえ、という方法。

改行なんてコメントアウトしてしまえ、という方法。

しかし、どうもすっきりしないなぁ。。

タグの属性ごとに改行して書くことがある。属性が 0 個だと考えて、次のように記述するのも… うーん。

<ul>
	<li
		>1</li><li
		>2</li><li
		>3</li><li
		>4</li><li
		>5</li>
</ul>

 

参考サイト