この記事はGEEK Inc. Advent Calendar 2018の21日目の記事となります。 このブログを書いているときにPCがクラッシュし、 しばらく執筆ができなかったディレクターの塚田(パパ)です。 弊社デザ
初めまして、今年5月入社したdesignerの張と申します。よろしくお願いします。 色はUIに影響される、文章と文字より一番早く直感的な影響される部分です 今回はどの色がどう影響されるのかご紹介頂させてきます。 赤
こんにちは。ディレクターの小松です。
約1年ぶりの投稿ですw
お気づきでしょうかこの1年で【アシスタント】という文字が取れていることに!
まだまだペーペーで迷惑かけっぱなしなんですが肩書きだけはしっかりしたので、負けぬよう頑張ります。
さて今回のブログではHTMLでスライド作成してGithub上に晒そうというものです!
用意するものは以下です!
ここらへんの準備は割愛します。
作成する手順は以下になります。
このお手軽3工程でページが公開できます。
では、順を追って説明していきます。
https://github.com/hakimel/reveal.js
このライブラリを落とすだけで終わりです!!!!
このライブラリはMarkdownにも対応しているものなので、HTMLとMarkdownがどちらか書ければ、さくっとスライドを作れちゃいます。
細かいことは抜いて作り方を紹介します。
ライブラリ内のindex.html
42~377行目がスライドの対象となるところです。
<div class="slides">
<!--下からが編集する部分-->
</div>
基本的には通常のHTMLを書く要領で問題ありません。
Markdownで書きたいなーってときだけdata属性を付与してあげます。
<section>
<h1>Hello World</h1>
<ul>
<li>hoge1</li>
<li>hoge2</li>
<li>hoge3</li>
</ul>
</section>
<section data-markdown>
# Hello World
* hoge1
* hoge2
* hoge3
</section>
作成したHTMLをPushします。
その前にリポジトリを作りましょう。
Github上にページを公開するには特定のリポジトリを作成して、pushするだけでOKです。
ユーザー名.github.io
というリポジトリをつくりましょう。
例えばtkomatsuがユーザー名ならtkomatsu.github.ioというリポジトリです。
つくったらそこに全ファイルPushするだけです。
ちなみに以下は社内LT用に小松が作ったものです。
「極意」とは、「核心となる大切な事柄。奥義」である。 ふと振り返ると、今まで自分は会社の上司や先輩、メンターにとても恵まれていたなとこの頃とてもありがたく思います。 本日は、前半戦、後半戦に分けてWEBディレクションの極