2015年1月 – ページ 2 – 端くれプログラマの備忘録

[CSS] 基本メモ: overflowプロパティ

2015年1月21日2015年8月21日 @84kure

visible
はみ出した部分も表示される。

hidden
はみ出した部分は表示されない。

scroll
はみ出した部分はスクロールして見れるようになる。

サンプル

<style>
#hello1 { overflow: visible; }
#hello2 { overflow: hidden; }
#hello3 { overflow: scroll; }
</style>

<style>

#hello1 { overflow: visible; }

#hello2 { overflow: hidden; }

#hello3 { overflow: scroll; }

</style>

<div id="hello1">Hello1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div id="hello2">Hello2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div id="hello3">Hello3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

<div id="hello1">Hello1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

<div id="hello2">Hello2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

<div id="hello3">Hello3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

参考サイト

overflow－スタイルシートリファレンス
http://www.htmq.com/style/overflow.shtml

[CSS] 基本メモ: displayプロパティ

2015年1月20日2015年8月21日 @84kure

block
ブロックボックスを生成する。前後に改行が入る。

inline
インラインボックスを生成する。前後に改行が入らない。高さと幅の設定が効かなくなる。

inline-block
インラインレベルのブロックコンテナを生成する。前後に改行が入らない。高さと幅の設定は効く。

none
表示されない。

サンプル

<style>
#hello1 {
    background-color: yellow;
    border: solid 1px red;
    width: 200px;
    height: 200px;
    display: block;
}
#hello2 {
    background-color: yellow;
    border: solid 1px red;
    width: 200px;
    height: 200px;
    display: inline;
}
#hello3 {
    background-color: yellow;
    border: solid 1px red;
    width: 200px;
    height: 200px;
    display: inline-block;
}
</style>

<style>

#hello1 {

background-color: yellow;

border: solid 1px red;

width: 200px;

height: 200px;

display: block;

}

#hello2 {

background-color: yellow;

border: solid 1px red;

width: 200px;

height: 200px;

display: inline;

}

#hello3 {

background-color: yellow;

border: solid 1px red;

width: 200px;

height: 200px;

display: inline-block;

}

</style>

<div id="hello1">Hello1</div>
<div id="hello2">Hello2</div>
<div id="hello3">Hello3</div>

<div id="hello1">Hello1</div>

<div id="hello2">Hello2</div>

<div id="hello3">Hello3</div>

参考サイト

display－スタイルシートリファレンス
http://www.htmq.com/style/display.shtml

[CSS] 基本メモ: ブロック要素

2015年1月19日2015年8月21日 @84kure

ブロック要素のスタイル

width: 200px | 50%; (パーセントは親要素に対する比率)
height: 200px | 50%;
 
border-color: red;
border-width: 1px;
border-style: solid | dashed | dotted | double | inset | outset;
 
//borderの内側がpadding
padding: 10px; //数値1個 → (上下左右)
padding: 10px 10px; //数値2個 → (上下) (左右)
padding: 10px 10px 10px; //数値3個 → (上) (左右) (下)
padding: 10px 10px 10px 10px; //数値4個 → (上) (右) (下) (左)
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
 
//borderの外側がmargin
margin: 10px; //数値1個 → (上下左右)
margin: 10px 10px; //数値2個 → (上下) (左右)
margin: 10px 10px 10px; //数値3個 → (上) (左右) (下)
margin: 10px 10px 10px 10px; //数値4個 → (上) (右) (下) (左)
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;

width: 200px | 50%; (パーセントは親要素に対する比率)

height: 200px | 50%;

border-color: red;

border-width: 1px;

//borderの内側がpadding

padding: 10px; //数値1個 → (上下左右)

padding: 10px 10px; //数値2個 → (上下) (左右)

padding: 10px 10px 10px; //数値3個 → (上) (左右) (下)

padding: 10px 10px 10px 10px; //数値4個 → (上) (右) (下) (左)

padding-top: 10px;

padding-bottom: 10px;

padding-left: 10px;

padding-right: 10px;

//borderの外側がmargin

margin: 10px; //数値1個 → (上下左右)

margin: 10px 10px; //数値2個 → (上下) (左右)

margin: 10px 10px 10px; //数値3個 → (上) (左右) (下)

margin: 10px 10px 10px 10px; //数値4個 → (上) (右) (下) (左)

margin-top: 10px;

margin-bottom: 10px;

margin-left: 10px;

margin-right: 10px;

参考サイト

スタイルシートリファレンス（目的別）
http://www.htmq.com/style/index.shtml

[CSS] 基本メモ: 背景

2015年1月18日2015年8月21日 @84kure

背景のスタイル

background-color: blue;
background-image: url("images/pattern.gif");
background-repeat: no-repeat | repeat-x | repeat-y | repeat;
background-position: 10px 10px; (画像配置の基点)
background-attachment: fixed; (ページがスクロールしても画像は留まる)

background-color: blue;

background-image: url("images/pattern.gif");

background-repeat: no-repeat | repeat-x | repeat-y | repeat;

background-position: 10px 10px; (画像配置の基点)

background-attachment: fixed; (ページがスクロールしても画像は留まる)

参考サイト

スタイルシートリファレンス（目的別）
http://www.htmq.com/style/index.shtml

[CSS] 基本メモ: フォント＆テキスト

2015年1月17日2015年8月21日 @84kure

数あるスタイルの中から自分が良く使いそうなモノをざっくり抜粋。

フォントスタイル

font-style: normal | italic;
font-weight: normal | bold;
font-size: 20px;
font-family: "Meiryo UI", sans-serif;
font-family: "Lucida Console", monospace;

font-style: normal | italic;

font-weight: normal | bold;

font-size: 20px;

font-family: "Meiryo UI", sans-serif;

font-family: "Lucida Console", monospace;

テキストスタイル

line-height: 15px | 200%;
text-align: left | right | center;
text-decoration: underline | line-through(打ち消し線);
text-indent: 20px; (1行目のインデント幅)
text-transform: capitalize(先頭大文字) | lowercase(小文字) | uppwecase(大文字);
letter-spacing: 10px; (文字間隔)
word-spacing: 10px; (単語間隔)

line-height: 15px | 200%;

text-align: left | right | center;

text-decoration: underline | line-through(打ち消し線);

text-indent: 20px; (1行目のインデント幅)

text-transform: capitalize(先頭大文字) | lowercase(小文字) | uppwecase(大文字);

letter-spacing: 10px; (文字間隔)

word-spacing: 10px; (単語間隔)

参考サイト

スタイルシートリファレンス（目的別）
http://www.htmq.com/style/index.shtml

[CSS] 基本メモ: 書き方、セレクタ、優先度、色の指定

2015年1月16日2015年8月21日 @84kure

CSS再勉強。参考サイトが助けになる。

CSSの基本－HTMLクイックリファレンス
http://www.htmq.com/csskihon/index.shtml

CSSを書く場所

HTMLタグ中にstyle属性として書く
ヘッダ中に<style>タグを使って書く
外部ファイルに書く <link ref=”stylesheet” href=”default.css”>

CSSの書き方

セレクタ {
    プロパティ: 値;
}

セレクタ {

プロパティ: 値;

}

例

h3 {
    color: blue;
    font-size: 20px;
}

h3 {

color: blue;

font-size: 20px;

}

セレクタの種類

* – 全てのセレクタ
a, b – 複数のセレクタを指定 (aとb)
a b – a要素内のb要素を指定 (全ての子孫が対象)
a > b – a要素直下のb要素を指定 (子要素のみが対象)
a + b – a要素直後のb要素だけ指定
ab – a要素であって、かつ、b要素であるものだけ指定

例

h3 + p { ... }

<h3>見出し</h3>
<p>テキスト</p> ←これ
<p>テキスト</p>
<p>テキスト</p>

h3 + p { ... }

<p>テキスト</p> ←これ

例

p.note { ... }

<p>テキスト</p>
<p>テキスト</p>
<p class="note">テキスト</p> ←これ

p.note { ... }

<p class="note">テキスト</p> ←これ

スタイル指定の優先度

後から書いた方が優先
インラインで書いた方が優先
詳細度の高い方が優先 (#(id)100ポイント、.(class)10ポイント、タグ 1ポイント)
!important指定が最優先

h1 { color: green !important; } //最優先
section#main h1 { color: yellow; } //(1+100+1)ポイント
#main h1 { color: red; } //(100+1)ポイント
h1 { color: blue; } //1ポイント

h1 { color: green !important; } //最優先

section#main h1 { color: yellow; } //(1+100+1)ポイント

#main h1 { color: red; } //(100+1)ポイント

h1 { color: blue; } //1ポイント

CSSの優先順位～CSSテクニック～
http://www.stylish-style.com/csstec/base/order.html

色の指定

名前で指定する red, gree, blue
rgb値で指定する rgb(255,0,255)
16進数で指定する #00f, #ff0000

[HTML5] 新タグなどの予備知識ざっくり

2015年1月15日2015年8月21日 @84kure

最近フロントエンドはあまりやってないけど、いつ何時必要になるかわからないので、自分の古いHTMLの知識をざっくり補っておく。完全な仕様は参考サイトが詳しい。

HTML5リファレンス
http://www.htmq.com/html5/

ページの雛形

HTML5になったら最低限必要な属性はしっかり書かないとね。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="description" content="Hello world">
    <style>
    p { color: red; }
    </style>
    <link rel="stylesheet" href="style.css">
    <link rel="shortcut icon" href="favicon.ico">
    <title>Hello world</title>
</head>
<body>
<p>Hello world</p>
</body>
</html>

<!DOCTYPE html>

<head>

<style>

p { color: red; }

</style>

<title>Hello world</title>

</head>

<body>

<p>Hello world</p>

</body>

</html>

テーブル

テーブルをエレメント分けするタグが増えた。

<thead> table header element
<tbody> table body element
<tfoot> table footer elementer

<thead> table header element

<tbody> table body element

<tfoot> table footer elementer

<tbody>－HTML5タグリファレンス
http://www.htmq.com/html5/tbody.shtml

trとかtdって何の略だっけ？と、記憶が怪しいので復習。

<tr> table row
<th> table header
<td> table data

<tr> table row

<th> table header

<td> table data

アンカー

アンカーはidで指定できるようになったみたい。

<p id="top">top</p>
...
<a href=#top">Back to top</a>

...

フォーム要素

たとえば以下のような入力種別が増えてる。required(必須)を指定すると、未入力だとブラウザが警告を表示。

Date: <input type="date" required>
URL: <input type="url" required>
Email: <input type="email" required>

Date: <input type="date" required>

URL: <input type="url" required>

Email: <input type="email" required>

<input>－HTML5タグリファレンス
http://www.htmq.com/html5/input.shtml

ラベル

ラベルタグで囲むことで、ラベル文字列のクリックでラジオボタンが変化するようにできる。

<label><input type="radio" value="red">Red</label>
<label><input type="radio" value="green">Green</label>
<label><input type="radio" value="blue">Blue</label>

<label><input type="radio" value="green">Green</label>

for属性を指定することで、ラジオボタンとラベルを離して配置することもできる。

<input type="radio" value="yellow" id="yellow">
...
<label for="yellow">Yellow</label>

...

<label for="yellow">Yellow</label>

スタイリング関連

これはHTML5以前の内容だけど、ざっくり復習。

divとspanの違い。

div 汎用ブロック要素 (前後が改行される)
span 汎用インライン要素 (前後が改行されない)

idとclassの違い。

id 文章中で唯一の要素
class 文章中で複数存在し得る要素

サンプル

<div id="note">
<p>おはようございます。</p>
<p>今日も元気です。</p>
</div>

<p><span class="warning">警告</span> 注意してください。</p>

<p>おはようございます。</p>

<p>今日も元気です。</p>

</div>

<p><span class="warning">警告</span> 注意してください。</p>

セマンティックなタグ

HTML5から文章構造を示すタグが追加されている。たとえば以下のような。

header
footer
nav
article
aside
section、など

HTML5対応ブラウザ用にはタグを書く。

<header>ヘッダー</header>

1	<header>ヘッダー</header>

旧ブラウザ用にはidを指定して書く。

<div id="header">ヘッダー</div>

1	<div id="header">ヘッダー</div>

HTML5のセマンティックなマークアップを知ろう（文書の構造編） [Skillhub (スキルハブ)]
http://skillhub.jp/courses/1/lessons/45

[HTML5] 新要素まとめ【2014/2/14版勧告候補】 – Qiita
http://qiita.com/maccotsan/items/20c6ea274b0190dc2c05

[JavaScript] 基本メモ: DOM操作

2015年1月14日2015年8月21日 @84kure

DOM = Document Object Model

プロパティへのアクセス

console.dir(window); //オブジェクトのプロパティを羅列
console.log(window.location.href);
console.log(window.outerWidth);
console.log(window.outerHeight);

console.dir(window); //オブジェクトのプロパティを羅列

console.log(window.location.href);

console.log(window.outerWidth);

console.log(window.outerHeight);

サンプル: 3秒後にGoogleへジャンプする

function jumpToGoogle() {
    window.location.href = "http://google.com/";
}
setTimeout(function(){jumpToGoogle();}, 3000);

function jumpToGoogle() {

window.location.href = "http://google.com/";

}

setTimeout(function(){jumpToGoogle();}, 3000);

ドキュメントの操作

window.document = 現在開いているドキュメント (先頭のwindowは省略可)

属性の変更

<style>
    .defaultStyle {
    font-size: 30px;
    font-weight: bold;
}
</style>
<p id="msg">Hello</p>
<script>
var m = document.getElementById('msg');
m.textContent = 'Good morning';
m.style.color = 'red';
m.className = 'defaultStyle';
</script>

<style>

.defaultStyle {

font-size: 30px;

font-weight: bold;

}

</style>

<p id="msg">Hello</p>

var m = document.getElementById('msg');

m.textContent = 'Good morning';

m.style.color = 'red';

m.className = 'defaultStyle';

</script>

要素の追加

body要素の末尾にparagを追加し、paragの末尾にtextを追加。

<script>
var parag = document.createElement('p');
var text = document.createTextNode('Hello World');
document.body.appendChild(parag).appendChild(text);
</script>

var parag = document.createElement('p');

var text = document.createTextNode('Hello World');

document.body.appendChild(parag).appendChild(text);

</script>

イベントの追加

ボタンをクリックするたびにページ末尾にHello Worldが追加される。

<button id="add">Click Me</button>
<script>
document.getElementById('add').addEventListener('click', function() {
    var parag = document.createElement('p');
    var text = document.createTextNode('Hello World');
    document.body.appendChild(parag).appendChild(text);
}); 
</script>

<button id="add">Click Me</button>

document.getElementById('add').addEventListener('click', function() {

var parag = document.createElement('p');

var text = document.createTextNode('Hello World');

document.body.appendChild(parag).appendChild(text);

});

</script>

[JavaScript] 基本メモ: タイマー処理

2015年1月13日2015年8月21日 @84kure

タイマー関数

指定した間隔ごとにコールバック関数を呼び出す

setInterval(コールバック関数, 間隔)

1	setInterval(コールバック関数, 間隔)

指定した時間経過したらコールバック関数を呼び出す

setTimeout(コールバック関数, 時間)

1	setTimeout(コールバック関数, 時間)

setInterval()使用上の注意

setInterval()は、以前に呼び出したコールバック関数の処理が終わっているかどうかに関わらず、時間が経過したら新たにコールバック関数を呼び出してしまう。もしコールバック関数の処理に時間が掛かっていると、以前のコールバック関数が終了する前に新しくコールバック関数が呼び出されることになり、結果的に処理中のコールバック関数が増えすぎてシステムリソースを食い潰してしまうこともあり得る。

setTimeout()を使ったインターバル処理

以下のように再帰的にsetTimeout()を呼び出すことで、安全にインターバル処理を行うこともできる。

var cnt = 0;
function incr() {
    console.log(cnt++);
    setTimer(function(){incr();}, 1000);
}
incr();

var cnt = 0;

function incr() {

console.log(cnt++);

setTimer(function(){incr();}, 1000);

}

incr();

たとえば、もし60秒でインクリメント処理を終えたい場合は以下のようにすればよい。

var cnt = 0;
function incr() {
    console.log(cnt++);
    var tid = setTimer(function(){incr();}, 1000);
    if (cnt > 60) {
        clearTimeout(tid);
    }
}
incr();

var cnt = 0;

function incr() {

console.log(cnt++);

var tid = setTimer(function(){incr();}, 1000);

if (cnt > 60) {

clearTimeout(tid);

}

incr();

[JavaScript] 基本メモ: 組み込みオブジェクト

2015年1月12日2015年8月21日 @84kure

良く使いそうなもの。

String

var s = new String("Hello world");
var s = "Hello world";    //リテラル
alert(s.length);          //11
s = s.replace('w', 'W');  //"Hello World" 置換
s = s.substr(0, 5);       //"Hello" 部分文字列 0文字目から5文字分

var s = new String("Hello world");

var s = "Hello world"; //リテラル

alert(s.length); //11

s = s.replace('w', 'W'); //"Hello World" 置換

s = s.substr(0, 5); //"Hello" 部分文字列 0文字目から5文字分

Array

var a = new Array(1,2,3,4,5);
var a = [1,2,3,4,5]; //リテラル
alert(s.length);     //5
a.push(6);           //末尾に追加
a.pop();             //末尾の要素を削除
a.unshift(0);        //先頭に追加
a.shift();           //先頭の要素を削除
a.splice(1, 2, 12, 13); //1番目から2個の要素を削除し、代わりに12と13の値の要素を追加

var a = new Array(1,2,3,4,5);

var a = [1,2,3,4,5]; //リテラル

alert(s.length); //5

a.push(6); //末尾に追加

a.pop(); //末尾の要素を削除

a.unshift(0); //先頭に追加

a.shift(); //先頭の要素を削除

a.splice(1, 2, 12, 13); //1番目から2個の要素を削除し、代わりに12と13の値の要素を追加

Math

Math.PI;          //円周率
Math.ceil(1.2);   //=2 切り上げ
Math.floor(1.2);  //=1 切捨て
Math.round(1.2);  //=1 四捨五入
Math.random();    //0-1の乱数

Math.PI; //円周率

Math.ceil(1.2); //=2 切り上げ

Math.floor(1.2); //=1 切捨て

Math.round(1.2); //=1 四捨五入

Math.random(); //0-1の乱数

Date

var d = new Date(); //現在日次
var d = new Date(2015,0,12,7,20,30); //注)月はゼロから (0=1月, 1=2月, ...)
d.getFillYear();
d.getMonth();
d.getTime(); //1970/1/1からの経過ミリ秒

var d = new Date(); //現在日次

var d = new Date(2015,0,12,7,20,30); //注)月はゼロから (0=1月, 1=2月, ...)

d.getFillYear();

d.getMonth();

d.getTime(); //1970/1/1からの経過ミリ秒

サンプル

参考サイト

サンプル

参考サイト

ブロック要素のスタイル

参考サイト

背景のスタイル

参考サイト

フォントスタイル

テキストスタイル

参考サイト

CSSを書く場所

CSSの書き方

セレクタの種類

スタイル指定の優先度

色の指定

ページの雛形

テーブル

アンカー

フォーム要素

ラベル

リスト

スタイリング関連

セマンティックなタグ

プロパティへのアクセス

ドキュメントの操作

タイマー関数

setInterval()使用上の注意

setTimeout()を使ったインターバル処理

String

Array

Math

Date