6
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

アウトプットの心構えAdvent Calendar 2023

Day 12

Qiitaでアウトプットする際に最低限知っておくと嬉しいこと!

Last updated at Posted at 2023-12-17

はじめに

今年からQiitaで記事を投稿しはじめ、最初は記事の書き方が分からず、読みにくい記事になっていました。記事を書き進める中で、ありがたいことに編集リクエストを多くの方からいただきました!
そこで教えていただいたQiitaで記事読みやすくする工夫でよく使用しているものをランキング紹介します!

⭐️1位 コードブロックの言語指定方法

 下記のようにコードブロックで言語を指定していないと読みにくいコードになっていました。

class Person {
    let personName = "ひなっこ"
    func sayName() {
        print(self.personName)
    }
}

下記の方法で ```swift:ファイル名 ``` でコードを囲みます!

書き方
```swift:Person.swift 
class Person {
    let personName = "ひなっこ"
    func sayName() {
        print(self.personName)
    }
}
```

すると、Swiftのコードということが認識され、下記のように色がつき、読者が見やすいコードになりました!

Person.swift
class Person {
    let personName = "ひなっこ"
    func sayName() {
        print(self.personName)
    }
}

⭐️2位 画像の大きさの指定方法

画像の大きさを適切な大きさにする

下記のように画像の大きさを指定せずに、画像をあげると、大きすぎてめちゃめちゃ見にくいです!
スクリーンショット 2023-12-16 18.11.52.png

書き方
<img src="画像のURL" width=300>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3090887/43d81ec1-bdfe-8959-17bf-9482edb34f97.png" width=300>

下記のように見やすい大きさになりました。

画像を横に並べる!

横にシュミレータの画像を並べたい時は下記のように書きます!

書き方
<img src="画像①のURL" width=300> <img src="画像②のURL" width=300>

下記のように画像を横に並べ、見比べることができます!

⭐3位 コードスパン記法

コードスパン記法を使用すると、コードを読みやすくすることができます!

以上、ご参考までに。

書き方
` print("Hinakko") `

下記のようにコードが見やすくなります!
print("Hinakko")
使用例

Peson.swift
class Person {
    let name: String = ""
    func callName(name: String) {
        print("\(name)")
    }
}

Person().callName(name:"Hinakko")

print("\(name)") ではHinakkoがプリントされます!

⭐4位 文字を太字にする!

書き方
**Qiitaでアウトプットする際に最低限知っておくと嬉しいこと!**

下記のように文字を太字にし、強調することができます!
Qiitaでアウトプットする際に最低限知っておくと嬉しいこと!

⭐5位 文字の色を変える!

書き方
<font color="red">Qiitaでアウトプットする際に最低限知っておくと嬉しいこと!</font>
<font color="blue">Qiitaでアウトプットする際に最低限知っておくと嬉しいこと!</font>

色を指定することで、下記のように文字の色を変えることができます!
Qiitaでアウトプットする際に最低限知っておくと嬉しいこと!
Qiitaでアウトプットする際に最低限知っておくと嬉しいこと!

おわりに

編集リクエストをくださったみなさんありがとうございました!
編集リクエストをいただいたおかげで、記事の内容だけでなく、記事の見やすさの重要性に気づくことができました!
今回の記事にも編集リクエストをいただき、コードスパン記法と文字を太字にする方法と色を変える方法の違いについて理解が深まりました!

参考文献

6
2
2

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?