読者です 読者をやめる 読者になる 読者になる

おばちゃんのつれづれ 主にマンガとweb

おばちゃんがライフハックや日常を書きます

初心者がコピペだけでレスポンシブなスマホ対応HPを作るテンプレート配布中

これだけスマホが普及してモバイルファーストが言われても、初心者でも簡単にレスポンシブでスマホ対応なHPを作れるテンプレートというのは案外ないものです。

ぬるっと動くアニメーションとかにゅっと出てくるハンバーガーメニューとかぴかぴか光るメニューボタンとか、そういう派手なエフェクトばかり注目されてとても難しいっぽい雰囲気になっているレスポンシブデザインですが、余計なことをやらなければとても簡単です。

 

 

スマホサイト作成が簡単な理由

スマホでもみやすいサイト、というのは

  • スマホの小さい画面で見やすく
  • 通信状態が悪くてもさくさく動く

というのが条件です。つまりあまり高度な技術を使うと逆にスマホで使いにくくなります。なので一昔前のハイスペックPCと安定した有線回旋を前提としたリッチなサイトよりずっとシンプルな構造になっています。HP作成も初心者に優しい時代になりました。

ということで、こんな超絶シンプルなテンプレートを作りました!

f:id:obatyan1:20170503002345j:plain

こちらで見ることができます。

レスポンシブHPのサンプル

 

ダウンロードはこちら

 

構造はこんな感じ。

 

f:id:obatyan1:20170503002526p:plain

メニューは常にトップに固定される以外は、なーんにもやってません。

css一枚とhtml一枚の極限までシンプルを極めた構成のため、にゅるにゅるとトップに戻るボタンやら、にゅっと出てくるハンバーガーメニューやらはありません。その代わり、メニューを変えるときもメニューバーの一箇所を変えるだけですみますし、デザインを変えるときもcss一枚変えるだけ。

ダウンロードはこちら

zipなので解凍してあとは好きに改変してください。クレジット表示不要、商用利用可です。