タグ

ブックマーク / blog.56doc.net (7)

  • もうCSS3で悩まない チートシート/リファレンス系サイトまとめ

    先日書いたCSS小ネタまとめのようにCSS3も使えば使うほど味が出て、応用次第で色んなことできて楽しいですよね。私も大好きです、CSS3。 IE非対応云々のためハックがどーこーとかめんどくさいことはありますけど。 というわけでここらで初心者からパワーユーザーまでぜひおさえておきたいチートシートページやリファレンスサイトをまとめておきますので参考にどうぞ。 CSS3の困った/アレが知りたい、はここで調べよう 筆者選で7つほど。他にもいろいろあるんですが、読みやすいのメインに挙げてみました。 1.E BISUCOM TECH LAB : CSS3プロパティ&ブラウザ対応一覧 恐ろしくまとまり過ぎているページ。もともと書籍の巻末付録だったものをWebで公開しているらしいです。各プロパティの対応ブラウザが一目でわかるのがありがたい。 ベンダープレフィックスの要・不要とかまで書いてます。時々更新され

    もうCSS3で悩まない チートシート/リファレンス系サイトまとめ
  • CSSキーフレームアニメーションを使ったバナーの作りかた

    広告バナーで多少動きのあるものを作ろうと思ったら現在でもアニメーションgif使うのが主流だと思うんですが、CSSanimationプロパティとキーフレームを使ってそれっぽいもの出来ないかなぁと簡単なものを試作して見ました。 animationプロパティと@keyframesCSS3には【animation】というプロパティがあってこれを使うと【@keyframes】で指定したキーフレームに沿って時間的に他のプロパティを変化させることができます。これによりアニメーション的なものやコマ送り動画(パラパラアニメ)みたいなものが作れます。 …というのを言葉で説明してもイマイチよくわからないと思うのでまずはサンプル成果品をご覧下さい。 ちなみにこのプロパティ、当記事作成段階ではChrome,FireFox,Safariでのみ対応してますのでOperaやIEの方は対応ブラウザでご覧いただきたいと思い

    CSSキーフレームアニメーションを使ったバナーの作りかた
  • 宇宙一わかりやすくチョコスコーンの作り方を解説しますょ

    材料・道具材料は以下の通り。 薄力粉:200gベーキングパウダー:小さじ2ココア:大さじ2グラニュー糖:40gバター:50gチョコチップ:お好みの量鶏卵:1個牛乳:50cc色々粉系混ぜるので粉ふるいはあったほうが良いです。あと生地練るのにゴムベラ使います。 大きめのボウルに薄力粉・ベーキングパウダー・ココア・グラニュー糖をあわせてふるい落とします。 ふくらみが不均一にならないよう、ふるった後も念のためゴムベラで粉を軽く混ぜておくと安心かもしれません。 卵を別の容器割ってよくほぐしておきます。 バターは電子レンジで軽く温め(600Wで20秒ほど)て軟らかくしておきます。半解けくらいでも大丈夫です。室温で戻しておいたのならばすでに軟らかくなってると思うのであえてチンしなくても良いです。 粉を落としたボウルにバターと卵を入れます。 最初はゴムベラで切るように混ぜ、その後ヘラの平らなところで潰すよ

    宇宙一わかりやすくチョコスコーンの作り方を解説しますょ
  • ブログ書くなら『引用の要件』くらいは解っておこう わりと本気で | 56docブログ

    WEBの中にどっぷり身をおいているといわゆる「パクリ炎上事件ってのは定期的にお目にかかる機会がありまして。自分のブログがどこそこのブログに無断転載されたとか、色んなブログのネタかき集めて転載する乞サービスが始まったとか。 当事者にならないとなかなか著作権とか引用のことについて真面目に考えたりしないですけど、ブログ書いてりゃ他サイトの引用なんて「やらねばならない」ことも日常茶飯事で、そう考えるといつ自分が「権利侵害者」側にまわるかわかりません。 「良識の範囲」でやってれば大抵問題ないんですが、これがまた曖昧模糊としていて個人の解釈が大幅に違ったりするので、具体的な「引用の要件」についていま一度確認しておいたほうがいいですよね、そろそろ。 定義と要件 著作権法の文は総務省のe-GOVサイトで確認できるので最低限これくらいは流し読みしておいてください。 著作権法 法律上の「引用」の取り扱い

    ブログ書くなら『引用の要件』くらいは解っておこう わりと本気で | 56docブログ
    k_ume75
    k_ume75 2012/10/31
    文体だけ変えて内容そのまま流用してるとこ、めちゃめちゃあるよね。
  • 商用・無料で利用できる国内フリー写真素材24サイト 2012年10月版 | 56docブログ

    定期的にチェックしてないとリンク切れとかあるんでその辺の確認かねて国内の無料画像素材まとめておきます。定番サイトも多いですが未読のものがあれば参考に。 利用条件の概要について併記しますが、実際に利用するにあたっては各サイトにていま一度確認してからお願いいたします。

    商用・無料で利用できる国内フリー写真素材24サイト 2012年10月版 | 56docブログ
  • CSSのみ画像不要の吹き出しの作り方を若干丁寧に解説してみる

    WEBページの演出で吹き出しの中にテキストが入ってるのをよく見かけますが、あれのやり方をかなり最近まで知らなかったゴロドクさんです、どうも。 CSSのbefore/after擬似要素の説明で吹き出しのサンプル紹介してるんですけど、今回はそれについてもうちょっと詳しく書いておこうかな、と。 吹き出しの矢はボックスのボーダーで描画します ベースとなるHTMLは以下の1行のみです。 <p class="balloon">ゴロドクさんイケメン過ぎて泣けた!</p> クラス指定なので1つCSS定義しておくと同じ演出を繰り返し使えますね。 divタグネストとかでも同様のこと出来るんですが、HTMLソースがスッキリするのでbefore/after擬似要素を利用します。ご存じない方は事前に 劇的!(でもない)before after 擬似要素の使い方まとめ | 56docブログ を読んでおくと分かり良いと

  • さっそくレビュー、ツイッター公式「埋め込みタイムライン」の使い方

    ツイッターアプリで自分のタイムラインをウェブサイトやブログに埋め込むウィジェットはサードパーティ製でいくつかありましたが、2012年9月6日、ようやくツイッター公式のツールとして公開されました。 サイト向けに「埋め込みタイムライン」の提供が始まりました。blog.jp.twitter.com/2012/09/blog-p… — twjさん (@twj) 9月 5, 2012 早速このツールの試用をしてみたいと思います。 ※記事末尾にいくつか追記しました。 そういえば今まで公式ではなかったよね 公式の発表は以下の通り。 サイト向けに「埋め込みタイムライン」ができました 2012年9月6日木曜日 サイトの上に簡単にTwitterのタイムラインを表示できるツール「埋め込みタイムライン」の提供を始めました。ブログの隣に表示したり、#ハッシュタグを使ったイベントのページに表示したり、スポーツの試合ペ

    さっそくレビュー、ツイッター公式「埋め込みタイムライン」の使い方
  • 1