Category: HTML5

foreignObject

SVG elements make it possible to include external XML namespaces with graphic content rendered by different user agents. External graphic content included is subject to SVG conversion and composition.

<svg width="400px" height="300px" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
	<desc>The svg tag can write code and draw an image. Compared with bitmap data such as JPEG and PNG, even if it is enlarged, it can be displayed in a beautiful state without blurring.</desc>
	<switch>
		<foreignObject width="100" height="50" requiredExtensions="http://www.w3.org/1999/xhtml">
		<body xmlns="http://www.w3.org/1999/xhtml">
			<p>Here is a paragraph that requires word wrap</p>
		</body>
	</foreignObject>

	<text font-size="10" font-family="Verdana">
		<tspan x="10" y="10">Here is a paragraph that</tspan>
		<tspan x="10" y="20">requires word wrap.</tspan>
	</text>
</switch>
</svg>


<svg width="960px" height="1280px" viewBox="0 0 960 1280" xmlns="http://www.w3.org/2000/svg">
	<style>
	h1 {
		color:red;
	}
	</style>
	<g>
		<foreignObject x="0" y="0" width="100%" height="100%" requiredExtensions="http://www.w3.org/1999/xhtml">
		<body xmlns="http://www.w3.org/1999/xhtml">
			<p>Hello, world!</p>
		</body>
	</foreignObject>
</g>
</svg>

ん？　どういこと？

font face=””でフォントを指定する

とりあえず、明朝、ゴシックで比較

<p>通常フォント</p>
<p><font face="ＭＳ Ｐ明朝">通常フォント</font></p>
<p><font face="ＭＳ Ｐゴシック">通常フォント</font></p>
<p><font face="Impact">font test</font></p>

全然違いますね～

しかし、これデザイナーの領域だな。。。

＞重要なのは、可読性、視認性、判読性を意識しながらの「TPOに合わせたフォント選び」
なるほど、テイストによって分けるのは理解できる。。
まず、どんな文字があるのか知らないといけない。。

パスワード 入力値の確認　その2

<!DOCTYPE html>
<meta charset="utf-8">
<style>
#errorMessage {
	color: red;
}
</style>
<form>
<div id="errorMessage"></div>

<label for="name">お名前:</label>
<input name="name" id="name" required><br>
<label for="password">パスワード:</label>
<input type="password" name="password" id="password" required><br>
<label for="passwordConfirm">パスワード(確認):</label>
<input type="password" name="confirm" id="confirm" oninput="CheckPassword(this)"><br>
<input type="submit" value="送信">
</form>
<script>
		function CheckPassword(confirm){
			var input1 = password.value;
			var input2 = confirm.value;

			if (input1 != input2){
				confirm.setCustomValidity("入力値が一致しません");
			} else{
				confirm.setCustomValidity('');
			}
		}
</script>

うまくいきました。

oninput=””か、なるほど。

パスワード 入力値の確認

<!DOCTYPE html>
<meta charset="utf-8">
<style>
#errorMessage {
	color: red;
}
</style>
<form>
<div id="errorMessage"></div>

<label for="name">お名前:</label>
<input name="name" id="name" required><br>
<label for="password">パスワード:</label>
<input type="password" name="password" id="password" required><br>
<label for="passwordConfirm">パスワード(確認):</label>
<input type="password" name="passwordConfirm" id="passwordConfirm" required><br>
<input type="submit" value="送信">
</form>
<script>
var form = document.forms[0];
form.onsubmit = function(){
	form.password.setCustomValidity("");

	if(form.password.value != form.passwordConfirm.value){
		form.password.setCustomValidity("パスワードと確認用パスワードが一致しません")
	}
}
form.addEventListener("invalid", function(){
	document.getElementById("errorMessage").innerHTML = "入力値にエラーがあります";
}, false);
</script>

あれ？　あれ？
うまくいきませんね。。

「確認」「クリア」「戻る」ボタン

I want to display the “confirmation”, “clear” and “return” buttons within HTML form.
Here is User Interface.

confirm: type=”submit”
clear: type=”reset”
return: type=”button” onclick=”history.back()”

<center>
		<button type="submit">確認</button>　<button type="reset">クリア</button>　<button type="button" onclick="history.back()">戻る</button>
	</center>

It’s easy than expected.

HDML??

Markup language for creating content for mobile information terminal. It is used in EZweb which can be used with au’s mobile phone. One page is handled as “card” and a group of multiple cards is called “deck”. Data is transmitted and received on a deck basis. It is not compatible with Compact HTML which is a description language for the same portable information terminal.

半角スペースの自動削除

<!DOCTYPE html>
<html lang="ja">
<head>
	 <meta charset="UTF-8">
	 <title>space</title>
</head>
<body>
	<div> 前後に半角スペース </div>
	<p> pタグ前後に半角スペース </p>
	<table>
		<tr>
			<td> 前後に半角スペース </td>
		</tr>
		<tr>
			<td> 前後に半角スペース </td>
		</tr>
	</table>
</body>
</html>

ん？ 文頭の半角スペースは消えるが文末の半角スペースは残ってる？
なに？　期待値とちょっと違うな。。

テンプレートにコメントを挿入しよう

コードの中にコメントを挿入していきます。

<!-- 共通フッター -->
  	<footer>
  		hpscript
  	</footer>
    <!-- / 共通フッター -->

実際に書いてみると、コメントがあった方がいいのは自明ですね。
共通ヘッダのパスはlaravelのルーティングに併せて設定していきます。

headerを作っていく

まずcssなしの状態

<div id="header">
        <p class="logo"><a href="/"><img src="./src/img/logo.gif" alt="ZEUS" /></a></p>
        <h3>username1</h3>
        <ul id="helpNav">
            <li><a href="/">ホーム</a></li>
            <li><a href="/">ログアウト</a></li>
        </ul>
        <ul>
        <li><a href="/product/">アカウント情報</a></li>
          <ul>
            <li>アカウント情報1</li>
            <li>アカウント情報1</li>
            <li>アカウント情報1</li>
          </ul>
        <li><a href="/service/">hoge</a></li>
          <ul>
            <li>アカウント情報1</li>
            <li>アカウント情報1</li>
            <li>アカウント情報1</li>
          </ul>
        <li><a href="/company/">hoge</a></li>
          <ul>
            <li>アカウント情報1</li>
            <li>アカウント情報1</li>
            <li>アカウント情報1</li>
          </ul>
        <li><a href="/press/">hoge</a></li>
        </ul>
    </div>

さて、これからcssを触っていきます。