Home > HTML/CSS(ウェブ言語)

HTML/CSS(ウェブ言語) Archive


スポンサーサイト


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  • Comments (Close): -
  • TrackBack (Close): -

ユーロドルで負けました!(CSS3おっぱいアニメ含)


タイフーンこあいね。雨って苦手。寒いのもイヤ。
昨日はニュース見てからさっさと寝ました。

ユーロドルはそろそろ落ちる頃と勝手に判断したら、いきなり上げやがって50Pのロスカット!
かといってもあの最安値を見てしまっているとどうしてもロングなんかできなかったもん。クスン

痛いけど仕方ない。 しばらく死んだフリしてます。


関係ないけどさ これ楽しいよー。ただし男目線で見ないとダメですお。L.A女のBOOB JOB (人口おっぱい)
みたいだけど CSS3(web 上だけで)でこんなアニメーションができちゃうなんて面白すぎるじゃん。揺れぐあいとか、ぷるるんっとした感じがバーチャルリアリティ。Web Kit の為せるわざ。こういうことして遊べる余裕がムダにカッコいいというか、うらめしいーというか、羨ましいです。うーたんのエロさ加減をここでもかいま見た。

自分のおっぱいもこのくらい揺れたら楽しいな!(むりっ)

感心してないでKellyもCSS の勉強頑張らないと。

続きはシングルページで。
スポンサーサイト


おサルでもできるPure CSS トリック自分用まとめ


screen1.gif

hate-if6

iphone4 grad-logo-png

luv-grad.jpg

screen9.gif
screen8.jpg

夏はぶっとい黒文字を見ると暑くるしい。誰でもカンタンにテキストを涼しくオサレにする方法ってないか?うん。あった。 


つぶやく時間でweb1ページが出来上がるZEN Cordingがステキっ


はろにちわん。久しぶりのポストです。
トレーディング禁止命令がまだ解除されてないので今日はちょっとしたWEBネタ。Kellyはというと、今更ながらCSS3とJQueryの魅力に取り憑かれてます。ハマりだすと止らない。最初のきっかけって、みんな同じと思うけど、例えば尖ったボックスじゃなくてまるっこい方がかわいいなーとか、暑苦しいボールドの文字にグラデーションあったらオッサレじゃない?でもどうやるんだ~?みたいなことから始まるわけ。CSSで思い出したけどさ、最近いろんなテクニックサイトで話題になっていたZEN Cording、Kellyも入れてみた。そしたら、わお~すげー。ツイッターのつぶやきより短いコード入力でWeb1ページのファンデーションが出来上がりっと!2年まえのわたしなら何がすごいんだよ?くらいに意味不明だったと思われるけど、これの良さが分ってきたってことは進化した証拠だおー。
今このブログで使っているvicuna CMSの開発者もブログで絶賛してた。プロにはたまらないツールが誕生したわけですね。
ただしこれを効率よく使う前提は、基本のエレメンツをDeployできるスキルが必要。スタイリングがすでに先走っていて脳内HTMLが出来上がっている人にとってはサイコーだな。ボクちゃんも頑張るぞっと。


説明するよりムービーみた方が早いお。
USTでZEN cordingしちゃったコモリさんのライブもステキ♫

<div#coding>h1#textmate-with-zen+p.tagline

を入力して「Cmd+E(Coda版とDWのMXP版はCtrl+,)」で展開すると下記のコードがどーんと入ります。

<div id="coding">
 <h1 id="textmate-with-zen"></h1>
 <p class="tagline"></p>
</div>
記事内にちょくペーストしたら勝手に生成されてた。 そらそーだ。 あははっ


 

この書式を見てすぐ気付く方もいると思いますが、まるでCSSのセレクタを書くかのように「#」でid属性、「.」でclass属性、「>」で階層、「+」で隣接している 要素を繋げられます。つまり、HTMLの文書構造が明確で頭の中で書くことが決まっている場合は、1行で書いて展開した方が圧倒的に速いってわけです。
※idは「Cmd+3」、classは「Cmd+2」のショートカットもある。
同じ事の繰り返しは「*」、数字を付けるなら「$」構造がわかっていればこのように簡単に展開できますが、HTML文書というのは同じ要素の繰り返しというのも結構な確率で登場します。たとえば、ナビゲー ションのli要素だったり定型のdivとhとpの繰り返しだったり。そんな時は「*繰り返す回数」を付け加えればOK。

ul#nav>li*3>a と 書いて展開してすると、

一瞬でこれ。
<ul id="nav">
 <li><a href=""></a></li>
 
<li><a href=""></a></li>
 
<li><a href=""></a>
</li>

</ul>

で、これを書いていて一瞬呪いにハマった。この< > は今度どうやって表示させるんだっけ? アふぉ~ そのままかけばいいんじゃん。って思ったけど、カンタンにはいかないのが特殊文字のやっかいなところ。くぅめんどくさい
→ &lt; &gt; これを記事内に表示させる方法を説明しようとすると更にイラっとくるわけです。
&lt;の頭に&amp;と書く。


こんな感じでコードが 展開されます。TABキー(Shift+TAB)で、それぞれのhref属性とa要素の中身を移動できるので入力もスムーズィー 楽勝です(笑)

Zen-Coding Ext. from komori, masaaki on Vimeo.

もろ和風なついったーバッジ イケてるぅっ


めちゃかわいい和風なついったーふぉろーみーバッジの紹介。
設置は死ぬほどかんたんです。左右、場所、好きなポジション選んだらソースを貼るだけ。JavaScript で動作してます。
注)信じられないがJavaScript不可のブログサービスもまだまだあるみたいだ
日本では楽天ブログ、Yahoo!ブログ、エキサイトブログ、 gooブログ、はてなダイアリーがダメ。アメブロはプラグインスペースの中のみ動作します。それ以外の方法はたぶんないと思う。

普通のFollow ME バッジにもう飽きちゃった人はこういうのいいんでない?外国人にもウケそうだ!

Kellyが気にいった順ばんからアップしてるよー どうぞっ

hyakuninL_200261.jpgtabacco_chaL_200256.gif

syaraku_puL_200282.jpgkaruta_blL_200278.jpg

ocha_whL_200139.gif

オリジナルの素材やさん →ここ

IE ブラウザでのJavascript エラーについてのお詫び



IEブラウザで観覧している全ての方へ

先週からエラーが出てIEブラウザ6~8でアクセスすると接続が中断されると報告を頂きました。追加した新しいコードに原因があったみたいです。java script 専門でフェティッシュでステキなサイトも運営しているhisasannさまにヘルプして頂いてるうちにHeart rails 自身がTwitter上でそのやり取りを発見して指定のコードにミスがあったことを認めて謝ってきました。このように第3者を巻き込んで良い回転ができていくって素晴らしい。人間がみなカンペキではないのだし。人のつぶやきでこれからも沢山の改善がされていけたらステキだなって思った。ちょっとしたことなんだけど今日はなんか久しぶりにweb上で人とのつながりを感じた日だった。こういう緊急なときにもTwitterは活躍します。改めてTwitterのすごさを実感した。そのあとコードの修正をしたようなのでもうダイジョウbooかもしれません、が、まだ怪しいのでしばらくbadge は入れないことにします。

ご迷惑をおかけして大変も申し訳ありません。Hisasann さま、ご協力頂いたみなさま 本当にありがとうございました。m(_ _)m




にほんブログ村 為替ブログ FX 女性投資家へ

▶Kellyは投資家ランキングに参加しています 応援して下さい

▶北アメリカ情報ブログランキング

「ドルフィンFX」新規口座で5,000円キャッシュバックキャンペーン!
Kelly愛用FXエージェントぐぅ~d^^b

TB 復活しました


先週からずっとシステムダウンしていたTweetBoard生き返りました。ナイスなトレード情報を持った人、勝手にボソボソつぶやきたい人、Kellyに文句を言いたい人、チャットかわりにしたい人、などなど どんな奴らも大歓迎。楽しんでください。どうぞ。

Mediabox の実装(今ほしいものBest 3 含)


Hiya !
新しいwebのプログラミングやスクリプトを覚えることがいっぱいあって頭がバクハツ状態の今日このごろ。。。仕事のためだから頑張らないとと気合いを入れてるけどムダに時間だけがすぎていく^^;ライトウェイトで動きもスムーズなのでjqueryのプラグインなんかはこのブログにももっと取り入れたらいいんだけどね、実装が楽になってきたとはいえめんどうくさいよ、ホント。でもLitebox のメディア版,mediaboxは近いうちに実装してみたいです。Lightboxは使い方によってはユーザビリティに適さないものも多いけどmediaboxなら画像はあたりまえ、Flash コンテンツ、動画、iflame までほとんどのタイプをフェードインアウトでポップアップ表示してくれる。つまりこれ1つあれば何も入らないってことでしょ?めちゃいいじゃん。なんといってもスペースをとられないのはいいよね。問題なのはmac os がサポートされてないこと。時間ができたらWin を使って試してみよう^^

mediabox 実装したい人はここでダウンロード↓
http://www.skuare.net/test/mooMediabox.html


でもトレードの方はなぜか怖いくらい上手くいっています。7月から負けなしで自分でもびっくり。ニュース見ないうちにアラブの方ではオイルでドルの取引を停止にするとかなんとか、、、また為替に影響しそうなぶきみな話ばかりでイヤになります。毎日毎日ニュースが多くてついていくだけで大変。自分のやりたいことにも集中できないくらい。

夢の中でみたkellyが今いちばんほしいもの
images-wants.jpg
スティックタイプのバター これは忙しい朝にサイコー!
http://weird-newsblog.blogspot.com/2008/02/butter-stick-type.html
usdbill-wallet.jpg
キャッシュがなくても毎日金持ちWallet !
purple1.jpg
ギークな MacBook Air )できればパープルじゃなくてボディはショッキングピンク、キーボードをパープルでお願いします。
実際オーダー可能→http://www.computer-choppers.com/
light_macbookpro2.jpg
こんなの持ったらこわくて仕事できねーよヴァージョン。 24金Macbook Pro


応援よろしくお願いします
▶押してねSweeties d^^bにほんブログ村 為替ブログ FX 女性投資家へ


「ドルフィンFX」新規口座で5,000円キャッシュバックキャンペーン!
Kelly愛用FXエージェントぐぅ~ forecast2010 pre
メリマン FORECAST 2010を先取りしたい方はこちらでどうぞ。

インパクトのあるプラグインを実装


Hi !昨日は遅くまでニューヨーカーと仲良く遊んでました^^

今日はWordPressなどのテーマをimprove(向上)できるjqueryのチュートリアルです。Webネタですみません。。。

意味わかんね~よ!って人はスルーで。


jankopeg.jpeg

シンプルでお洒落なのにカンタンに実装できちゃうプラグインです。これはソーシャルサイトを表示するスライドリンク。
セルビアのJANKOさんがjqueryと使ってスタイリッシュなサイトを作るお手伝いをしてくれてます。
ジャンクじゃくてジャンコだよ。間違えないように^^


Create fancy share box with CSS and jQuery ▶

lightbox-tutorial.jpg

ランダムビューできるポストヘッダーギャラリー
custom fieldで画像と記事をランダムに表示させる。
Wordpress使ってる人は利用したきゃソンだよね。
Create a Stunning Lightbox-Style Random-Post Header

seasonalsconsead.jpg

かわいいRSSのアイコンセット。季節感が出せて良い感じですね。Tutorial9のDavidのサイトから入って下さい。
Freeでダウンロードできます。


JQuery's Attraction


jQuery Tutorials and Plugins to Impress your Friends

Hello !今日はWebネタです。アルファブロガーのDesign Walkerさんとかに刺激を受けてKellyもWebに役立つ情報を一度日本語で書きたかったのでここにアップします。

jQuery っていったい何よ??っていう人のために
jQueryはjavascriptで動作するライブラリの仲間です。
一般的によく使われてきたのがみなさんもよく見た事があるprototype. ほかいろんな種類がありますがprototypeと大きくちがうところはextend(拡張)することがないのでトラブルが少なく繰り返しのスクリプトが必要ないです。(ふつう同時にたくさんのオブジェクトやエレメンツを動かすときかならずリピート作業しています)あともう一つjqueryの特徴はMITライセンスで規制が甘いので気軽に実装できることです^^b
さいきんではデモやわかりやすいチュートリアル付きで
紹介してくれるサイトが増えてきているのでwebデザインも作りやすくなりましたね。
Spyrestudios というサイトでおもしろいプラグインのリンクをまとめています。今回はその中からKellyお気に入りのプラグインをいくつか紹介。

jquery_tuts3.jpg
BBC Radio1zoom Tabs ▲

curtain.jpg
jquery cortains opening with jquery ▲
Live DEMO: see it in action>>

jquery_tuts1.jpg
Creating a Keyboard with CSS and jQuery ▲

ところでビルゲイツのせいで一時Facebookがこわれました。。。
大迷惑ですね! わざとじゃないでしょうか??
update: マイクロソフトおやじはfacebook利用停止になりました^^;
またりまえじゃ~!最初から気がつけ


今週はユーロドル今度こそおしめ狙いたい

Position: USD/JPY 94.77 100.2
 

ランダム画像



あろは^^ 昨日はオーシューから参加する予定だったけどずっとアウトしていたせいでトレードはまだできていません^^;

それから画像の件で「画像がいつもちがうけどどれがホントのKellyさんですか?そのたびに変更しているのですか?」というびっくりメールがきてたのでここで説明します。そのたびに変更したら楽しそうですね!って、、、、あのね。。。
Kellyさすがにそこまでヒマじゃありませんよ~ 画像が変わる理由は下のソースコードです。今日はJava scriptを使った基本のかんたんなソースコードの一例を紹介しておきます。ホントのkellyはどれか、そんなことはどうでもいいのでコーディングの勉強をしましょうね^^

目玉のおやじの部分を自分の好きな画像に変更したらHTMLに下のソースを追加して編集。画像は好きなだけ追加できます。
かんたんですね!プロフィール画像がそのたびに変わると変だと思う人も多いけど個人的にはあまり飽きなくて良いです。他にもオンマウスで画像を変えたりアクセスするたびに変わるリンクバナーの作成方法などは技術系のコーディング専門に紹介しているサイトが山ほどあるのでそちらでどうぞ。


<script language="JavaScript">

   var images= new Array();


      images[0]="目玉のおやじ.jpg1";

      images[1]="目玉のおやじ.jpg2";

      images[2]="目玉のおやじ.gif3";

      images[3]="目玉のおやじ.gif4";


var rnd= Math.floor((Math.random() * 100)) % images.length;



document.write('<img src=',images[rnd],'border="0">');


</script>



Kellyお気に入りFXエージェント ぐぅ~
「ドルフィンFX」新規口座で5,000円キャッシュバックキャンペーン!

Home > HTML/CSS(ウェブ言語)

AUTHOR


不定期ですがInstagramの画像も上げてます、Flickrとクロスポストしてます。iPhoneユーザーは一緒にシェアして遊びましょう。


✐ RECENT COMMENTS
MAILFORM
Contact me ▶

javascriptオフの場合はこちら▽

TRAFFIC FEED
Feeds

Back to Top