xhml・html

モバイル対応が終わりました

2019年03月13日

3月3日に【ネットビジネス便利ツール】をモバイル対応にしますと書きましたが、対応し始めてから約10日、やっと完成しました。
html5に対応させている期間も入れると約2週間でした。JavaScriptのソースも整理整頓していました。

何をしているのか自分の備忘録も兼ねて、ブログにアップするつもりでしたが、作業し始めたら途中で手を止める気になれず、黙々と作業を続けてしまいました。

また途中でまとめる気が失せるかもしれませんが、忘れないうちに少しずつでもまとめる予定です（あくまで予定）。
引き続き販売しているツールもモバイル対応にしたいし、本当にやりたいのはサイトの内容の大幅書き換えなので、本当に途中やめになる予感大です。

【ネットビジネス便利ツール】は大きく
・トップページ、コンテンツページなど（2カラム）
・ツールのマニュアルページ（1カラム）
・ツールの紹介ページ（1カラム）
に分けられます。
背景画像、表、入力フォームなどの装飾や配置などcssの視点で見るともっと細かく分けられるのですが、構造の視点では上の3パターンです。

ブレイクポイントについて。
やっとサイトをモバイル対応にしていますでモバイルファースト、ブレイクポイントは600pxにすると書きました。

あれから1025pxをブレイクポイントにして、モバイル端末とPCに分ける想定でコーディングしていました。
ざっとできた時点で、父母の家にあるタブレット端末で確認してみました。
タブレットの大きさはPCに入れた方が操作しやすいと判断、ブレイクポイントを768pxにすることにしました。
1025pxがブレイクポイントだと、Google Crome のデベロッパーツールでも右側が随分空いていて勿体なかったのですが、実機でもやはり勿体なく、2カラムでも十分操作できることを確認しました。家族の中で一番指の太い父でも操作は十分できることも確認しました。

ブレイクポイントは画面構成によってどこに設定するのが使いやすいか変わってくると思いますが、【ネットビジネス便利ツール】の構造は単純なので、スマートフォンとその他に分けるのが操作性が良くなると判断しました。

ブレイクポイントについては、
ブラウザの幅に合わせて表示を自動変更するレスポンシブ技12選
の
モバイルファーストでデザインするCSSの書き方
と
レスポンシブCSSで使うブレイクポイントの決め方
を参考にしました。

cssについて。
ほとんどのページで使うcssと、それぞれのページで使うcssを分けることにしました。
今までは1つのファイルに記述していたのですが、モバイル対応に伴ってコーディングが増えるので、わかりやすくするために分離させます。
cssの種類は
・トップ
・コンテンツ
・ツール紹介
・マニュアル
・更新情報
・お問い合わせ
・その他幾つか
に分けました。

例えば、
コンテンツページでは、共通のcssとコンテンツ用のcssを、
マニュアルページでは、共通のcssとマニュアル用のcssを
読み込みます。

不要なcssを読み込まない、万一被っているコーディングがあっても切り離すことができるので思わぬ動作を避けることができます。

同じ要領でJavaScriptファイルも分けて読み込みます。

明日はやっとサイトをモバイル対応にしていますで既にできたと書いた、一番単純な1カラム、メニューなしページのまとめです。

タグ：レスポンシブWebデザイン

Top↑

xhml・html

レスポンシブWebデザイン 1カラムメニュー無し

2019年03月15日

【ネットビジネス便利ツール】のモバイル対応、一番単純な1カラムメニューなしページです。
【PayPalオートメール】
【PayPal毎度ありがとうメール】
【銀行振込サンクスメール】
【Webページコントローラー】
の4ページが該当します。

左がPCとタブレット、右がスマートフォンを想定した画面です。

全体枠はスマートフォンの時は画面いっぱいに表示させるけど、タブレットとPCでは（横幅768px以上）の時は左右に余白を作ります。
元々のページが横幅800px固定で作っていたので、それを少し狭くしてタブレット以上では余白を表示するように引き継ぎました。
ページの内容全てを青枠の中に入れて、枠の幅をブラウザの幅に応じて変えています。青枠のidがcontainerだとすると、htmlとcssは次のようになります。

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

<div id="container">

	ヘッダ

	本文

	フッタ

	etc.

</div>

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

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

#container {

	width: 100%;

}



@media (min-width: 768px) {

	#container {

		width: 768px;

	}

}

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

#container ・・・
は全ての場合に適用されます。

@media (min-width: 768px) ・・・
はブラウザの横幅が768px以上の場合に適用され、全ての場合に適用する幅100％（width: 100%）の設定を上書きしています。

4つのページのヘッダは画像がヘッダ全体にあるのではなく、小さな画像を右下に配しています。
背景全体に画像を表示している場合は、表示幅に応じて画像の大きさを変えることができますが、小さな画像ではその設定は見つけられなかったのでブレイクポイントで大きさを切り替えました。

ブラウザの大きさに応じて、画像の大きさを%で指定しています。
他にもpaddingや文字の大きさも変えています。

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

<div id="head1">

	ヘッダの内容

</div>

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

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

#head1 {

	background: url(画像へのパス) no-repeat #f5f5f5;

	background-size: 20%;

	background-position: right bottom;

}



@media (min-width: 600px) {

	#head1 {

		font-size: 25px;

	}

}



@media (min-width: 1025px) {

	#head1 {

		font-size: 29px;

		padding: 20px;

		background: url(画像へのパス) no-repeat #f5f5f5;

		background-position: right bottom;

	}

}

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

#head1 ・・・
は全ての場合に適用されます。

@media (min-width: 600px) ・・・
はブラウザの横幅が600px～1024pxの場合に適用され、全ての場合に適用するスタイルと被っていたら上書きされます。

@media (min-width: 1025px) ・・・
はブラウザの横幅が1025px以上の場合に適用され、全ての場合とブラウザの横幅が600px～1024pxの場合に適用するスタイルと被っていたら上書きされます。

つまり、
ブラウザの横幅が1024px以下の場合、画像は20％の大きさでヘッダ領域の右下に表示され、
ブラウザの横幅が1025px以上の場合、画像はそのままの大きさでヘッダ領域の右下に表示されます。

文字の大きさや、paddingは
ブラウザの横幅が600px～1024pxの場合、文字の大きさ25px、
ブラウザの横幅が1025px以上の場合、文字の大きさ29px、paddingは20px
になります。

細かな調整はいっぱいありますが、大きくはこれだけです。

タグ：レスポンシブWebデザイン

Top↑

xhml・html

レスポンシブWebデザイン 2カラムメニュー有り Top Home

2019年03月16日

【ネットビジネス便利ツール】のモバイル対応、二番目に簡単そうな2カラムページに移ります。
メインコンテンツの左側にメニュー一覧が表示されるページです。

トップページ、各コンテンツページ、更新履歴、お問い合わせ入力画面などがこのタイプです。

PCとタブレットは今までの様に2カラムにします。

スマートフォンでは左メニューの内容は隠しておき、必要に応じて表示されるようにします。横長のバーに左メニューの内容を表示するリンクを表示、クリックすると左メニューの内容が表示されます。

メニューの前に、今まではTopへのリンクをページの一番下に表示していましたが、これを機に右下に円で表示するように変更してみました。

実際の画面です。

これはPCとタブレットの時にだけ表示します。

円はcssで書いています。CSSで円を描く方法：文字を中央配置するには？枠線のつけ方は？を参考にしました。
サルワカには参考になる有益なコンテンツが沢山あります！

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

<body>

<!-- ページの一番上に目印になるタグを配置 -->

<div name="pagetop" id="pagetop"></div>

ページの中身



 <div class="page_top">

  <a href="#pagetop">Top↑</a>

 </div>

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

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

.page_top {

	z-index: 2;	/* フッタが上に来るのを防ぐため */

	display: none;

}



@media (min-width: 768px) {

	.page_top {

		position: fixed;

		bottom: 20px;

		right: 10px;

		/* 円を描画 */

		width: 70px; 

		height: 70px;

		border-radius: 50px;

		/* 中央に文字を表示 */

		line-height: 70px;

		text-align: center;

		vertical-align: middle;

		display: block;

		background-color: #808080;

		opacity: 0.5;             /* 透明度 */

		margin: 0px;

		padding: 0px;

	}

	

	.page_top a {

		color: white;

		text-decoration: none;

	}

	

	.page_top a:hover {

		color: white;

		text-decoration: underline;

	}

}



/* フッター */

#footer {

	z-index: 1;	/* モバイル時フッタが上に来るのを防ぐため */

}

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

ページを一番下までスクロールするとリンクがフッタに隠れてしまうので、.page_topと#footerにz-indexを設定しました。数字が大きいほど上に表示されます。

同じ要領で左側にHomeリンクも表示してみました。

次はメニューについてまとめます。

タグ：レスポンシブWebデザイン

Top↑

xhml・html

レスポンシブWebデザインチェック・プルダウン表示非表示

2019年03月17日

【ネットビジネス便利ツール】のモバイル対応の続きです。
今日は本命のメニューを書く予定だったのですが、先にチェックボックスを使って表示非表示を切り替える方法を書いた方がわかりやすいと思うので、順番を入れ替えます。

チェックボックスにチェックを入れると文字や画像が表示され、
チェックを外すと文字や画像が非表示になる、
こういう動きをご覧になったことがあると思います。
ネットビジネス便利ツールお問い合わせの【ユーザーです】をチェックしてみてください（問い合わせは送らないでくださいね）。
チェックが入ると入力項目が追加され、チェックを外すと入力項目が消えます。
cssだけで書くことができます。

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

<input type="checkbox" value="chk" name="inputchk" id="inputchk">　チェック



<!-- ↓表示非表示を切り替える部分は、チェックボックスより下に配置 -->

<!-- 上では切り替えられない -->

<div id="inputk">

	<input type="text" value="" name="data" id="data">

</div>

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

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

/* 初めは非表示 */

#inputk {

	display: none;

}



/* チェックボックスinputchkにチェックが入ったらinputkを表示 */

#inputchk:checked ~ #inputk {

	display: block;

}

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

上は【チェック】をただの文字として表示していますが、ラベルとして表示してチェックボックスと関連付けることもできます。
こうすると【チェック】という文字のクリックでもチェックボックスを操作できます。

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

<input type="checkbox" value="chk" name="inputchk" id="inputchk">

<label id="inputopen" for="inputchk">チェック</label>

<div id="inputk">

	<input type="text" value="" name="data" id="data">

</div>

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

cssは同じです。

更にチェックボックスを非表示にして、【チェック】のクリックで表示非表示を切り替えることもできます。

htmlは1つ上と同じです。

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

/* 初めは非表示 */

#inputk {

	display: none;

}



/* チェックボックスinputchkを非表示 */

#inputchk {

	display: none;

}



/* チェックボックスinputchkにチェックが入ったらinputkを表示 */

#inputchk:checked ~ #inputk {

	display: block;

}

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

JavaScriptは使わずcssだけで書けるし便利です。【ネットビジネス便利ツール】でも色々な所で使っています。

プルダウンで同じような事ができないかと思ったのですが、こちらはJavaScriptを書かないとだめなようです。
jQueryを使う方法です。下のJavaScriptを読み込む前にjQueryを先に読み込んでおかないと動きません。
JavaScriptはhtmlの最後に読み込むのがいいらしいですが、色々な所で読み込んでいるとわけがわからなくなり非効率なので、私はいつも外部ファイルに保存してhtmlのヘッダ部分でまとめて読み込んでいます。
jQueryファイルをjquery.js、
下のJavaScriptをjavascript.jsに保存したとすると、htmlのヘッダにパスを追加します。
jQueryはCDNサーバーへのリンクでも大丈夫です。私はいつの間にかバージョンアップしていてある日突然動かなくなったら焦るので、借りているレンタルサーバーへファイルを置いています。

htmlヘッダ部分 ---------------------------------------

<head>

　・・・

<meta http-equiv="content-script-type" content="text/javascript">

<!-- パスは環境に合わせて変更してください -->

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="javascript.js"></script>

</head>

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

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

<select name="sort" id="sort">

	<option value=""></option>

	<option value="val1">値1</option>

	<option value="val2">値2</option>

	<option value="val3">値3</option>

</select>

<div id="val1">値1</div>

<div id="val2">値2</div>

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

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

#val1 {

	display: none;

}



#val2 {

	display: none;

}

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

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

$(function(){

	$('#sort').on('change', function(){

		if($(this).val() === 'val1'){

			$('#val1').show();

			$('#val2').hide();

		}

		else{

			if($(this).val() === 'val2'){

				$('#val1').hide();

				$('#val2').show();

			}

			else{

				$('#val1').hide();

				$('#val2').hide();

			}

		}

	});

});

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

値1を選択すると値1と表示され、
値2を選択すると値2と表示され、
値3を選択すると何も表示されません。

次回こそ肝の部分、メニューをまとめます。
今回のチェックボックスによる表示非表示切り替えを使います。

タグ：レスポンシブWebデザイン

Top↑

xhml・html

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

2019年03月18日

【ネットビジネス便利ツール】のモバイル対応の続きです。いよいよ肝のメニュー部分です。
レスポンシブWebデザインチェック・プルダウン表示非表示のチェックボックで表示非表示を切り替える方法を使います。

PCとタブレットは今までの様に2カラムで表示します。

実際の画面です。

実際の画面です。左メニューの【⇒メニュー】をクリックすると、メインコンテンツの上にメニューが表示されます。よくハンバーガーメニュー（三のように横線が3本あるアイコン）で表現されています。もっとはっきりメニューと表示してみました。

メニューの横についでにHomeとTopも表示しました。

CSSだけで簡単！ハンバーガーメニューの作り方（スマホ対応）を参考にしました。ありがとうございます。
ハンバーガーメニューの代わりに【⇒メニュー】を表示、
HomeとTopのリンクを表示、
Closeをクリックしてもメニューを閉じるように、
iOSでスクロールがツイーット（慣性スクロールと言うらしい）いかないので、そのためのプロパティも加えています。

メニューの表示非表示の切り替えは、レスポンシブWebデザインチェック・プルダウン表示非表示のチェックボックスの方法を使います。

下のhtmlにあるid：menu-inputのチェックボックスへのチェックの有り無しで表示非表示を切り替えます。
チェックボックスに関連付けられたラベルが3つあります。
id：menu-open
id：menu-closs
id：menu-close-x
の3つです。
チェックボックスはcssで非表示に設定しているので、実際の操作はこれら3つのラベルで行います。

id：menu-open ⇒ 【⇒メニュー】をクリックすると画面に半透明なグレーカバーを表示、その上にid：menu-contentのdiv内を表示します。
id：menu-closs ⇒ メニュー表示時に右のグレー部分をクリックするとid：menu-contentのdiv内を非表示にします。
id：menu-close-x ⇒ メニュー内の【Close】をクリックするとid：menu-contentのdiv内を非表示にします。
これらは全てcssでコーディングされています。

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

<nav id="menu">

	<div id="menu-drawer">

		<!-- チェックボックスを非表示 -->

		<input type="checkbox" id="menu-input" class="menu-unshown">

		<!-- forでチェックボックスに関連付ける -->

		<label id="menu-open" for="menu-input">メニュー</label>

		<span class="nav"><a href="https://benri-tools.net/">Home</a></span>

		<span class="nav"><a href="#pagetop">Top↑</a></span>

		<!-- forでチェックボックスに関連付ける -->

		<label id="menu-close" for="menu-input" class="menu-unshown"></label>

		<div id="menu-content">

			<!-- forでチェックボックスに関連付ける -->

			<label id="menu-close-x" for="menu-input" class="menu-unshown">Close</label>

 			メニューの内容

		</div>

	</div>

</nav>

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

左メニューはcssの初期化が簡単になるように、モバイルファーストとPCファーストが混在しています。
css ---------------------------------------------------

/* ↓ +++++ PCファースト +++++ */

#menu {

	z-index: 99;	/* モバイル時フッタが上に来るのを防ぐため */

	float: left;

	width: 210px;

}



@media (max-width: 767px) {

	/* スマートフォンだけ画面上部へ表示 */

	#menu {

		width: 100%;

		height: 30px;

		position: absolute;

		top: 120px;

	}

	

	/* スマートフォンだけ画面最上部までスクロール後固定 */

	/* トップメニュー固定の項目で説明します */

	#left_menu.fixed{

		position: fixed;

		top: 0;

	}

}

/* ↑ +++++ PCファースト +++++ */



/* ↓ +++++ モバイルファースト +++++ */

@media (min-width: 768px) {

	/* PC・タブレットの時は非表示 */

	.nav {

		display: none;

	}

}

/* ↑ +++++ モバイルファースト +++++ */





/* ↓ +++++ PCファースト +++++ */

.menu-unshown {

	display:none;

}



/* ⇒メニューのプロパティ */

#menu-open {

	display:none;

}



/* メニューの中身 */

#menu-content {

	padding-bottom: 20px;

}



/* Closeのプロパティ */

#menu-close-x {

	display: none;

}



@media (max-width: 767px) {

	#menu-drawer {

		position: relative;

	}



	/* ⇒メニューのプロパティ */

	#menu-open {

		display: inline-block;

		height: 22px;

		vertical-align: middle;

		cursor: pointer;

		background: url(⇒の画像へのパス);

		background-repeat: no-repeat;

		background-position: left center;

	}

	

	/* メニュー後ろのグレーカバーのプロパティ */

	#menu-close {

		display: none;

		position: fixed;

		z-index: 99;

		top: 0;

		left: 0;

		width: 100%;

		height: 100%;

		background: black;

		opacity: 0;

		transition: .3s ease-in-out;

	}

	

	/* Closeのプロパティ */

	#menu-close-x {

		display: block;

	}

	

	/* メニュー中身のプロパティ */

	#menu-content {

		/* ↓ iOSでの慣性スクロールにするため */

		overflow: scroll;

		-webkit-overflow-scrolling: touch;

		/* ↑ */

		

		position: fixed;

		top: 0;

		left: 0;

		z-index: 9999;

		width: 90%;

		max-width: 330px;

		height: 100%;

		background: #FFFFFF;

		transition: .3s ease-in-out;	/*滑らかに表示*/

		-webkit-transform: translateX(-105%);

		transform: translateX(-105%);	/*左に隠しておく*/

	}

	

	/* id=menu-inputにチェックが入ったらid=left-closeに適用するプロパティ */

	#menu-input:checked ~ #left-close {

		display: block;	/*カバーを表示*/

		opacity: .5;

	}

	

	/* id=menu-inputにチェックが入ったらid=left-contentに適用するプロパティ */

	#menu-input:checked ~ #left-content {

		-webkit-transform: translateX(0%);

		transform: translateX(0%);	/*中身を表示*/

		box-shadow: 6px 0 25px rgba(0,0,0,.15);

	}

	

	/* id=menu-inputにチェックが入ったらid=left-close-xに適用するプロパティ */

	#menu-input:checked ~ #left-close-x {

		display: block;

		opacity: .5;

	}

}

/* ↑ +++++ PCファースト +++++ */

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

PCとタブレットでは常にメニューを表示、スマートフォンでは状況に応じて切り替えをcssで書くのに時間がかかりました。
CSSだけで簡単！ハンバーガーメニューの作り方（スマホ対応）ではWordpressでの書き方が紹介されています。やっぱりWordpressだと簡単にできるようですね。
Wordpressをお使いの方はスッと適用してください。私は勉強、勉強。

時間がかかってしまいましたが、サイトのコンテンツの内容を大幅書き換え予定なので、もしかしたら、その時また形式を変えるかもしれません。左右の空いている箇所にメニューを置いて本文の幅を広げることも考えています。
内容を書き換えてみて、より読みやすいレイアウトにする予定です。

タグ：レスポンシブWebデザイン

Top↑

xhml・html

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

2019年03月19日

【ネットビジネス便利ツール】のモバイル対応の続きです。
レスポンシブ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カラムでトップメニューがある場合です。と言っても左メニューと見た目はそんなに変わりません。

タグ：レスポンシブWebデザイン

Top↑

xhml・html

レスポンシブWebデザイン 1カラムトップメニュー有り現在位置

2019年03月20日

【ネットビジネス便利ツール】のモバイル対応、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デザイン

Top↑

xhml・html

レスポンシブWebデザイン 1カラムトップメニュー有り目次

2019年03月21日

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

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

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

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のソースを読み込んでください。

タグ：レスポンシブWebデザイン

Top↑

xhml・html

レスポンシブWebデザイン画像

2019年03月22日

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

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

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

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

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

img {

	max-width: 95%;

	height: auto;

}

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

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

タグ：レスポンシブWebデザイン

Top↑

xhml・html

レスポンシブWebデザイン背景画像

2019年03月23日

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

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

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を表示しています。

タグ：レスポンシブWebデザイン

Top↑

xhml・html

レスポンシブWebデザインモーダルウィンドウ

2019年03月24日

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

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

タグ：レスポンシブWebデザイン

Top↑

xhml・html

レスポンシブWebデザインフォーム

2019年03月25日

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

フォームの入力であるテキストなどに、今までは大きさや長さを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）は魅力的です。

タグ：レスポンシブWebデザイン

Top↑

xhml・html

レスポンシブWebデザインメッセージ表示後サブミット

2019年03月26日

【ネットビジネス便利ツール】のモバイル対応、フォームでよく使う機能です。

ボタンクリックでメッセージを表示、キャンセル時は元の画面に戻り、OK時はサブミットする
ボタンクリックで前の画面に戻る、
動きをするJavaScriptについてです。

2つとも今までは、htmlにJavaScriptを書いていました。

ボタンクリックでメッセージを表示、キャンセル時は元の画面に戻り、OK時はサブミットします。
html -------------------------------------------------

<form action="xxxxx" method="post" target="_top">

 <input type="button" value="表示文字" onclick="return kakunin('表示メッセージ。改行は\n')" >

 </form>

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

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

function kakunin(msg){

	var result = false;

	result = window.confirm(msg);

	if(result == true){

		return true;

	}

	else{

		return false;

	}

}

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

これをjQueryを使ったソースに書き換えました。

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

<form action="xxxxx" method="post" id="frmID">

 <input type="button" value="クリック" id="buttonID">

</form>

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

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

$(function(){

	$('#buttonID').click(function(){

	    if(!confirm('表示メッセージ。改行は\n')){

	        /* キャンセルの時は元の画面に戻る */

	        return false;

	    }else{

	        /* OKの時はサブミット */

	        $('#frmID').submit();

	    }

	});

});

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

htmlとソースを分けるという点ではスッキリしますが、どこに何を仕込んだかわからなくなりそうです。一括検索もできないし、呼び出し側でメッセージだけ変更するのもややこしいし、元に戻した方が便利かな・・・

ボタンクリックで前の画面に戻ります。

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

<form method="post" action="" id="frmSet" name="frmSet">

	<input type="button" id="back" value="修正">

	<input type="hidden" id="mode" name="mode" value="send">

</form>

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

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

$(function(){

	$('#back').on('click', function() {

		$('#mode').val('syuusei');

		$('#frmSet').submit();

	});

});

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

ブラウザの戻るボタンと同じ動き【history.back()】ではなく、PHPで処理をするためmodeをsyuuseiに設定してサブミットしています。

タグ：レスポンシブWebデザイン

Top↑

xhml・html

レスポンシブWebデザインテーブル

2019年03月27日

【ネットビジネス便利ツール】のモバイル対応、どのようにすれば良いか一番わからなかったテーブルについてです。

各ツールのマニュアルなどで所々テーブルを書いています。
スマートフォンでどのように表示すればわかりやすいかよくわからなかったので、色々表示させてみることにしました。

【ネットビジネス便利ツール】で使っているテーブルは2パターンあります。
項目などの一覧を表示しているテーブルと項目の名前とその説明のテーブルです。
さてどういう方法がいいのでしょう。

まず試したのが幅が狭い画面では表を展開！ stacktable.jsの使い方です。わかりやすそうだと思ったのですが、実際に表示させてみると、【ネットビジネス便利ツール】のテーブルではわかりやすくはなりませんでした。
【ネットビジネス便利ツール】のテーブル殆どが2列のデータです。stacktable.jsはもっとデータ数の多いテーブルに良さそうです。

次に試したのがスマホでtableタグを見やすくするCSSのように1列に表示する方法です。
仕組みはtableレイアウトをCSSだけでレスポンシブ化する方法がわかりやすいかもしれません。

文字数が少なく、余裕がある場合はスマートフォンでも通常の表を表示します。
PC・タブレット時。

スマートフォン時。

文字が折り返されて読みにくくなる場合は1カラム化します。
PC・タブレット時は通常の表を表示します。

スマートフォン時は1カラムで縦に表示します。

cssは基本的にはモバイルファーストで書いていますが、テーブルはPCを元にして1カラム化しているのでPCファーストで書いています。

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

<table id="table1" class="responsive">

	<thead>

		<tr>

			<th class="koumoku">項目名</th>

			<th>説明</th>

		</tr>

	</thead>

  

	<tbody>

		<tr>

			<td class="background">項目1</td>

			<td>項目1の説明</td>

		</tr>

  

		<tr>

			<td class="background">項目2</td>

			<td>項目2の説明</td>

		</tr>

	</tbody>

</table>

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

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

#table1 .koumoku {

	width: 150px;

}



@media (max-width: 599px) {

	#table1 .koumoku {

		width: auto;

	}



	.responsive {

		border-collapse: separate;

		border-spacing: 0  20px;

	}

	

	.responsive thead {

		display: none;

	}

	

	.responsive td {

		border: none;

		display: block;

		width: 100%;

		box-sizing: border-box;

		border-bottom: 1px solid #dddddd;

	}

	

	.responsive td.background {

		background-color: #d9d9d9;

	}



	.responsive td:before {

		content: attr(data-title) " ";

	}

}

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

【ネットビジネス便利ツール】のテーブルは何とかなりました。販売しているツールの管理画面ではテーブルを多用しているし、複雑です。どうしたら読みやすいかな。少しずつでも改善していこう。

タグ：レスポンシブWebデザイン

Top↑

月	火	水	木	金	土	日
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30