Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
20
Help us understand the problem. What are the problem?
@e99h2121

Markdown (とHTMLとCSS少し) でスライドを作るremark

remarkとは

こういうのでいいんだよ、
「HTMLとCSSを使いこなせる人をターゲットにした、シンプルなブラウザ内マークダウン駆動のスライドショーツール」

A simple, in-browser, markdown-driven slideshow tool targeted at people who know their way around HTML and CSS


<!DOCTYPE html>
<html>
  <head>
    <title>タイトル</title>
    <meta charset="utf-8">
    <style>
      @import url('https://fonts.googleapis.com/css?family=Noto Sans JP&display=swap');
      @import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
      @import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
      @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);
      body { 
        font-family: 'Noto Sans JP', serif; 
      }
      h1, h2, h3 {
        font-family: 'Noto Sans JP', serif;
        font-weight: normal;
      }

      .remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
    </style>
  </head>
  <body>
    <textarea id="source">

class: center, middle

# タイトル

---

# アジェンダ

1. はじめに
2. 本日のメニュー
3. ...

---

# はじめに

    ```
     System.out.println("Hello, world!!!");

    ```

    </textarea>
    <script src="https://remarkjs.com/downloads/remark-latest.min.js">
    </script>
    <script>
      var slideshow = remark.create();
    </script>
  </body>
</html>


仕上がり

test.gif

関連

凝りたかったらCSSでおめかしして、内容はMarkdownで書いておけば良いやつ。
参考になればさいわいです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
20
Help us understand the problem. What are the problem?