WEBの勉強～HTML5でのformの作成方法/CSS3/～ - webの勉強！！初心者！脱出マニュアル！！

こんにちは、メグルです！

css3

a:hover {
	opacity:0.7;
}

矢印が重なった時に、３割透けますよってことになります。

次に、数字に黒を囲むコードです。css3で書くと下のようになります。

f:id:meglez1:20150121094409p:plain

text-shadow: #3D1117 2px 2px 0px, #3D1117 -2px 2px 0px, #3D1117 2px -2px 0px, #3D1117 -2px -2px 0px;

それから、

f:id:meglez1:20150121094940p:plain

htmlが↓

<div id="footer">

	<img id="facebook" src="images/footer.jpg" alt="facebook">

	<p id="tel2">045-322-9727</p>
	<p id="add">横浜市西区南幸町2-14-9<br>西口明和ビルB1</p>
	<address>c2015 TAVERN All Right Reserved.</address>
	</div>


styleがした

#footer {
	position:relative;
	color:#fff;
	clear:both;
	height:88px;
	/* Firefox v3.6+ */
	background-image:-moz-linear-gradient(50% 0% -90deg,rgb(48,11,19) 0%,rgb(106,36,37) 29%,rgb(217,109,0) 100%);
	/* safari v4.0+ and by Chrome v3.0+ */
	background-image:-webkit-gradient(linear,50% 0%,50% 206%,color-stop(0, rgb(48,11,19)),color-stop(0.29, rgb(106,36,37)),color-stop(1, rgb(217,109,0)));
	/* Chrome v10.0+ and by safari nightly build*/
	background-image:-webkit-linear-gradient(-90deg,rgb(48,11,19) 0%,rgb(106,36,37) 29%,rgb(217,109,0) 100%);
	/* Opera v11.10+ */
	background-image:-o-linear-gradient(-90deg,rgb(48,11,19) 0%,rgb(106,36,37) 29%,rgb(217,109,0) 100%);
	/* IE v10+ */
	background-image:-ms-linear-gradient(-90deg,rgb(48,11,19) 0%,rgb(106,36,37) 29%,rgb(217,109,0) 100%);
	background-image:linear-gradient(180deg,rgb(48,11,19) 0%,rgb(106,36,37) 29%,rgb(217,109,0) 100%);
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff300b13,endColorstr=#ffd96d00,GradientType=0)";
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff300b13,endColorstr=#ffd96d00,GradientType=0);
}

#facebook {
	position:absolute;
	top:0;
	left:0;
}

#tel2 {
	font-size:64px;
	font-weight:bold;
	text-shadow: #000 2px 2px 0px, #000 -2px 2px 0px, #000 2px -2px 0px, #000 -2px -2px 0px;
	position:absolute;
	top:16px;
	left:100px;
	line-height:100%;
}

#add {
	text-align:right;
	font-size:12px;
	position:absolute;
	top:18px;
	right:38px;
}

address {
	font-size:14px;
	position:absolute;
	top:55px;
	right:38px;
	font-style:normal;
}


フロートでのやり方と、ポジションでのやり方があるが、今回はポジションでのやり方。

position :relative　 相対

 :abosolute　絶対位置　

 :fixed　　　固定

 :static　　 通常

使い方をどうするか！！

親要素であるfooterに,

position:relativeをかけて、動かしたい、

#facebookなどに、

position:absolute;をかけて、動かすことができます。

fixdは、例えばコンテンツを下にスクロールしてもサイドバーは動かさないなどをしたいときには、
fixdを使うと良いです。


formとは、

フォームの参考サイト１

フォームの参考サイト２

<html>

<body>

名前:<input type="test" name="name"><br>

メールアドレス:<input type="emai" name="mail"><br>

電話番号:<input type="tel" name="denwa"><br>

性別:男<input type="radio" name="seibetu" value="otoko">

女:<input type="radio" name="seibetu" value="onna"> <br>

血液型 :

</select><br>

一言どうぞ:<input type="text" name="hitokoto">ここに一言書いてください</textarea>

</form>

</body>

</html>

最後の</textarea>だけが閉じタグがある！！

html5のフォーム参考サイト

http://www.htmq.com/html5/005.shtml

<html>

<body>

名前:<input type="test" name="name"><br>

メールアドレス:<input type="emai" name="mail"><br>

電話番号:<input type="tel" name="denwa" placeholder="例：090-0000-0000"><br>

性別:男<input type="radio" name="seibetu" value="otoko">

女:<input type="radio" name="seibetu" value="onna"> <br>

血液型 :

</select><br>

一言どうぞ:<input type="text" name="hitokoto" placeholder="">ここに一言書いてください</textarea>

</form>

</body>

</html>

placeholder="例：090-0000-0000"はhtml5からできるようになったらしいです。便利ですね。しかも、javascriptを切っている人でもしっかり表示されますのでいいでよね！！

最低限、サイト制作する際は、javascriptがなくても意味のある制作が必要だと先生が言っていました。

午後は、ポートフォリオサイトをどのようなサイトを作るのかを考えてから、

デザインのカンプ制作をｆｗなどを使用してやる。