TokyoFacebookTwitterHatenaPocket勉強会で発表するちょっとしたスライドを用意するのに、慣れないパワポを使うのは面倒くさい。そこで、HTMLでかっこいいプレゼンテーションをつくるWebSlidesの出番です。プレゼンテーションは聴衆に情報を伝える最適な方法です。短く簡潔に、コンパクトで噛み砕いた言い方をすることで、聴衆を引き込み、理解させることができます。リストなど、プレゼンテーションに多くの要素を組み込むことで、自由な表現ができます。Web上にはかっこいいプレゼンテーションを作るためのツールがそろっています。今回は、すぐに使えるコンパクトなコンポーネントライブラリが備わったWebSlidesを紹介します。WebSlidesは、物語を伝え、美しく共有できます。実際、WebSlidesのメリットは、あなたの話を美しく、魅力的に共有できることです。目的別に40種類以上用意されたコンポーネントも使うことがき、読みやすくて拡張性の高いコードで、ポートフォリオ、ランディングページ、長文記事、インタビューなども作れます。Scrollといったサードパーティ製のサービスやツールを使うことでWebSlidesの機能を拡張できます。WebSlidesはすぐに使えて、楽しいツールです。WebSlidesのインストールWebSlidesをダウンロードします。ルートフォルダーの中に新しいフォルダ「presentation」を作ります。作成したpresentationフォルダーにindex.htmlを作って以下のコードを入力します。ダウンロードしたWebSlidesフォルダー内のファイルを参照するので、ファイルのパスを環境に合わせて変更してください。</body>準備ができました。WebSlidesでWebプレゼンテーションを作る「WebグラフィックでなぜSVGが必要とされているか」を説明する短いプレゼンテーションを作ります。注:SVGに興味が湧いたら、基礎から学ぶ、IllustratorでSVGを最適化して書き出す方法やSVG入門:SVGとはなにかを参照してください。1つずつ作業を進めます。1つ目のスライドです。スライド1最初のスライドは1つの文章だけ。id="webslides">にある親要素<section>がスライドを作ります。ここではWebSidesで使えるクラスが2つ使われています。bg-gradient-rとaligncenterは、背景に放射状のグラデーションを付ける効果と、要素を中央に寄せる効果があります。スライド22枚目はSVGについて説明したスライドです。</div></section>このコードで使われているcontent-leftとcontent-rightクラスは、要素を2つのカラムに分けます。上述のクラスが機能するために、全要素をwrapクラスで囲みます。左のカラムで使っているtext-subtitleは文章を大文字にし、text-introはフォントサイズを大きくします。右のカラムには説明用の画像を貼り付けます。スライド3次のスライドではカラムを2つ作るためにグリッドコンポーネントを使います。</div></section>スニペットが示すとおり、gridクラスとcolumnクラスを使い、2つのカラムを格子状に並べます。最初のカラムではstyleでテキストを左寄せします(<section>要素のaligncenterクラスが.columnの子要素に対してカスケードになっていて、スライド内の全テキストが中央寄せになっていることに注意)。2つ目のカラムでは、browserクラスがスクリーンショットのような説明用画像を貼り付けています。スライド44枚目のスライドでも要素を2つのカラムに分けるためにグリッドコンポーネントを使います。</div></section>スライド5スライド5では半分の要素を左、半分を右に寄せるためにcontent-leftとcontent-rightを使います。serviceの画像を背景にします。bg-trans-lightクラスでタイトルを透過して背景が見えるようにします。スライドでは黒背景に白文字にしたかったので、bg-blackクラスで背景を黒にしていますが、デフォルトは白背景に黒文字です。class="wrap">で囲んで、テキストを画像の前面にします。</div></section>スライド7スライド7では説明文を左側、説明用画像を右側に貼り付けます。画像はalignrightクラスとsize-40クラスを<img>要素に対して使うことで、デフォルトの40%の大きさで貼り付けます。7〜10のスライドでは、WebSlidesに備わっているCSSアニメーションslideInRightクラスを使います。</div></section>スライド8スライド8も同様です。</div></section>スライド9スライド9も同じ構造です。</div></section>スライド10スライド10も、内容を左右に分割します。2つ目の<p>タグで、font-sizeとline-heightを変更するためにstyle要素を指定して、デフォルトで指定されているtext-introクラスの内容を上書きします。size-80">を使ってSVGのコード例を表示するコンテナを作ります。</div></section>スライド11スライド11ではSVGをサポートするブラウザーを、すでに取り上げたクラスで説明します。</div></section>スライド12スライド12では、SVGの使用例をイメージギャラリーで紹介します。スライド全体で、flexblockクラスとgalleryクラスを使い、リストを順不同に並べます。それぞれのギャラリーはliタグでマークアップします。</ul></section>スライド13スライド13では一般的なSVGのワークフローを紹介します。flexblockクラスとstepsクラスを使い、1つずつ手順を説明します。手順説明はliタグを使います。</ul></section>2つ目以降の説明ではprocess-step-#クラスを追加することで次の手順に右矢印を表示します。スライド14最後のスライドではWebSlidesに備わっているCSSアニメーションzoomInを使います。</div></section>以上です。以下のように出力されます。最後にきれいで機能的、動きもスムーズなプレゼンテーションが作れたと思います。これはWebSlidesのほんの一部にすぎません。WebSlidesには短い記事では紹介しきれないほどの機能がたくさんあります。documentationを参照したり、ダウンロードしたフォルダにあるデモを試したりしてみてください。WebSlidesを活用して、プレゼンテーションで取り上げたいコンテンツを考えることに集中しましょう。Romanovが査読を担当しています。最高のコンテンツに仕上げるために尽力してくれたSitePointの査読担当者のみなさんに感謝します。Gerchev独学のWeb開発者兼デザイナーです。HTML、CSS、jQuery、PHP、WordPress、PhotoshopやIllustratorで遊ぶのが大好きで座右の銘は「最小限の努力で最大限の結果を得る」です。