急いでレスポンシブ化したかったツールの対応が一区切りしたので、ちょっと休憩ついでに、このブログもレスポンシブ化しました。

このブログでソースを記述するのに時々使っているpreタグが小さい画面でははみ出してしまいました。ソースの途中で改行が入ると見栄えや視認性は下がりますが、要素内で強制的に折返すことにしました。

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

pre {

	white-space: pre-wrap;

}

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

【white-space】には複数のプロパティがあります。
white-space - CSS: カスケーディングスタイルシート | MDNが実際に表示を変えてみることができてわかりやすいです。

タブをそのまま表示してくれるので使っています。縦モバイルだと折返しが入ってしまい、かえって視認性が下がるでしょうか。まあそのときは横モバイルで見てください。

preタグで囲まれた文字列内の<や>は&lt;や&gt;に置き換えなければいけないのでとてもとても便利というわけではないです。

<pre>－HTML5タグリファレンスによると、ソースを記述するときはpreタグと合わせてcodeタグも使うそうです。プログラムによる出力結果はsampタグ、ユーザー入力はkbdタグなのか。
勉強になるなぁ。＿＿φ（．．）メモメモ

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

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

【ネットビジネス便利ツール】で使っているテーブルは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) " ";

	}

}

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

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

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

ボタンクリックでメッセージを表示、キャンセル時は元の画面に戻り、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に設定してサブミットしています。

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

フォームの入力であるテキストなどに、今までは大きさや長さを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カラムでトップメニューがある場合です。と言っても左メニューと見た目はそんなに変わりません。

【ネットビジネス便利ツール】のモバイル対応の続きです。いよいよ肝のメニュー部分です。
レスポンシブ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をお使いの方はスッと適用してください。私は勉強、勉強。

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

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

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


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

【ネットビジネス便利ツール】のモバイル対応、二番目に簡単そうな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リンクも表示してみました。



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

【ネットビジネス便利ツール】のモバイル対応、一番単純な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
になります。

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

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カラム、メニューなしページのまとめです。

いくらなんでもそろそろサイトをモバイル対応にしないといけないと思いやり始めました。
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つのページは完成しました。
ああ、心地よく疲れました。

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

以前にも利用していたことがあるのですが、各ブラウザでの見え方を表示してくれるサイトを再調査してみました。
2つのサイトが浮かび上がってきました。

Browsershots
Adobe BrowserLab
です。

Browsershotsを試しに使ってみました。
どうやら1日にチェックできる上限があるようです。それ以上はユーザー登録が必要なようです（英語オンリーなので、断言できない自分が悲しい・・・）。
チェックできるブラウザの種類が膨大です。本当に必要なもだけチェックすることをお勧めします。でないと時間もかかるし、簡単に上限を超えます。自分が使用していないOSのブラウザだけで十分でしょう。

チェックしたいURLを入力すると、画像を作成してくれます。

いやぁ、便利なサイトを作ってくれる方が世の中にはいらっしゃるんですね。感謝、感謝。

実は、今使っているOSがWindowsXPなので、そろそろWindows7（Windows8ではないんだな）にアップしたいと考えています。
MacOSの上にWindowsが載せられると聞いたので、Macの購入も考えていました。
でも、見え方のチェックのためだけにわざわざMacっていうのもねぇ。高くつくし。
高い分だけの価値があるかどうかってことです。
チェックするのは、始めとスタイルを変更したときだけです。おそらくチェックするのは数回だけです。プラス3万円（おそらくそれ以上高くなるでしょう）かかるとして・・・馬鹿馬鹿しいです。

私には、Browsershotsで十分過ぎます。
Mac購入は見送りです。

Another HTML-lint gatewayでhtmlの文法チェックをやっていて、URLにクエリがある場合の書き方について気が付きました。
ブラウザに表示する場合、クエリ中の【&】は【&amp;】と書かなければいけないそうです。
実体参照について


【<】や【>】は【&lt;】や【&gt;】と書くことは知っていましたが、URL部分には特別に実体参照を用いなくても良いのだと思ってました。
ああ、とんだ勘違い。まぁ大抵のブラウザで動くから、実際にはあまり問題にはならないのですが。間違っていても、動くように書いてくださっているのでしょう。

ツールやサイトを少しずつ直すことにします。

フォーム中のテキストやテキストエリアに【&amp;】と表示したい場合は、【&amp;amp;】と書きます。これちょっとはまってしまいました。


また、URL中に【[】や【]】を使っていたのもひっかかりました。
使えない文字
【%5B】や【%5D】と書かなければいけなかったようです。

以前会社でPHPのコーディングしていたとき、ちゃんと書いている人、いなかったような・・・

IEというより、マイクロソフトの製品ってよく使うけど迷惑を被ることも多い製品です。

Webページを作っていただいて、それをxml化したら、表示が崩れました。

ちょっと前にIEのバージョンを6から7へ上げたら、ページのレイアウトが崩れました。
IEのバージョンによってcssの解釈が違うのです。

デザイナーさんからあがってきたページの先頭に
<?xml version="1.0" encoding="euc-jp"?>
というxmlの宣言文を追加しただけで、IE6でのレイアウトが崩れました。
なんでxmlで？？
ほかのブラウザでは全く問題ないので、IEの問題。
やっぱりわからん。MicroSoftは。

調べると、IE6はcss関係のバグだらけだそうです。
全く困った会社です。

もっと性質が悪いのは、複数のバージョンを1つのPCにインストールできないこと。

ああ、最悪なソフト。


で、なにか手はないか探していたら、複数のIEのバージョンでの表示のされ方を見られるソフトを発見。
IETester

英語圏のソフトですが、【IETester】で検索したら、インストール方法とか、使い方とか、日本語で出てくるはずです。

ビジネスサイトのリニューアルをしています。

タイトルやヘッダにちょっとしたアクセントをおきたいので、商用OK、加工OKの素材を探してみました。

できるだけ安く上げたいので、まずはフリーの素材を探します。もしいいのがなければ、有料の素材を探すことにします。


ありました！ サイトの雰囲気に合う素材を使わせてもらってます。
0円のweb素材屋さん
招テン
Design Warehouse
デザイン素材.com
ホームページ素材@ImageLife
News&Days
blue-green

おかげで、ネットビジネス便利ツールが少しスタイリッシュになりました。
といっても、デザインはアマチュアの私が作っているので、プロにはかないませんが。


さて、次はセールスページだ。内容も書き換えるので、気合と時間がかかるけど頑張ろう！

早朝にサイトを止めて、リニューアルしました。3時間はかからないだろうと予想し、4時から7時まで止めるアナウンスをしていたのですが、実際には7時半くらいまでかかってしまいました。
ネットビジネス便利ツール


朝の4時から作業をしたので、眠かったです。

睡魔との闘いです。眠いとミスもおきやすいので、注意しながら、気持ちを落ち着けて、ゆっくり作業しました。



サイトを止めていたので、気持ちには余裕ができ、焦らず作業できました。


一応リニューアル完成です。まだ修正は少しずつやっています。


内部リニューアルが終わったら、見た目と文章のリニューアルをする予定です。

PHPで作っているネットビジネス便利ツールですが、少しずつ裏でソースを修正していました。


今日というか、明日の早朝、入れ替えようと思います。サイトを何時間が止めて一気に入れ替えるつもりです。とは言っても、見た目は全く変わりません。


表と裏のソースがごっそり入れ替わります。テストもしないといけないので、安心してできるようにサイトを止めるのです。


変わるのは、ステップメールの部分です。貧乏なので（笑）買わずに、自分で作っています。ここを、もっと簡潔に、使いやすく変更しました。

テストサイトでは動いていますが、本サイトに適用して、きちんと動くよう設定します。


自動実行cronの設定などやることは山のようにあります。


どきどきしますね。

今日から本当に派遣先から無罪放免です。さて、新しい世界に踏み出しましょう。ちょうど4月だし。

手始めに（？）、サイトの画像と配色を月ごとに自動で変更するソースを作ってみました。
できることから コツコツと


月ごとの画像を用意します。
top01.jpg
top02.jpg
　・
　・
　・


月ごとに配色と配置も変わるので、それぞれのスタイルシートを用意します。共通の部分はstyle.cssに残し、月ごとに変わる部分をそれぞれのスタイルシートに移します。
style01.css
style02.css
　・
　・
　・


このスタイルシートに、配色と配置、表示する画像を設定します。


アクセスがあったとき表示するファイル（例えばindex.phpなど）では、月を読み取り適用するスタイルシートを決めます。
1月ならstyle.cssとstyle01.css、2月ならstyle.cssとstyle02.css ・・・ です。


スタイルシートは複数設定できます。htmlのヘッダに、
<link href="style/style.css" type="text/css" rel="stylesheet" />
<link href="style/style01.css" type="text/css" rel="stylesheet" />
とします。

あるいは、
style-all.css ファイルには、
@import url(style/style.css);
@import url(style/style01.css);
のように、設定するスタイルシートを列挙し、
本体のhtmlのヘッダには、style-all.cssを設定します。
<link href="style-all.css" type="text/css" rel="stylesheet" />


これで月ごとに別々の画像とスタイルを表示できます。

いいエディタはないかとネットを探した結果、2つのエディタにいきつきました。

ez-HTML
TTT Editor

です。試用してみることにしました。

あくまでも自分が使う場合の観点で次のことをチェックしました。
・タグは小文字指定ができるか
・タグを登録できるか
・タグの色分けはできるか
・複数のファイルが編集できるか
・ファイルをツリー構造にできるか（できればプロジェクトがつくれれば・・・）
・文字コードの種類
・属性の各順番が指定できるか

-------------------------------------------------------------------------------------------------
チェック項目　　　　　　　　　　　　　TTTEditor　　　　　　　　　　　ez-HTML
=================================================================
タグ小文字　　　　　　　　　　　　　　　○　　　　　　　　　　　　　　　　○
-------------------------------------------------------------------------------------------------
タグ登録　　　　　　　　　　　　　　　　○　　　　　　　　　　　　　　見つからず
-------------------------------------------------------------------------------------------------
タグ色分け　　　　　　　　　　　　　　　○　　　　　　　　　　　　　　　　○
-------------------------------------------------------------------------------------------------
複数ファイル編集　　　　　　　　　　　　○　　　　　　　　　　　　　　　　○
-------------------------------------------------------------------------------------------------
ツリー構造　　　　　　　　　　　　　　　○　　　　　　　　　　　　　　　　○
-------------------------------------------------------------------------------------------------
文字コード　　　　　　　　　　　　S-JIS JIS EUC　　　　　S-JIS JIS EUC Unicode
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 UTF-8 UTF-8N
-------------------------------------------------------------------------------------------------
属性位置　　　　　　　　　　　　　見つからず　　　　　　　　　　　imgタグ○
-------------------------------------------------------------------------------------------------
でした。


全くの私見ですが、
　TTTEditor
　　初心者、あるいは逆によくわかっている上級者がタグ挿入を補助的に使うのに適している。
　ez-HTML
　　とにかく高機能なので、初心者は迷うかも。


自分が使うときのみを考えて、気になった点は、
　TTTEditor
　　属性の出力順が指定できないので、少し不便（imgタグの順番を指定したい）。
　　ファイルのツリー構造が少々使いにくい。
　ez-HTML
　　タグを登録できそうにないのですが、どうやらhtml・xhml仕様に完全対応しているらしい。
　　文法チェックが走るので、間違った文法で警告がでる。あえてそのような編集をしているときは邪魔になる。（切ることもできるのですが、宣言部分のないファイルでは切れない）


ほぅ！と思った点は、
　ez-HTML
　　xhmlにも対応している。

いずれにしても、どちらも使いやすそうです。後は、用途、好みでしょう。

どちらのソフトもレジストリを汚さないので、気軽に試用できます。

htmlからxhtmlへの変更は、タグをきちんと書いていれば、思っていたより簡単です。タグを直していたら、自然とxhtmlへ対応できるようになったので、この機に変更します。

htmlとxhtmlの大きな違いは、
・もちろん宣言部分が違います
<?xml version="1.0" encoding="文字コード"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

・エレメントのないタグ（<タグ> 内容 </タグ>　の【内容 </タグ>】ないタグ。例えば、metaとかimg）の終了は、【半角スペース＋/>】とする

・タグ、属性は宣言以外小文字で書く
etc・・・

です。HTML Made Easyが参考になります。

使っていたhtmlエディタが、大文字でタグを入れるので、この変更が大変でした。どこを見ても、小文字に設定するところがないので、今後はエディタを変更しようと思ってます。いいエディタが見つかったらこのブログに書き込みます。

タグの変更が終わったら、テストサイトにULして、文法チェッカーでチェックします。
Another HTML-lint gateway

文法に間違いがなくなるまで変更していきます。

これでxhtmlへの変更が終わりました。もう少しテストサイトで動かしてから本番へULです。

GWを利用して（？）ネットビジネス便利ツールの再構築をしています。最低限のSEO、タグチェックはしていますが、もう少しちゃんと書き直しています。

購読しているメルマガでちょうどSEO対策に強いプロのホームページ制作ツール「賢威2.0」が紹介されていました。GW中のみサンプルがダウンロードできます。改めてへぇと思うことが書かれています。お薦めです。サンプルをDLしたら、製品が欲しくなってしまうかもしれません。


いずれはxhmlへ変更するつもりですが、そのときなるべくスムーズに移行できるタグの書き方もわかりました。

いままで、インターネットからDLしたテンプレートを使用していたのですが、hタグの使い方を少し変えたいと思っていました。今回変更しようと思います。

そして、なによりコンテンツの充実を考えなくてはいけませんね。