HTML5 – ソフトウェアエンジニアの技術ブログ：Software engineer tech blog

[npm + webpack] フレームワークCRUD学習用front

CRUDの理解にはindex, create, update(edit), deleteは必須ということで、bootstrapで汎用で使えるようにフロントを作っておいてgithubに上げておく。

さー、SpringBootやるぞー
って、データテーブルも必要だな。

[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に追加されたときに表示されるアイコン

[HTML] 入力フォームでコピペ不可に制御する方法

onpaste=”return false”とする。

E-mail:

[/php]

うlおおおおおおおお　確かにコピペが出来ない。すげええええええええええ

機種依存文字のHTMLの表示

半角文字、機種依存文字、記号のHTML表示

<p>ｱｲｳｴｵ、ｶｷｸｹｺ</p><br>
		<p>①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳：㍉㍍㌔㌘㌧㌦㍑㌫㌢：㍻㍼㍽㍾：ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩ</p><br>
		<p>〃 仝 ゝ ゞ 々 〆 ヾ ― ‐ ／ 〇 ヽ ＿ ￣ ¨ ｀ ´ ゜ ゛ ＼ § ＾ ≫ ￢ ⇒ ⇔ ∀ ∃ ∠ ⊥ ⌒ ∂ ∇ ≡ ∨ ≪ † √ ∽ ∝ ∵ ∫ ∬ Å ‰ ♯ ♭ ♪ ‡ ～ ′ ≒ × ∥ ∧ ｜ … ± ÷ ≠ ≦ ≧ ∞ ∴ ♂ ♀ ∪ ‥ ° ⊃ ⊂ ⊇ ∩ ⊆ ∋ ∈ 〓 〒 ※ ″</p><br>

表示される
続いて、mysqlでテストする

PSD・AIからHTMLへの書き出し

コーディングに必要なこと

– 画像のスライス（書き出し方法）
– 要素の幅・高さを取得する
– 要素間の余白を取得する
– フォント情報の取得

デザインデータから情報を取得してコーディングする。
言うが易しって感じもするが。。

PSDファイルからHTMLにする流れ

PSD -> HTMLにする為の具体的な作業内容
ここが超絶重要なポイント、丁寧に深く理解する必要がある。

1. スケッチ(どのようなWebサイトを作っていくか)
2. ワイヤーフレーム(何ピクセルで作るかなど)
3. デザイン(色のパレットを決める、配色・配置)
4. 切り出し・書き出し・引き継ぎ
L ロゴ、メニューなどを切り出す作業をスライスという
L 各要素を適切なファイルサイズで書き出す
L 書き出したファイルを整理整頓する

なるほど、デザインしたものをスライスして書き出してる訳ね。
バナー作成の場合は基本的にデザインだけだが、Webページのデザインの場合はスライス・書き出しの作業があるから全然違うな。
OK、工程をちゃんと理解した。レイヤーをどう使ってるかなどは理解する必要があるな。

HTML5のemailのバリデーションとは？

まず普通にemailのバリデーションを考える。

/^[a-zA-Z0-9_.+-]+[@][a-zA-Z0-9.-]+$/

これで試す。

$email = ["test@yahoo.com","あああ@gmail.com","12345"];
foreach($email as $data){
	if(preg_match("/^[a-zA-Z0-9_.+-]+[@][a-zA-Z0-9.-]+$/", $data)){
		echo $data . " is ok<br>";
	} else {
		echo $data . " is not email<br>";
	}
}

HTML5のemail属性はどうなってるのか？
Mozilla.org: Email
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/email

username@domain または username@domain.tld

なるほど、良さそうやな。