有限会社電子環境技術研究所/Computer's Optimum ZestY HOUSE/コージーハウス

中小企業のネットワーク トータルシステムソリューションを目指して


スタイルシート(css)はJavaScript(JS)をここで使用しているものをご紹介します。
誰が作成しても同じパターンになるパターン(定型)もありますが、思いつきで作成したものもあります。
記述や流れの美しさに欠けていると思っているものも、多々存在しています。

◆JS編◆

01.faviconの付け方

《表示例》 このサイトのURLの左横にあるマーク

「URLの左横にあるマークを付けたいけど、あれは何と呼ぶの?」と時々訪ねられます。favicon(ファビコン)と呼ばれているものです。
favicon(ファビコン)は、サイトのシンボルマークとかシンボルイメージのことで、英語のfavorite icon(フェイバリット・アイコン:お気に入りアイコン)という言葉からつくられた造語です。

媒体によって使われるiconの大きさは異なります。
16px × 16px:IEのタブ
24px × 24px:IE9の「ピン留め機能」
32px × 32px:Chrome、Firefox、Safariなどのタブ
48px × 48px:Windowsのサイトアイコン
64px × 64px:高解像度のWindowsサイトアイコン
114px×114px:(57×57)iPhoneやiPod touch
144px×144px:(72×72)iPad
※カッコ書きはRetina非対応の旧サイズの場合

いろいろなサイズをつくる必要はなく、媒体により自動的に拡大縮小されるので、 大きなサイズで作っておけばいいのではないかと思います。ということで、上記から一番大きなサイズが144×144の正方形で作っておけば問題ないのではないでしょうか。

普通の画像作成ソフトでも作成出来るものもありますが、アイコンなので拡張子はico。アイコンが作成出来るソフトを使います。無料でfavicon作成をしてくれるサイトもあるようです。
《JS側》
 
/***********************************
 ** faviconの付け方
 **********************************/
//IE用としてjsも書いておくと安心です。
//HEADエリアに記述します。

 


 
ウェブクリップアイコンの記述には「光沢あり」と「光沢なし」により記述が異なるようです。
 
光沢あり


光沢なし

 

ページごとに異なるfaviconを表示させることも可能のようです。
<LINK>タグを記述する時に、ファイル名を変更するだけです。
例えば
favi01.ico
favi02.ico
のように、iconを作成しておき、
 
 
としておくことで、サイトにアクセスすると指定したfaviconが表示されるようになります。


02.PDFの特定ページにジャンプするようにリンクさせるには

《表示例》 [特になし]
JSでも無くて・・・
《HTML》
//HTMLのリンク先をPDFファイルの特定のページに設定するには、リンクのURLの末尾に
//#page=<ページ番号>
//と記述するだけです。
//例えば、myfile.pdfの10ページ目にいくようにリンクを設定すると以下のようになります。

 http://www.ドメイン名/myfile.pdf#page=10
 


03.target="_blank"で開いたhtmlをcloseするボタンや文字リンク(1)

《表示例》
外部にjsファイルを置く場合。(個人的にはこの方法が一番楽だと思っています。)
注意:
FireFoxでも使えるタイプですが、そもそも、Firefoxのポリシーでは、「スクリプトによって開いたウインドウ以外はスクリプトで閉じれない」 ということだそうです。
普通に開いた画面なら効かない/ 「target=_blank」で開かれたページなら有効になる/ 「onClick=”window.open(‘ページのURL’)」で開かれたページなら有効になる
ということらしいと理解していますが、大分前の理解なので、今は違うかもしれません。
《JS側》
 
/***********************************
 ** 外部にcloseさせるjsを置いておく
 **********************************/
// close.js などのわかりやすいファイル名で以下を保存

function close_win(){ 
	var nvua = navigator.userAgent; 
		if(nvua.indexOf('MSIE') >= 0){ 
			if(nvua.indexOf('MSIE 5.0') == -1) { 
				top.opener = ''; 
			} 
		} 
		else if(nvua.indexOf('Gecko') >= 0){ 
			top.name = 'CLOSE_WINDOW'; 
			wid = window.open('','CLOSE_WINDOW'); 
		} 
	top.close(); 
} 
  
《HTML》headエリアに



04.target="_blank"で開いたhtmlをcloseするボタンや文字リンク(2)

《表示例》
普通にJavaボタンを書く
注意:
FireFoxでも使えるタイプですが、そもそも、Firefoxのポリシーでは、「スクリプトによって開いたウインドウ以外はスクリプトで閉じれない」 ということだそうです。
普通に開いた画面なら効かない/ 「target=_blank」で開かれたページなら有効になる/ 「onClick=”window.open(‘ページのURL’)」で開かれたページなら有効になる
ということらしいと理解していますが、大分前の理解なので、今は違うかもしれません。
《HTML》bodyエリアに
//Firefoxのボタンの場合

//普通の場合は


//文字リンクの場合(2種類)
閉じる
閉じる
//これも文字リンク
閉じる
閉じる
 


05.target="_blank"で開いたhtmlをcloseするボタンや文字リンク(3)

《表示例》[特になし]
《HTML》bodyエリアに以下の記述でもcloseします。(3パターン)


JavaScript:WinClose()
JavaScript:close()
 


06.New!とかUp!を表示させる−HTMLやCGIにも使える

《表示例》
ホームページを更新しました。
2017年7月13日から2017年8月31日までの間newと表示させるようにしています。
《JS側》
 
/***********************************
 ** New!とかUp!を表示させる
 **********************************/
// の間に以下を記述
// CGIで使用する場合には、kikan=$kikan、y = $year、m = $mon、d = $day
// のように変数にすると扱いやすくなります。

 

《HTML》
テキスト
テキスト


07.inputの中身をクリアするためのJS

《表示例》 チェックしてからリセットボタンをクリックしてみてください。
radioボタンはデフォルトでcheckedされており、selectは「なし」がselectedされています。
専用カバー:4600円 金:4000円

《JS側》
 
/***********************************
 ** inputの中をクリアする
 **********************************/
// キャンセルとかクリアとかリセットとかのボタンです。
// この書き方は意外と何にでも利用できます。
// textAreaやradioボタン、checkboxなどinputする項目をクリアできるため使い勝手がいいと思っています。


  
《HTML》

 


08.テキストエリアを選択してコピーするボタン

《表示例》
選択(Select)&コピー(Copy)]1

選択(Select)&コピー(Copy)]2
《JS側》
 
/***********************************
 ** テキストエリアの文字をSelect&Copy
 **********************************/
//「クラス名」の箇所には自分で好きな クラス名をつけます。


  
《CSS》
//文字ボタンの背景を色づけするだけなので無くてもOK

.クラス名{
background-color:yellow;
font-weight:bold;
}
 
《HTML》
選択(Select)&コピー(Copy)]
複数のフォームでテキストエリアを選択&コピーさせたい場合は
選択(Select)&コピー(Copy)]1
選択(Select)&コピー(Copy)]2
 


CopyRight:All right reserved by 有限会社電子環境技術研究所 | 個人情報保護方針
〒151-0071 東京都渋谷区本町1−3−5協和初台ビル3階 TEL:03-3375-0070 FAX:03-3375-0071

このサイトは有限会社電子環境技術研究所(以下当社)により作成、 更新されています。当社以外の外部サイトへのリンクは、その内容を支持あるいは保証するわけではありません。当社関係者の文書・スピーチ等が、外部サイトで掲載されていたとしても当社の公式文書ではありません。
情報は予告無く更新・変更・追加・削除されるものであり、内容によっては公開に遅延が発生する場合があります。手続きに関する内容は、必ず事前にご確認下さいますようお願い申し上げます。