もうパワポは使わない!勉強会のプレゼン資料をHTMLだけでサクッと作る方法

2017/09/15

Ivaylo Gerchev

196

Articles in this issue reproduced from SitePoint
Copyright © 2017, All rights reserved. SitePoint Pty Ltd. www.sitepoint.com. Translation copyright © 2017, KADOKAWA ASCII Research Laboratories, Inc. Japanese syndication rights arranged with SitePoint Pty Ltd, Collingwood, Victoria,Australia through Tuttle-Mori Agency, Inc., Tokyo

勉強会で発表するちょっとしたスライドを用意するのに、慣れないパワポを使うのは面倒くさい。そこで、HTMLでかっこいいプレゼンテーションをつくるWebSlidesの出番です。

プレゼンテーションは聴衆に情報を伝える最適な方法です。短く簡潔に、コンパクトで噛み砕いた言い方をすることで、聴衆を引き込み、理解させることができます。表、グラフ、図形、イラスト、画像、動画、効果音、地図、リストなど、プレゼンテーションに多くの要素を組み込むことで、自由な表現ができます。

Web上にはかっこいいプレゼンテーションを作るためのツールがそろっています。今回は、すぐに使えるコンパクトなコンポーネントライブラリが備わったWebSlidesを紹介します。

WebSlidesは、物語を伝え、美しく共有できます。

実際、WebSlidesのメリットは、あなたの話を美しく、魅力的に共有できることです。目的別に40種類以上用意されたコンポーネントも使うことがき、読みやすくて拡張性の高いコードで、ポートフォリオ、ランディングページ、長文記事、インタビューなども作れます。

さらに、UnsplashAnimate.cssAnimate On Scrollといったサードパーティ製のサービスやツールを使うことでWebSlidesの機能を拡張できます。

WebSlidesはすぐに使えて、楽しいツールです。とにかくやってみましょう。

WebSlidesのインストール

WebSlidesをダウンロードします。ルートフォルダーの中に新しいフォルダ「presentation」を作ります。作成したpresentationフォルダーにindex.htmlを作って以下のコードを入力します。ダウンロードしたWebSlidesフォルダー内のファイルを参照するので、ファイルのパスを環境に合わせて変更してください。

<!doctype html>
<html>
  <head>

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&subset=latin-ext" rel="stylesheet"/>
    <!-- CSS Base -->
    <link rel="stylesheet" type='text/css' media='all' href="../static/css/base.css"/>
    <!-- CSS Colors -->
    <link rel="stylesheet" type='text/css' media='all' href="../static/css/colors.css"/>
    <!-- Optional - CSS SVG Icons (Font Awesome) -->
    <link rel="stylesheet" type='text/css' media='all' href="../static/css/svg-icons.css"/>
      
  <body>
    <!-- PUT WEBSLIDES PRESENTATION CONTENT HERE -->

    <script src="../static/js/webslides.js"></script>
    <script>
      window.ws = new WebSlides();
    </script>

    <!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
    <script defer src="../static/js/svg-icons.js"></script>
  </body>

準備ができました。

WebSlidesでWebプレゼンテーションを作る

「WebグラフィックでなぜSVGが必要とされているか」を説明する短いプレゼンテーションを作ります。

注:SVGに興味が湧いたら、基礎から学ぶ、IllustratorでSVGを最適化して書き出す方法SVG入門:SVGとはなにかを参照してください。

1つずつ作業を進めます。1つ目のスライドです。

スライド1

最初のスライドは1つの文章だけ。とてもシンプルなものです。

<article id="webslides">
  <!-- First slide -->
  <section class="bg-gradient-r aligncenter">
    <h1>Why SVG Is the Future of Web Graphics?</h1>
  </section>
  <!-- Second slide -->
  <section>
    ...
  </section>
  <!-- Third slide -->
  <section>
    ...
  </section>
  <!-- etc. -->
</article>

<article id="webslides">にある親要素<section>がスライドを作ります。ここではWebSidesで使えるクラスが2つ使われています。bg-gradient-raligncenterは、背景に放射状のグラデーションを付ける効果と、要素を中央に寄せる効果があります。

WebSlides Presentation Demo: Slide 1

スライド2

2枚目はSVGについて説明したスライドです。

<section>
  <div class="wrap">
    <div class="content-left">
      <h2>What Is SVG?</h2>
      <p class="text-subtitle">Scalable Vector Graphics</p>
      <hr>
      <p class="text-intro">SVG is an XML-based vector graphic format used to display a wide range of graphics on the Web.</p>
      <p class="text-intro">SVG documents are just plain text files and can be created and edited in every text editor.</p>
    </div>
    <div class="content-right">
      <img src="traffic-lights.png">
    </div>
  </div>
</section>

このコードで使われているcontent-leftcontent-rightクラスは、要素を2つのカラムに分けます。また上述のクラスが機能するために、全要素をwrapクラスで囲みます。左のカラムで使っているtext-subtitleは文章を大文字にし、text-introはフォントサイズを大きくします。右のカラムには説明用の画像を貼り付けます。

WebSlides Presentation Demo: Slide 2

スライド3

次のスライドではカラムを2つ作るためにグリッドコンポーネントを使います。

<section class="aligncenter">
  <h2>SVG Is Future-Proof</h2>
  <p class="text-subtitle">As long as the W3C sets the global industry standards, it seems that SVG will continue to be the de-facto standard for vector graphics in the browser.</p>
  <hr>
  <div class="grid">
    <div class="column">
      <p class="text-intro" style="text-align: left">SVG is a W3C standard. This makes SVG future-proof. Technologies are rapidly changing. What's here today could be gone tomorrow. But SVG will most likely be around for a long time.</p>
    </div>
    <div class="column">
      <figure class="browser">
        <img src="standard.png">
      </figure>
    </div>
  </div>
</section>

スニペットが示すとおり、gridクラスとcolumnクラスを使い、2つのカラムを格子状に並べます。最初のカラムではstyleでテキストを左寄せします(<section>要素のaligncenterクラスが.columnの子要素に対してカスケードになっていて、スライド内の全テキストが中央寄せになっていることに注意)。2つ目のカラムでは、browserクラスがスクリーンショットのような説明用画像を貼り付けています。

WebSlides Presentation Demo: Slide 3

スライド4

4枚目のスライドでも要素を2つのカラムに分けるためにグリッドコンポーネントを使います。

<section>
  <h2 class="aligncenter">SVG Is the Best Graphic Format for the Web</h2>
  <hr>
  <div class="grid">
    <div class="column">
      <p class="text-intro">What makes SVG so preferable for the Web is its remarkable usefulness and unlimited flexibility. It's the only one graphic format which most closely and completely responds to the current web development demands such as <em>scalability, responsibility, interactivity, programmability, and accessibility</em>.</p>
    </div>
    <div class="column">
      <p class="text-intro">As a graphic format SVG perfectly suits the needs of the web because it satisfies both designers and developers. An illustration can be easily created by a designer with any vector software, and then, the exported SVG can be transferred to a developer who can add animation or some other interactivity.</p>
    </div>
  </div>
</section>

WebSlides Presentation Demo: Slide 4

スライド5

スライド5では半分の要素を左、半分を右に寄せるためにcontent-leftcontent-rightを使います。

<section>
  <div class="wrap">
    <div class="content-left">
      <h2>SVG Usage Is Growing</h2>
      <p class="text-subtitle">Over the last year SVG usage has doubled.</p>
      <hr>
      <p>As of 2014 SVG usage is growing continuously (image below) and it has doubled over the last year (right image).</p>
      <img src="svg-usage-numbers.png">
    </div>
    <div class="content-right">
      <img src="svg-usage.png">
    </div>
  </div>
</section>

WebSlides Presentation Demo: Slide 5

スライド6

スライド6はbackgroundクラスを使って、Unsplash serviceの画像を背景にします。bg-trans-lightクラスでタイトルを透過して背景が見えるようにします。スライドでは黒背景に白文字にしたかったので、bg-blackクラスで背景を黒にしていますが、デフォルトは白背景に黒文字です。さらに<div class="wrap">で囲んで、テキストを画像の前面にします。

<section class="aligncenter bg-black">
  <span class="background" style="background-image:url('https://source.unsplash.com/ICW6QYOcdlg/800x600')"></span>
  <div class="wrap">
    <h2 class="bg-trans-light"><em>SVG Solves the Most Important Problems in Modern Web Development</em></h2>
  </div>
</section>

WebSlides Presentation Demo: Slide 6

スライド7

スライド7では説明文を左側、説明用画像を右側に貼り付けます。画像はalignrightクラスとsize-40クラスを<img>要素に対して使うことで、デフォルトの40%の大きさで貼り付けます。7〜10のスライドでは、WebSlidesに備わっているCSSアニメーションslideInRightクラスを使います。

<section class="slideInRight">
  <div class="wrap">
    <img src="responsive.jpg" class="alignright size-40">
    <h3>1. Scalability</h3>
    <p class="text-subtitle">SVG is like an infinitely scalable canvas</p>
    <p>Because of its vector nature an SVG drawing can scale and adapt to any size without loosing sharpness. In contrast, raster-based formats, such as GIF, JPG, and PNG, are static and have fixed dimensions. Although techniques for responsive images are good, they still can not compete with the SVG's ability to scale infinitely. No matter what device you use, SVG will adapt and scale perfectly keeping the graphic's visual appearance intact.</p>
  </div>
</section>

WebSlides Presentation Demo: Slide 7

スライド8

スライド8も同様です。

<section  class="slideInRight">
  <div class="wrap">
    <img src="interactivity.jpg" class="alignright size-40">
    <h3>2. Interactivity</h3>
    <p class="text-subtitle">SVG Drawings are dynamic and interactive</p>
    <p>SVG is fully scriptable. It can be manipulated with CSS and/or JavaScript. An SVG graphic can be animated and can respond to user actions.</p>
  </div>
</section>

WebSlides Presentation Demo: Slide 8

スライド9

スライド9も同じ構造です。

<section  class="slideInRight">
  <div class="wrap">
    <img src="svg-market-position.png" class="alignright size-40">
    <h3>3. Performance</h3>
    <p class="text-subtitle">SVG is the preferred image format for high traffic sites</p>
    <p>Because SVG is just plain text, in most cases the file size will be smaller compared to its bitmap counterparts (JPEG and PNG). So the impact on web page performance will be minimized.</p>
  </div>
</section>

WebSlides Presentation Demo: Slide 9

スライド10

スライド10も、内容を左右に分割します。2つ目の<p>タグで、font-sizeline-heightを変更するためにstyle要素を指定して、デフォルトで指定されているtext-introクラスの内容を上書きします。右側は<div class="wrap size-80">を使ってSVGのコード例を表示するコンテナを作ります。

<section  class="slideInRight">
  <div class="wrap">
    <div class="content-left">
      <h3>4. Accessibility</h3>
      <p class="text-subtitle">SVG text is real and editable</p>
      <p style="font-size: 1.8rem; line-height: 3.2rem">SVG files are text-based and can be searched and indexed. This makes them readable by screen readers, search engines and other devices. The ability of SVG to bring visuals to those who cannot see, extends its reach into many domains that pixel-based graphics just cannot go.</p>
    </div>
    <div class="content-right">
      <div class="wrap size-80">
        <pre>&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100"&gt;

&lt;text x="10" y="20"&gt;SVG offers real and editable text&lt;/text&gt;

&lt;/svg&gt;
        </pre>
      </div>
    </div>
  </div>
</section>

WebSlides Presentation Demo: Slide 10

スライド11

スライド11ではSVGをサポートするブラウザーを、すでに取り上げたクラスで説明します。

<section class="aligncenter">
  <h2>SVG Has Very Good Browser Support</h2>
  <p class="text-subtitle">The browser support for SVG is 97% and above</p>
  <hr>
  <div class="wrap">
    <img src="caniuse.png">
  </div>
</section>

WebSlides Presentation Demo: Slide 11

スライド12

スライド12では、SVGの使用例をイメージギャラリーで紹介します。スライド全体で、flexblockクラスとgalleryクラスを使い、リストを順不同に並べます。それぞれのギャラリーはliタグでマークアップします。

<section>
  <h2>SVG Has Many Different Use Cases</h2>
  <hr>
  <ul class="flexblock gallery">
    <li>
     <a href="#">
       <figure>
         <img alt="Thumbnail" src="illustration.jpg">
         <figcaption>
           <h2>Plain Illustrations</h2>
         </figcaption>
       </figure>
     </a>
   </li>
   <li>
     <a href="#">
       <figure>
         <img alt="Thumbnail " src="icons.jpg">
         <figcaption>
           <h2>Logos and Icons</h2>
         </figcaption>
       </figure>
     </a>
   </li>
   <li>
     ...
   </li>
   ...
 </ul>
</section>

WebSlides Presentation Demo: Slide 12

スライド13

スライド13では一般的なSVGのワークフローを紹介します。flexblockクラスとstepsクラスを使い、1つずつ手順を説明します。手順説明はliタグを使います。

<section>
  <h2>The SVG Workflow Is Straightforward</h2>
  <ul class="flexblock steps">
    <li>
      <span>
        <svg class="fa-file-image-o">
          <use xlink:href="#fa-file-image-o"></use>
        </svg>
      </span>
      <h2>01. Draw</h2>
      <p>Draw your graphic in a vector editing program such as Adobe Illustrator</p>
    </li>
    <li>
      <div class="process step-2"></div>
      <span>
        <svg class="fa-file-code-o">
          <use xlink:href="#fa-file-code-o"></use>
        </svg>
      </span>
      <h2>02. Export</h2>
      <p>Export the drawing as an SVG file</p>
    </li>
    <li>
     ...
    </li>
  </ul>
</section>

2つ目以降の説明ではprocess-step-#クラスを追加することで次の手順に右矢印を表示します。

WebSlides Presentation Demo: Slide 13

スライド14

最後のスライドではWebSlidesに備わっているCSSアニメーションzoomInを使います。

<section class="zoomIn bg-black">
  <span class="background" style="background-image:url('https://source.unsplash.com/fPkvU7RDmCo/800x600')"></span>
  <div class="wrap">
    <h2 class="aligncenter">Start Coding SVG Today!</h2>
  </div>
</section>

WebSlides Presentation Demo: Slide 14

以上です。以下のように出力されます。

最後に

きれいで機能的、動きもスムーズなプレゼンテーションが作れたと思います。これはWebSlidesのほんの一部にすぎません。WebSlidesには短い記事では紹介しきれないほどの機能がたくさんあります。

さらに知りたい人は、WebSlides ComponentsCSS architecture documentationを参照したり、ダウンロードしたフォルダにあるデモを試したりしてみてください。

WebSlidesを活用して、プレゼンテーションで取り上げたいコンテンツを考えることに集中しましょう。

本記事はRalph MasonGiulio MainardiMikhail Romanovが査読を担当しています。最高のコンテンツに仕上げるために尽力してくれたSitePointの査読担当者のみなさんに感謝します。

(原文:How to Create Beautiful HTML & CSS Presentations with WebSlides

[翻訳:前田類/編集:Livit

Copyright © 2017, Ivaylo Gerchev All Rights Reserved.

Ivaylo Gerchev

Ivaylo Gerchev

独学のWeb開発者兼デザイナーです。HTML、CSS、jQuery、PHP、WordPress、PhotoshopやIllustratorで遊ぶのが大好きで座右の銘は「最小限の努力で最大限の結果を得る」です。

Loading...