はじめに
Markdown書く時にどうも体裁がうまく整えられないというときHTMLタグに頼るのですが、よくつかうな〜という実感あるものをまとめてみたいと思います。
個人的使用頻度順HTMLタグ紹介
imgタグ
<img src="./hogehoge/fugafuga.png" width="300">
画像の大きさ調整したいな〜という時に使います。
資料作成の際スクリーンショット画像を貼り付けがちなのですが、だいたいの場合画像が大きすぎるのでwidthで大きさを調整します。
％を指定しても画像拡大縮小してくれるのですが、HTMLの現在の書き方的にNGのようです。
タグとあわせて使いたい属性は以下リンク参照ください。先程のwidthの指定の仕方についても言及があります。
私は非推奨と書かれていますがvspaceやhspace使っちゃいがちです。(フロントエンド書くために使うわけではないからいいかなという気持ち)
ちなみにQiitaではvspace・hspaceなどは使えません。
divタグ
<div align="center">
<img src="./fugafuga.jpeg" width="100">
</div>
主に何かを中央揃えしたいな〜という時に使います。
画像貼り付けるときはだいたいこの構成で書きます。
が、alignはもう廃止機能なんですね...
Qiitaで書く際はalign動いてくれません。
また、改ページの際も以下のような感じでdivタグを使っています。
<div style="page-break-before:always"></div>
Marpで書くときは---で済むので、書き方を忘れがちです。
説明リスト
<dl>
<dt>朝ご飯</dt>
<dd>ごはん、納豆、味噌汁</dd>
<dt>昼ごはん</dt>
<dd>サラダ、パスタ</dd>
<dt>晩ごはん</dt>
<dd>ごはん、味噌汁、とんかつ、千切りキャベツ、トマト、冷奴</dd>
</dl>
- 朝ご飯
- ごはん、納豆、味噌汁
- 昼ごはん
- サラダ、パスタ
- 晩ごはん
- ごはん、味噌汁、とんかつ、千切りキャベツ、トマト、冷奴
こんなかんじのものですね。
リストを入れ子にして済ませちゃうこともあるのですが、こちらの方が見やすい場合が多いです。
sタグ
<s>取り消し線</s>
説明リスト使用する際にはmarkdownの 取り消し線 が使えないので、線を引きたいときはsタグを使います。
~~ここはリストの外なので"〜"で囲むのがつかえる！~~
<s>もちろんsタグでも良い</s>
<dl>
<dt>朝ご飯</dt>
<dd> ~~ごはん、納豆、味噌汁~~ </dd>
<dt>昼ごはん</dt>
<dd><s>サラダ、パスタ</s></dd>
<dt>晩ごはん</dt>
<dd>ごはん、味噌汁、とんかつ、千切りキャベツ、トマト、冷奴</dd>
</dl>
ここはリストの外なので"〜"で囲むのがつかえる！
もちろんsタグでも良い
- 朝ご飯
- ~~ごはん、納豆、味噌汁~~
- 昼ごはん
サラダ、パスタ- 晩ごはん
- ごはん、味噌汁、とんかつ、千切りキャベツ、トマト、冷奴
何か訂正したいことが多いみたいです。
Detailsタグ
<Details>
<summary>折り畳み</summary>
ここの内容は見えなくなるよ！
</Details>
折り畳み
ここの内容は見えなくなるよ！長々としたソースコードの例など折りたたむ時に使います。
主にQiitaで記事書く時に使っています。
参考リンク
わからないことがあるたびに見るやつ
少し前の記事だけど、あれ、これQiitaでは動かんのか？となったときに参照したい記事
おわりに
いつも行き当たりばったりに調べて書いているので、最新のHTMLの書き方・お作法などちゃんと情報追わなきゃなあと思っています。