Category: HTML5

別ウィンドウでブラウザを開閉するaタグ・JSの書き方

アプリケーションで一部の機能を別ウィンドウで表示させ、ウィンドウを閉じるリンクも設置させたい時

### 別ウィンドウのリンク
– aタグに直接window.openとして書きます。ここではwidth500 height400のウィンドウです。

<a href="./translate.html" onclick="window.open('./translate.html', '', 'width=500,height=400'); return false;">翻訳</a>

### ウィンドウを閉じる
– window.closeで閉じます。

<a class="nav-link btn-magnify" href="" id="close">ブラウザを閉じる</a>

// 省略

<script>
    let close = document.getElementById('close');
    close.addEventListener('click', ()=>{
      window.close();
    });
  </script>

中々良い感じです。

radioボタンの選択状況によってHTMLの表示を変えたい

### radioボタンの選択状況の取得

<form method="" action="">
		<label for="en"><input type="radio" id="en" name="lang" value="1" checked>英語</label>
		<label for="cn"><input type="radio" id="cn" name="lang" value="2">中国語(簡体字)</label>
	</form>
	<script>
		window.addEventListener('DOMContentLoaded', function(){
			var inputs = document.querySelectorAll("input[name=lang]");
			for(var element of inputs){
				element.addEventListener('change', function(){
					if(this.checked){
						console.log(this.value);
					}
				});
			}
		})
	</script>

値を取得できているのがわかります。

表示自体を変えるには display noneとdisplay blockを切り分けます。

	<label>
	  <input class="js-check" type="radio" name="lang" value="1" onclick="formSwitch()" checked>英語
	</label>
	<label>
	  <input class="js-check" type="radio" name="lang" value="2" onclick="formSwitch()">中国語(簡体字)
	</label>
	<br><br>
	<span id="en">Name</span>
	<span id="cn">产品名称</span>


	<script>
		var en = document.getElementById('en');
		var cn = document.getElementById('cn');
		cn.style.display = "none";

	    function formSwitch() {
	        check = document.getElementsByClassName('js-check')
	        if (check[0].checked) {
	            cn.style.display = "none";
	            en.style.display = "block";
	        } else if (check[1].checked) {
	            en.style.display = "none";
	            cn.style.display = "block";
	        } 
	    }
	    window.addEventListener('load', formSwitch());
	</script>

うん、これでOKかな。

海外住所入力フォームのHTMLレイアウトデザイン

通常は、
「郵便番号」「住所1」「住所2」と書いている

これがebayだと「Contry」「Address」「Additional Information」「City」「State/Province」「Region」「Postal Code」の順になる

同じ様に作りたい。

World postal code というサイトで調べられるのね。
https://worldpostalcode.com/

postal code入れたらcityを自動入力できるjavascriptのライブラリとかないのかね
と思ったら、幾つかありそう

国を選択するselect boxを作る

国のselect boxを作りたい。

値については、ebayの登録画面を参考にする。
https://reg.ebay.com/reg/Upgrade?ru=https%3A%2F%2Fwww.ebay.com%2Fmys%2Fhome%3Fsource%3DGBH

ebayのselect boxのhtmlを見てみると、select boxのoption valueのところは数字で管理しているので、真似たい。

<select name="countryId" id="countryId"
				class="wide wide fld"
				aria-label="Country / Region "
				a="1" v="1" placeholder="Country / Region ">
<option value="1"
						>United States</option><option value="225"
						>APO/FPO/DPO</option><option value="2"
						>Canada</option><option value="3"
						>United Kingdom</option>
// 省略

mediacollegeというサイトで、select menuのsampleがあります。

<select class="form-control col-md-4" id="client_country" name="client_country">
                        <option value="">Country...</option>
                        <option value="AF">Afghanistan</option>
                        <option value="AL">Albania</option>
                        <option value="DZ">Algeria</option>
                        <option value="AS">American Samoa</option>
                        <option value="AD">Andorra</option>
                        <option value="AG">Angola</option>
                        <option value="AI">Anguilla</option>
                        <option value="AG">Antigua &amp; Barbuda</option>
                        //省略
                      </select>

ほう、思ってたより良い感じです^^

[position:relative;] footer下固定

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="layout.css">
	<title>Document</title>
</head>
<body>
<header>
	<h1 class="headline">
		<a href="">Sample</a>
	</h1>
	<ul class="nav-list">
		<li class="nav-list-item"><a href="">Home</a></li>
		<li class="nav-list-item"><a href="">About</a></li>
		<li class="nav-list-item"><a href="">Topic</a></li>
	</ul>
</header>
	<footer>
		<ul class="footer-menu">
			<li>home |</li>
			<li>about |</li>
			<li>service |</li>
			<li>Contact Us</li>
		</ul>
		<p>&copy; All rights reserved by Sample</p>
	</footer>
</body>
</html>

* {
	margin:0; padding:0;
}
header {
	height: 100px;
	width: 100%;
	padding: 15px 0;
	background-color: #337079;
	color: white;
}
header .headline {
	line-height: 100px;
	float: left;
	font-size: 30px;
	margin-left: 100px;
}
.nav-list {
	line-height: 100px;
	float: left;
	margin-left: 30px;
	list-style:none;
}
.nav-list-item {
	list-style: none;
	display: inline-block;
	margin: 0 20px;
}
footer {
	width: 100%;
	height: 100px;
	background-color: #cab64a;
	color: #fff;
	text-align: center;
}
ul.footer-menu li {
	display: inline;
}


.wrapper {
	min-height: 100vh;
	position:relative;
	padding-bottom: 120px;
	box-sizing: border-box;
}

footer {
	width: 100%;
	height: 100px;
	background-color: #cab64a;
	color: #fff;
	text-align: center;
	position: absolute;
	bottom:0;
}

意外とするできる。

_notesとdwsync.xml

_notesとdwsync.xmlは?
-> Dreamweaverがファイル同士の同期情報を管理する為のファイル
-> ファイルとGET/PUTするときに双方のタイムスタンプを見比べて、上書きの警告・チェックをする役割を持つ

確かにdwsync.xmlの中身を見ると、数字が入ってますね。ただ、Unixタイムスタンプとは別の値の様です。

local="*" remote="*"

なるほど、面倒だけど、一つ一つ調べるべきだな。

[JavaScript] Lazy Loadで画像読み込みを高速化させる

	<div class="container">
		<img data-src="img/img1.jpg" class="lazyload"><br><br>
		<img data-src="img/img2.jpg" class="lazyload"><br><br>
		<img data-src="img/img3.jpg" class="lazyload"><br><br>

	</div>
	<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>
	<script>
    lazyload();
</script>

画像のソースをsrcではなく、data-srcと書く。

なるほど、勉強になります。

[HTML] OGPとapple-touch-icon

ogpタグの設定

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<meta property="og:title" content="">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:image" content="">
<meta property="og:site_name" content="">
<meta property="og:description" content="" />
<meta property="og:url" content="[url]">
<meta property="og:phone_number" content="[telnum]" />
<meta property="og:locality" content="" />

TOPページの場合は「website」、WEBサイト上の記事ページなど、TOPページ以外には「article」を指定
og:imageはシェアされたい写真

apple-touch-iconは、iphone, ipadに追加されたときに表示されるアイコン