Webスライドを使用してHTMLプレゼンテーションを作成する方法

の世界で インターネット上で私たちのアイデアを示す ますます必要になり、ツールの多様性が私たちに素晴らしいプレゼンテーションを作成するように導いたところで、多くの場合、間違いなく、いくつかのメディアと互換性がなくなります。 HTMLプレゼンテーション これらは、この分野での普遍的な代替手段であり続けます。

しかし、美しいHTMLプレゼンテーションの作成には長い時間がかかり、HTML、CSS、場合によってはJavaScriptの高度な知識が必要になることは誰にとっても秘密ではありません。 これらの問題から、と呼ばれる優れたツールが出現します ウェブスライド。

ウェブスライドとは何ですか？

それをどういうわけかオープンソースの「フレームワーク」と呼ぶことです。 ホセ・ルイス・アンチューンズ、それは私たちを可能にします HTMLプレゼンテーションを作成する すばやく簡単に。 このツールには、独自のプレゼンテーションを作成するための基本機能があります。同様に、デモプレゼンテーションのいずれかを使用して、数分で好みに合わせてカスタマイズできます。

このツールを使用して作成したHTMLプレゼンテーションは、印象的な美学を備えています。 このツールにはHTMLとCSSの非常に基本的な知識が必要であるため、コンテンツのみに焦点を当て、プレゼンテーションの準備方法にはほとんど焦点を当てるべきではないすべてのタイプのユーザーにとって理想的です。

ウェブスライドをダウンロードする方法は？

Webスライドをダウンロードするには、お気に入りのディレクトリから次のコマンドを実行するだけです。

wget https://github.com/jlantunez/webslides/archive/master.zip

公式リポジトリのクローンを作成することもできます

git clone https://github.com/jlantunez/webslides.git

プロジェクトフォルダ内には、独自のHTMLプレゼンテーションの作成を簡単に開始するために必要なjs、css、およびデモが含まれています。

ウェブスライドの使い方は？

Webスライドの最大の利点は、その使いやすさです。このツールを使用すると、さまざまな目的でプレゼンテーションを簡単に作成でき、デモシリーズではプレゼンテーションの作成プロセスが非常に高速になります。

ウェブスライドをダウンロードすると何が得られますか？

ウェブスライドをダウンロードするとき、デモや画像（デバイスやロゴ）を含むさまざまなフォルダにアクセスします。

• cssフォルダーには、プレゼンテーションのスタイルが保存されます
• jsフォルダーには、ほとんどの魔法が行われる基本的なwebslide.jsを含め、必要なjavascriptが保存されます。
• デモの画像とhtmlファイルは、それぞれ画像フォルダとデモフォルダに保存されます。

webslides/
├── index.html
├── css/
│   ├── base.css
│   └── colors.css
│   └── svg-icons.css (optional)
├── js/
│   ├── webslides.js
│   └── svg-icons.js (optional)
└── demos/
└── images/

Webスライドを使用したHTMLプレゼンテーションの作成

ウェブスライドを使用する場合、2つの基本的な利点があります。これについては以下で説明します。

• コードはクリーンでスケーラブルです。 また、最も人気のある命名法を使用した直感的なマークアップも含まれています。 クラスを使用したり、ネストを使いすぎたりする必要はありません。
• 各 <section> #webslidesでは、スライドを表します。 したがって、ページネーションは非常に簡単です。

スライド1  スライド1

同じように、垂直方向のスライドを作成して、垂直方向のスタイルを追加できます

WebsidesCSSを構成するクラス

• タイポグラフィ：.text-landing、.text-data、.text-intro..。
• 背景色：.bg-primary、.bg-apple、.bg-blue..。
• 背景画像：.background、.background-center-bottom…
• カード：.card-50、.card-40..。
• フレキシブルブロック：.flexblock.clients、.flexblock.metrics..。

ウェブスライドへの拡張

webslidesを使用すると、新しいスタイルや機能を追加できます。たとえば、次のリソースのいくつかを追加できます。

• Unsplash
• アニメーション.css
• 粒子.js
• pt

Webスライドで作成されたHTMLプレゼンテーションのデモ

Webスライドで作成されたHTMLプレゼンテーションの一連のデモを見ることができます ここで。 同様に、フレームワークをダウンロードすると、これらの各デモのエンコーディングにアクセスできます。

これは、HTMLプレゼンテーションをすばやく、優れた仕上がりで作成できるツールですが、コンテンツに集中して、これまで想像もしなかった結果を達成するのにも役立ちます。