HTMLとCSSだけでWebアプリを作った実例を紹介

今回は、HTMLとCSSのみで、簡単なクイズのWebアプリを作成してみました。

ブログ記事の中に「カスタムHTML」のブロック１つだけを使用して作成しています。

JavaScriptや外部ライブラリの呼び出しを行っていないので、学び系のノウハウコンテンツの途中や最後などにアクセントして配置して、問題を設定したら、正解か不正解を表示するくらいの機能しか持っていませんが、アイデア次第でもっと面白くできるかなと考えています。

目次を見る

WordPressのブログ記事中にWebアプリでクイズを作る

下記のクイズゲームは、WordPressの「カスタムHTML」の中に、HTMLとCSSだけを記述して、ゲームにしています。

　　問.1 検索ボタンを押している猫の柄は？

ぶち猫

正解！

ポインテッド

残念！

三毛猫

えっ?

外部から読み込んだりせずに、利用する言語の種類もHTMLとCSSだけに限定しているので

そういうような、別の言語を入れていくと可能になる機能を書いていくとキリがなくなるのですが、リッチな演出や動的なエフェクトができなくても、上記のようなちょっとした遊びを、直接ブログ記事を書くときに、コードを書いて埋め込むことは可能です。

昨今は、ブログ型のサイトでもPWA（Progressive Web Apps）という技術を用いて、ネイティブアプリと変わらない使い方ができる仕組みもあります。

また、Webサイトでよく利用されるフロント側の言語は多数あり、ブログ型のWebメディアを運用するだけの場合においては、HTMLとCSS以外の言語を少し覚えるくらいで上手く運営していくことが可能です。

ただ、ちょっと何かあったときに自分で応急処置ができるように、HTMLとCSS、特にCSSなどは扱い方がわかると、「CSSカスタマイズ」でWordPressテーマを自分好みにカスタマイズしてオリジナリティーを高めることが可能になります。

筆者の場合、Amebaブログ（雑記で書いているブログ）で書いているブログもCSSカスタマイズ機能を利用してオリジナルのテーマにしています。

このように、ブログ型やサイト型など、HTMLやCSSをWebサイトデザインやWebアプリを作れる感覚で扱えるようになるとWeb関連のスキルを上達させていく上でも、何か仕事をする上でもすごく役に立つ場面が出て来ると考えています。

最近書いている、ブログ記事内にWebアプリを組み込んでいるのは、何とか難しい言語を使わずに、ブログ記事内で気軽に組み込むことができるかの検証も兼ねています。

とはいえ、もっと素敵で動的なエフェクトをWebサイト内に実装したとなったら、JavaScriptなどを扱えるようになる必要もあります。

自分で完全にコードを書かなくても、今は参考になるプログラミング事例がたくさんありますし、外部のライブラリを利用することですぐに多くのエフェクトを実装することも可能です。

ただ、利用する内容が複雑になって、多くの外部ライブラリも使うようになると、今度はWebサイトの動作が重くなって、Webサイト高速化の改善が必須になってきます。

Webメディアのフロントは、多くの言語で構成できますし、土台となるCMSも数多くあります。

まずは、WordPressテーマを本格的にカスタマイズして練習しながら、いずれは最初から作ってみる感じでも面白いかもしれません。

Webサイト制作は、固定された作り方がないので、いくらでも新しいアプローチで制作可能です。

今回は、そんな中でも、HTMLとCSSだけで実装可能なWebアプリケーションを1つ作ってみました。

Googleアドセンスなどを活用して収益化などをしている場合、扱いやすい開発言語環境でWebアプリケーションを開発して運用するメリットは大きいです。

現在は、ノーコード環境でWebアプリケーションを作ることが可能になっているので、チャレンジしてみる価値はあると考えています。

最初は、扱いやすい言語から入っていき、だんだんとできることが増えてくると、筆者が運用している別のWebアプリケーションであるアイコンメーカーのリンクリングミー®︎なども開発できるようになってきて、そこまで行けば、さらに色々なメリットも掴めるようになってきます。

最後まで読んでいただき、ありがとうございました。