LoginSignup
72
67

More than 5 years have passed since last update.

Qiitaで使えるHTMLタグは?

Last updated at Posted at 2014-11-15

HTMLタグのテーブル結合は使えなかった気がしたんですが、使えるようになってたので使えるタグを調べてみました。

出力されるタグ
テーブル:TABLE,TR,TD,TH
リスト:UL,LI,OL,DL,DT,DD
開閉:DETAILS,SUMMARY
レイアウト:HR,P,BR,IMG,DIV
リンク:A
文字装飾:FONT,B,STRONG,STRIKE,I,EM,S,DEL,SUB,SUP,INS
文字説明:VAR,CODE,SAMP,KBD,PRE,BLOCKQUOTE

オプション属性のうちは以下はそのまま出力されて使えるようです。

出力されるオプション属性
テーブル:COLSPAN(TH,TD時),ROWSPAN(TH,TD時)
IMG:ALT,WIDTH,HEIGHT,SRC
HREF(A時/内容はURL,MAILのみ),COLOR(FONT時),TITLE(IMG,A時)

出力されなくなったタグ・属性

Qiita Blog(公式):QiitaにおいてHTML要素の属性指定ができなくなりました(17/6/20)

出力されなくなったタグ(2017/8/5現在)
文字装飾:TT
フォーム:INPUT
出力されなくなったオプション属性(2017/8/5現在)
BORDER,ALIGN,NAME,TARGET,DATA-LANG
TYPE(INPUT時)
CLASS(DIV/A/BLOCKQUOTE時),ID(LI時)

テーブル

結合(ROWSPAN/COLSPAN)

<TABLE>
<TR><TD ROWSPAN=2>縦結合</TD>
<TH COLSPAN=2 ALIGN=RIGHT>横結合</TH></TR>
<TR><TD BGCOLOR=GREEN>test</TD><TD>test</TD></TR>
</TABLE>
縦結合 横結合
test test

※ ALIGN,BGCOLORは無効

中央(数式)


```math
\begin{array}{|c|c|c|}
\hline
title1 & title2 & title3 \\
\hline
1 & 2 & 3 \\ 
\hline
\end{array}
```
\begin{array}{|c|c|c|}
\hline
title1 & title2 & title3 \\
\hline
1 & 2 & 3 \\ 
\hline
\end{array}

Qiitaの数式チートシート
Easy Copy MathJax:表 Table

リスト

リスト(UL/LI)

 <UL><LI>aaa
aaa

<LI>bbb
bbb
</UL>

  • aaa
    aaa

  • bbb
    bbb

※ULの前にスペースを入れると改行が反映される

失敗例
<UL>
<LI>aaa
aaa

<LI>bbb
bbb
</UL>
  • aaa aaa
  • bbb bbb

※改行されない。。。

<BR>を使う
<UL><LI>aaa<BR>aaa<BR>aaa</UL>
  • aaa
    aaa
    aaa

順序リスト(OL)

<OL type="1">
<LI>aaa
<LI>bbb
</OL>

<OL type="a">
<LI>aaa
<LI>bbb
</OL>
  1. aaa
  2. bbb
  1. aaa
  2. bbb

※typeは無効

開閉

Markdown記法 チートシート#details---折りたたみ

<DETAILS><SUMMARY>概要1行目
概要 2行目</SUMMARY>内容1行目
**内容2行目:太字**

4行目(空行があるとダメ)
</DETAILS>

概要1行目
概要 2行目
内容1行目
内容2行目:太字

4行目(空行があるとダメ)

レイアウト

水平線(HR)

<DIV ALIGN=CENTER><HR COLOR=BLUE WIDTH=50%></DIV>
<HR ALIGN=CENTER COLOR=RED WIDTH=50%>


※ HRタグ中のSIZE,ALIGN,COLOR,WIDTHは無効

DIV

<DIV ALIGN=RIGHT NAME="name" CLASS="class" TITLE="title" ID="id">DIV属性</DIV>
DIV属性

※ DIVタグ自体は出力される

出力されたHTML
<div class="">DIV属性</div>

※ ALIGN,NAME,CLASS,TITLE,IDは無効

位置(数式)

<DIV ALIGN=CENTER>中央</DIV>
<CENTER>中央</CENTER>
$$中央(数式)$$
<DIV ALIGN=RIGHT>右寄せ</DIV>
中央

中央
$$中央(数式)$$
右寄せ

※ ALIGN,CENTERタグは無効
Qiitaの数式チートシート

リンク(A)

リンクスキーマ(A HREF)

<a href="http://google.co.jp">http://google.co.jp</a>
<a href="https://google.co.jp">https://google.co.jp</a>
<a href="mailto:test@test.test">test@test.test</a>

http://google.co.jp
https://google.co.jp
test@test.test

失敗例
<a href="javascript:alert();">javascript:alert();</a>
<a href="data:application/octet-stream,aaa" download="1.txt">data:application/octet-stream,aaa</a>

javascript:alert();
data:application/octet-stream,aaa

※http,https,mailto以外はダメっぽい

装飾

FONT(色)

<FONT COLOR=red></FONT><FONT COLOR=blue></FONT>

背景色(数式)

白$\style{background-color:yellow;}{黄色}$$\style{background-color:pink;}{ピンク}$

白$\style{background-color:yellow;}{黄色}$$\style{background-color:pink;}{ピンク}$

文字サイズ(数式)

<FONT SIZE=1></FONT> <FONT SIZE=6></FONT>
$\tiny{小(数式)}$ $\huge{大(数式)}$


$\tiny{小(数式)}$ $\huge{大(数式)}$

Qiitaの数式チートシート
Easy Copy MathJax:文字サイズ Letter size

文字装飾

<B>B:太字</B>, <STRONG>STRONG:太字</STRONG>
<I>I:イタリック</I>
<EM>EM:強調</EM>
<S>S:打ち消し線</S>, <STRIKE>STRIKE:打ち消し線</STRIKE>, <DEL>DEL(削除)</DEL>
<SUB>下付き</SUB><SUP>上付き</SUP>
<INS>アンダーバー</INS>

B:太字, STRONG:太字
I:イタリック
EM:強調
S:打ち消し線, STRIKE:打ち消し線, DEL(削除)
下付き上付き
アンダーバー

文字説明

<VAR>VAR(変数)</VAR>
<SAMP>SAMP(サンプル)</SAMP>
<CODE>CODE(ソースコード)</CODE>
<PRE>PRE(テキスト)</PRE>
<KBD>KBD(キーボード入力)</KBD>

VAR(変数)
SAMP(サンプル)
CODE(ソースコード)

PRE(テキスト)

KBD(キーボード入力)

引用(BLOCKQUOTE)

<BLOCKQUOTE>BLOCKQUOTE(引用)</BLOCKQUOTE>
BLOCKQUOTE(引用)

Twitter引用

QiitaはTwitterのツイートを埋め込める

<BLOCKQUOTE CLASS="twitter-tweet"><A HREF="https://twitter.com/syu1404/status/893827641400107008">Twitter</A></BLOCKQUOTE> 

コメント(<!-- -->)

<!--あいうえお
かきくけこ-->

※出力自体されない。コメントが機能しているわけではなく無効なタグなのではじかれている感じ。

失敗例
前一行開ける必要有り
<!--あいうえお-->

<!--あいうえお-->閉じ括弧の直後に書くのもだめ

前一行開ける必要有り
<!--あいうえお-->

<!--あいうえお-->閉じ括弧の直後に書くのもだめ

無効になったタグ

TABLE(BORDER/WIDTH/HEIGHT)・無効

<TABLE BORDER=5 WIDTH=300 HEIGHT=100><TR><TD>test</TD><TD>test</TD></TR></TABLE>
test test

※ BORDER,WIDTH,HEIGHTは無効

TABLE(回り込み)・無効

<TABLE ALIGN=LEFT><TR><TD>test</TD></TR></TABLE>
<TABLE ALIGN=RIGHT><TR><TD>test</TD></TR></TABLE>
まわりこみ<BR>まわりこみ<BR>まわりこみ<BR>まわりこみ
test
test

まわりこみ
まわりこみ
まわりこみ
まわりこみ

※ ALIGN,回り込み解除(br clear=left)は無効

新規ウインドウでリンク(A TARGET)・無効

<A HREF=http://www.google.co.jp TARGET=_blank>新しいウインドウで開く</A>
<A HREF=http://www.google.co.jp TARGET=_self>同じウインドウで開く</A>

新しいウインドウで開く
同じウインドウで開く

※ どちらもtarget="_blank"で出力される

ページ内リンク(A NAME)・無効

<A NAME=ページ内リンク />ここにリンクを設定

<A HREF=#ページ内リンク>ページ内リンク</A>

ここにリンクを設定

ページ内リンク

※ NAMEは無効になりました(2017/8/5現在)

タイトル(P TITLE)・無効

<P TITLE=タイトル>ここにマウスカーソルを当てる</P>

ここにマウスカーソルを当てる

※「タイトル」という文字がポップアップ表示される

INPUT・無効

※FormやJavascriptは無効

テキストボックス(INPUT TYPE=TEXT)

<input type="text">

※maxlengthは無効

パスワード(INPUT TYPE=TEXT)

<input type="password">

ボタン(INPUT TYPE=BUTTON)

<input type="button" value="ボタン">

※valueは無効

ファイル選択ボタン(INPUT TYPE=FILE)

<input type="file" name="datafile">

画像ボタン(INPUT TYPE=IMAGE)

<input type="image" SRC=https://qiita-image-store.s3.amazonaws.com/0/52320/10c118c1-ef93-7cd0-e5b6-62c6aa2e3b09.png alt="ボタン">

※srcは無効

チェックボックス(INPUT TYPE=CHECKBOX)

<input type="checkbox">cc1 <input type="checkbox">cc2

cc1 cc2

ラジオボタン(INPUT TYPE=RADIO)

<input type="radio" name="rr">rr1 <input type="radio" name="rr">rr2

rr1 rr2

非表示(INPUT TYPE=HIDDEN)

<input type="hidden" name="非表示">

※出力されて非表示になる

出力ソース
<p><input type="hidden" name="非表示"></p>
72
67
5

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
72
67