CRUDの理解にはindex, create, update(edit), deleteは必須ということで、bootstrapで汎用で使えるようにフロントを作っておいてgithubに上げておく。
さー、SpringBootやるぞー
って、データテーブルも必要だな。
ソフトウェアエンジニアの技術ブログ:Software engineer tech blog
随机应变 ABC: Always Be Coding
CRUDの理解にはindex, create, update(edit), deleteは必須ということで、bootstrapで汎用で使えるようにフロントを作っておいてgithubに上げておく。
さー、SpringBootやるぞー
って、データテーブルも必要だな。
<!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>© 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は?
-> Dreamweaverがファイル同士の同期情報を管理する為のファイル
-> ファイルとGET/PUTするときに双方のタイムスタンプを見比べて、上書きの警告・チェックをする役割を持つ
確かにdwsync.xmlの中身を見ると、数字が入ってますね。ただ、Unixタイムスタンプとは別の値の様です。
local="*" remote="*"
なるほど、面倒だけど、一つ一つ調べるべきだな。
<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と書く。
なるほど、勉強になります。
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に追加されたときに表示されるアイコン
onpaste=”return false”とする。
E-mail:
[/php]
うlおおおおおおおお 確かにコピペが出来ない。すげええええええええええ
半角文字、機種依存文字、記号のHTML表示
<p>アイウエオ、カキクケコ</p><br> <p>①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳:㍉㍍㌔㌘㌧㌦㍑㌫㌢:㍻㍼㍽㍾:ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩ</p><br> <p>〃 仝 ゝ ゞ 々 〆 ヾ ― ‐ / 〇 ヽ _  ̄ ¨ ` ´ ゜ ゛ \ § ^ ≫ ¬ ⇒ ⇔ ∀ ∃ ∠ ⊥ ⌒ ∂ ∇ ≡ ∨ ≪ † √ ∽ ∝ ∵ ∫ ∬ Å ‰ ♯ ♭ ♪ ‡ ~ ′ ≒ × ∥ ∧ | … ± ÷ ≠ ≦ ≧ ∞ ∴ ♂ ♀ ∪ ‥ ° ⊃ ⊂ ⊇ ∩ ⊆ ∋ ∈ 〓 〒 ※ ″</p><br>
表示される
続いて、mysqlでテストする
コーディングに必要なこと
– 画像のスライス(書き出し方法)
– 要素の幅・高さを取得する
– 要素間の余白を取得する
– フォント情報の取得
デザインデータから情報を取得してコーディングする。
言うが易しって感じもするが。。
PSD -> HTMLにする為の具体的な作業内容
ここが超絶重要なポイント、丁寧に深く理解する必要がある。
1. スケッチ(どのようなWebサイトを作っていくか)
2. ワイヤーフレーム(何ピクセルで作るかなど)
3. デザイン(色のパレットを決める、配色・配置)
4. 切り出し・書き出し・引き継ぎ
L ロゴ、メニューなどを切り出す作業をスライスという
L 各要素を適切なファイルサイズで書き出す
L 書き出したファイルを整理整頓する
なるほど、デザインしたものをスライスして書き出してる訳ね。
バナー作成の場合は基本的にデザインだけだが、Webページのデザインの場合はスライス・書き出しの作業があるから全然違うな。
OK、工程をちゃんと理解した。レイヤーをどう使ってるかなどは理解する必要があるな。
まず普通に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
なるほど、良さそうやな。