こちらの動画はマウスで操作すると積み木っぽく動きます、動かない場合は画面サイズを広げてから再表示してみて下さい。 ※ ごめんなさいSafariだけ動きません。 解説 簡単に解説するとこんな事をしています。 videoタグで動画を貼り付けて autoplay="true" で自動再生させる、ただしvideoタグを囲むdiv要素はdisplay:noneで非表示にする <div style="display:none"> <video id="sourcevid" autoplay="true" loop="true"> <source src="BigBuckBunny_640x360.mp4" type="video/mp4"> <source src="BigBuckBunny_640x360.ogv" type="video/ogg"> </video> </div> var canv
セマンティック・ウェブとマイクロデータの関係 第3回となる今回は、マイクロデータについて取り上げます。マイクロデータは、文書の意味や属性を伝える構文の1つで、セマンティック・ウェブの実現には不可欠です。HTML5はページの「構造」を伝えるものですが、マイクロデータは、「属性(エンティティ)」を伝えるものです。 マイクロデータの前に、セマンティック・ウェブについて簡単におさらいしましょう。セマンティック・ウェブとは、ウェブ上にあるあらゆる情報を、データとして正確に認識し整理しようする考え方、技術の向上を促進する動きを指します。詳しくは第1回をご覧ください。 セマンティック・ウェブを実現すると、検索エンジンをはじめとする様々なプログラムは、ユーザーが欲しい情報やそれに関連した多くの情報を正確に提供できるようになります。そのためには、HTMLの文書から、情報やデータなどのいわゆる「属性」や「意味
マウスのホバー時に、画像を次々に表示させるスタイルシートを紹介します。 デモはモデルのかっこいい写真ですが、これはパラパラ漫画だ!と思いましたw How to Create a Fast Hover Slideshow with CSS3 [ad#ad-2] デモ 実装 デモ デモは2つあり、Firefox, Chrome, Safari, Operaでご覧ください。 まずは、デフォルトのデモから。 デモ:With titles 実装 HTML HTMLはシンプルで、複数のimg要素とオーバーレイで表示させているテキストをdiv要素で内包します。 <div class="hs-wrapper"> <img src="images/1.jpg" alt="image01"/> <img src="images/2.jpg" alt="image02"/> <img src="images/3
デモページ ページ中央の「Demo and how to use」をクリックします。 操作は、左上の「prev, next」、右下の「ナビゲーション」、キーボードの「矢印キー」です。 [ad#ad-2] Ascensorを実際に使用しているサイトも紹介します。 Reverse Buro Ascensorの使い方 外部ファイル 「jquery.js」と「scrollTo.js」、そして当スクリプトを外部ファイルとして記述します。 <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.scrollTo.js" type="text/javascript"></script> <script src="js/jquery.ascensor.js" type="text/java
本日、JAIPAによる第2回 ISPのWorld IPv6 Launch対応説明会」が開催され、先ほど、「World IPv6 Launch対応について(第2版)」および「第2回ISPのWorld IPv6 Launch対応説明会」の発表資料が公開されました。 資料が公開されたのは、4月27日に公開された「ISPのWorld IPv6 Launch対応説明会第2回の開催につきまして」というお知らせの追記としてです。 ISPのWorld IPv6 Launch対応説明会第2回の開催につきまして World IPv6 Launch対応について(第2版) (PDF) 発表資料PDF 以下、個人的に興味を持った部分を紹介します。 公表された資料には、他にも色々なことが書かれているので、詳細は是非原文をご覧下さい。 第1版から大幅update 第2版を読んだ感想として、第1版とはかなり大きく異なると
包装紙 生チョコ CSSチョコ Blog CSSのレシピ ※こちらのレシピのチョコレートは食べられません! それでも食べたいという方は、ページを印刷してお召し上がりください。 ただし、おなかを壊すなどの体の異常、その他諸々についての責任は一切負いかねます。 制作時間:8時間(チョコレート構造部分) 材料 中央の刻印となるテキスト 眠気覚ましの珈琲 あると良いもの CSS3対応ブラウザ(FireFox、GoogleChrome 等) テキストエディタ お好みでパッケージイラスト等あると良いでしょう 作り方 1. まずHTMLコードを書き、cssのためにclassを付けておきます。 構造は一番外側に板チョコの枠(css_chocolate)、その中に横1列分のチョコ(choco_bar)が4段程、 チョコバーの中には一欠片のチョコ(choco_block)が6粒程、各欠片には中央の窪み
Today I want to share a little hover slideshow with you. The main idea is to run a super-fast image slideshow on hover and show the current image when mousing out. It’s just a fancy effect to play with and I got the idea from Contain.r. We’ll be using CSS animations for the slideshow and control the pausing and running with animation-play-state. Please note: this is just experimental and will only
のように、全体件数と表示中のデータ件数が併記される場合が多い。ところが、レコード数が多くなったり、SQL文が複雑になると、全体件数の取得にかかるスピードが物凄く遅くなる場合がある。 と言う訳で、どのような方法で全体件数を取得するのが高速なのかを調べてみた。 環境はMysql+PHP。候補は次の3つ。 COUNTを使う。 mysql_num_rowsを使う。(*PHP関数) FOUND_ROWSとSQL_CALC_FOUND_ROWSを使う。 サンプル ※以下のSQLの結果、及び、LIMITの制約を外した場合の結果(=全体件数)を取得する。 $query = 'SELECT id, name, area FROM company ORDER BY id LIMIT 20'; $q1 = 'SELECT COUNT(*) FROM company'; //全体件数を取得するシンプルなSQLクエ
標準のソート関数は不安定ソートPHP のソート関数は、同じ順序になる要素(例えば同じ数字)を並び替えたときに、元々の順序が変わる可能性があります(不安定なソート)。不安定なソートだと、五十音順など意味のあるキーで並んでいる配列を並べ替えるときに都合があまりよくありません。 // 元々の順序が変わってしまう例 function cmp_func($a, $b) { if ($a === $b) return 0; return $a $b ? -1 : 1; } $a = array( 'a' => 7, 'b' => 5, 'c' => 3, 'd' => 5, 'e' => 2, 'f' => 5, 'g' => 5, 'h' => 1, ); uasort($a, 'cmp_func'); print_r($a); uasort 関数の実行結果: Array ( [h] => 1 [e
HTMLやCSSではプロトコル表記(http:、https:)の省略が可能です。 ということで、プロトコル表記の省略に関することを色々調べてみましたので、本エントリーで紹介致します。 このエントリーは、「「Google HTML/CSS Style Guide」を適当に和訳してみた」の以下の部分に対しての便乗記事です。 埋め込みリソースからプロトコル表記(http:,https:)を省略する。 <!-- Not recommended --> <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script> <!-- Recommended --> <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script> 1.プロトコ
ITproでは、「GaiaXソーシャルメディア ラボ」の協力で、GaiaXソーシャルメディア ラボのブログに掲載している記事の中から、ITproの読者に役立ちそうな記事を掲載することになりました。 皆さんのタイムラインはもう作り込めていますか? かくいう私は全く作り込めておらず、カバー写真が酷いものでした。それを今回ご紹介するサービスを使って、こんな感じにしました。 この記事では、私が実際に使ったツール、検証してみたサービスを14個ご紹介します。皆さんもカッコイイ、オシャレなカバー写真にしてみましょう! ■どんなサービスがあるの? カバー写真作成サービスには大きく以下の2つのタイプがあります。 ツール側で用意してある写真を選ぶだけの素材型 自分でアップロードした写真を組み合わせて使える成形型 私は写真選びのセンスが無いので「素材型」のサービスを使いました。 以下では、1.素材型、2.成形型
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く