HTML/CSS

[HTML/CSS]要素を横並びにするinlineとinline-blockの違い

2017.02.09 l＠ha

HTMLの要素は「ブロックレベル要素」と「インラインレベル要素」にわけられます。「ブロックレベル要素」文章の骨組みとなる要素です。「＜h1＞、＜h2＞、＜p＞、＜ul＞、＜li＞、＜table＞…..e…

[初心者向け]JQueryってなに?どんなことができるの？

2017.02.08 l＠ha

この記事はJavaScriptを勉強し始めた人に向けて書いています。 JavaScript自体に触れたことがない方にはまずJavaScriptの基礎だけでも勉強してから見ることをお勧めします。個人的な意見としてはJav…

[HTML/CSS]ベンダープレフィックスでブラウザ間の差異をなくそう

2017.02.06 l＠ha

CSSでは同じコードを、-moz-とか-webkit-とかを頭につけて何度も記述している場面があります。これはブラウザ間の差異をなくすために必要な記述です。 InternetExploler(IE)やGoogle Ch…

MongoDBに登録したデータをHTMLに表示する

2016.12.13 l＠ha

前回の続きで、MongoDBに登録したデータをHTMLに表示する方法を試してみました。実際に実行してみると大したことはなかったけど、結構調べるのに時間がかかった。今回はEJSというテンプレ…

ゴーストボタンを試してみた

2016.12.04 l＠ha

ゴーストボタンというものを知って見た目が気に入ったので、実際にやってみました。

a.button{
 font-size: 30px;
 font-family: Impact;
 display: block;
 width: 120px;
 padding: 15px 10px;
 border: 10px solid #666666;
 background: transparent;
 color: #666666;
 text-align: center;
 text-decoration: none;
 transition: .3s;
}

a.ghost:hover {
 border: 3px solid rgba(0,0,0,.5);
 color: rgba(0,0,0,.5);
}

font-size: 30px;

font-family: Impact;

display: block;

padding: 15px 10px;

border: 10px solid #666666;

background: transparent;

color: #666666;

text-align: center;

text-decoration: none;

transition: .3s;

a.ghost:hover {

border: 3px solid rgba(0,0,0,.5);

color: rgba(0,0,0,.5);

それとGIF画像を挿入する時に、フルサイズに指…

getUserMedia APIでhtmlにWebカメラの映像を表示してみる

2016.11.28 l＠ha

macに内臓されているカメラを使用してHTMLに映像を出力してみる。

<!DOCTYPE html>
<html>
<head>
	<title>Webカメラ</title>
</head>

<body>
<video id="video"></video>
<script>

var video = document.getElementById("video");

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

navigator.webkitGetUserMedia({
	video:true,
	audio:true
},function(stream){
	video.src = URL.createObjectURL(stream);
	video.play();
},function(error){
	console.log(error);
});
</script>
</body>
</html>

<!DOCTYPE html>

<title>Webカメラ</title>

<video id="video"></video>

var video = document.getElementById("video");

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

navigator.webkitGetUserMedia({

},function(stream){

video.src = URL.createObjectURL(stream);

},function(error){

console.log(error);

ただ、firefoxではローカルでも動作するが、Chromeだとローカルでは動作しま…