間違えやすいhtml 「別タブで開く」リンク

間違えやすいhtml ワースト3

1. 全角スペース入力によるインデント(字下げ, 文字開始位置調整)
2. 属性間半角スペースの欠如
3. スペルミス

リンクを今見ているタブではなく別のタブで開くためには target="_blank" という属性を利用します。より正確には「target属性の値にblankを指定する」という表現になるかと思いますが、とにかく通常のリンクにこの指定を追加する必要があります。

FC2ブログでの記事作成時に『見たまま編集』を利用している場合は以下のような感じ。

新しいウィンドウで開く という項目、実際には新規ウィンドウではなく新規タブですけれども、ここにチェックを入れることで入力補助が行われます。見たまま編集ではhtmlが視覚に現れませんのであまり意識する必要は無し。

一方『HTML編集』で記事を書く場合、原則としてhtmlは自分で書くことになります。ここでミスが発生 (∵`)

今回の target="_blank" についてはワースト3の2と3の2つに該当してしまうことが非常に多いです。

ワースト1は毎度おなじみ 全角スペースの利用 ですね。これ全然減らないので今後も継続して繰り返ししつこく啓蒙していこうと思います ^^;

htmlの絶対的NGそれは「全角の利用」

やっぱりすごく多いんですね。うっかり全角を利用して全てが台無しになっている というケース。 母国語が日本語の場合は普段からキーボードが「ひらがな」の状態になっているのではないかと思います。htmlを操作する際にはまず最初に「半角英数字」にキーボードを変換する ことを癖づけされると良いと思います。...

vanillaice000.blog.fc2.com

別タブで開く指定の正しい書き方

<a href="遷移先アドレス" target="_blank">表示テキスト</a>

既にに開いているタブ、今見ているタブでページを遷移させる場合は target属性 の値が _self で、これは 初期値 ですから同タブで開く場合にわざわざ記す必要はありません。ブラウザが自動的にデフォルト値を適用します。

上記が基本雛形なので、使用頻度の高い方は辞書登録するなどしておいても良いかと思います。そうすればミスしません。htmlの成り立ちは以下の通りです。

属性間スペース

全体としては a要素 です。そして href属性 と target属性 とを持っています。

htmlでは 属性と属性の間には半角スペースを入れる という基本ルールがありますが、この属性間スペース欠如がとっても多いですね。自身で属性を追加する場合には 前後に別の属性が有るか無いか をしっかり確認し、半角スペースでもってきちんと区分をしましょう。

属性間スペース有り

<a href="xxx.html" target="_blank" class="xyz">別タブリンク</a>

属性間スペース無し

<a href="xxx.html"target="_blank"class="xyz">別タブリンク</a>

属性間スペース有ったり無かったり

<a href="xxx.html"target="_blank" class="xyz">別タブリンク</a>

昨今のブラウザはとても優秀なので、属性間スペースがなくとも上手く別タブで開いてくれたり、他属性もなんとなく理解はしてくれます。が、100%の意思疎通はできておらず、「なんとなく君のやりたいことはこれのような気がする」という感じでブラウザがページ作成者の意図をなんとなく察してくれているだけなので、100%意思疎通を目指しましょう。そのためのルールです。

スペルミス

正しくは _blank です。blankという単語の前には アンダースコア が必要です。ところがこれもブラウザの察し能力で以下のようなスペルミスも柔軟に対応してくれます。

スペルミスだが一応機能 する (Google Chromeで検証)

blank -blank brank branki blink blanky blanket など

いろいろ調べましたが結構な単語でうまいこと処理してくれるようで驚きました(笑)
しかし「ミスである」という純然たる事実が変わることはない。

まとめ

htmlの間違いというのは 見た目に影響が出るものとそうでないものとがあります ので、例えば代表的なものを例にすると「横にあるはずのカラムが下に落ちる」などは見てすぐに「おかしい」と気づけます。見た目に影響しない場合は 人に指摘されるまで気が付かない といったことが多いんですね。あるいは何らかのJSと関連づけたときにどうしても動かない、など。

今回の別タブ指定についても「気づきにくいミス」なので、何年も何100ページもミスを継続してしまう方も多く見受けられます。これも何度も言い続けていますけれども、よく使うhtmlは辞書登録を！ でございます (´・ω・｀)

旧投稿画面を楽に操るために「辞書登録の活用」

FC2ブログ旧投稿画面は初心者から上級者まで幅広く使えるエディターです。htmlをそんなに恐れる必要はありません。htmlが目に見えていることは「利点」なのだと気づく日もきっと来るでしょう。...

vanillaice000.blog.fc2.com

* ↑ タイトルに「旧投稿画面で」とありますが、現在ではこれを「HTML編集モードで」に置き換えてご覧ください。

【Clipy】HTMLモードで記事を書くときの強力な助っ人アプリ

FC2ブログの管理画面のデザインが刷新されまして、これまで以上に WYSIWYG(見たまま編集)とHTML編集の選択 がはっきりするようになったのではないかと思います。今回はHTML編集モードでの記事作成に便利なツールをご紹介します。...

vanillaice000.blog.fc2.com