今回は、かっこいいWEBページを一日で作ってしまう方法を勉強してみました。
「最近HTMLやCSSを全然書いていないな!!」と思い、HTMLを書こうと思いました・・・
しかしテキストを開いて書き始めてみるとなかなか進みません。(笑)

そこでまたしても楽をしようとこの勉強をしてみました(´;ω;`)

step1 サンプルを探す

例えば、このページでは2カラムと3カラムのレスポンシブデザインのコードが紹介されています。
http://www.webdlab.com/labs/layout-r2/
その他にはこのようなページでもサンプルをダウンロード出来ます。
http://www.coolwebwindow.com/html5/

検索エンジンなどで、「レスポンシブデザイン HTML5 テンプレート」などと調べれば沢山出てきたりします。
それぞれのサイトによって様々な利用規約があるのでよく読んでから使用してください。

step2 テンプレートをもとにアレンジしていく

アレンジが許されているテンプレートを使って好きなようにアレンジしていきます。
その際に、このページを参考にすると、かっこよく仕上がり易いかも知れません。
http://design-gallery.biz/

また、ボタンを作りたい場合、素材を使いたい場合などにはこのサイトがとても便利です。
http://sozai.akuseru-design.com/rules/
http://matome.naver.jp/odai/2129430369831636001

step3 コードをデザインとプログラムに分ける

例えば、index.phpというページにphpプログラムを書き込み、t_index.phpというページにデザインを書き込んでいきます。
index.phpのプログラムの最後に

require 't_index.php';

を付け加える事によって、実行するプログラムのページとデザインとしてページを分けて記述する事が出来ます。
先程の手順で作ったページにも簡単にプログラムを埋め込んでいく事が出来ます。

以上

最終更新:2015年11月06日 22:02