CSS 3のセレクタ「:target」でタブメニューをつくる - builder by ZDNet Japan
CSS 3のセレクタ「:target」を利用すれば、リンクをタブメニューの形で表示して、1ページ内に記述したコンテンツを切り替えて表示するように指定することが可能だ。HTMLとCSSだけでタブメニューを作成する場合、これまではコンテンツごとにページをわけて作成する必要があったため、1ページで実現できるメリットは大きいと言える。 ここでは、positionプロパティを指定して「テキスト1」から「テキスト5」を同じ位置に重ねて表示している。その上で、リンクをクリックしてターゲットとして表示されたときにだけz-indexプロパティを適用して、手前に表示するように設定した。 div{ position: absolute; top: 17px; left: 20px; } #text1:target{ z-index: 2; } #text2:target{ z-index: 2; } #text
CSS 3のセレクタ解説：:root、:not、:empty、:target - builder by ZDNet Japan
:rootはルート要素にスタイルシートを適用するためのセレクタだ。ルート要素とは最上位階層に位置する要素のことで、HTML文書では全体をマークアップしているがルート要素となる。 テキスト 本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。 ※ と に注目 これに対して、:rootで次のようにスタイルシートを指定すると、コンテンツ全体が黄色い罫線で囲んで表示される。さらにここでは、でマークアップしたbody要素を黄緑色の罫線で囲むように指定しており、body要素はルート要素の内側に表示されることがわかる。
ニテンイチリュウ : アップルデザインプロセス
ちょっと古い記事ですが、昨年のSXSW(South by SouthWest)にて、Appleのエンジニアリング・マネージャーMichael Loppが語った、ほかの多くの企業がトライし、失敗する「デザイン性」という強みを手に入れることができているアップルのデザインプロセスの秘訣 完璧なモック 膨大な量の作業と時間を要するが、完璧なモックを作成する。そうしておけば、後で手戻りが発生しないから。 10 から 3 、そして 1 どんな新しい機能や製品でも、その完璧なモックを10個作る。その10個の構成は、他社でもよくあるように、10個の内の3個のモックをよくみせるための残りの7個（3案が言うなれば、本気、残り7案が間に合わせ的。）ではない。制限のない創造性のなかから生まれるものという考えから、10案作られる。そしてそこから3案のモックが選ばれ、さらに時間をかけて、１つのものが選ばれる。 ペ
日本のゲーム会社は“島国根性”を捨てよ――iPhone・Facebookアプリで世界へ
中小のゲーム開発会社にとって、「iPhone」やSNS「Facebook」は、新たなビジネスチャンスをつかめるプラットフォームだ。実績の少ないベンチャーでも、自社のゲームアプリを世界に向けて配信でき、ユーザーから直接対価を得られる。 コナミ出身の南雲玲生社長が運営するゲームベンチャーのユードーは、App StoreやFacebookでゲームやアプリを配信。App Storeで公開したアプリは、3カ月で有料・無料合わせて250万回ダウンロードされたという。 だがユードーのように身軽に世界展開する日本のゲーム会社は少ない。英語への苦手意識や“島国根性”が邪魔をしていると、ベンチャー共同創業・経営支援会社の赤羽雄二マネージングディレクターは指摘する。 「OGC 2009」のパネルディスカッションで、南雲社長と赤羽さんが議論。ゲームジャーナリストの新清士さんがモデレーターを務めた。 「iPhone
OGC2009 での発表資料 - naoyaのはてなダイアリー
昨日開催されました OGC2009 にて、はてなブックマークのコミュニティについて発表させていただきました。 INTERNET Watch さんなどでも取り上げていただいてます。 http://internet.watch.impress.co.jp/cda/event/2009/02/05/22342.html http://game.watch.impress.co.jp/docs/20090206/ogc_net.htm 以下に発表資料を公開します。(ウェブでの公開用に少々編集を行いました) OGC2009 はてなブックマークについてView more presentations from Naoya Ito. (tags: hatena) 後半時間が足りずに飛ばしてしまったので、記事では触れられていませんが、まだまだ課題が山積みです。今後も継続的に改善していきたいと思っています。
戦艦三笠と稠密感 - 成毛眞ブログ
船舶模型を作るのは人生初だ。日露戦争の日本海海戦で活躍した戦艦「三笠」のプラモデルである。ネットで「HIGH-GEARed」さんという方の制作記を発見し、これだけの手引きがあれば自分もできるかもしれないと着工したのだ。手馴れた人だと2日目という感じの工程に至るまで1ヶ月も掛かっている。写真を撮るにしても、とてもアップに耐えられない。これからミリ単位のエッチングパーツの手すりなどを取り付ける工程に入ることになる。 つくづく日本人はこのような稠密感が好きなのだと思う。昨年のNHK大河ドラマ「篤姫」のヒットの原因は主役の宮崎あおいの好演によるところもあるのだろうが、この稠密感にもあったと思う。大奥の話だからほとんどが室内での撮影だった。そのためいつもより多くの予算を衣装に回すことができたのかもしれない。ハイビジョン化された画面にこれでもかと美しい着物が乱舞した。 民放のスタジオセットもケバケバし
JS charts – The free JavaScript chart generator
What is JS Charts? JS Charts is a JavaScript based chart generator that requires little or no coding. With JS Charts drawing charts is a simple and easy task, since you only have to use client-side scripting (i.e. performed by your web browser). No additional plugins or server modules are required. Just include our scripts, prepare your chart data in XML, JSON or JavaScript Array and your chart is
ウェブインターフェイスの６原則
既に英語版が発売されている「Designing Web Interfaces: Principles and Patterns for Rich Interactions」。書籍のブログとFlickr コレクションには UI に関する豊富な例が紹介されていて、これを見ているだけでも楽しめます。 主にウェブアプリケーションを対象にした書籍ですが、企業サイトやショッピングサイトの構築際も参考になる点は幾つもあります。本は14章に分かれており、それぞれ異なるインターフェイスを紹介しているわけですが、この 14章を大まかに 6種類の原則にまとめることが出来ます。 単刀直入に アウトプットがあるところにインプットが出来るようにする。ページ単位ではなく、ページの中の情報単位での操作を可能にする 軽量化 ファイルサイズだけではなく、物理的な動作や精神的な負担を軽減するような UI つくりを心がける ひと
Amazon、決済サービスを構築できるAPIを正式公開
米Amazon.comは2月5日、開発者が同社の決済インフラを利用できるサービス「Amazon Flexible Payments Service（FPS）」を正式公開した。また、FPSを簡略化した「Amazon FPS Quick Starts」も立ち上げた。 Amazon FPSでは、開発者はAmazonのWebサービスAPIを使って独自の決済サービスを構築し、自身のサイトに組み込んで、商取引や寄付の受付、定期的な支払い処理などに利用できる。利用には初期費用などは掛からず、取引ごとに料金を支払う。Amazon FPSを使った決済サービスでは、Amazonに登録済みのユーザーは、Amazonのログイン情報や配送先情報を使って支払いをすることができる。 Quick Startsは、さまざまなFPS APIをセット化して、取引処理のプロセスを簡略化したもの。ネットショッピングなど1度限りの支
分散バージョン管理システムGitの使い方入門 | OSDN Magazine
バージョン管理システムと言うとSubversionやCVSが有名だが、近年急速にユーザーを増やしているバージョン管理システムに「Git」 がある。GitはLinuxカーネルの開発リーダーとして知られるLinus Torvalds氏が中心となって、Linuxカーネルの開発に使用する目的で開発した分散型バージョン管理システムである。2005年に開発が開始されて以来さまざまなプロジェクトでの採用が進み、現在ではPerl 5やRuby on Rails、Android、Wine、X.orgなど、有名な大規模プロジェクトで採用されるに至っている。 本記事では、このGitを使用するのに必要な「分散型バージョン管理システム」の基本的な考え方を紹介するとともに、Gitの導入方法や基本的なGitの使い方について解説する。 分散バージョン管理システムとは？ GitはLinuxカーネル開発で用いられることを前提
Recreating the button | Stopdesign
Until some future version of HTML gives us new native controls to use in a browser, at Google, we’ve been playing and experimenting with controls we call “custom buttons” in our apps (among other custom controls). These buttons just launched… Until some future version of HTML gives us new native controls to use in a browser, at Google, we’ve been playing and experimenting with controls we call “cu
input に事前に値を入力しておく - higeorange's blog
input に事前に入力値を入力しておいてフォーカスするとその値が消える jQuery プラグインを書いた。 (function($) { $.fn.preInput = function(txt, options) { var default_options = { class_name: 'pre-input' }; options = $.extend(default_options, options || {}); return this.each(function(){ if(typeof this.value == 'undefined') return; var elm = $(this); elm.val(txt) elm.addClass(options.class_name) elm.focus(function(){ if(elm.val() == txt) { el
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
はてなでの仮想化技術の使い方@AMDセミナー - とあるはてな社員の日記
先週、AMD主催のセミナーで「はてなでの仮想化技術の使い方」という発表をしてきました。 はてなでは、1年半ほど前から仮想化技術に取り込んでおり、現在では300台以上のサーバが仮想化されています。仮想化技術には、様々なメリットがありますが、はてなではサーバリソース利用率の向上と、システムの安定化の二つの利点を重視しています。サーバを仮想化していく際に、どのようなポリシーで一つの物理的なサーバに仮想化ホストを積み重ねているか、とか、実際どれぐらい効率を上げられているか、とか、あとAMDさんのセミナーなので、消費電力的にはOpteronが実測結果からは10〜20%程度効率がいい(負荷時にOpteron 1.82A, Xeon 2.17A)、というあたりの話をしてきました。 How to use Virtualization Technology in HatenaView more presen
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Text_Password