「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テンプレートを使ったサイト制作の流れ」をご覧ください。