かまえ・みばえ・めばえ: 1月 2014

2014年1月30日木曜日

#19 CSS3のジェネレータを見てみよう

#19 CSS3のジェネレータを見てみよう

便利なジェネレーターのいくつかを紹介

http://www.css3maker.com/
http://border-radius.com/
http://css3button.net/
http://www.colorzilla.com/gradient-editor/

その時Can I useでチェックすると良いでしょう。

便利なものが色々あります。　

http://www.css3maker.com

http://border-radius.com/

これはシンプルです。

http://css3button.net/

ボタンもデザインできるという。

http://www.colorzilla.com/gradient-editor/

グラデーションのエスキスもできる。

＃18要素の状態で指定するセレクタ

＃18要素の状態で指定するセレクタ

今回はフォームです。

CSS3

HTMLでは（インライン）

ブラウザ上では

<input name="項目" type="radio" value="かまえ" />かまえ
以下略

かまえみばえめばえ

2014年1月29日水曜日

最近、ファビコンのファイル形式に自由度が出てきたようです。

ICOが一般的でしたが、GIFやPNGもサポートされてきたとのこと。そこで、馴染みやすいPNGで設置する方法の備忘録です。

ファビコンは通常、ウェブサーバーのルート(ドメインのルート)ディレクトリに favicon.画像を設置。

ただし、ファビコンをルートに設置できない場合や、ディレクトリごとで違うfaviconを表示させたい場合は<head>セクション内に以下の記述をすることで指定できます。

たとえば、ムーバブルタイプ・オープンソース５の場合

アイテムに16×16pxのtfavicon.pngをアップ。(アイテムの名前は任意）
「http://○×▲/tfavicon.png」という埋め込みを確認する。

管理者のダッシュボードにて
「デザイン」→「テンプレート」→「テンプレートモジュール」→「ヘッダー」に乗り込んで、<head>セクション下に次のように記述します。

<head>
<link rel="shortcut icon"http://○×▲/tfavicon.png" type="image/png ">
<link rel="icon" href="http://○×▲/tavicon.png" type="image/png ">
<MTIgnore> ★上に入れてたファァビコン記述</MTIgnore>
以下略

ちなみにこの２つの記述、上がIE用、下がそれ以外用もどきらしいです。場当たり的な対処とか？

余談

favicon

IE だけが対応状況が他のブラウザと異なっている点には注意した方がいい。

http://www.mihr.net/comp/lang/html/toc.html より

元々は、Windows 固有の .ico 形式のファイルをマイクロソフト社が他の OS のことを気に留めずにインターネット上で傍若無人に使用したのがそもそもの始めだったので、IE でしか意味を為さず、.ico 形式のファイルに対応している画像ソフトもあまりなかったため、それほど普及しませんでした。しかし後に Firefox が W3C の規定を反映した .png や .gif 形式のファイルによる favicon 仕様に対応するようになって、新たに息吹が吹き込まれることになりました。
そのような経緯のため、favicon は IE が発端ではあったのですが、新しい仕様の favicon には IE だけが対応していなかったりするような状況になっています（最新の IE 9.0 では改善されている可能性があります）。
W3C の意見によると基本的に favicon を指し示す link 要素は次のような rel="icon" 属性が望ましいのです。

<link rel="icon" type="image/gif" href="/favicon.gif" />

IE は自動でルートディレクトリの /favicon.ico を探す習性があるので、HTMLに記述しなくても「favicon.ico」を入れておけばよい。

どうも、「.ico」と「.pngや.gif 」の両方を用意しておくのが万全・・・という所でしょうか？

＃03基本的なタグを覚えよう

HTML5

<!DOCTYPE html>
<html lang=ja>
<head>
<meta charset="utf-8">
<title>かまえ・みばえ・めばえ</title>
</head>
<body>
　　　　　　<p>こんにちは</p>
</body>
</html>

という具合です。これが基本的なタグです。

<!DOCTYPE html>

詳しい説明はこのブログ内のこちらで。

<html lang=ja>

これが記述されていないサイトも多々あるようですが、自動翻訳のことを考えると、記述しておくに越したことはない、とのこと。

ブラウザという機械がHTMLを読み込むとき、この宣言文があれば、「日本語を英語に訳せばいいのね」とすぐに呑みこんでくれるらしいのです。機械と上手く付き合うためのあいさつのようなものですね。

<head>～</head>の間

<meta charset="utf-8">

最近、UTF-8が使われることが増えているそうです。

日本語というと、シフトJIS。Windows標準の文字コードで、日本で作られた規格。基本的に日本語しか表示できません。日本語一文字表わすのに２バイト使います。

一方、UTF-8は国際的に決められた多言語規格（ユニコード）。さまざまな言語をこの規格で表示できるようになっているそうです。日本語一文字表わすのに３バイト使います。

後者の方が、データサイズが大きくなるというデメリットがあるのですが、どんなブラウザ環境でも文字化けしないで表示できるメリットの方が勝りますね。

ちなみに「あいうえお」の五文字は、それぞれどのぐらいのバイトなのか？データサイズの比較をしてくれている懇切丁寧なサイトがあります。こちらによると「utf-8.txtが18バイト。shift_jis.txtが10バイト」とのこと。

ということで、この宣言文は必須ですね。

<title>かまえ・みばえ・めばえ</title>

「ブラウザのタブ」部分に表示されます。ここで「おまけ話」を追加しておきましょう。

「ブラウザのタブ」には「お気に入りのアイコン」＝「ファビコン」が付きもの・・・ということで

#02 初めてのHTML

HTML5

<!DOCTYPE html>
<html lang=ja>
<head>
<meta charset="utf-8">
<title>初めてのHTML</title>
</head>
<body>
　　　　　　<p>こんにちは</p>
</body>
</html>

という具合です。＜　＞で示された部分がタグです。

このタグは開始タグだけのもの（空要素）やスラッシュの付いた終了タグと組になっているものなどがあります。

これら指示機能をもったものを「要素」と呼びます。

拝借図像_(._.)_

HTML内の「要素」は、おおよそ次の３つに分類できます。

１．ブロックレベル要素（詳しくはこちらで）

２．インライン要素（詳しくはこちらで）

３．置換要素

「表示された時に、その要素自体がテキスト以外のものに置き換えられるような種類の要素」
あるいは「CSS の範囲外で描画される要素を置換要素と呼んでいます。これは CSS とは別に描画される外部オブジェクトです」

具体的には、
<image>・<object>・<video> の画像に置換する要素
<textarea>・<input> のようなフォーム置換要素
<audio> ・<canvas> のような特定の場合のみ置換要素

特殊なものとして、「使用する場所によりブロックレベル要素になる場合とインライン要素になる場合」の削除<del>と追加<ins>などがあります。

またscript要素もあります。XHTMLでは状況に応じてブロックになったりインラインになったりとされているそうです。

なお、ソースを読みやすく、はたまた備忘録として、コメントアウト記号で囲んで、自分のコメントを入れることがままありますが・・・この記号はタグではなく宣言文の部類とのこと。
 と、ハイフンは２本、それ以上入れると間違えが興おこる可能性があるそうです。

また、目立つ区切りを入れるのであれば
のような感じがお薦めとのことでした.

#01 HTMLとはなにか？

#01 HTMLとはなにか？

ここでは草案HTML５に特化して説明しています。

ブラウザ10ほどの互換性を表わしたリストのあるCan I use・・・の説明もあります。

2014年1月27日月曜日

Canvasとは

JavaScriptと組み合わせて画像が描けるというCanvas

これも並行して学んでいければと思います。

GoJSは45以上のサンプルアプリケーションへの完全なJavaScriptの/ HTMLソースが付属しています。

Canvasでできること・できないこと
Canvasでは、線や円といった図形を描いたり、色を塗ったりすることは可能ですが、描いた図を動かすことはできません。つまり、Canvasの仕様には、アニメーションのメソッドがありません。もしアニメーションを実現したい場合は、一コマずつ、図を描きなおすという処理を繰り返さなければいけません。

fillRect()

strokeRect()

clearRect()

onload = function() { draw1(); draw2(); draw3(); }; /* fillRect()の例 */ function draw1() { var canvas = document.getElementById('c1'); if ( ! canvas || ! canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.fillRect(20, 20, 80, 40); } /* strokeRect()の例 */ function draw2() { var canvas = document.getElementById('c2'); if ( ! canvas || ! canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.strokeRect(20, 20, 80, 40); } /* clearRect()の例 */ function draw3() { var canvas = document.getElementById('c3'); if ( ! canvas || ! canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.fillRect(20, 20, 100, 100); ctx.beginPath(); ctx.clearRect(50, 70, 60, 30); }

2014年1月26日日曜日

懐かしい

2014年1月24日金曜日

HTML旧世界

img alt="ステップ" src="http://pic.prepics-cdn.com/kaomojiemoji/19770241.gif" テキストがスクロールしますテキストがスクロールします

#16 n番目に来る要素を指定する

#16 n番目に来る要素を指定する #14 キーフレームでアニメーション (2)

子要素のうち、n番目にくる要素にスタイルをあてる方法について解説していきます。

nth-child（）：かっこの中に数字やodd（奇数）、even（偶数）3n（3の倍数番目）等の指示もできます。

first-child・last-child・only-childという指示もあります。

CSS3

HTMLでは

<div>
<h1>大見出し</h1>
<p>こんにちは</p>
<p>こんにちは</p>
<p>こんにちは</p>
<h2>中見出し</h2>
<p>こんにちは</p>
<p>こんにちは</p>
<h2>中見出し</h2>
<p>こんにちは</p>
<p>こんにちは</p>
<p>こんにちは</p>
<p>こんにちは</p>
</div>

ブラウザ上では

大見出し

こんにちは

こんにちは

こんにちは

こんにちは

以下略・・・と、<div＞塊の子要素の2番目が赤くなります。

#15 属性セレクタを使ってみよう

#15 属性セレクタを使ってみよう

要素の属性でマッチングをかけていくセレクタについて確認していきます。

a[href="foo"]　全体一致　　　「なし」
a[href^="foo"]　先頭部分一致「　^」
a[href$="foo"]　末尾部分一致「$」
a[href*="foo"]　含まれている　「*」

CSS3

HTMLには

　　<ul>
<li><a href="http://dotinstall.com">dotinstall.com</a></li>
<li><a href="http://google.com">Google</a></li>
<li><a href="http://yahoo.co.jp">Yahoo!</a></li>
<li><a href="mailto:taguchi@dotinstall.com">mail me!</a></li>
</ul>

という具合に記述すると、全体一致する部分が赤になります。

（←画像を某所からお借りしました）と表示されます。

#13・14 キーフレームでアニメーション (2)

#13・14 キーフレームでアニメーション (2)

時間的変化ではあるんですが、アニメーションプロパティというものになっています。
６つあるそうです。
animation-name、 animation-duration、 animation-timing-function、 animation-delay、 animation-iteration-count、 animation-direction

これもまとめて記述できるそうです。

CSS3

HTMLだけ

（Bioggerでは自動的にプロパティの順番が変更されるらしい？）

無理のようです・・・

みばえ
×_(._.)_

ちなみに「CSS３・HTMLセット」の#14.htmlを用意してブラウザで開くとうまくいきます。

#12 簡単なアニメーションをつけてみよう

#12 簡単なアニメーションをつけてみよう

時間的変化であります。transitionプロパティは４つあるそうで、
transition-property、 transition-duration、 transition-timing-function、 transition-delay
の各プロパティの値をまとめて指定することができるとのこと。

CSS3

HTML

（Bioggerでは自動的にプロパティの順番が変更されるらしい？）

<div style="background-color: border:2px solid black; background: radial-gradient(yellow, green); height: 100px; margin: 15px; padding: 60px; width: 200px; font-size:50px; font-width:bold;">
<b>みばえ</b></div>
<div hover="height: 200px; background: red;">
という記述は・・・あり得ないようです・・・

みばえ
×_(._.)_

onmouseover属性, onmouseout属性という別の世界なるようです。

また、「画像」を対象にすれば「CSS必要なし！」ともなるとか。

2014年1月22日水曜日

#11 要素を変形させてみよう (2)

回転、傾けこれも色々です。

みばえ★

-webkit-が必要なものもある

というよりChromであれば・・・
？？

#10 要素を変形させてみよう (1)

transform属性

<style>

　　 div {

　　　　width: 200px;

　　　　 height: 100px;

　　　　padding: 30px;

　　　　margin: 30px;

　　　　 background:linear-gradient(red, orange, yellow, green, blue, indigo, violet);

　　　　 border:2px solid black;

　　　　 font-size:36px;

　　　　 font-width:bold;

　　　　　-webkit- transform: translate(300px);

　　　 }

</style>

XYZを加えてとか、まとめて3dをつけてとか、これも色々あります。
それでは、ブログでやってみると・・・
すなわちCSSの記述をHTMLに変えなければならないのですが・・・

みばえ★

#09 円形グラデーションをつけてみよう

#09 円形グラデーションをつけてみよう

CSS

%とか10pxとかcircleとか楕円とかいろいろ入れこみもできるという。

HTML　（Bioggerでは自動的にプロパティの順番が変更されるらしい？）

みばえ

#08 線形グラデーションをつけてみよう

これはCSS3ならではなんでしょうね。

みばえ

google-code-prettify

ソースコードをハイライトする google-code-prettify の設置方法

これを導入すると、ぐっとそれらしくなるようですが・・・めんどくささが先に立っては駄目ですね。

後でやってみましょう。

参考ブログはこちら
http://komitsudo.blog70.fc2.com/blog-entry-168.html

と思った矢先、もっと簡易な方法もあるようです。

syntaxhighlighterの制作者Alex GorbatchevさんがCDNを配信してくださっていますので、Blogger用にはこれを使います。使い方は以下の通りです。

http://www.youngflavor.net/2012/04/82/

こちらを先に試してみましょう。「~~レイアウト~~」→「テンプレート」→「HTMLを編集」ボタンをクリック

◆script class="brush: ***" type="syntaxhighlighter"><![CDATA[ソースコード]]> か
◆pre class="brush:***">ソースコード

どちらかをここに記入（これはその都度入力となる）

登録したソースコードは３つ
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml,js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>

ということは、登録したソースコードの３つ

"brush:Xml.js"

"brush:Css.js"

"brush:JScript.js"

と入力すればいい？

◆pre class="brush:Css.js">

ソースコード

</pre>

これを◆を「<」にしてHTMLにソースコードも一緒に入力してみる・・・

div {
   width: 200px;
   height: 100px;
   padding: 30px;
   margin: 30px;
   background-color:orange;
   border:2px solid black;
   text-shadow:10px 10px 3px red,20px 20px 6px blue;
   font-size:24px;
   font-width:bold;
  }

うまくいかん？

div { width: 200px; height: 100px; padding: 30px; margin: 30px; background-color:orange; border:2px solid black; text-shadow:10px 10px 3px red,20px 20px 6px blue; font-size:24px; font-width:bold; }

おお！Cssはうまくいっていると思われます。
しかし、その都度、手間がかかりますね。

ところで、囲みでやればいいんじゃないか・・・はい。行の番号はあきらめて。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS3</title>
<style>
div {
width: 200px;
height: 100px;
padding: 30px;
margin: 30px;
background-color:orange;
border:2px solid black;
text-shadow:10px 10px 3px red,20px 20px 6px blue;
font-size:24px;
font-width:bold;
}
</style>
</head>
<body>
<div id="みばえ">みばえ</div>
</body>
</html>

テンプレートも元に戻しておきます。

2014年1月21日火曜日

#07 tableタグで表組みを作ろう

<TABLE bgcolor="#0000cc" cellspacing="1" height="71" cellpadding="2">
   <TR>
      <TD bgcolor="#c8e8f9" background="updateb.gif" height="25" width="381">
     </TD>
   </TR>
   <TR>
      <TD bgcolor="#f0f0ff" valign="top" width="381" height="35">
         2009/10/13：○○ページの追加
      </TD>
   </TR>
</TABLE>

上の表記をhtml記述すれば次のようになります。

2009/10/13：○○ページの追加

#07 テキストに影をつけてみよう

#07 テキストに影をつけてみよう

text-shadow:1px 1px あとはいろいろ

すごい「text-shadow」について

text-shadowは奥が深くて、うまく使えばネオンやエンボスといった効果を実現することができます。以下のサイトを参考にいろいろ試してみてください。
http://line25.com/articles/using-css-text-shadow-to-create-cool-text-effects
http://kachibito.net/web-design/css3-text-shadow-sample.html
http://designshack.net/articles/css/12-fun-css-text-shadows-you-can-copy-and-paste/

text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;

国際浮世絵学会50周年とのこと

http://www.ukiyo-e.gr.jp/10/index.html

記念して、大浮世絵展開催中

２０１４年１月２日（木）～３月２日（日）
江戸東京博物館　１階展示室（東京都墨田区）

２０１４年３月１１日（火）～５月６日（火）
名古屋市博物館　特別展示室・部門展示室（名古屋市瑞穂区）

２０１４年５月１６日（金）～７月１３日（日）
山口県立美術館　（山口市）

2014年1月20日月曜日

白浪五人男からうきよえへ

『青砥稿花紅彩画（あおとぞうしはなのにしきえ）』
別名『白浪五人男（しらなみごにんおとこ）』

盗賊を主人公とした「白浪」狂言の１つ。

日本駄右衛門　　　（にっぽんだえもん）
弁天小僧菊之助　（べんてんこぞうきくのすけ）
忠信利平　　　　　（ただのぶりへい）
赤星十三郎　　　　（あかぼしじゅうざぶろう）
南郷力丸　　　　　　（なんごうりきまる）

５人の盗賊が揃いの晴れ着を着て勢揃いし、河竹黙阿弥（かわたけもくあみ）特有の七五調の美しいせりふで一人ずつ名乗りを上げる。

いわゆる「渡りぜりふ」が観客を酔わせる勢揃いの場面を、５つの傘で大胆にデザイン。

なるほど、なっかなか良いですね。

銀座の画廊秋華洞ブログから

浮世絵「白波（浪）五人男」　国明

京都の浮世絵専門店　アート芳桐☆（Art Yoshikiri）から
■商品情報　　4,800円
絵師　：　　国明
時代　：　　文久2年　（1862年）
サイズ：　　2枚続き
説明　：　　シミ汚れ、虫穴、補修あり、薄みり、刷り綺麗☆

　※　国明の役者2枚続き
　　　『白浪五人男』
　

日本駄右衛門：石川五右衛門がモデル。白浪五人男の首領である。
弁天小僧菊之介：着物にはトレードマークである『菊』と『蛇』柄が描かれている。
赤星十三：元は武家の中小姓。忠信利平の仲介で、日本駄右衛門の配下となる。
忠信利平：『義経千本桜』に登場する。神出鬼没な人物像であり、そこが『狐忠信』の姿に通ずる。雲龍柄の着物がトレードマークであり、雲龍は神出鬼没で豪快な者の象徴。
南郷力丸：稲妻と雷獣がトレードマーク。

各々がこのように一人ずつ描かれているのが非常に面白く、しゃれている。

と、うろうろしますと次のようなサイトに、浮世絵探索＝Ukiyo-e.org

Ukiyo-e.org was created by John Resig, a computer programmer and avid enthusiast of Japanese woodblock prints.

ここのソースがすごいです。

2014年1月19日日曜日

#06 演算子いろいろ

#06 演算子いろいろ

ｖａｒ

#05 データ型を知る

#04 変数とは何か？

#03 初めてのJavaScript

#03 初めてのJavaScript

アラートダイアログの文字を改行するには、改行したい位置に¥nを入れます。
alert("出てこい出てこい！\青字と目次");

#02 HTMLを用意する

#01 開発環境を準備する

#07 テキストに影をつけてみよう

#07 テキストに影をつけてみよう

div {
width: 100px;
height:100px;
padding:10px;
margin:30px;
background-color:red;<!-- rgba(ｰｰ>
border:2px solid orangered
opacity:0.7;
text-shadowプロパティは、テキストに影をつける際に使用します。
text-shadowプロパティでは、スペース区切りで<水平方向の距離> <垂直方向の距離> <影のぼかし半径> <影の色>を指定することができます。長さの値には、pxやemやexなどの単位が利用できます。
text-shadow:5px 5px 3px red,10px 10px 3px blue;のような記述です。

２つの影を一緒に指示することもできます。マイナスの値の設定も可能です

#06 ボックス要素に影をつけてみよう

#06 ボックス要素に影をつけてみよう

box-shadowプロパティは、ボックスに1つまたは複数の影をつける際に使用します。 box-shadowプロパティでは、例えば以下のように影を指定します。

box-shadow: 10px 10px;
box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4);
box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;

#04 角丸を使ったテクニック

#04 角丸を使ったテクニック
border-radius …… 角丸をまとめて指定する
border-radius: 0.5em;

指定したプロパティ	border-radius
table要素に指定した値	1em
td要素に指定した値	0.5em

border-radius: 100px 25px 50px 50px / 50px 25px 50px 25px;　を指定

border-radius: 50%;

とか

background-clip背景の適用範囲を指定する際に使用します。

background-image：url('baby.ipg)'

とか

#03 角丸をつけてみよう

border-radiusプロパティは、ボックスの４つのコーナーの角丸をまとめて指定する際に使用します。それぞれの角丸コーナーは４分の１楕円になりますが、楕円の形状は、下図のように水平方向と垂直方向の２つの半径の組み合わせで決定されます。

border-radiusプロパティで角丸を指定する際には、それぞれのコーナーの楕円の形状を水平方向と垂直方向の半径のセットで表します。指定するのは、ボーダーの外側の輪郭です。

水平方向と垂直方向の半径のセットは、スラッシュ（ / ）で区切ります。スラッシュの前後に水平方向と垂直方向の半径の値を、左上・右上・右下・左下の順で指定します。

border-radius: 100px 25px 50px 50px / 50px 25px 50px 25px;

#02 ベンダープレフィックスとは何か？

#02 ベンダープレフィックスとは何か？

http://caniuse.com/

■ベンダープレフィックス

先頭に付ける-moz-や-webkit-など

CSS3で採用される予定の機能が各ブラウザで先行実装されていますが、それらの機能を動作させるには、現状ではプロパティや値の先頭に-moz-や-webkit-などのベンダープレフィックスを付ける必要があります。

例えば、border-imageプロパティで画像ボーダーを機能させるには、 FirefoxやGoogle Chromeなどのそれぞれのブラウザ向けのベンダープレフィックスを付ける必要があります。

主要ブラウザのベンダープレフィックス

-moz-　　…… Firefox
-webkit-　…… Google Chrome、Safari
-o-　　　　…… Opera
-ms-　　　…… Internet Explorer

2014年1月18日土曜日

#01 CSS3とは何か？

2014年1月16日木曜日

#00 CSS3について00

#00 CSS3学習覚書

ドットインストール
動画一覧 (全19回)
#01 CSS3とは何か？
#02 ベンダープレフィックスとは何か？
#03 角丸をつけてみよう
#04 角丸を使ったテクニック
#05 色の指定と透明化
#06 ボックス要素に影をつけてみよう
#07 テキストに影をつけてみよう
#08 線形グラデーションをつけてみよう
#09 円形グラデーションをつけてみよう
#10 要素を変形させてみよう (1)
#11 要素を変形させてみよう (2)
#12 簡単なアニメーションをつけてみよう
#13 キーフレームでアニメーション (1)
#14 キーフレームでアニメーション (2)
#15 属性セレクタを使ってみよう
#16 n番目に来る要素を指定する
#17 ある要素のうち、n番目に来る要素
#18 要素の状態で指定するセレクタ
#19 CSS3のジェネレータを見てみよう