Webサイトがスターウォーズの世界になるCSSライブラリ「starwarsintro.css」を使ってみた！ : うえぶはっく

CSSライブラリを読み込んで「専用のクラス」をHTMLに記述するだけで、あっという間にスターウォーズの「イントロ風サイト」が完成する【starwarsintro.css】が公開されているのでご紹介！

映画のように下から上に流れていくテキストを、プログラミング不要で実現できるのが魅力で、表示させたい箇所のHTMLにクラスを付与するだけというお手軽さです！

使い方！

まずは公式ページにアクセスして、CSSライブラリをダウンロードしましょう。

もしくは、公式ページで使われているURLからも利用可能です。

http://polarnotion.github.io/starwarsintro/starwarsintro.css

そして、新規に「index.html」を作成しましょう！

<!-- index.html -->

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>starwarsintroサンプル</title>
    <link rel="stylesheet" href="starwarsintro.css" />
</head>
<body>
    <div class="star-wars-intro">

        <!-- ここにコンテンツを挿入 -->

    </div>
</body>
</html>

「headタグ」内で「starwarsintro.css」を読み込んだら、使用したい箇所の「divタグ」に専用のクラス「star-wars-intro」を記述します。

あとは、この中に「スターウォーズ風」で表示させたいテキストなどのコンテンツを挿入すればOKです。

各要素の解説！

「starwarsintro.css」で利用できるHTML要素は以下のとおりです！

<div class="star-wars-intro">

  <!-- 最初に表示するタイトルテキスト -->
  <p class="intro-text"></p>

  <!-- 「ロゴ画像」か「テキストロゴ」を挿入 -->
  <h2 class="main-logo"></h2>


  <!-- メインコンテンツの挿入 -->
  <div class="main-content">

    <div class="title-content">

        <p class="content-header"></p>

        <p class="content-body"></p>


        <!-- ボタンやリンクを挿入 -->
        <a href="#" class="space-button"></a>

    </div>

  </div>

</div>

基本的な使い方としては、一番最初に表示されるテキスト文字を「intro-text」クラスに記述し、下から上に流れるような文字は「main-content」クラス内に書くという感じです。

「main-content」内の文字は「header」と「body」に分かれており、ブログ記事のような「タイトル」と「本文」みたいに書くことができます。

ちなみに、途中で「space-button」クラスを追記すれば、リンクやボタンを良い感じのレイアウトで挿入することも出来ます。

以下に、簡単なサンプルを作ってみたのでチェックしてみてください。（チェックするには、「Run Pen」ボタンをクリックします…）

※スマホの方はコチラから…。

See the Pen LNMzOM by webhacck (@webhacck) on CodePen.

上記サンプルには、途中で適当な画像も挿入していますが、これは「main-logo」クラス内に記述することで実現可能です。

冒頭でも少し触れましたが、この「starwarsintro.css」はサイト内の任意の箇所にクラスを付与するだけで利用出来るため、指定箇所だけに表示するような使い方もできるので便利です。

サイト内にユニークなアクセントが欲しい時や、テキストを目立たせたい時などにも利用できると思いますので、ご興味ある方はぜひトライしてみてください！