5
3

More than 1 year has passed since last update.

Qiita投稿時に使用する機能

Last updated at Posted at 2021-11-03

Qiitaの記事をカラフルにすると書いていて楽しくなる。
それに太字や色を活用することでポイントもわかりやすくなるし、多用しすぎなければ読み手にも優しいはず。
記事を活用するにあたり、初心者の自分がどのように知識を得たのか、またこれを見返して成長するための記録として記録するものです。

文章の装飾

色を付けたり絵文字を入れることで目を引く記事にすることができる(可能性大)

文字に色を付ける

色を付けたい文字を<font color="#色コード"></font>で囲む

色コードは以下リンク先から調べて指定することが可能。#ff0000 = 赤
WEB色見本 原色大辞典 - HTMLカラーコード

<font color="#ff0000">色を付けたい文字(今回は赤)</font>

結果
色を付けたい文字(今回は赤)

文字を太字にする

太字にしたい文字を前後**で囲む

**太字にしたい文字**

結果
太字にしたい文字

文字を太字にして色を付ける

<font color="#ff0000">**文字を太字にして色を付ける(今回は赤)**</font>

結果
文字を太字にして色を付ける(今回は赤)

文字を太字にして色を付け、絵文字を追加する

上記を組み合わせる+絵文字も入れる
絵文字は以下リンク先から調べて指定することが可能。
Emoji Cheat Sheet

:sparkles::two_hearts:<font color="#ff0000">**文字を太字にして色(今回は赤)を付け、絵文字を追加**</font>:two_hearts::sparkles:

結果
:sparkles::two_hearts:文字を太字にして色(今回は赤)を付け、絵文字を追加:two_hearts::sparkles:

Note補足説明

目を引く形で補足説明をしたい場合、補足したい内容を:::note info::: で囲む。
補足したい内容と:::note info::: はそれぞれ別の行にする必要あり。
noteの後のinfoは省略可能。

:::note info
情報  ※infoは省略可能
猿が出没しはじめました。
:::

情報 ※infoは省略可能 猿が出没しはじめました。

:::note warn
警告
猿に注意してください。
:::

警告 猿に注意してください。


:::note alert
より強い警告
外出しないでください。
:::

強い警告 外出しないでください。

訂正線(~~文字~~

~~ここに消したい文字を入れると線が入る~~

結果
ここに消したい文字を入れると線が入る

一部非表示(<!-- 消したい文字 -->

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

結果


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

折りたたみ

クリックすると見ることができるように設定できる。
長くなる処理コードなどを折りたたむと良い

<details><summary>折りたたんだときに表示される文字(クリックで開けます)</summary><div>
クリックして見える中身
</div></details>

結果

折りたたんだときに表示される文字(クリックで開けます)

クリックして見える中身

表を挿入することで文章を見やすくすることができる
また、スペースを有効活用できるので縦に長くならなく、見やすい記事にすることができる(可能性大)
表の開始前に空白行が一行必要

| 左揃え | 中央揃え | 右揃え |
|:-|:-:|-:|
| Left-aligned | Centering | Right-aligned |
| **太字** | **太字** | **太字** |
| :sparkles::two_hearts: | :sparkles::two_hearts: | :sparkles::two_hearts: |
| <font color="#0000ff">青文字</font> | <font color="#008000">緑文字</font> | <font color="#ffa500">橙文字</font> |

結果

左揃え 中央揃え 右揃え
Left-aligned Centering Right-aligned
太字 太字 太字
:sparkles::two_hearts: :sparkles::two_hearts: :sparkles::two_hearts:
青文字 緑文字 橙文字

画像を挿入してサイズを指定する

img src=に画像URLを入れてからwidth=50%でサイズを指定

<img src="https://qiita-image-store.s3.ap-northeast~画像URL" width=50%>

結果

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

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

<!-- ここに消したい文字を入れる -->
--見本--(検証ツールやソースを表示すると見れる)

↓ここ

↑ここ

書き方

Qiita 記事の書き方
Markdown記法 チートシート
Qiita記事作成方法 初心者の備忘録
Qiitaの投稿で装飾したいときによく使うHTMLタグ

埋め込み

Qiitaで記事にcodepenを埋め込み
Qiitaにtwitterを埋め込む方法
QiitaにYouTubeを埋め込む(MarkdownにYouTubeを埋め込む)

人の記事を参考にするとき

Qiita記事URLの末尾に「.md」をつけると、書き方を確認することができる。

ガイドライン

良い記事を書くためのガイドライン

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