[CSS]コピペで簡単に使える、パネルの表と裏をくるっと水平・垂直にひっくり返すスタイルシート -CSS Flip Boards
パネルをホバーすると、表と裏がくるっとアニメーションで変わるスタイルシートを紹介します。 くるっとなるのは水平だけでなく、垂直にも対応しています。 上：垂直くるっ、下：水平くるっ CSS Flip Boardsの実装 くるっとなるのはスタイルシートのエフェクトで、スクリプトは使用されていません。 Step 1: HTML 表・裏のパネル2枚をそれぞれdiv要素にし、それらを2つのdivで内包します。 垂直にはtop、水平にはleftを指定します。 垂直にくるっ <div class="flip-boards"> <div class="board top"> <div class="front"><h2>パネル：表</h2></div> <div class="flipped"><h2>パネル：裏</h2></div> </div> </div> 水平にくるっ <div class="fl
HTML5 勧告候補に main 要素が追加、hgroup 要素は予定通り削除
ちょっと前に 「hgroup 要素が HTML5 の勧告候補 （Candidate Recommendation） から削除されるようです」 って記事を書きましたが、実際に削除されたみたいですね （Editor's Draft では）。 ついでに、すでに HTML 5.1 Nightly にはすでに追加されていた、main 要素が、HTML5 勧告候補の方にも追加されたようです。 HTML5 W3C Candidate Recommendation 17 December 2012 hgroup 要素が HTML5 勧告候補から削除される main 要素とは？ main 要素は元々、Steve Faulkner 氏 （Web アクセシビリティ関連の方） が HTML5 の拡張仕様として提案し、HTML 5.1 に正式に取り入れられた要素で、その名の通り、文書内の、「主要な部分」 をマークア
インテル、無償のHTML5アプリ開発環境「Intel XDK」を公開。iOS/Android/Kindleなどクロスプラットフォーム対応
インテル、無償のHTML5アプリ開発環境「Intel XDK」を公開。iOS/Android/Kindleなどクロスプラットフォーム対応 インテルは、先週4月10日から11日かけて中国北京で開催された「Intel Developers Forum Beijing 2013」（IDF Beijing 2013）において、クロスプラットフォームに対応したHTML5アプリケーションの開発ツール「Intel XDK」を発表しました。 Intel XDKはブラウザ上で動作するHTML5アプリケーション開発ツール（ChromeブラウザとJavaのインストールが必要）。HTML/CSS/JavaScriptで開発したアプリケーションを、PhoneGap機能でビルドし、iOS/Android/Kindle/Facebookなどのアプリケーションが開発できます。開発したアプリケーションは、各アプリストアで販
意外と便利？PHP製のHTML用問い合わせ言語·htmlSQL MOONGIFT
htmlSQLはHTML構造にSQLを使って検索できるようにするライブラリです。 HTMLを操作する際にはDOMを使ったり、正規表現を使うのが一般的です。しかしもう一つのやり方を提案するのがhtmlSQLです。何とSQL（問い合わせ言語）を使ってHTMLソースを探索できます。 コード例。PHPで操作します。 こんな感じで取得できます（301になってしまっていますが…）。 こちらもコード例。SQLっぽい記述が面白いです。 クラスやIDなどで絞り込んだり、特定のタグだけを抽出することも簡単にできます。そして指定した要素だけ抽出して処理が可能です。今後、LIMITなどにも対応していくとのことです。 htmlSQLはPHP製、New BSD Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る SQLはサーバサイドで使われるプログラミング言語と構造体系が大きく異なるために
HTML5に本腰を入れ始めた任天堂―GDCで見えてきたゲームビジネスのゆくえ
HTML5向けのゲームエンジンとして国内で知名度を上げて来たenchant.jsのブース出展としては今回が2回目。 残念ながらセッションを取材する時間は取れなかったが、その分、ブースに集まって来たさまざまな情報から、次世代ゲームのあるべき具体像が明確化してきた。 1. かつて億単位のライセンス料が必要だったハイエンドゲームエンジンが原則無料で使用可能に 今回、PS4の発表に合わせてUnreal Engine 4（以下、UE4）やCryengineなどハイエンドゲーム向けのゲームエンジンのバージョンアップが多数発表された。 UE4はPS3、Xbox360世代でデファクトスタンダードの地位を確立したUnreal Engine3の正統的なバージョンアップで、新世代のハードウェアに対応した機能が多数搭載された。 CryengineはCrytechのゲームエンジンで、こちらもハイエンドゲーム向けだが
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
GoogleドライブにWebホスティング機能が追加
Googleドライブに公開設定のフォルダを作り、Webページの構成要素をアップロードすることで、Googleドライブ上でWebページを公開できるようになった。 米Googleは2月5日（現地時間）、クラウドストレージサービス「Googleドライブ」にWebホスティング機能を追加したと発表した。 使い方は以下の通り。 Googleドライブに新規フォルダを作成し、公開設定にする フォルダにWebページを構成するHTMLファイルやCSSファイルなどの一式をアップロードする フォルダ内のHTMLファイルを開く 編集ページのメニューバーにある「プレビュー」をクリックする（下図A） 表示されたページのURLが公開ページのURLになる（下図B）
リピート率に直結！ブラウザのレンダリング速度を高速化する５つのこと | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
最近上京してきたんだけど東京とか物価高くてやんなっちゃう。ほんともう特に家賃とか駅から徒歩30分とかそれってもう徒歩圏内じゃなくない？あ、どうも僕です。 今日はクライアント（ブラウザ）側で高速にページを表示させるために、最低限押さえておきたい簡単なテクニックを厳選してお届けしちゃうよ！ WebサイトやWebサービスを作る上で、ユーザを獲得するには応答時間を早めることがとても重要なファクターなんだ。 統計的にも応答時間とユーザのリピート率との相関性は実証されていて、例えば、表示までに時間のかかるサイトなんかは、もう二度と使わねぇとか思っちゃうよね！ それほど応答時間というものはユーザを獲得する上でもかなり重要なんだ！ HTTPリクエスト数を少なくする Webページが表示される際、まずはベースとなるHTMLが読み込まれてから、ページにリンクしてある画像ファイルやスクリプトファイルなどを読み込ん
W3CがHTML5仕様策定完了、勧告候補に。HTML5.1のドラフトも発表
HTML5の仕様策定を進めていたW3Cは17日（日本時間18日）、HTML5とCanvas 2Dに関する仕様策定完了を発表。これら2つの仕様を「Candidate Recommendation（勧告候補）」とし、相互運用性およびテストへ専念する段階へと進めました。 W3CはあわせてHTML5の次バージョンとなるHTML 5.1、およびCanvas 2D, Level 2の第一草案を発表。今後のHTML5関連の機能追加などはこれら次バージョンに対して行われていくことになります。 2014年にHTML5が勧告、2016年にはHTML5.1が勧告へ 9月にW3Cが発表したHTML5の勧告に向けたロードマップ「Plan 2014」によると、2014年に今回勧告候補となったHTML5が勧告となり、その2年後の2016年には次バージョンのHTML5.1が勧告にと、2年単位でのHTML5のバージョンアッ
[CSS]スクリプトに依存せずに、「:checked」でできるテクニックをBootstrapに組み込むプラグイン -Bootleg.css
タブ、ドロップダウン、アコーディオン、カルーセルなど、今まではスクリプトに依存しないと実装できなかったものをスタイルシートベースで実装するBootstrapのプラグインを紹介します。 Bootstapのプラグインですが、CSSの「:checked」を使ったテクニックを学ぶのにも役立ちます。 Bootleg.css 仕組みは簡単に説明すると、見えない状態のラジオボタンを使い、そのオン・オフのチェック状態でコンテンツを表示・非表示します。 デモと共に、「:checked」擬似要素の使い方を紹介します。 モーダル ボタンをラジオボタンにし、そのチェック状態でモーダルを表示・非表示します。 HTML <-- Button to trigger modal --> <label for="modal1" role="button" class="btn">Launch demo modal</lab
Big Sky :: モテる Vim 使いに読み書き出来ないファイルなどなかったんだよ！
Vim Advent Calendar 2012 の 4 日目の記事です。 「やった！コンプガチャで Vim 出た！」 「だって前の彼氏、Vim 使いじゃなかったんだもん」「マクドナルド店員「ご一緒に Vim など如何ですか？」」 こんな言葉が聞かれる様になって随分と経ちました(要出典)。 昨今、Vim はテキストエディタの枠を超え、アプリケーションプラットフォームへと変わりつつあります。 vital.vim 等を使う事で簡単にアプリケーションを作る事も出来る様になりました。手前味噌ではありますが webapi-vim の一部も vital.vim に取り込まれています。 このブログでも結構取り上げていますが webapi-vim とは一体何か。名前の通り、Web Application Programming Intreface を扱えるライブラリです。 webapi-vim とは we
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechCrunch | Startup and Technology News
IDEA * IDEA