ポップな水玉柄テンプレート「Polka dot」

「Polka dot」は水玉柄のポップなテンプレートです。32作目です。

元気なオレンジ色に水色の清涼感をプラス

どの端末からも見やすく、1カラムで表示されるレスポンシブデザインです。

ゲーム「でみめん」のロード画面をモチーフにしました!

こんな方におすすめです

  • ポップな感じが好き
  • 画像を使わないデザインがいい
  • でみめんが好き

※このテンプレートはMITライセンスを適用しています。詳しくは利用規約をご覧ください。

「Polka dot」の特徴3つ

画像未使用の軽いデザインです

背景の水玉柄はCSSで描いています。すごいぞ、CSS! 画像ではないため、カラーコードを書き換えれば簡単に模様替えできます。

ウェブフォントと併せて変更してガーリーな感じにしてもいいですね。

水玉の大きさはbackground-size#ffd556 20%の数字で変更できます。
なおbackground-position: 0 0, 50px 50px;background-sizeの半分の数値だと綺麗に並びます。

見出しにはUnicodeの絵文字を使いました。端末によって微妙に表示が違いますが、青い菱形です。
表示を揃えたい方は◆などの記号にするか、画像を使ってください。

立体的なボタンとテーブル

今回のテーブル枠はbox-shadowを2種類使ってリッチな感じにしました。やや金属製に見えるのではないでしょうか?

フォームのボタンにはハイライトを入れて、押したくなるようなぷにっと感を目指しました。
さらに、ボタンのclass名に「hvr-wobble-top」と足すと、ぷるぷる揺れるアニメーションがつきます!

テーブル枠・ボタンともに、フラットデザインが好きな人はbox-shadowの記述を削除してくださいね。

でみめんのロード画面を模しています

このテンプレートは「でみめん」の布教のために作りました!(2018年12月当時)

ぜひ、色んなサイトに使ってください!
プレイヤーがさらに増えて、盛り上がると嬉しいです。

公式PV(2分)を貼っておくので、ゲームを知らない方は見てみてください☆彡

 

テンプレートのデータ

文書型宣言 HTML5
文字コード UTF-8
フレームワーク Bootstrap
CSSの書き方 モバイルファースト

サイト作りに慣れていなければ「HTMLテンプレートを使ったサイト制作の流れ」をご覧ください。