タグ

関連タグで絞り込む (287)

タグの絞り込みを解除

Tipsに関するwackyのブックマーク (1,494)

  • CSSグラデーションのちょっとしたテクニック #2

    前回のエントリのような応用するための基本というものではなく、CSSグラデーションはこういう使い方もできるよ的なもので３つ。普通のグラデーションの作り方はcss gradients in Firefox 3.6とかで。#3はない。 以下プレビュー画像のリンク先がデモ・ページになっているのでそちらも参照のこと。もちろん対応ブラウザのFirefox 3.6とSafari 4やChrome 4以降でないと動作デモは確認できない。 Vista風のテカってるボタン ありがちだけど作れたらなかなか便利そうなので挑戦してみたら、意外に簡単だった。実はdoubleなborderが重要で、これが無いとちょっと間抜けな感じになる。コード的には難しいことはなく、上半分にrgb(138, 138, 138)からrgb(102, 102, 102)、下半分にrgb(36, 36, 36)からrgb(0, 0, 0)と

    wacky
    wacky 2009/12/22
    CSSグラデーションの応用例。Vista風の光沢ボタン、行のストライプ化、チェック（格子）柄。面白いサンプル。Firefox 3.6+ / Safari 4+ / Chrome 4+のみ対応。
    リンク

  • CSSグラデーションのちょっとしたテクニック #1

    リリースを間近にひかえたFirefox 3.6で対応されるので、そこかしこで取り上げられているCSSによるグラデーション。基本的な書き方はIntroducing CSS Gradientsやcss gradients in Firefox 3.6を始めとして腐る程あるのですっ飛ばすとして、実際にボタン等で利用する時にどうすれば簡単に書けそうかということをちょっと考えてみようとかいう話。勢いで#1とかつけてしまった……。 button要素にCSSによるグラデーションをかけるには以下のように書くことになる。 button { background-image: linear-gradient(top, rgb(204, 204, 204), rgb(102, 102, 102)); background-image: -moz-linear-gradient(top, rgb(204, 204

    wacky
    wacky 2009/12/22
    CSSでbutton要素にグラデーションをかけるサンプル。マウスオーバーで背景色が変わる効果あり。RGBaの透明度を利用するのでコードがシンプル。IEにも対応。
    リンク

  • 1px欠けの角丸ボックスをCSSだけで作る方法｜web bibo

    スタイルシートだけで1px欠けの角丸を作る方法です。この角丸を使用することでシャープすぎるボックスを少し柔らかい印象にすることができます。 HTML 下記の通りHTMLを記述します。 <div class="outer"> <div class="inner">1px rounded corners</div> </div> ボックスにボーダーを付けない場合 .outer { margin: 0px 1px; padding: 1px 0px; background: #0cc; } .inner { margin: 0px -1px; background: #0cc; } ボックスにボーダーを付ける場合 .outer { margin: 0px 1px; background: #E4F2FF; border-top: 1px solid #B1C6D9; border-bottom:

    wacky
    wacky 2009/12/22
    角の欠けたボックスをCSSで作る方法。内側divを外側divの左右にはみ出させて十字状にする。borderありとborderなし。
    リンク

  • 証明写真を30円で手に入れる方法 | nanapi[ナナピ]

    証明写真を30円で手に入れる方法 に関するライフレシピをご紹介します。nanapi [ナナピ]は、みんなで作る暮らしのレシピサイトです。結構高い証明写真 証明写真は一回あたり700円位しますよね。結構高いです。しかもだいたいの場合、撮った時期から3ヶ月を過ぎると新しいものを使用しなくてはならず、全部の証明写真を使い切ることなく捨てる場合もあります。 もったいないですね。そこで、30円で手に入れる方法を紹介します。 証明写真を必要な分だけ安く購入する方法 1: 自分で写真を撮る デジタルカメラやiPhone、携帯電話で自分の顔写真を撮ります 2: パソコンに転送する ケーブルでつないだりメールに添付したりして、撮った写真をWindowsに転送します。 3: 「証明写真をつくろう」 を利用する 「証明写真をつくろう」というソフトウェアで証明写真画像ファイルを作ります http://www.v

    wacky
    wacky 2009/12/16
    自分で証明写真を作成して料金を押さえる技。デジカメ撮影 → 専用フリーソフトで加工 → コンビニでプリント（30円）。資格用の証明写真などにば良さそう。
    リンク

  • Flashの描画速度をBitmapDataクラスを使って上げる方法 - しっぽのブログ

    Flashでゲームなどを作る時に、動作の重さは悩みの種です。 軽い容量となめらかな拡大縮小が長所のFlashなのですが、その分、描画速度は犠牲になっていて、フルフラッシュサイトでCPUをガンガン食われてしまった経験もあると思います。 この重さを解決する方法の１つとして、BitmapDataを使うというものがあります。 これは素材をgifやjpegにする、という話ではなく、表示部分の扱いをビットマップデータにしてしまうというものです。 たとえ素材がgifでも、MovieClipとかに入れてたくさん表示しているととたんに重くなってしまいます。 これをBitmapDataとBitmapクラスによる表示に切り替えるだけで、軽くできることがよくあります。 ちょっとサンプルで体感してもらいましょう。 wonderflにはこういう実験作品があるのでちょっと拝借。（リンク先の画面右側の三角マークを押せばサ

    wacky
    wacky 2009/12/16
    ActionScriptのBitmapDataクラス入門。
    リンク

  • CSS のみで吹き出し

    hail2u.net - Weblog - Pure CSS な吹き出し に触発されて、画像や JavaScript を使わずに CSS だけを使って「吹き出し」を作る方法を僕も考えてみた。 Demo: CSS のみで吹き出し マークアップは 2 重の要素があれば OK。ここではそれぞれ bubble と body というクラスを付与した div と p を例に説明する: <div class="bubble"> <p class="body">Speech!</p> </div> CSS の最低限必要な部分のみを抜き出すと以下のとおり。これは背景が黒いボックスの下に左向きのしっぽを出す場合の例: .bubble { float: left; /* または position: absolute; */ border-left: 10px solid black; border-bottom

    CSS のみで吹き出し
    wacky
    wacky 2009/12/10
    画像を使わずにCSSだけで吹き出しを描画する方法。外枠と三角形の位置調整にネガティブマージンを利用するため、コードがシンプル。
    リンク

  • Google Chrome 拡張ことはじめ - 2nd life (移転しました)

    2009年12月8日*1(日本時間では12/9朝)、拡張機能が有効(除くOSX)な Google Chrome ベータ版がリリースされました。同時にこつこつ開発を続けてた、はてなブックマーク Google Chrome 拡張ベータ版も公開したので、良かったら使ってみてください :D http://hatena.g.hatena.ne.jp/hatenabookmark/20091209/1260314705 というわけで、Google Chrome 拡張を作ってみたのですが、その時に参考にした資料やドキュメントをまとめてみました。 Google Chrome 拡張APIドキュメント http://code.google.com/chrome/extensions/docs.html 基本的に上のURLで必要なAPIのドキュメントはまとめられています。またページ中央下の「Doc versio

    Google Chrome 拡張ことはじめ - 2nd life (移転しました)
    wacky
    wacky 2009/12/10
    Google Chrome拡張を開発するにあたって参考になる資料やドキュメント、小技のまとめ。
    リンク

  • wonderflから学ぶActionScript 3.0最適化 | ClockMaker Blog

    いつも勉強になる_level0.KAYACさんのブログでイベント告知(ごはんとFlash -Its a wonderfl rice-)がありましたが、皆さん詳細をチェックしましたか？ ライブコーディングというその場でActionScript 3.0を書いて課題のFlashを作るという企画もあるのですが、私も参戦します。果たして30分で作り上げることができるのか、今から緊張します。 さて、前置きが長くなりましたが、wonderflで検証されたActionScript 3.0最適化手法をまとめてみました。詳細は以下から。 Bitmap関連 Flashの処理速度の最適化において、描画処理の最適化は最も効果があります。ここではスクリプトで高速化した検証結果をまとめてみました。 BitmapDataクラスのdraw()とcopyPixels()だとcopyPixels()のほうが160%高速。 co

    wacky
    wacky 2009/11/19
    ActionScript 3.0の高速化に関する検証スクリプトまとめ。Bitmap関連、数値計算、配列処理、ループ処理など。
    リンク

  • ちょっとセキュアな「いつもの」パスワード - ぼくはまちちゃん！

    こんにちはこんにちは！！ 最近はメールでもなんでもWEB上の便利なサービスが増えてきましたね…！ でも、いろいろ登録しすぎて、いよいよぼくもパスワードが管理できなくなってきました…！ えっ！ もしかして面倒だから、ぜんぶ同じパスワード使ってたりするるんでしょうか…！ だめです！だめだめ！それはだめ。 全部のサイトで同じパスワードにするのってものすごく危険ですよ！！！ これはほんと！ だって、もしなにかあって、どれかひとつのパスワードがばれちゃったら全部芋づるだから…！ 登録したWEBサイトの管理者の中に悪い人がいる可能性もあるし。 (個人運営のサイトはもちろん、たとえ大きな企業のサイトでもバイトちゃんが見れたりとか…) でもだからといって全部別のものにすると覚えられないんだよね。 たとえば自分宛にメールしておくとか… Dropboxのような共有フォルダにパスワードのメモいれとくとか… パス

    ちょっとセキュアな「いつもの」パスワード - ぼくはまちちゃん！
    wacky
    wacky 2009/11/19
    頭で覚えれる範囲でセキュアなパスワードルールの提案。基本パスワードを1つ作り、特定の桁をサービス名の頭文字に置き換える。
    リンク

  • mir.aculo.us JavaScript with Thomas Fuchs » Blog Archive » 6 easy things you can do to improve your JavaScript runtime performance

    November 8th, 2009 Here are the slides from my “Extreme JavaScript Performance” talk that I gave at JSConf.eu on November 7 in Berlin. I’m talking about 6 easy things you can do to improve your JavaScript runtime performance, ranging from simple things (function inlining) to some quite surprising findings on how JavaScript engines deal with loops. There’s benchmarks for the four most common JavaSc

    wacky
    wacky 2009/11/11
    JavaScriptを高速化する6つのテクニック。関数呼び出しを避けインラインに展開、配列やオブジェクトはnewではなく括弧で生成、評価式の記述順を工夫、など。（→ 日本語紹介： http://journal.mycom.co.jp/news/2009/11/11/015/index.html ）
    リンク

  • Pure CSSな吹き出し

    Twitterで「CSSで吹き出し作るのブクマし忘れててどこにあったか忘れた……」とかつぶやいたらe_luckさんがImage-free CSS Tooltip Pointers - A Use for Polygonal CSS?を探してきてくれた。このエントリでは枠線をつけるために入れ子になっていたりちょっとわかりづらかったので、ものすごく単純化して解説してみようとかなんとか。 Pure CSSな吹き出しのサンプル: Speech Bubbles とりあえず、吹き出しの尻尾を左下に出すもの(サンプル内では4つめのサンプル)を例にして説明していく。HTMLコードは以下のようなもので、bubbleというクラス名を振ったdiv要素がコンテナ、bodyというクラス名を振ったp要素が吹き出しのベース、tailというクラス名を振った空のdiv要素が尻尾になる。 <div class="bubble

    Pure CSSな吹き出し
    wacky
    wacky 2009/11/05
    画像を使わずにCSSだけで吹き出し（三角形）を描画する方法の日本語解説。
    リンク

  • とっても使えるoverflowプロパティ。その使い方色々。

    光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。 まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。 さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ～と思ったので自分が良く使うのをまとめてみました。 あんまoverflowプロパティを使った事が無い方は、ビックリですよ！ これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し！！（わかんないけど サンプルとかは以下よりどうぞ。 サンプルサイトを見る サンプルをダウンロード 基本的に、全てoverflow: hidden; の指定を足す事で解決したり実現出来る感じです。 01 clearfixみたいに使う まずは以前の「clearfixを使わないでやるに

    とっても使えるoverflowプロパティ。その使い方色々。
    wacky
    wacky 2009/11/04
    overflow:hiddenの活用例。clearfix代替、リストの最初だけborderを消す、IE6のカラム落ち対策、テキストの回り込み防止、背景の食い込み防止など。
    リンク

  • HTMLDocument の動的な作成: Days on the Moon

    ブラウザ上で、JavaScript を使って HTML のソースから HTML 文書を生成するのに、どんな方法があるのか調べました。なお、以下のスクリプトは HTML 文書上で実行することが前提です。 表の見方 XSLT の HTML 出力 createHTMLDocument メソッド createDocument メソッド createDocument メソッドと名前空間の指定 createDocument メソッドと文書型宣言の指定 createDocument メソッドと文書型宣言及び名前空間の指定 cloneNode メソッド iframe 要素 ActiveXObject CID からの作成 まとめ 表の見方 以下の表において、各項目の意味は次の通りです。 doc HTML 文書を作成できれば○、XML 文書を作成できれば△、それ以外なら×です。HTML 文書かどうかは、cre

    wacky
    wacky 2009/10/30
    JavaScriptを使ってHTMLソースからHTML文書（HTMLDocument）オブジェクトを生成する方法まとめ。ブラウザごとの挙動の違い。createHTMLDocument、createDocument、cloneNode、iframe要素、ActiveXObject("htmlfile")、CID。
    リンク

  • CSS で table に斜線を引く方法

    CSS で table に斜線を引いてみました。下の表の左上の斜線に CSS を使ってます。 サンプル（クリックすればサンプルページに移動します） Windows XP + IE6 / IE7 / Firefox3 / Safri3 / Google Chrome で確認しています。 ポイントは以下です。 th 要素に position: relative; 斜線を引く要素（ここでは span）に position: absolute; を設定。 斜線（border）を適用する要素の前に &nbsp; を設定。&nbsp; がなかったり、要素の後方に&nbsp; があると、th のスタイルが隠れてしまう。 クロスブラウザにするため、font-size や line-height など、いくつかのプロパティを設定。 HTML <table summary="data"> <thead> <t

    wacky
    wacky 2009/10/27
    テーブルのセルを斜めに分割する方法。太いborderの角に生まれる斜め線を利用。実用性は低め。
    リンク

  • C/C++ Technical Documents

    C++ 寄稿記事 επιστημη 氏から寄稿していただいた、開発者の方々にお役に立つテクニカルドキュメントです。Articles、References、Miscelaneousに分かれて説明しています。初心者の方からプロの方まで役に立つ読み物と資料集です。是非、開発のお役にお立て下さい。 Articles: 読み物 References: 資料集 Miscelaneous: 番外編

    wacky
    wacky 2009/10/22
    επιστημη（えぴすてーめー）氏によるC++技術文書。初心者からプロまで役に立つ読み物と資料集。2004年頃から更新停止。
    リンク

  • Firefox と完全にさよならするつもりが、、、ブログ執筆効率化ハックまとめ

    私が Firefox から Chrome に乗り換えた７つの理由*二十歳街道まっしぐら このエントリを見ていて、あれ？なぜまだFirefoxも平行して使ってるんだ？と疑問を感じ、あらゆる手を尽くしてGoogle Chrome で同じ環境を作りだそうとトライしてみました。 しかし、、、ちょっと状況が変わってしまいました。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! 編集とブラウジングの役割が逆転した実は私、普段からブラウジングをFirefox、ブログの編集や管理のためのページを閲覧するのにGoogle Chrome を使っておりました。 その理由は、Firefoxであれば、アドオンを駆使して他のサイトの評価などを見ながらブラウジングが出来ること。 そして、Google Chromeであれば、自動

    Firefox と完全にさよならするつもりが、、、ブログ執筆効率化ハックまとめ
    wacky
    wacky 2009/10/15
    Google Chrome（Devバージョン）のおすすめカスタマイズまとめ。マウスジェスチャ、はてなブックマーク数表示、AutoPagerize、キーコンフィグ、Greasemonkeyスクリプトなど。
    リンク

  • Google Doctype - Google Code

    利用方法 Google Doctype を参照します。 コンテンツ テーブルから興味のあるページを見つけます。 間違いを見つけたり、何か書き加えたいことがあれば、Google アカウントでログインし、ページ上の [編集] リンクをクリックします。 詳細情報 概要 - Google Doctype について ライセンス - 業界標準のソーã

    wacky
    wacky 2009/10/13
    GoogleによるWeb開発者向けのオープンな百科事典。DOM操作やCSSのヒント・コツ、セキュリティやブラウザ互換性の情報、DOMリファレンスなど。（英語）
    リンク

  • Let's make the web faster - Google Code

    Optimizing JavaScript code Authors: Gregory Baker, Software Engineer on GMail & Erik Arvidsson, Software Engineer on Google Chrome Recommended experience: Working knowledge of JavaScript Client-side scripting can make your application dynamic and active, but the browser's interpretation of this code can itself introduce inefficiencies, and the performance of different constructs varies from client

    wacky
    wacky 2009/10/13
    Google Chrome開発者によるJavaScriptコード最適化・高速化のノウハウ集。文字列結合、オブジェクト定義、クロージャの欠点、メモリリークの注意など。（→ 日本語訳： http://d.hatena.ne.jp/tohokuaiki/20090630/1246351679 ）
    リンク

  • IE8互換モードについて - Japan IE Support Team Blog - Site Home - TechNet Blogs

    Microsoft Learn. Spark possibility. Build skills that open doors. See all you can do with documentation, hands-on training, and certifications to help you get the most from Microsoft products. Learn by doing Gain the skills you can apply to everyday situations through hands-on training personalized to your needs, at your own pace or with our global network of learning partners. Take training Find

    IE8互換モードについて - Japan IE Support Team Blog - Site Home - TechNet Blogs
    wacky
    wacky 2009/10/07
    IE8のドキュメントモード（IE8標準モード、IE7標準モード、互換モード）に関する仕様まとめ。ドキュメントモードの切り替え方法、現在のドキュメントモードの確認方法、UA文字列の違い。
    リンク

  • 暮らしの情報サイトnanapiはサービスを終了いたしました | nanapi [ナナピ]

    2020年8月31日(月)をもちまして、nanapiに関わるすべてのサービスは終了いたしました。 nanapiは、2009年のサービス開始より「みんなで作る暮らしのレシピ」という考えのもと、ユーザーの皆さまに生活に関する様々な「ハウツー」を投稿していただく投稿型ハウツーサービスとして運営してまいりました。 約11年間にわたって皆さまからご支援をいただきサービスを継続できたこと、nanapi編集部一同、心より御礼申し上げます。 掲載されていたコンテンツなどのnanapiについてのお問い合わせは、nanapi@supership.jp までお願いいたします。 長きに渡りnanapiを応援してくださり、本当にありがとうございました。

    暮らしの情報サイトnanapiはサービスを終了いたしました | nanapi [ナナピ]
    wacky
    wacky 2009/10/01
    缶ビールを冷蔵庫ですばやく冷やす技。濡らしたキッチンペーパーを缶に巻きつけて冷凍庫で10分冷やすだけ。気化熱を利用。
    リンク
  • 前のページ 1 2 3 4 5 6 7 8 9 10 次のページ

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.