0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Qiitaの投稿で装飾したいときによく使うHTMLタグ

Posted at

#どうも7noteです。Markdownだけでは対応できない細かい調整が可能!

画像が大きくなりすぎたり、色を付けて目立たせたりしたい時に使えるタグやCSSをまとめました。
毎日投稿していると覚えていきますが、忘れそうなのでメモのついでに投稿します。

■ 画像サイズをカスタマイズ

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/hogehogehoge.png" width="200">

画像のサイズを変更します。
そのままだと大きすぎたりして使いにくいので画像の横幅を指定します。

![sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/hogehogehoge.png)
この( )の中のURLだけコピペしておきます。

↓変更前↓
before.png

↓変更後↓
after.png

■ 文字に色を付ける(<font color=""></font>

<font color="red">赤文字</font>

もしくは16進数表記で

<font color="#ff0000">赤文字</font>

--見本-----------
赤文字になるよ
------------------

■ 改行させる(<br>

|朝|昼|夜|
|:--|:--|:--|
|おはよう<br>おっはー|こんにちは<br>こんちわ|こんばんわ|

--見本-----------

おはよう
おっはー
こんにちは
こんちわ
こんばんわ

------------------

表などの中で改行させたい時に使うことが多いです。
通常の文章のところでも使えますよ!

■ 打ち消し文字(<s></s>

<s>ここに消したい文字を入れると線が入る</s>

--見本-----------
ここに消したい文字を入れると線が入る
------------------

古くなった文字を消したり、言葉を濁したりしたい時に便利。

**追記:**Markdownで~~文字~~と囲むことでできるみたいですね。つい<s></s>で書いてました。

■ 一部のみ非表示にする(<!-- 消したい文字 -->

いわゆるコメントアウトですね。自分用のメモを残しておきたい時に便利。

<!-- ここに消したい文字を入れる -->

--見本--(検証ツールやソースを表示すると見れる)

↓ここ

↑ここ
------------------

まとめ

マークダウンは慣れてくると便利で見た目も綺麗に整えてくれますが、
ちょっとした修正や微調整は難しいので、そんな時にちょこっとhtmlが書けると便利ですね。

おそまつ!

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

0
1
0

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?