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

[CSS] 基本メモ: アルファ値の指定

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

RGBの色成分に加えてアルファ値が指定できる。

サンプル

<style>
div {
    width: 100px;
    height: 20px;
    padding: 10px;
    margin: 30px;
    background-color: orange;
    border: 2px solid red;
}
</style>

<style>

div {

width: 100px;

height: 20px;

padding: 10px;

margin: 30px;

background-color: orange;

border: 2px solid red;

}

</style>

<style>
#test1 { color: rgba(255,0,0,1.0); }
</style>
<div id="test1">test1</div>

<style>

#test1 { color: rgba(255,0,0,1.0); }

</style>

<style>
#test2 { color: rgba(255,0,0,0.6); }
</style>
<div id="test2">test2</div>

<style>

#test2 { color: rgba(255,0,0,0.6); }

</style>

<style>
#test3 { color: rgba(255,0,0,0.2); }
</style>
<div id="test3">test3</div>

<style>

#test3 { color: rgba(255,0,0,0.2); }

</style>

参考サイト

rgba()－CSS3リファレンス
http://www.htmq.com/css3/rgba.shtml

[CSS] 基本メモ: 角丸の指定

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

ボックスの角を丸めることができる。

サンプル

<style>
div {
    width: 100px;
    height: 100px;
    padding: 10px;
    margin: 30px;
    background-color: orange;
    border: 2px solid red;
    color: red;
}
</style>

<style>

div {

width: 100px;

height: 100px;

padding: 10px;

margin: 30px;

background-color: orange;

border: 2px solid red;

color: red;

}

</style>

<style>
#test1 { border-radius: 10px; }
</style>
<div id="test1">test1</div>

<style>

#test1 { border-radius: 10px; }

</style>

<style>
#test2 { border-radius: 10px 20px 30px 40px; }
</style>
<div id="test2">test2</div>

<style>

#test2 { border-radius: 10px 20px 30px 40px; }

</style>

<style>
#test3 { border-top-right-radius: 50px; }
</style>
<div id="test3">test3</div>

<style>

#test3 { border-top-right-radius: 50px; }

</style>

<style>
#test4 { border-radius: 50%; }
</style>
<div id="test4">test4</div>

<style>

#test4 { border-radius: 50%; }

</style>

<style>
#test5 {
    border-radius: 50%;
    background-image: url("sample.jpg");
}
</style>
<div id="test5">test5</div>

<style>

#test5 {

border-radius: 50%;

background-image: url("sample.jpg");

}

</style>

参考サイト

border-radius－CSS3リファレンス
http://www.htmq.com/css3/border-radius.shtml

[CSS] 基本メモ: ベンダープレフィックス

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

ブラウザが暫定実装しているスタイルであることを示す識別子。

-webkit-
Google Chrome, Safari

-moz-
Firefox

-o-
opera

-ms-
Internet Explorer

例

border-radius: 5px;
-webkit-border-radius: 5px;

1 2	border-radius: 5px; -webkit-border-radius: 5px;

参考サイト

ベンダープレフィックス－CSSの基本
http://www.htmq.com/csskihon/603.shtml

ブラウザ別のスタイル対応状態はCan I Useで調べるとよい。

Can I use… Support tables for HTML5, CSS3, etc
http://caniuse.com/

[C#] 別ウィンドウを表示せずに外部プログラムを起動して終了まで待つ

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

コマンドプロンプトで実行される外部プログラムをバッチで繰り返し実行したい。だけど、実行中は別の作業を行いたいので、外部プログラムが実行されるたび新しいウィンドウが開いてフォーカスが奪われるのはいただけない。

別ウィンドウを表示せずに外部プログラムを起動して終了まで待つには、

新しいウィンドウを表示しない
新しいウィンドウを隠す

の何れかを明示して外部プログラムを実行すればよい。

サンプルコード

using System.Diagnostics;
static void Execute(string program, string opts)
{
    ProcessStartInfo info = new ProcessStartInfo(program);
    //info.CreateNoWindow = true; //ウィンドウを表示しない
    info.WindowStyle = ProcessWindowStyle.Hidden; //ウィンドウを隠す
    info.Arguments = opts;
    System.Diagnostics.Process hProcess;
    hProcess = System.Diagnostics.Process.Start(info);
    hProcess.WaitForExit();
    hProcess.Close();
    hProcess.Dispose();
}

using System.Diagnostics;

static void Execute(string program, string opts)

{

ProcessStartInfo info = new ProcessStartInfo(program);

//info.CreateNoWindow = true; //ウィンドウを表示しない

info.WindowStyle = ProcessWindowStyle.Hidden; //ウィンドウを隠す

info.Arguments = opts;

System.Diagnostics.Process hProcess;

hProcess = System.Diagnostics.Process.Start(info);

hProcess.WaitForExit();

hProcess.Close();

hProcess.Dispose();

}

参考サイト

コマンド・プロンプトを表示せずにコンソール・アプリケーションを実行するには？［C#、VB］－＠IT
http://www.atmarkit.co.jp/fdotnet/dotnettips/654nowinexec/nowinexec.html

[CSS] 基本メモ: 擬似クラス

2015年1月27日 @84kure

擬似クラスはクラスが特定の状態にある場合に限って適用されるスタイル。たとえば以下。

:link
:visited
:hover
:active
:focus

サンプル

a:link { color: blue; }
a:visited { color: green; }
a:hover { font-weight: bold; }
a:active { background: red; }
h3:hover { color: pink; }
input:focus { background: yellow; }

参考サイト

:active擬似クラス－スタイルシートリファレンス
http://www.htmq.com/selector/active.shtml

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

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

cursor

move
help
wait
pointer など

サンプル

<style>
#hello {
    width: 200px;
    height: 200px;
    background-color: yellow;
    border: solid 1px blue;
}
</style>
<div id="hello">Hello</div>

<style>

#hello {

width: 200px;

height: 200px;

background-color: yellow;

border: solid 1px blue;

}

</style>

<div id="hello">Hello</div>

<style>
#hello { cursor: move; }
</style>

<style>

#hello { cursor: move; }

</style>

<style>
#hello { cursor: help; }
</style>

<style>

#hello { cursor: help; }

</style>

<style>
#hello { cursor: wait; }
</style>

<style>

#hello { cursor: wait; }

</style>

<style>
#hello { cursor: pointer; }
</style>

<style>

#hello { cursor: pointer; }

</style>

参考サイト

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

[CSS] 基本メモ: list-styleプロパティ

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

list-style-type

none (無し)
disc (白い丸)
circle (黒い丸)
square (黒い四角)
lower-roman (小文字ローマ数字)
upper-roman (大文字ローマ数字)
lower-greek (小文字ギリシャ文字)
decimal (数字)
decimal-leading-zero (先頭にゼロを付けた数字)
lower-alpha (小文字アルファベット)
uppwe-alpha (大文字アルファベット)　など

list-style-position

outside
inside

list-style-image

url(‘bullet.png’);

サンプル

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

<ul>

<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>

<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>

<li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</li>

<li>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>

</ul>

<style>
ul { list-style-type: circle; }
</style>

<style>

ul { list-style-type: circle; }

</style>

<style>
ul { list-style-type: square; }
</style>

<style>

ul { list-style-type: square; }

</style>

<style>
ul { list-style-type: decimal; }
</style>

<style>

ul { list-style-type: decimal; }

</style>

<style>
ul { list-style-type: decimal; list-style-position: inside; }
</style>

<style>

ul { list-style-type: decimal; list-style-position: inside; }

</style>

参考サイト

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

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

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

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

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

left
左寄せされた要素に対する回り込みを解除。

right
右寄せされた要素に対する回り込みを解除。

both
全ての要素に対する回り込みを解除。

none
回り込みを解除しない。

サンプル

<h2>Hello</h2>
<div id="sample1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
</div>
<h2>World</h2>
<div id="sample2">
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>

<h2>Hello</h2>

Lorem ipsum dolor sit amet, consectetur adipisicing elit,

</div>

<h2>World</h2>

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>

<style>
h2 { float: left; }
#sample1 { color: red; }
#sample2 { color: blue; }
</style>

<style>

h2 { float: left; }

#sample1 { color: red; }

#sample2 { color: blue; }

</style>

<style>
h2 { float: left; }
#sample1 { color: red; }
#sample2 { color: blue; clear: left; }
</style>

<style>

h2 { float: left; }

#sample1 { color: red; }

#sample2 { color: blue; clear: left; }

</style>

参考サイト

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

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

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

left
左寄せ。続く内容はその右側に回り込む。

right
右寄せ。続く内容はその左側に回り込む。

none
指定無し。

サンプル

<div>
<h2>Hello</h2>
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>

<h2>Hello</h2>

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>

スタイル指定無し

<style>
h2 { float: left; }
</style>

<style>

h2 { float: left; }

</style>

<style>
h2 { float: right; }
</style>

<style>

h2 { float: right; }

</style>

参考サイト

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

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

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

static
位置指定しない。

relative
相対位置を指定する。staticで配置される位置が基準。

absolute
絶対位置を指定する。親要素の左上が基準。親要素がstatic配置でなければウィンドウ左上が基準。

fixed
絶対位置を指定する。スクロールしても位置は変わらない。

サンプル1: ウィンドウの上端に張り付いたメニューバーもどき

<style>
div#menu {
    font-family: "Meiryo UI";
    background-color: black;
    color: white;
    width: 100%;
    height: 50px;
    margin: 0px;
    padding: 10px;
    position: fixed;
    bottom: 0;
    top: 0;
}
</style>

<style>

div#menu {

font-family: "Meiryo UI";

background-color: black;

color: white;

width: 100%;

height: 50px;

margin: 0px;

padding: 10px;

position: fixed;

bottom: 0;

top: 0;

}

</style>

<div id="menu">Menu | Hello | Products</div>

1	<div id="menu">Menu \| Hello \| Products</div>

サンプル2: absolute指定で既存のボックス要素に重ねて配置

<style>
body, html {
    height: 100%;
    margin: 0;
}
div {
    background: green;
    width: 100px;
    height: 100px;
    position: relative;
}
.label {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 14px;
    background: red;
    padding: 2px 4px;
    color: white;
    border: solid 1px yellow;
}
</style>

<style>

body, html {

height: 100%;

margin: 0;

}

div {

background: green;

width: 100px;

height: 100px;

position: relative;

}

.label {

position: absolute;

top: 0;

left: 0;

font-size: 14px;

background: red;

padding: 2px 4px;

color: white;

border: solid 1px yellow;

}

</style>

<div>
<span class="label">NEW!!</span>
box
</div>

<div>

box

</div>

参考サイト

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