> > CSS作成ツール



CSS作成ツール



Webサイトを制作する上で、サイトデザインの主流は「HTML5+CSS3」です。

ショッピングモールなどのCMSを利用し、「HTML5+CSS3」の知識がなくても、
簡単にショップ構築ができるのですが、独自ドメインなど本店サイトを構築する場合、
CSS3(スタイルシート)がわからず、デザイン制作に苦労されている方もおられると思います。

「CSS3を学ぶ」ツールを作ってみようと考えましたが、
いっそ簡単にCSSファイルを作れるツールで学べたらと、
「基本的なレイアウト」のCSS作成ツール「CSS作成君」を作ってみました。


Apple社が無料で提供している「FileMaker Go 13」を利用して
iPhone、iPad、iPad miniで使用できます。



1-1 利用できる動作環境

〔PC OS〕
Windows 7 、8
Mac OS 、OS X

〔Device〕
iPhone、iPad、iPad mini

〔FileMaker Go 13〕
iTunes 経由で無料ダウンロード
http://www.filemaker.co.jp/products/filemaker-go/


1-2 CSS作成君価格

  無料ダウンロード


FileMaker Go のダウンロード方法など詳しくはこちら。
http://www.pb-support.com/item/filemaker-go-12.html


<CSS作成君のダウンロード方法>

こちらより任意の場所にダウンロードします。
http://pb-support.com/product/css/css.zip

任意の場所にダウンロードした「css.zip」を解凍します。

フォルダ「css」-style.css
フォルダ「css」
style.css
index.html
CSS作成君.fmp12

CSS作成君.fmp12 をiTunes 経由で
App「FileMaker Go の書類」に入れます。
(Appの画面サイズはiPhoneにて最適化しております)






・1カラム、2カラム
・横幅のサイズ
・背景カラー
・背景画像
・padding(余白)

を変えてレイアウト設定できます。






■ メイン画面

「レイアウト」 - カラム数や横幅を設定します。

「背景余白」 - 背景カラーや背景画像、余白を設定します。

「編集」 - 作成されたCSSファイルを編集したり、メール添付でCSSファイルとHTML雛型ファイルを送信できます。




■レイアウト設定画面

カラムで、カラム数を選択します。
1カラムは、contents部分がひとつになります。

全体の横ピクセルを設定します。

2カラムの場合、左のカラム横ピクセルを設定します。(右のカラム横ピクセルは自動で計算されます。

1カラムの場合、カラム横ピクセルは無視されます。




■背景余白設定画面

header
contents
footer

の背景カラーや背景画像(imagesに収納)を選択できます。

それぞれの余白(上、右、下、左)をピクセルで設定できます。

contentsについては、インナー背景カラー、インナー内余白(ピクセル)を設定できます。




■編集画面

完成CSSは、編集可能です。
完成CSSファイルを「CSSメール送信」をクリックし、メール添付することができます。

受信したstyle.cssをフォルダ「css」に上書き保存します。


HTML雛型は、編集不可です。
HTML雛型ファイルを「HTMLメール送信」をクリックし、メール添付することができます。

受信したindex.htmlを上書き保存します。

そのindex.htmlを開くと、作成されたstyle.cssでレイアウトがコントロールされます。







詳しい内容についてはお問い合わせください。






このエントリーをはてなブックマークに追加



Check

トラックバック(0)

トラックバックURL: http://www.nauinet.co.jp/mt6/mt-tb.cgi/844



Check
一般社団法人ジャパンEコマースコンサルタント協会特別講師
Kindle出版のAmazon出品解説書です。
ECzine執筆記事一覧です。
Amazon出品ファイル作成代行
ブログ新着情報プログラム

ブログ記事リスト

IEが勝手に起動
消してしまった画像復元
Amazon検索で商品を表示
Amazonカテゴリー分類
Amazonで商品を見つけてもらう
iTunesアップデートのトラブル
ブログ新着情報ブログラム
Amazon編集ソフトを作成
Amazon出品ファイル作成代行
ボックス感あるデザイン
CSS作成ツール
無料のSTORES.jpに出店
源泉徴収税が免税になった!
はじめてのAmazon出品ガイド
サイトテーマの構造化マークアップ
パンくずリストの構造化マークアップ
Kindle書籍アメリカ免除申請
一太郎で作る電子書籍
Amazon 商品画像登録ガイドライン
Amazon 商品名登録ガイドライン
商品画像処理代行
ファイルコンテンツコピー
パソコンの熱暴走を防ぐ
ドライブボリューム容量変更ソフト
プロダクトキー確認ソフト
PPCキーワード作成ツール
日本語プログラミング「なでしこ」参考集
営業日カレンダー
適切なコストで既存客を守るには
LTV-Pro体験版(iPhone用)
FileMaker Go 12の活用
顧客ポートフォリオ・LTV解析ソフト
楽天市場ヤフーショッピング一括編集ソフト
Yahoo!夏の大リニューアール
MTの画像配置
TwitterとFacebookの相互連携
簡単!自動でYahoo!ショッピング商品掲載
Googleのホームページ作成支援
Google +1 の登録と設置方法
人の集まるところに仮想露店を出店
チェックインクーポン発行の実践
Facebookタブ追加方法完全公開
オリジナリィティのタブアイコン
個人輸入で稼げるってホント?
チェックインクーポンの作成方法
Facebookチェックインポイント登録
App登録なしでFacebookタブ追加
Amazon EC2にSSHを設定する方法