HTMLでスライドを作成するぞい

こんにちは。ディレクターの小松です。
約1年ぶりの投稿ですw

お気づきでしょうかこの1年で【アシスタント】という文字が取れていることに!
まだまだペーペーで迷惑かけっぱなしなんですが肩書きだけはしっかりしたので、負けぬよう頑張ります。

さて今回のブログではHTMLでスライド作成してGithub上に晒そうというものです!
用意するものは以下です!

  • エディター
  • Git
  • Githubアカウント

ここらへんの準備は割愛します。
作成する手順は以下になります。

  1. ライブラリのDL
  2. スライド作成
  3. Git Push!!!!

このお手軽3工程でページが公開できます。
では、順を追って説明していきます。

1.ライブラリのDL

https://github.com/hakimel/reveal.js
このライブラリを落とすだけで終わりです!!!!
このライブラリはMarkdownにも対応しているものなので、HTMLとMarkdownがどちらか書ければ、さくっとスライドを作れちゃいます。

2.スライドの作成

細かいことは抜いて作り方を紹介します。

編集対象

ライブラリ内のindex.html

編集箇所

42~377行目がスライドの対象となるところです。

<div class="slides">
<!--下からが編集する部分-->
</div>

お作法

基本的には通常のHTMLを書く要領で問題ありません。
Markdownで書きたいなーってときだけdata属性を付与してあげます。

HTML ver

<section>
<h1>Hello World</h1>
<ul>
<li>hoge1</li>
<li>hoge2</li>
<li>hoge3</li>
</ul>
</section>

Markdown ver
<section data-markdown>
# Hello World
* hoge1
* hoge2
* hoge3
</section>

3.Git Push!!!!

作成したHTMLをPushします。
その前にリポジトリを作りましょう。
Github上にページを公開するには特定のリポジトリを作成して、pushするだけでOKです。

ユーザー名.github.io

というリポジトリをつくりましょう。
例えばtkomatsuがユーザー名ならtkomatsu.github.ioというリポジトリです。

つくったらそこに全ファイルPushするだけです。
ちなみに以下は社内LT用に小松が作ったものです。

http://kusekke1.github.io/lt_slide/

実験的過ぎて相当雑な記述です(言い訳)< Read More

jqueryとcssを使って途中で現れるtopへ戻るボタン

こんにちは、前回から時間がかなり空いたので、自分の記事のテイストを忘れてしまったMEの井原です。 僕らGEEKの[ME TEAM]は毎月1回情報共有のためのmeetingを行っていますが、先月もっとブログをGEEKっぽく Read More

Sublime Textの基本機能(検索・置換、マクロ機能、スニペット)

お久しぶりです。HTMLコーダーの加藤です。 GWも終わり、暑い日が続いてますね。 昼は暑いのに夜はけっこう寒かったりで、服装選びに少々困っている日々です。 ではさっそく本題に入ります。 9ヶ月くらい経ってますが、前回は Read More

ブレイクタイムにおすすめ、簡単操作で本格コーヒーが楽しめるおしゃれなマシーン

桜の舞う麗らかな春の訪れ、お花見の季節がやってきました。     今回は、ブレイクタイムにおすすめ、機械が苦手な方でも簡単操作で本格コーヒーが楽しめるカフィタリーシステムでクレマ体験をレポートしたいと Read More

スライスに役立つ「Slicy」の使用方法

「Slicy」とは 先月からGEEKの一員となりましたデザイナーの鄭(てい)です。 今回は、Photoshop上で画像をスライスする際に、とても便利なアプリケーションを紹介したいと思います。   スライスする時 Read More

WEB制作会社で仕事を回す弊社利用必須ツール紹介

ブログの間があいてしまいました。この夏から秋は会社にとって、次のステージに進む怒濤の時期で事務所も以前の2倍ちょっとの大きさまで拡張しました。新しいオフィスでの仕事環境や社内の様子はまた別のエントリーで書きたいと思います Read More

Sublime Textの基本機能

Sublime Text の基本機能

初めまして、先月からGEEKの一員となりましたアシスタントコーダーの加藤です。実務を始めてまだ1ヶ月。新人中の新人です。趣味は主に旅行、語学、展覧会へ行くことです。こちらのブログでは身につけた知識・スキルなどを共有・アウ Read More

Google chrome developer toolsの簡単な使い方【CSS編】

どうも!はじめまして!7月1日にGEEKの一員となりました。井原です。初めて実務でコーディングするのでまだ技術的な話は出来ませんが今後身につけていきたいです。宜しくお願いします。 今日は僕がよく使っているchromeのd Read More

WEBディレクションの極意【其の壱】

「極意」とは、「核心となる大切な事柄。奥義」である。 ふと振り返ると、今まで自分は会社の上司や先輩、メンターにとても恵まれていたなとこの頃とてもありがたく思います。 本日は、前半戦、後半戦に分けてWEBディレクションの極 Read More

プロトタイピングツールInVisionの使い方(テンプレートの設定方法)

プロトタイピングツールInVisionの使い方(テンプレートの設定方法)

どうもお久しぶりです。アシスタントディレクターの小松です。 ここ最近はW杯のおかげで寝不足気味です。個人的にフランス代表のユニフォームが一番好きですが、もう敗退してしまったので買うタイミングを逃しました。 さて本題です。 Read More

1 15 16 17 18