CSSahaムービー 花に囲まれた洋館
出題編以下の画像のどこかが30秒かけて徐々に変化します。さてどこが変わってるでしょうか。IE9以下非対応です、モダンブラウザでご覧ください。 30秒で変化しきってそのあと30秒で逆再生…を無限ループしてますのでじっくり何度も見てればわかるかも。 答えは以下の通り。黒枠にマウスのっけると解答が表示されます。 解答編 前回のが思いのほか気づきにくかった？みたいなのでものっすごくわかりやすいとこ変化させてみました…がさすがにこれは目立ちすぎですね。 ちなみにこれはCSSのキーフレームアニメーション使って作ってます。 問題の画像加工も丁寧にやんないと面白みも半減なのでその辺も頑張んなくちゃ。 んじゃまた。
劇的！（でもない）before after 擬似要素の使い方まとめ
自宅を匠にまかせて改造するほどの資金力なんてとうてい捻出できないゴロドクです、どうも。 普段コーディングするのにbefore/after擬似要素ってほとんど使ったことないんですけど、最近あちこちのCSSのTIPS系ブログ読んで結構使ってる例があったので、勉強がてら自分なりにまとめて備忘録付けておこうと思いまして。 before/after擬似要素 基本的な使い方 まず最初にbefore/after擬似要素とはなんでしょ、という話なんですがこれはHTMLソース上に書かれた要素に対し、【:before】【:after】という擬似要素を付すことで、HTMLソース上には存在しない付加的な要素を、指定した要素の前後に生成する、というものです。 このニュアンスが言葉で説明するのがちょっと上手く行かなくて、自分が理解するのに壁であった部分でもあるんですが。 ものすごくシンプルなソースを見ていただけるとわ
CSSでディスクを回転浮上させるエフェクトのサンプル
CSS演出小ネタ連投です。 【borde-radius】で作った丸型の要素に対し、マウスオーバーでコンテンツを回転させながら浮かび上がらせる方法です。 transformで拡大と回転言葉で説明するのはとっても難しい（けどやってることは全然難しくない）のでさっそくサンプルをご覧下さい。 HTML <p> <span>Shop</span> <a href="#">More info</a> </p> 【p】のなかに【span】と【a】が並んで内包されています。通常時は【span】のみ表示させておいてhoverで【a】を浮き上がらせてこよう、という構想。 p,span,a{ display:block; position:absolute; width:100px; height:100px; border-radius:50%; font-size:16px; text-align:cent
Janetterを激しく使いやすくするプラグインの追加方法とオススメ３つ
当ブログでも何度か取り上げている国産Twitterクライアント、Janetter。ずっとデフォルトで使っててもそう不便は感じないんですが、プラグインを追加することでよりいっそう使いやすくなりますよ。 というわけで今回はJanetterにプラグインを追加する方法とサンプルとしてオススメのプラグイン3つを紹介します。 janetterプラグインの追加方法まず初めにプラグインの追加方法から。大抵プラグインにはreadmeファイルが付いてきてるのでその通りにしてもらえば良いんですが、JS形式で配布されてるプラグインならば Janetterのインストールフォルダ以下に【Theme\Common\js\plugins】というフォルダがありますので、ダウンロードしたプラグインJSファイルをコピーすれば完了。簡単ですね。これで上手く行かない時はプラグイン添付のreadmeファイルをもう一度見てみましょ。
ブラウザをテキストエディタっぽく使うサンプルを作ってみたら意外に単純にできますた
なんだかidea*ideaさんの たった一行でブラウザをシンプルなメモ帳に変える方法 という記事が話題になってまして、ブラウザをメモ帳代わりにするっていうお話なんですが…いろいろ調べてるうちにブラウザ上で動作するエディタができちゃいました。 contenteditableとは件の記事ではWebブラウザのURL欄に data:text/html, <html contenteditable> というのを入力して開くと、ブラウザ自体がメモ帳のようにテキスト入力できるようになるよ！というネタでして、確かにテキスト入力すると書き込めるようにはなってるんですが残念ながら保存はできません。 ブラウザの【保存】でもhtmlとしてしか保存できないしなんだかテキストは実態参照になって（chromeで保存した場合）たり…といった感じなのです。 そもそもこのコードの【contenteditable】っての自体よ
ブログ書くなら『引用の要件』くらいは解っておこう わりと本気で | 56docブログ
WEBの中にどっぷり身をおいているといわゆる「パクリ炎上」事件ってのは定期的にお目にかかる機会がありまして。自分のブログがどこそこのブログに無断転載されたとか、色んなブログのネタかき集めて転載する乞食サービスが始まったとか。 当事者にならないとなかなか著作権とか引用のことについて真面目に考えたりしないですけど、ブログ書いてりゃ他サイトの引用なんて「やらねばならない」ことも日常茶飯事で、そう考えるといつ自分が「権利侵害者」側にまわるかわかりません。 「良識の範囲」でやってれば大抵問題ないんですが、これがまた曖昧模糊としていて個人の解釈が大幅に違ったりするので、具体的な「引用の要件」についていま一度確認しておいたほうがいいですよね、そろそろ。 定義と要件 著作権法の本文は総務省のe-GOVサイトで確認できるので最低限これくらいは流し読みしておいてください。 著作権法 法律上の「引用」の取り扱い
新クラウドサービス「PHP APPS」が最強の無料ブログサービスになりそうな件
無料のブログサービスといえばアメブロやFC2、bloggerなどが有名です。かくいう私も忍者ブログの無料レンタルシステムを利用して当ブログを運営しています。 多くの人がこれらのメジャー系無料ブログサービスを利用していると思いますが、ここへ来て新たな無料ブログサービスが誕生しました。これはもしかしたら最強になるかもしれない。 ネットオウルがphpアプリケーションの無料クラウドサービスを開始まずはニュース記事で概要を。 WordPressなどPHPアプリを無料で利用できるクラウドサービス、ネットオウルが提供開始ネットオウルは2012年10月17日、オープンソースのブログプラットフォーム「WordPress」などのPHPアプリケーションを無料（広告表示付き）で利用できるクラウドサービス「PHP APPS」（写真）を提供開始した。サーバー構築や運用の知識を必要とせず、簡単なフォームを埋めるだけです
CSSのみ画像不要の吹き出しの作り方を若干丁寧に解説してみる
WEBページの演出で吹き出しの中にテキストが入ってるのをよく見かけますが、あれのやり方をかなり最近まで知らなかったゴロドクさんです、どうも。 CSSのbefore/after擬似要素の説明で吹き出しのサンプル紹介してるんですけど、今回はそれについてもうちょっと詳しく書いておこうかな、と。 吹き出しの矢はボックスのボーダーで描画します ベースとなるHTMLは以下の1行のみです。 <p class="balloon">ゴロドクさんイケメン過ぎて泣けた！</p> クラス指定なので１つCSS定義しておくと同じ演出を繰り返し使えますね。 divタグネストとかでも同様のこと出来るんですが、HTMLソースがスッキリするのでbefore/after擬似要素を利用します。ご存じない方は事前に 劇的！（でもない）before after 擬似要素の使い方まとめ | 56docブログ を読んでおくと分かり良いと
CSSのみ画像不要のストライプ背景の作り方を若干丁寧に解説してみる
縦ボーダーのシャツを着ても縞のゆがみなんて全く気にならないガリのゴロドクさんです、どうも。 CSSで作る吹き出しの記事がなかなか評判良かった（WEBクリエイターボックスさんにツイとFBで拡散されて見たことのない時間PVになりました。ありがとうマナさん！）ので画像不要・CSSのみの定番演出シリーズ第2弾ということで「ボーダー柄の背景」の作り方を解説します。 ツートンのバックグラウンドイメージを繰り返す ベースとなるHTMLは例によって1行のみです。どのタグでも良いんですがとりあえず中身のないdiv要素を用意してこれに適用することとします。 <div class="stripe"></div> CSSではクラスで管理しようと思いますので適当にクラスを付けておいて下さい。 基本となるCSSは以下の通り。 .stripe{ display:block; width:425px; height:22
さっそくレビュー、ツイッター公式「埋め込みタイムライン」の使い方
ツイッターアプリで自分のタイムラインをウェブサイトやブログに埋め込むウィジェットはサードパーティ製でいくつかありましたが、2012年9月6日、ようやくツイッター公式のツールとして公開されました。 サイト向けに「埋め込みタイムライン」の提供が始まりました。blog.jp.twitter.com/2012/09/blog-p… — twjさん (@twj) 9月 5, 2012 早速このツールの試用をしてみたいと思います。 ※記事末尾にいくつか追記しました。 そういえば今まで公式ではなかったよね公式の発表は以下の通り。 サイト向けに「埋め込みタイムライン」ができました2012年9月6日木曜日 サイトの上に簡単にTwitterのタイムラインを表示できるツール「埋め込みタイムライン」の提供を始めました。ブログの隣に表示したり、＃ハッシュタグを使ったイベントのページに表示したり、スポーツの試合ページ
初めて独自ドメインでウェブサイトを運営するときに覚えておくべき基本事項
当ブログも独自ドメイン運営に切り替えて数日経ちましたがその際に知らんことだらけでしたので、フォロワーさんに色々教えていただき補完してもらったことの備忘録です。 同じようにこれから独自ドメイン取得してブログなりウェブサイトなりの運営をしようという人の参考になればと思い記録しておきます。 「あなたがインターネットでページを見る」仕組み分かっているつもりで曖昧だったので基本的なところの復習から。専門用語の解説としては言葉足らずだったり誤解を招く可能性もなきにしもあらずですが、必要な部分だけ理解できるようあえて端折って説明します。補足は記事最後尾のほうで。 IPアドレスインターネットに接続しているコンピューターには「IPアドレス」というユニーク（固有）な識別のための数値が必ず割り振られています。IPアドレスはIPv4という方式においては通常0.0.0.0～255.255.255.255まで、8ビッ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
