ウィリアムのいたずらの、まちあるき、たべあるき

ウィリアムのいたずらが、街歩き、食べ物、音楽等の個人的見解を主に書くブログです（たま～にコンピューター関係も）

【ＨＴＭＬ５＋ＣＳＳ３】ＣＳＳ３の機能を押し込んでみる

2011-03-09 17:27:37 | JavaとWeb

ＣＳＳ３の新機能を押し込んでみる。
新機能としておもしろそうなのは
　　　・角丸
　　　・影（文字、枠）
　　　・グラデーション
　　　・アニメーション

また、セレクタに関して、機能が拡張したので、それについて。

具体的には、こんなかんじ

悪夢のようなデザインだ（＾＾；）
ちなみに、フッターの部分にマウスを置くと、

のように、色が変わる。

ソースは、前に書いたものをつかっている。

今回は、ＣＳＳ部分を書いてみた。

■ＣＳＳ３全般について

　ＣＳＳ３の独自機能の場合、

 -webkit-box-shadow: 10px 10px 25px #555555;
 -moz-box-shadow: 10px 10px 25px #555555;
 box-shadow: 10px 10px 25px #555555;

　のように、-webkitとか、-mozとか付いたりする。
　これは、ブラウザを示していて、-webkitは、safariとchrome、mozはfirefoxを示している。あとoとかもある。
　実は、Webkit系とmozでは、同じことをさせるのに、書き方が違うところもある。

■セレクタに関して

#main 
{
 clear:both;
 float:right;
}

なんてとき、#mainのところがセレクタ。
セレクタで対象を指定する。何もなく名前だけのときは、タグ名、#はid名、.はクラス名を示す。
例だと mainというID名に対してということになる。

このセレクタが拡張されていて、

input [ type="text" ]

のように、ある属性値のものだけ集めたり、

#topics article:nth-child(2n) 
{
 background-color:#dddd88;
}

のように、要素の偶数番目だけ、なにかする（今回は背景色を変える）ということもできる。
表などで便利？

■角丸

     border-radius: 10px;         /* 一般には　*/ 
     -webkit-border-radius: 10px;    /* SafariとChrome用 */ 
     -moz-border-radius: 10px;       /* FireFox用 */

ってなかんじで指定する。これは、四隅を丸めてしまう場合で、

ひとつの角だと、
     -webkit-border-top-right-radius: 10px;
のように指定する。

■影

文字の影は、

 text-shadow: #aaaaaa 3px 5px 10px;

のように、指定する。

枠の影は

 -webkit-box-shadow: 10px 10px 25px #555555;
 -moz-box-shadow: 10px 10px 25px #555555;
 box-shadow: 10px 10px 25px #555555;

のように指定する。

■グラデーション

 background: -webkit-gradient(
  linear,
  left top,
  left bottom,
  from(#ffaaaa),
  color-stop(0.50, #ffffaa),
  color-stop(0.80, #ffffff),
  to(#aaaaaa)
 );

のようにかく。fromとtoがあれば、color-stopはなくてもいい。
color-stopがあると、途中でまた色を切り替えることも出来る。

■アニメーション

まず、対象のＣＳＳに、

 -webkit-transition:all 0.5s linear;

というように、どのように変化するかを指定して書く。
そしたら、

 background-color:rgba(100,200,255,1);

のように、色の変化が始まる初期値を書き、

変化先を

footer:hover
{
 background-color:rgba(255,0,0,0.5);
}

のようにかく。

■ソースコード

ソースコードは、こんな感じ

header 
{
 float: left;
 width :800;
 height:100;

 font-size:40;
 text-align:center;
 color:#5577ff;

 background-image:url(header.jpg);
 background-repeat: no-repeat;
}

#main 
{
 clear:both;
 float:right;
}

#topics
{
 float: left;
 width : 380;

 -webkit-box-shadow: 10px 10px 25px #555555;
 -moz-box-shadow: 10px 10px 25px #555555;
 box-shadow: 10px 10px 25px #555555;
}

#topics article:nth-child(2n) 
{
 background-color:#dddd88;
}


#pr
{
 float: right;
 width : 200;

 background: -webkit-gradient(
  linear,
  left top,
  left bottom,
  from(#ffaaaa),
  color-stop(0.50, #ffffaa),
  color-stop(0.80, #ffffff),
  to(#aaaaaa)
 );
}

#menu 
{
 float: left;
 width : 200;
}

#menu nav 
{
 float: left;
 width : 200;
 background: #8888ff;

  margin: 0px;
 padding:0;
 
     border-radius: 10px;         /* 一般には　*/ 
     -webkit-border-radius: 10px;    /* SafariとChrome用 */ 
     -moz-border-radius: 10px;       /* FireFox用 */

}

#menu nav ul
{
  margin: 0px;
 padding:10;
}


#menu nav li
{
 list-style-type: none;
 border-top: 1px solid #ccffff;
 border-left: 1px solid #ccffff;
 background: #aaaaff;
}

#address
{
 text-shadow: #aaaaaa 3px 5px 10px;
}

footer
{
 width :800;
 height:30;
 clear:both;
 -webkit-transition:all 0.5s linear;
 background-color:rgba(100,200,255,1);
}
footer:hover
{
 background-color:rgba(255,0,0,0.5);
}

 

他にもいろんな機能があるけど、とりあえず、ここまで

 

ランキングに参加中。クリックして応援お願いします！


 
 
 
 
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

【ＨＴＭＬ５】構造を示すタグ

2011-03-09 15:36:30 | JavaとWeb

ＨＴＭＬ５には、文章構造を示すタグが入ってきているそうだ・・・



■文章構造上、追加されたタグ

　文章構造上、bodyは、いくつかのセクション(意味的なまとまり）にわかれる。
　このとき、セクションの中にまたセクション(子供のセクション）をおいてもいい。
　そして、そのセクションにかんして、いくつかのタグが導入されている。

header　・・・　(セクションの）ヘッダー部分
section ・・・　セクション
footer　・・・　(セクションの）フッター部分

念のために言っておくけど、headとheaderは違う。headerはbodyの中に書く。
また、sectionは、用途というか、内容を明示できるタグもあって、

article　・・・　なんか、ＲＳＳで送るような内容を書くらしい。記事？
aside　　・・・　補足的なこと。たとえば、ＰＲ欄とか
nav　　　・・・　ナビゲーション。どっか先にいくリンク

とかがある。

また、sectionの中に、文字を書くので、Pとかh1とかh2とか・・・があるけど、
このh1,h2・・・のうち、見出しとして使うものを、hgroupとしてまとめることも
できる。

・・・ってことらしい・・・



■文章構造上、変更になったタグとか・・

　逆に、文章構造でなく、物理的なものを示していたタグは、削除されたり意味が変わるみたい。
　たとえば、取り消し線を引くための＜s＞は、「正確でない、関係ないコンテンツ」という意味に変わったらしい。物理的な定義から、意味的な定義になった。

　ただ、Ｃｈｒｏｍｅでみると、取り消し線が引かれているけどね。



■サンプル

　こんなかんじかしら・・・


<html>
<head>
 <title>サンプル</title>
 <link rel="stylesheet" type="text/css" href="mytest.css" />
</head>
<body>
 <header>ＨＴＭＬ５</header>
 <section id="main">
  <section id="topics">
   <article>
    <h1>トピックス１</h1>
    今日さあ、<BR />
    それでね、<BR />
    あのね・・<BR />
   </article>
   <article>
    <h1>トピックス２</h1>
    へー<BR />
    へー<BR />
    へー<BR />
   </article>
  </section>
  <section id="pr">
   <aside>
    <h1>広告１</h1>
    ねえねえ、しってる？
   <aside>
   </aside>
    <h1>広告２</h1>
    ふーん
   </aside>
  </section>
 </section>


 <section id="menu">
  <nav>
   <ul>
    <li>とっぷ</li>
    <li>いれこ
     <ul>
      <li>いれこ１</li>
      <li>いれこ２</li>
     </ul>
    </li>
    <li>お問い合わせ</li>
   </ul>
  </nav>
  <aside id="address">
   住所<BR>
   氏名<BR>
  </aside>
 </section>


 <footer>未来といったら、初音？長洲？</footer>


</body>
</html>






次は、ＣＳＳ３

ランキングに参加中。クリックして応援お願いします！


 
 
 
 
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

IE6,7で、HTML5を動かすためのGoogle Chrome Frameが動かないあなたへ

2011-03-09 11:48:10 | JavaとWeb

ＩＥ６やＩＥ７では、ＨＴＭＬ５(videoタグなど）は動かない。

しかし、Ｇｏｏｇｌｅが出しているプラグイン「Google Chrome Frame」を入れてもらえば、動かすことが出来る・・・って、書かれてる。

じゃあ、入れてみましょう・・・ってので、

・Google Chrome Frame
　http://www.google.com/chromeframeにアクセス、
・右横のダウンロードのボタンをクリックして
・その後の画面で、「同意してインストール」にして
・インストールが始まり、終わって、インストールしたのに、

ああそれなのにそれなのに・・・

Chromeでは、ちゃんと動くvideoタグの動画が、さっぱり、まったく動かない。
ってか、何も変わってないよ、これえ！！

だけど、「ツール」→「アドオンの管理」でみると、ちゃんと入ってる。

そんな、あなたのために・・・



■チェック内容

２つのことをチェックしてみてください。

（１）ソースに、
　　＜meta http-equiv="X-UA-Compatible" content="chrome=1"＞
　（＜　＞は、本当は半角）
　が、書かれていますか？

（２）そのソース、たんにダブルクリックしたとかで、Ｗｅｂサーバーを介さないで、
　立ち上げていません？



■対策

（１）ソースに、metaなんとかを書いてない。

　　　書いてください。はい。書かなきゃだめです。

　　　どこに・・・？というあなたのために、サンプルがある場所をしめします。

　　　ここの画像
　　　http://www.forest.impress.co.jp/img/wf/docs/317/391/html/image4.jpg.html
　　　のように書きましょう。


（２）１回、Ｗｅｂサーバーを通さないと、だめみたい・・・
　　　だから、
　　　　　・自分で、apacheをたてて、
　　　　　・そのhtdocsの中に、作ったＨＴＭＬ５と、ビデオをいれて
　　　　　・http://127.0.0.1/その作ったHTML5.htm
　　　とかして、アクセスすればＯＫ。

　　　一度アクセスすれば、次からは、ローカルのファイルをドラッグアンドドロップしてＩＥ
　　　にいれるだけで表示される（つまり、一回は、どっかのＷｅｂサーバーにアクセスして
　　　読み込まないといけない。１回でも上記（１）を書いたページにアクセスすればＯＫ）



　　　・・・え、めんどっちい、ですって（＠＿＠！）
　　　なんて、横着な・・・
　　　しょうがないなあ・・ウィリアムのいたずら様が、どうにかしてあげましょう。

　　　このサイト
　　　http://www.geocities.jp/xmldtp/h5_IEtoHTML5.htm
　　　にアクセスしてください。
　　　videoは使ってませんが、（１）のタグをいれて、ＨＴＭＬ５で書いています。
　　　具体的には、角丸の四角形で、色は、赤の５０％なんだけど、そこにマウスを持っていくと、
　　　だんだんと、緑の５０％になれば、ＯＫ。

　　　で、そのあとから、ローカルのファイルをみれば、みれるよ
　　　（でも、（１）のmetaは、いれてね）



な感じでうまく行った。

ＩＥ６，７は変えられないけど、ＨＴＭＬ５をつかいたーい！
とくに、silverLightでjavascriptより、videoタグを使って、簡単にやりたーい！！
って人には、さいこーかも！

ランキングに参加中。クリックして応援お願いします！


 
 
 
 
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

JARL、原会長辞意表明

2011-03-09 05:42:49 | Weblog

めーるおーむ（「アマチュア無線総合情報誌」なの？って、表題は、なってる）のメルマガで、

　　さて、原会長辞意表明の話は皆さん、すでにご存じでしょうか？
　　支部大会でも話がされていました。
　　JARL会員の皆様は、JARLWEBサイトの理事会報告にてご確認下さい。


おお（＠＿＠！）これは見なきゃ！
ここ(JARL会員でないと見えない）

の一番最後（以下太字は上記サイトより引用）

　会議終了後、JA1AN 原会長から健康上の理由により会長職を辞したい旨の表明がありました。
　会長職辞任の時期等詳細については、一般社団法人への移行認可及び法人登記等の都合もあるため、４月開催の理事会において、決定することとしました。


おお、まじまじい！！



P.S　ちなみに、＜主な報告事項＞の５

モールス技能認定試験の実施について
　平成23年2月12日(土)、連盟事務局にて実施し、受験者数は欧文2級1名、総合2段1名、総合3段1名となっている。


欧文2級を受けたのは、ウィリアムのいたずら様だ！
結構、とれなかった文字もあったんだけど、
どうにか、受かりました・・・ｖ

ランキングに参加中。クリックして応援お願いします！


 
 
 
 
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

3月8日(火)のつぶやき

2011-03-09 02:14:32 | Twitter
18:58 from goo
IPV4アドレス枯渇問題への対応（World IPv6 Dayについてとか） #goo_xmldtp http://blog.goo.ne.jp/xmldtp/e/52ba56df8d1f05596631f8fa888e34d8
19:02 from web
Android技術者認定試験っていうのがあるらしい http://www.oesf.jp/modules/training/index.php?content_id=2
by xmldtp on Twitter

ランキングに参加中。クリックして応援お願いします！


 
 
 
 
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

カレンダー

2011年3月
日 月 火 水 木 金 土
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31

ブログランキング


人気ブログランキングへ

アクセス状況

アクセスアクセス
閲覧 1,183 PV DOWN!
訪問者 672 IP UP!
トータルトータル
閲覧 34,688,252 PV 
訪問者 8,612,278 IP 
ランキングランキング
日別 665 位 UP!
週別 730 位 UP!

プロフィール

自己紹介
ろくでもない人です。

最新コメント

バックナンバー

ブックマーク

goo
最初はgoo
  • RSS2.0