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

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

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

----

<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>

#1. 上記のロゴのHTMLは:

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

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

```html:上記ロゴの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はこの記事のソース(マークダウン)をのぞいてください)

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/140610/c7b2efba-7d5f-f788-904b-b6dfd83ae31e.png)

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

<div align="right">
  <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>


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

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


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

と書くと

```text: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>
```

<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>

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

- [『JavaScriptを使って24時間毎日見れる(聴ける)音楽ライブ放送を探す！(第1回) - Qiita』](http://qiita.com/javacommons/items/13939a461fa5492a90a2)より引用

<table height="400" width="600"><tr><td>
😲<b>POP MUSIC 2017 (HIT MUSIC) 24/7 LIVE STREAM - HUNTER.FM (LIVE NOW!)<img title="😲オススメ！" src="https://raw.githubusercontent.com/javacommons/qiita/master/osusume014_10.gif" /></b>
 <div align="right">
 <a title="HUNTER.FM on YouTube" href="https://www.youtube.com/channel/UCQNN7INAt1yS_v0P0tSlbrQ">[HUNTER.FM Channel]</a>
 </div>
<blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">POP MUSIC 2017 (HIT MUSIC) 24/7 LIVE STREAM - HUNTER.FM <a href="https://t.co/AsjhSMFUIj">https://t.co/AsjhSMFUIj</a></p>&mdash; JavaCommons (@javacommons) <a href="https://twitter.com/javacommons/status/856049181349232640">2017年4月23日</a></blockquote>
</td></tr></table>