「column3～一日でカッコいいページを作る方法～」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
今回は、かっこいい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 コードをデザインとプログラムに分ける
~
以上
今回は、かっこいい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';
を付け加える事によって、実行するプログラムのページとデザインとしてページを分けて記述する事が出来ます。~
先程の手順で作ったページにも簡単にプログラムを埋め込んでいく事が出来ます。~
~
以上
