タグ別アーカイブ: Dreamweaver

Dreamweaverの本を購入とか

ドリームウィーバーの使い方の本を買ってきた。
この前、アマゾンでAdobe Dreamweaver CS6 Windows版 [ダウンロード版]を買った。アマゾンでダウンロード版のソフトを買うのは初めてだけど、注文してダウンロードすると、パスワードを教えてくれるので、それを入力するとすぐ使えるようになった。簡単簡単。
その後、いろいろいじってみたんだけど、やっぱり一冊は使い方の本がある方が便利なので本屋で見て一番わかり易かった下の本を買ってきた。

DSC_0807
Dreamweaver+HTML5&CSS3レッスンブックというもので、ごちゃごちゃ詰め込みすぎず、説明がわかりやすい。基本的な使い方だけわかればいいので、内容を絞ってあるこういう本はありがたい。

DSC_0806
ついでにHTMLとCSSの本も買ってきた。これも棚に並んでいる本を片っ端から見てきたけど
XHTML/HTML+CSSスーパーレシピブックという本が一番わかり易かった。
上のドリームウィーバーの本と同じく、詰め込み過ぎず基本だけ書いてあるのが好印象。
最新機能だとか、重箱をつつくような内容はいらないので、基本的な内容を丁寧に教えてくれるこういう本が役に立つ。

1

タブレット用サイトのサイズを揃えるためのメタタグ

この前奮発してAdobe Dreamweaver CS6 Windows版を買ったので、ドリームウィーバーに入っているjQuery Mobile関連のツールを使ってスマホやタブレット用のサイトを試しに作ってみた。
基本的なテンプレも入ってるからスマホ用の知識とか必要なくて簡単に作れたんだけど(Dreamweaverの使い方に慣れる方が面倒・・)、googleのnexus7やドコモのエクスペリアでそのサイトを見るとなぜかサイトの横幅が画面サイズにあってない・・・。スクロールしないとサイトが全部見れず、文字の大きさもやけに小さい。
jQuery Mobileを最新版にしたりいろいろやっても駄目だった。
なので、個人でjQuery Mobileを使ってサイトを作っている人のサンプルサイトを試しにnexus7で見るとちゃんと横幅ピッタリで文字の大きさも決まっていたのでソースを見たらメタタグで

meta name=”viewport”

というものが書かれていた。調べてみたら、このタグで表示するときの幅とかを決めれるらしい。Dreamweaverのモバイルサイト用テンプレには書かれていなかったんだけど、結局

<meta name=”viewport” content=”width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1″>

を入れるだけで取り敢えず解決。各プロパティはそのまんまの意味。

<meta name=”viewport” content=”width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1″>
<title>タイトル</title>
<link rel=”stylesheet”
href=”http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css” />
<script src=”http://code.jquery.com/jquery-1.6.4.min.js”></script>
<script src=”http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js”></script>

まとめると、jquery mobileを使う時は以上をヘッダーに入れてあげる(バージョンは新しいのに書き換えた)。
Dreamweaverの最新版を使うとスマホ用サイトが簡単に作れるんだけど、ちょっと細かい所をいじろうとすると知識0だと厳しそう。今のところjquery mobileのことをまったく知らないので、jQuery Mobile スマートフォンサイト デザイン入門 (WEB PROFESSIONAL)あたりを買って数時間は勉強しておこうと思う。

1