xhml・html

いくらなんでもそろそろサイトをモバイル対応にしないといけないと思いやり始めました。
Wordpressなどを使っていると簡単にできるのでしょうけど、自分の勉強のためにWebサイトは自作しているのでモバイル対応も自分でするしかありません。
バリバリのデザインコーディングはできなくても、最低限ツールに組み込めるだけの勉強はしておかなければいけません。

まず【ネットビジネス便利ツール】を対応させ、要領がわかったら各ツールに組み込む予定です。

モバイル対応の基本的な考え方は
スマホ対応サイトの作り方と6つの注意点 [ホームページ作成] All About
ブラウザの幅に合わせて表示を自動変更するレスポンシブ技12選｜All About（オールアバウト）
が参考になります。

既存のサイトのcssやhtmlを最大限に活かしつつモバイルに対応させたい、
今後の修正もできるだけ手をかけたくない、
この2点から、レスポンシブ・ウェブデザインを採用することにしました。
ブラウザの横サイズによって、デザインを切り替えます。

CSS3からメディアクエリという機能が追加されたそうなので、これを使うことにします。
【ネットビジネス便利ツール】は2カラムと1カラムしかないので、ページによってブレイクポイントの数を変える予定です。600px未満をスマートフォン、それ以上をタブレットとPCとしてコーディングします。必要なページにはタブレットとPCの間にもブレイクポイントを設ける予定です。

今まではPCオンリーでやってきたので、ついついPCファーストで考えがちですが、一番シンプルなモバイルを基調にして、タブレット・PCの場合はデザインや機能を追加する考えの方がシンプルにいけそうなので、モバイルファーストでコーディングすることにしました。

Google Crome のデベロッパーツールで、主なモバイル端末での見え方を簡易チェックできます。
それとすごい誕生日プレゼントを戴きましたでいただいたスマホで確認しようと思います。

モバイル フレンドリー テスト - Google Search Consoleでモバイルフレンドリーかチェックできます。


【ネットビジネス便利ツール】の中でも1カラムなので一番シンプルな各ツールのセールスページから始めました。

一番シンプルなはずなのに、結構大変でした。

【PayPalオートメール】
【PayPal毎度ありがとうメール】
【銀行振込サンクスメール】
【Webページコントローラー】
これらは自分でページを作ったので、なんとなく覚えがあるのですが、
【PayPalで楽アフィリエイト】
【ビジネス羅針盤 ステップメール】
はデザイナーさんに頼んで作ってもらったので、解析に時間がかかりました。

上の5つのページは完成しました。
ああ、心地よく疲れました。

引き続き他のページも対応していきます。