スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

jQuery mobileでスマホサイトを作ろう! まずはベースを作りましょう

さて、早速忘れないうちに始めることにします

きっかけは、自分のサイトのスマホ向けをもう少しマシにしたい、という単純なものでした
プロのサイトには及ばないけど、個人でもなんか作れるだろ、という無謀な挑戦でございます

<必要なもの>
パソコン・CSSをいじれるソフト
(慣れてないかたは少しお高いですがDreamweaver推奨)
インターネット環境 (Google先生をフル活用しましょう)

ボタン等の素材は最初はネットのフリー素材でいいんです。
最初から全部やるのは大変です。すぐ挫折しますよ(ΦωΦ)フフフ…


さぁ、ではさっそくHTMLから書き始め・・・ません。

難しいことはプロにやっていただきましょう

では早速、themerollerというページに飛びます。


ポップアップが出てきますので、Get Rollingを押して先に進みましょう

デフォルトはABC と同じデザインが3つ並んだ状態だと思います

左の縦の調整タブについて説明しますと

Global は全体の設定。

A,B,C,は個別のページ設定となります。

ページによって配色を変えないのであればB,Cタブは削除してしまってAだけ作りこんで下さい。

色々弄っても壊れませんから自分の好みにチャキチャキっと作ってくださいね。

#◯◯◯◯◯◯っていう部分をクリックすればマウスで色選べますからいちいち色コード調べなくてOK

配色がきれいにまとまらん、って人は色見本の本でもあると便利かもしれません。


そんな感じでルンルン弄って完成しましたら、ページ上部のダウンロードボタンを押しましょう

名前を適当に入れて(ファイル名になるので半角アルファベットでね)
右下のDownload Zipを押せば


設定したテーマの見本HTMLファイルがCSSとともにもらえます


これを弄ればいいんですよ、うふふふふ。

CSSを0から学ぶよりずっと早い。


ホントは基礎は大事なんですけど、
途中で挫折しない事のほうがもっと大事ということで。



・・・続く。


Adobe Dreamweaver CS6 Windows版Adobe Dreamweaver CS6 Windows版
(2012/05/11)
Windows

商品詳細を見る

Adobe Dreamweaver CS6 Macintosh版Adobe Dreamweaver CS6 Macintosh版
(2012/05/11)
Macintosh

商品詳細を見る

配色アイデアミニ帳 (MdN books)配色アイデアミニ帳 (MdN books)
(2003/12)
石田 恭嗣

商品詳細を見る

スポンサーサイト

テーマ : webサイト作成
ジャンル : コンピュータ

コメントの投稿

非公開コメント

プロフィール

じぇにふぁ

Author:じぇにふぁ
じぇにふぁと申します。
自宅でデザイナー(たまにイラストレーター)やってます。
本家はアメブロだったりしますが、上手く使い分けできればなぁと思ってます。よろしくお願いしますm(_ _)m

ブロとも申請フォーム

この人とブロともになる

ここ以外の活動場所
ホームページはこちら

本家ブログ



月別アーカイブ
カテゴリ
カウンター
検索フォーム
リンクいろいろ
検索フォーム
お天気

-天気予報コム- -FC2-
RSSリンクの表示
QRコード
QR
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。