Qiitaで禁断のHTMLを使う(第1回)

Qiitaで使えるHTML(一部)をご紹介します。

• 無駄遣い無用！
• Qiita:Teamで使うと良いかも…

---

1. 上記のロゴのHTMLは:

• 画像を中央揃え
• 画像のサイズ指定(拡大・縮小ができる)
• リンクにtarget指定(_blank)を追加できる (Qiita内の記事でも別タブに飛ばせる)

等のテクニックが入っています。

上記ロゴのHTML

<div align="center">
  <a target="_blank" href="http://qiita.com/javacommons/items/879efd486313cac8b381">
    <img width="426" height="67" src="https://raw.githubusercontent.com/javacommons/qiita/master/jc-banner-2017-0419-0240.gif" />
  </a>
</div>

• imgタグのwidthとheightの値を入れ替えると同じ画像を小さく表示できます。(HTMLはこの記事のソース(マークダウン)をのぞいてください)

2. 右寄せの例: <div align="right">～</div>を使った例。

3. ``` の書き方を説明したい場合

• <`pre>～` で上下を囲むことで以下のように表示させることができます。

```text:filename.txt
$ ls -ltr /home/user 
```

と書くと

filename.txt

$ ls -ltr /home/user 

となります。

4. Twitterのツイートを埋め込む場合に高さを指定したい場合

• ツイートを埋め込むとHTMLが動的に展開されるためアンカー等に飛ばす場合に問題になります。(ページ内のアンカーに飛んだ(スクロールした)後でページレイアウトがずれてしまう)
• 動画の埋め込みなどではツイートの上部のみ表示させたい場合があります。
• ちょっと強引ですが<table height="400" width="600"><tr><td>を使うと高さを指定できます。

<table height="400" width="600"><tr><td>
😲<b>セーラームーン / ムーンライト伝説 (ユーロビート)ver.</b>
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">セーラームーン / ムーンライト伝説 (ユーロビート)ver.<a href="https://t.co/o91qCKNtAW">https://t.co/o91qCKNtAW</a></p>&mdash; JavaCommons (@javacommons) <a href="https://twitter.com/javacommons/status/849831235933224960">2017年4月6日</a></blockquote>
</td></tr></table>

😲セーラームーン / ムーンライト伝説 (ユーロビート)ver. セーラームーン / ムーンライト伝説 (ユーロビート)ver.https://t.co/o91qCKNtAW — JavaCommons (@javacommons) 2017年4月6日

凝ったツイート埋め込み例

• 『JavaScriptを使って24時間毎日見れる(聴ける)音楽ライブ放送を探す！(第1回) - Qiita』より引用

😲POP MUSIC 2017 (HIT MUSIC) 24/7 LIVE STREAM - HUNTER.FM (LIVE NOW!) [HUNTER.FM Channel] POP MUSIC 2017 (HIT MUSIC) 24/7 LIVE STREAM - HUNTER.FM https://t.co/AsjhSMFUIj — JavaCommons (@javacommons) 2017年4月23日