【ネットビジネス便利ツール】のモバイル対応の続きです。

フォームの入力であるテキストなどに、今までは大きさや長さをhtmlで設定していました。cssで設定する事が推奨だったのですが、面倒なのでついhtmlから設定していました。
レスポンシブWebデザインにするため、cssから設定するように変更しました。

html -------------------------------------------------

<input type="text" id="mail"  name="mail" value="" required placeholder="メールアドレスを入力">

<textarea id="naiyo" name="naiyo" cols="30" rows="15" wrap="off" required ></textarea>

------------------------------------------------------

css -------------------------------------------------

#mail{

	width: 250px;

	height: 20px;

}



#naiyo{

	width: 300px;

	height: 200px;

}



@media (min-width: 768px) {

	#mail{

		width: 350px;

		height: 20px;

	}

	

	#naiyo{

		width: 450px;

		height: 200px;

	}

}

------------------------------------------------------

placeholderに設定した文字列がテキストに表示されます。入力すると消えます。
placeholderあり

placeholderなし


requiredを設定すると必入力になります。入力せずサブミットしようとするとメッセージが表示されます。

type="text"ではなく、type="email"やtype="url"などにして、入力チェックも行うことができます。html5から多くのタイプが追加されました。
<input>－HTML5タグリファレンスがわかりやすいです。

便利・・のような気がするのですが、あくまでもブラウザでの入力チェックだけなので、私はほとんど利用していません。

と言うのも、まあ当たり前ですが、ブラウザを介さない入力をチェックできません。直接投げられたデーターは確認できないのです。そして直接投げられたデータほど危険なのです。
特にデータベースに登録するデータは登録前にきちんと確認しなければいけません。このチェックはデータベースに登録するスクリプトでしかチェックできません。

あまりブラウザでのチェックをきちんと書いても、どうせスクリプトでもチェックしなければいけないので二重チェックになって手間ばかりかかります。

誤解なさらないで欲しいのですが、無駄な機能だと言っているのではありません。htmlでの機能に頼り過ぎては危険、というだけす。

効果的に使うと、とても便利な機能です。
これからレスポンシブWebデザインを適用予定の販売ツールでは、もっと使う予定です。
日付（data）や時刻（time）は魅力的です。

【ネットビジネス便利ツール】のモバイル対応の続きです。

今まではポップアップ画面を使っていました。サイズの小さいブラウザを新しく立ち上げて、リンク先のページを表示していました。
スマートフォンでやってみたら新しいタグが開きそこにリンク先のページが表示されるのでそれでも駄目なことはないのですが、ついでにColorboxを使ってモーダルウィンドウに表示することにしました。

Colorboxのインストールの仕方や使い方についてはColorboxの使い方：jQueryで簡単モーダルウインドウを参考にしました。少しファイル構成が変わっているようですが見ればわかります。

jQueryとColorboxはCDNサーバから読み込むこともできるそうですが、知らない間にバージョンアップしていて、ある日突然使えなくなったら焦るので、自分の使っているレンタルサーバーにファイルを置くことにしました。

Colorboxはデザインが5つあるので、サンプルはないものかと探してみたのですが見つかりませんでした。探しそこねているのだと思います。同じく探しきれておられない方のために、自分のサイトで表示して確認したときのキャプチャです。example1・・・example5と順番に並んでいます。クリックで拡大表示されます。
　　

　

別ページ（xxxxx.php）を表示したいので、htmlにはこう書きます。
html -------------------------------------------------

<a href="xxxxx.php" class="cblink">表示テキスト</a>

------------------------------------------------------

JavaScriptです。jQueryを使っているので先にjQuery読み込んで、その後で次のソースを読み込みます。
JavaScript --------------------------------------------

$(function(){

	$(".cblink").colorbox({iframe:true, width:"80%", height:"80%"});

});

------------------------------------------------------
JavaScriptが無効な環境ではxxxxx.phpに遷移します。

【ネットビジネス便利ツール】のモバイル対応の続きです。

本文中の見出し部分にも横に細長い画像を背景に使っていました。スマートフォンの横幅より長い画像なので、スマホでは横幅がはみ出してしまいます。
画像の上に文字を載せているし、文字は小さくすると読めなくなるので、背景画像をブラウザ幅に合わせて縮小表示するのでは駄目でした。
短くした画像を用意してもいいのですが、それはやめて背景色で対応しました。

html -------------------------------------------------

<h2>見出し<h2>

------------------------------------------------------

css -------------------------------------------------

h2 {

	background-color: #8C1016;

}



@media (min-width: 600px) {

	h2 {

		background: url(横長画像へのパス) no-repeat;

	}

}

------------------------------------------------------

ブラウザの横幅が599px以下なら画像を使わず背景色を変え、600px以上なら背景に画像を使います。


同じく背景画像を設定していますが、
【ビジネス羅針盤 ステップメール】
と
【PayPalで楽アフィリエイト】
のヘッダの背景画像は、ブラウザの表示幅に合わせて縮小表示しています。

css -------------------------------------------------

#header{

	width: 100%;

	height: 200px;

	margin: 0 auto;

	background: #FFFFFF url(header.jpg) no-repeat center top;

	background-size: 100%;

}



@media (min-width: 756px) {

	#header{

		width: 754px;

		height: 364px;

		margin: 0 auto;

		background: #FFFFFF url(header.jpg) no-repeat left top;

	}

}

------------------------------------------------------

755px以下ならブラウザ幅全体にheader.jpgを表示、756px以上なら幅754pxに固定してheader.jpgを表示しています。

【ネットビジネス便利ツール】のモバイル対応です。

ここからは色々なページで共通して修正した項目についてまとめてみます。

今まではPC用にサイトを作っていたので、画像もPCに合わせた大きさになっています。これから作る画像もPCに合わせた大きさにします。
スマートフォンでは大きな画像を縮小表示することで対応します。

画像を自動リサイズする際に拡大縮小しすぎを防ぐCSSの1. 画像をウインドウ幅に合わせて表示したいが、本来の大きさより拡大はしたくない場合を設定しました。

css ---------------------------------------------------

img {

	max-width: 95%;

	height: auto;

}

------------------------------------------------------

画面いっぱいより少し小さくしたいので、95％を指定しました。
元々PC用に作ったページでは、画像の本来の大きさで表示しているからでしょう、これだけできちんと表示されました。

【ネットビジネス便利ツール】のモバイル対応の続きです。

マニュアルページには目次があります。

目次のリンクをクリックすると該当箇所へ遷移するのですが、ページの上部に常に表示しているトップメニューがあるので、メニューの高さ分ずれた位置に遷移してしまいます。
これを解消しようと思います。

JavaScriptは苦手なので、また参考にいたします。
jQuery とっても簡単、ページ内リンクでスムーズスクロール | 福島県郡山市のホームページ制作、Web制作　Kyasper Web Design キャスパーウェブデザイン
こちらのソースでやってみたのですが、なぜかうまくいかない時があるのです。気持ち良いほどピッタリ合うこともあれば、とんでもない位置に行ってしまうこともあります。
どうも読み込みのタイミングや、キャシュの関係のような感じでした。

泣く泣く別のページを探してみました。
ページ遷移時のページ内リンクのスムーススクロール
こちらが読み込みの時間を考慮してあるソースで、うまくいきそうな予感がしました。

メニューの高さは考慮されていないので、その部分のソース変更します。
30行目
var position = target.offset().top;
を
var position = target.offset().top - $('#top_bar').outerHeight();
に変更しました（メニューのidはtop_barです）。

今の処うまく動作しています。
一旦通常のリンク移動をしたあと、じわっとメニュー分下がってくるのがなんとも面白い動きです。

あ、ページ遷移時のページ内リンクのスムーススクロールもjQueryなので、先にjQueryを読み込んでからJavaScriptのソースを読み込んでください。

【ネットビジネス便利ツール】のモバイル対応、1カラムでトップにメニューバーがあるケースです。
とは言っても、2カラムで左メニューがある場合とさほど変わりません。

マニュアル画面がこのタイプです。
このタイプは今までも1カラムで、上部にメニュー（ナビ）を表示していました。マニュアルなので説明部分の画面を広く取っていました。

引き続き全ての端末で1カラム表示にします。ただしPCととタブレットは幅768x、スマートフォンは画面一杯に表示にします。
左がPCとタブレット、右がスマートフォンです。
　

実際の画面です。


2カラムページと同様に、スクロールしてもトップメニューを常に上部に表示します。

⇒ レスポンシブWebデザイン 2カラム左メニュー有り 固定


時々自分が読んでいる箇所が文章内でどこに位置しているのかわかりにくい事があるので、現在位置がわかる一覧の表示を加えてみます。

トップメニューの右側に【⇒項目】（矢印の向きが反対ですが）と表示して、クリックすると開いているページのhタグの一覧を表示し、現在位置を背景色を変えて表示します。スクロールに応じて背景色も移動させます。
hタグの一覧はリンクになっていて、idが設定されているhタグへはクリックで遷移します。

メニューの書き方や固定方法は2カラムと同じです。

現在ページのhタグはPHPから取得してリンク付きの一覧にしています。

スクロールに応じて該当するhタグ一覧の背景を変えるには、jQueryを使ってスクロールのたびに現在位置を取得します。

【jQuery】シングルページでナビゲーションに現在地を表示するを思いっきり参考して作りました。本当にありがとうございます。

ほとんどそのまま【jQuery】シングルページでナビゲーションに現在地を表示するのソースを利用させていただいています。

【ネットビジネス便利ツール】ではトップメニューを常に上部に表示するので、それを考慮した位置にしないとトップメニュー分ずれてしまいます。

トップメニューの高さは変化するかもしれないので、その時の値を取得します。
jQueryでプラグインを使わずにそれなりにちゃんとしたスムーススクロールを実装するを参考にしました。
var down = $('#top_bar').outerHeight();
で取得できます。

参考ばかりです。はい、JavaScriptは苦手です。

メニューの高さ分の調整を【jQuery】シングルページでナビゲーションに現在地を表示するに加えたソースです。
idなどもサイトに合わせて変更しています。

jQueryを使っているので、下のJavaScriptを読み込む前に、jQueryを読み込んでおきます。

JavaScript --------------------------------------------

$(function() {

	// hタグ一覧のaタグ（一覧はright-content内にあります）

	var navLink = $('#right-content a');



	// 各項目のページ上部からの開始位置と終了位置を配列に格納

	var contentsArr = new Array();

	for (var i = 0; i < navLink.length; i++) {

		// 項目のIDを取得

		var targetContents = navLink.eq(i).attr('href');

		// ページ内リンクだけ位置を特定

		if(targetContents.charAt(0) == '#') {

			// ページ上部からコンテンツの開始位置までの距離を取得

			var targetContentsTop = $(targetContents).offset().top;

			

			// ページ上部からコンテンツの終了位置までの距離を取得

			var targetContentsBottom = targetContentsTop + $(targetContents).outerHeight(true) - 1;

			

			// 配列に格納

			contentsArr[i] = [targetContentsTop, targetContentsBottom]

		}

	};



	// 現在地をチェックする

	function currentCheck() {

		// 現在のスクロール位置を取得

		var windowScrolltop = $(window).scrollTop();

		for (var i = 0; i < contentsArr.length; i++) {

			// 現在のスクロール位置が、配列に格納した開始位置と終了位置の間にあるものを調べる

			if(contentsArr[i][0] <= windowScrolltop && contentsArr[i][1] >= windowScrolltop) {

				// 開始位置と終了位置の間にある場合、ナビゲーションにclass="current"をつける

				navLink.removeClass('current');

				navLink.eq(i).addClass('current');

				i == contentsArr.length;

			}

		};

	}



	// ページ読み込み時とスクロール時に、現在地をチェックする

	$(window).on('load scroll', function() {

		currentCheck();

	});



	// ナビゲーションをクリックした時のスムーズスクロール

	navLink.click(function() {

		//トップバーの高さを取得

		var down = $('#top_bar').outerHeight();

		$('html,body').animate({scrollTop: $($(this).attr('href')).offset().top-down}, 300);

		return false;

	})

});

------------------------------------------------------

スクロールのたびにaタグにcurrentクラスを設定してくれているので、後はcssで現在位置を示すcurrentのプロパティを設定すればOKです。

css ---------------------------------------------------

#right-content a.current {

	background-color: #b0e0e6;

	

}

------------------------------------------------------

【jQuery】シングルページでナビゲーションに現在地を表示する、感謝いたします！！

【ネットビジネス便利ツール】のモバイル対応の続きです。
レスポンシブWebデザイン 2カラム左メニューあり その2で作ったメニューバー（ナビ）を、スクロールしても画面上部に常に表示されるようにします。

　

実際の画面です。スクロールしても、常に左メニュー、Home、Topが表示されています。


スクロール前の画面です。



ヘッダー・ナビゲーションを固定表示させるアイデア5つの途中から固定表示を参考にしました。ありがとうございます！

レスポンシブWebデザイン 2カラム左メニューあり その2のcss
/* スマートフォンだけ画面最上部までスクロール後固定 */
/* トップメニュー固定の項目で説明します */

#left_menu.fixed{

	position: fixed;

	top: 0;

}

が関係してきます。

$(function(){

	var _window = $(window),

	    _header = $('#left_menu'),

	    heroBottom;

	 

	_window.on('scroll',function(){     

	    heroBottom = $('#header').height();

	    if(_window.scrollTop() > heroBottom){

	        _header.addClass('fixed');   

	    }

	    else{

	        _header.removeClass('fixed');   

	    }

	});

	 

	_window.trigger('scroll');

});

jQueryを使っているので、まずjQueryを読み込む必要があります。
レスポンシブWebデザイン チェック・プルダウン表示非表示のプルダウンと同じです。

これで2カラムは終わりです。
次は1カラムでトップメニューがある場合です。と言っても左メニューと見た目はそんなに変わりません。