[CSS]Webページのこれからのレイアウトテクニック！FlexboxとCSS Gridは一緒に使用してこそ価値がある
Webページのレイアウト、一昔前まではfloat、最近のプロジェクトではFlexboxが主流だと思います。CSS Gridはどうでしょうか？ CSS Gridは主要なすべてのブラウザにサポートされ、採用を検討している、また既に導入している人も少なくないでしょう。 注意しておきたいのが、CSS GridがあればFlexboxはいらないという考え方です。 これからのレイアウトは、FlexboxとCSS Gridを一緒に使用することで、それらの性能を効果的に利用できます。 Flexbox and Grids, your layout’s best friends by Eva Ferreira 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 FlexboxとCSS Gridは一緒に使用することでパワーを発揮する 神話は崩された Fri
![[CSS]Webページのこれからのレイアウトテクニック！FlexboxとCSS Gridは一緒に使用してこそ価値がある](https://cdn-ak-scissors.b.st-hatena.com/image/square/222e57e0cb617f5924de9e159879efca2a68aa3e/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201704%2F2017111110.png)
HTML5やCSS3のブラウザサポート状況を簡単に調べられる「Can I use…」のGoogleアナリティクス連携が便利
HTML5やCSS3のブラウザサポート状況を簡単に調べられる「Can I use…」のGoogleアナリティクス連携が便利 HTML5やCSS3のブラウザサポート状況が確認できるcaniuse.comのベータ版が2014年6月に公開され、デザインが刷新されました。 このベータ版のデザインの良さにも驚きましたが、なにより驚いたのはGoogleアナリティクスとの連携機能でした。ベータ版の「Settings」から設定を行うと、Googleアナリティクスのデータを読み込むことができ、自分のサイトに訪れるユーザが使うブラウザで、ある特定のHTML5やCSS3の機能が、どのくらいサポートされているかがわかります。世の中便利になりましたね〜。 実は現行版でも同じ機能が使えるのですが、残念ながらぜんぜん気づきませんでした。 ※ちなみに、このベータ版は数週間テストを行いフィードバックを得てから、本番サイトに
:checked擬似クラスでチェックボックスに連動して要素を表示させる方法
CSSの:checked擬似クラスを使って、チェックボックスに連動して要素を表示させる方法を紹介します。 １．はじめに 次のようなチェックボックスがあるとします。 そして、チェックボックスのチェックに連動してテキストフィールドを表示（または非表示）させるものとします。 このような制御を行いたい場合、次のようなjQueryを書けば実現できます（よりエレガントな書き方はあると思いますが）。 <script> $(function(){ $('input[type=checkbox]').click(function() { if ($(this).prop('checked')) { $('.bar').show(); } else { $('.bar').hide(); } }); }); </script> <div class="foo"> <input id="foo" type="c
jQueryでCSSアニメーションを実行させる方法｜BLACKFLAG
以前ここでも「CSS3 Transitionプロパティでアニメーションを実行させるパターン【ページロード／マウスオーバー／クリックアクション】」と題して、 CSSアニメーションの実行パターンをいくつか紹介しましたが、 アニメーションの実行制御をCSS側でなくjQueryで操作させる方法が 簡単でいろいろとこの先使えそうだったので紹介してみます。 構成としてはCSS側でアニメーション設定をしておいて jQuery側でコンテンツ要素に対してclassを付けたり外したりさせることで その要素に対してアニメーション制御をする形になります。 例えばHTMLには 以下のようなidを付けたdivを用意して、 ◆HTML <div id="action"></div> CSS側では 以下のようにアニメーションをセットします。 ◆CSS #action{ top: 0; left: 0; width: 50
[JS]面白いコンテンツが作れそう！動画とCSS3アニメーションを同調させるスクリプト -charlie.js
ダウンロードできるデモファイル ローカル環境でデモファイルを見る時は、Chromeでは「file://」で読み込むとフレームレートの変更する時のバグがあるため動作しません。オンラインかFirefoxでご覧ください。 実装は、詳しいドキュメントが公開されていませんが、コードを見ると簡単にできそうです。 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <script src="charlie.js"></script> Step 2: HTML まずは、動画をvideo要素で配置。 <video id="video" controls="" preload="none" poster="http://media.w3.org/2010/05/sintel/poster.png" muted> <source id="mp4" src="http://media.w3
[JS]複数のCSSアニメーションを簡単に組み合わせて利用できるスクリプト -animo.js
Rotate then flip out それぞれのパネルを回転させ、異なるタイミングでめくってフェードアウトさせます。 animo.jsの使い方 Step 1: 外部ファイル animo.jsはjQuery 2+で動作し、animate.cssを含む60以上の美しいアニメーションをコントロールできます。 head内にjquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script> <script src="animo.js" type="text/javascript"></script> <link href="animate+animo.css" rel="stylesheet" type=
CSS3のtransformを素敵に扱えるjQueryプラグインを作った。 | Ginpen.com
ダウンロード リポジトリ … https://github.com/ginpei/jQuery.transform JSファイル … jquery.transform.js なにこれ？ CSSのtransformプロパティの値を素敵に扱うやつです。 .css()からtransformを扱う際に既存の値を完全に上書きしてしまう問題を解消します。 transform ？ transformはご存知CSS3で追加されたプロパティで、要素を変形(transform)させる事ができます。このプロパティ複数の値を取り得、例えば「小さめで傾ける」という指定の場合は のような指定になります。 詳しくはこのあたりとか。 transform－CSS3リファレンス jQuery + transformの問題点 jQueryでスタイルを操作する場合は .css()を利用します。 しかし、これはプロパティの名前と値
Jquery.a3d.js | JavaScriptからCSS3キーフレームアニメーションを自在に操れる。３Dにも対応
複雑なアニメーションを簡単＆シンプルに実装できます CSS3キーフレームアニメーションをJavaScriptから動的に使用するためのプラグインです。また、CSS3アニメーションを強力に機能拡張することができます。 機能 JavaScriptのプログラムから、CSS3のキーフレームアニメーションを動的に生成できます キーフレームにおける任意のタイミングでJavaScriptのコードを発火することができます。 キーフレーム情報、エフェクト情報、アニメーション情報を分離して管理することで、複雑なアニメーション制御をシンプルに記述できます。 複数のキーフレームアニメーションを連鎖させる事ができます 絶対位置指定、相対位置指定をサポートします。（エレメントの現在地点から前へ１０PXといった指定が可能） 対応ブラウザ Firefox, Chrome, Safari, Opera ,IE10 使い方 基
エレメントに多彩な動きのエフェクトを当てられる「Morf.js」:phpspot開発日誌
Morf.js ? Custom Easing Functions for CSS3 Transition Joe Lambert エレメントに多彩な動きのエフェクトを当てられる「Morf.js」。 CSS3のTransitionを使ったアニメーションや、JavaScriptによるカスタムアニメーション等、様々なアニメーション効果を作れるライブラリです。 動きをもたせることでUIを格段に分かりやすくすることが出来たりすると思いますがそうした際に使えそうです。 アニメーションの種類も豊富で求める動きもみつかりやすいはず。 デモページ 次のような分かりやすいコードでの実現が可能です。 関連エントリ 透過PNGで枠だけ作って背景をCSS3アニメーションするという新テクニック CSS3なキーフレームアニメーションのデモ 特定要素内の文字をタイプライター風にアニメーションさせるjQueryプラグイン
PHP＆jQuery＆CSS3でMacのPhotoboothを作るチュートリアル:phpspot開発日誌
Photobooth with PHP, jQuery and CSS3 | Tutorialzine PHP＆jQuery＆CSS3でMacのPhotoboothを作るチュートリアル。デモのダウンロードも可能。 デモページはこちらで、なかなかカッコいい。 ページの下部にカメラがあり、クリックするとWEBCAMのFlashインタフェースが開き、写真をとってそのままUPみたいな流れのものが作れます。 カメラ付きのMacbookやAirでも当然使えます。 下部のレンズのクリックでカメラが出ます（当PCにはカメラがついていないので何も表示されておりません） 画像をクリックするとLightBox風にポップアップします。 チュートリアルのわりにチュートリアルらしからぬクオリティ。 これを応用してプロフィール写真の撮影等、サービスに応用してみてもよさそうですね。 関連エントリ CSS3で実装されたボタ
ブラウザ上で動くnode.jsベースのTwitterクライアントOSS「Streamie」:phpspot開発日誌
Streamie ブラウザ上で動くnode.jsベースのTwitterクライアントOSS「Streamie」。 node.jsベースのオープンソースなので、Twitterクライアントのよい見本となりそうです。（githubにてソース公開) ちょっと作ってみました的なものではなくてTwitterの機能をフルで使えるのも特徴 単に利用するだけでも便利そう。新しいツイートもリロードなしに見ることができます UIもCSS3等を使ってデザインされていてリッチかつ、それなりに洗練されています ＵＩやnode.jsの教材として、あるいは単にTwitterクライアントとして活用することができます。 関連エントリ Twitter・mixi・facebook・はてブ等のソーシャルボタンを瞬時に埋め込めるWordPressプラグイン「WP Social Bookmarking Light」 Twitterで使わ
jQuery quickie: Colourful rating system with CSS3
Today, we’re going to do a relatively simple jQuery tutorial. Rating systems are used a lot on websites, for example to rate how good a certain product, article or comment is. I slightly wanted to improve this idea, by making it more visually attractive. By using the jQuery Color plugin, we can animate colours. Simply use the animate() function from jQuery to have colours fade to another colour. W
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
