FlexboxとCSS Gridの使い分け方、よく見かけるUIコンポーネントをFlexboxとGridで実装するテクニックのまとめ
FlexboxとCSS Gridのどちらを使った方がよいか悩んだことはありませんか？ FlexboxとCSS Gridの使い分け方、それぞれの違い、Flexboxの実装例、CSS Gridの実装例、FlexboxとCSS Gridを組み合わせた実装例、フォールバックと古いブラウザのサポート方法を解説します。 Grid for layout, Flexbox for components by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS GridとFlexboxの違い CSS GridとFlexboxの使い分け方 CSS Gridの実装例 Flexboxの実装例 CSS GridとFlexboxを組み合わせて使用する フォールバックと古いブラウザのサポート CSS GridまたはF
UXライティングとは | UXライティングガイド
UXライティングとは何か UXライティングとは、ユーザーがデジタルサービスを操作する際に必要となるテキストを書く技術です。例えば、登録時のスタートガイド、利用の流れコンテンツ、タイトル、ボタン、画面上の説明文、エラーメッセージ、通知などの言葉がUXライティングの手法に則って書かれます。サービスの中にある言葉に対して「意味が通じればいい」という思想で書くのではなく、「ユーザーがサービスを通じて体験する一連の経験を設計する」という思想で書くのがUXライティングです。 UXライティングに求められる技術とは UXライティングには、分かりやすく書く技術と、人間らしく書く技術が必要です。この二つの技術が同居することによって、ユーザーの体験を支援することができます。 分かりやすく書く技術 UXライティングの手法に則ってテキストを書く際に求められるのは、「ユーザーの気持ちに沿った文章を書く」という抽象的な
変幻自在なグラフィック表現！CSS, SVG, Canvasでマスクを使いこなせ - ICS MEDIA
近年、ウェブ技術の発展により、画像の一部だけを表示する「マスク表現」がよく見られるようになりました。一言でマスクと言っても、アニメーションやインタラクションとの組み合わせによりさまざまな表現が可能です。 また、どの技術を用いるかという選択も重要になります。マスク表現はCSS, SVG, Canvas APIといった技術で実現できますが、それぞれが異なる得意分野をもちます。 本記事の前半では、マスク表現を実現する技術について解説を行います。後半では実践的なマスク表現をいくつか紹介しながら、それぞれの実装方法を紹介します。いままで技術的に難しいと諦めていた表現が、マスクによって実現するヒントになれば幸いです。 ▼マスク表現の例（背景画像の一部を表示している） - Erika Moreira Portfolio マスクとは 本記事で紹介するマスク表現とは、画像の一部を切り抜く手法です。マスキング
デザインどや！？｜海外カジノ オンラインのWEB作成
Webページレイアウト、ナビゲーションプラグイン、フォーム、スライダー＆カルーセルプラグイン、チャート＆グラフプラグイン、イメージエフェクトプラグイン、ビデオプラグインなど。チェックしておきたいです。海外カジノ オンラインサイトの制作はワードプレスのプラグインを利用して様々な機能を付け加えて完成させることができます。2012年のjQueryプラグインまとめでは、デザインの一新や個別のカスタムにも対応した国際的で魅力的なサイト作成に役立つ情報を紹介しています。
【CSS】実はこんなに便利！cssのセレクタ指定方法をちょっとだけ掘り起こしてみた | バシャログ。
モニターを見つめる目に優しいメガネがZoffからも出る！しかも度付きOK、フレームも選べる！気になってます。hakoishiです。 さて、今回は実は便利なcssのセレクタ指定方法をちょっとだけ掘り起こしてご紹介。 直下にある要素だけ、とかセレクタ名が部分一致したら、はたまたリンク先パスによって、とか実はかなり便利です！ 特定の要素の直下の要素だけに一括でマージンを設定 特定の文言を含むセレクタ、及びその位置で対象を絞り込み指定 リンク先のパス次第でスタイルを切り分ける 特定の要素・セレクタを例外とする 特定の要素の直下の要素だけに一括でマージンを設定 #container>* { margin: 0 10px; } IE7以上対応。 親>子で、直下要素のみを対象指定。 上記例ではid="container"の直下の要素すべてにマージンが設定されます。 ユニバーサルセレクタには正直不安を感じ
HTML5でスマホをコントローラにするゲームを作ってみた | CSS-EBLOG
HTML5でスマホをコントローラにするゲームを作ってみた カテゴリ：HTML5 2011年10月27日 09:00 Canvasゲームをカスタマイズ ゲーム自体は以前作ったものをそのまま使いました。 今回作ったスマホコントローラ版 http://edo-m18.me:9000/ 以前作ったものをカスタマイズして、弾を打つ部分と自機を移動する部分を、関連付けたスマホから操作できるようにしてみたものです。 これはあくまでアイデア、ってことで快適にプレイできるまでは作りこんでいません(; ´Д`) ただ、特にプラグインなどを使わずともここまでできる、というのは非常に面白いなと思いました。 Node.jsを使って実装 今回、WebSocket部分はNode.jsを使って実装しました。 最近Node.jsにハマりすぎてプライベートではNode.jsしか触ってませんｗ やはりサーバサイドとクライアント
Flash Player 11 対応の 3D 物理演算ライブラリ「AwayPhysics」 | ClockMaker Blog
Flash Player 11 対応の 3D 物理演算ライブラリ「AwayPhysics」を使ってデモを作ってみました。AwayPhysics は名前のとおり Away3D 4.0 alpha (Stage3D版) 対応の物理演算エンジンで、今までの3D物理演算ライブラリよりも高速に動作します。 [立方体バージョン 100個] Demo Source [球体バージョン 100個] Demo Source 以前「ActionScript 3.0 での 3D 物理演算ライブラリjiglibflash」という記事で JigLib を紹介したことがありましたが、次の記事によると jiglib よりも AwayPhysics のほうが高速とのこと。JigLib と AwayPhysics との比較デモが紹介されています。 Away3D 4.0 jiglib vs Bullet « DevJamMem
Photoshopで複製したレイヤーに「のコピー」をつけない方法 – creamu
ふと思いついてエントリー。 Photoshopでは、通常レイヤーやフォルダを複製すると、「レイヤー1」「レイヤー 1 のコピー 2」という風に「のコピー」というのがついてしまいますが、CS5から、オプションでつけないようにすることができます。 レイヤーパレットのこの部分をクリック 「パネルオプション」をクリック デフォルトでついているここのチェックをはずす これで快適にレイヤーをコピーしまくることができます。 ぜひやってみてください！ 書籍プレゼントへのたくさんのご応募、ありがとうございました！70名を超える方にご応募いただきました。 合計2冊のプレゼントだったので、少ないのですが、当選者の方にはメールを送らせていただいて、発送させていただきました。ですのでメールが届いていない方には、申し訳ありません。次回また何かありましたら、よろしくお願いします！
HTML5とJSで動画に画像をWEB上で合成する「HTML5 Glasses!」
HTML5とJSの組合せでWEB上でできるとこは格段に広がり、様々な実験的なコンテンツが世界では展開されていますが、今日紹介するのはアイデア次第で面白いプロモーションに使えそうなHTML5とJSで動画に画像をWEB上で合成する「JavaScript Face Detection + Canvas + Video = HTML5 Glasses!」です。 こちらはHTML5で再生されているビデオにCanvasを利用して、ビデオに追従するエレメントを表示させるというものです。 実際どんなものか動画が公開されていましたので、下記からご覧ください。 動画は以下から ユーザーが撮影した動画に対してなにかを合成したり、動画コンテンツに合成する絵を分けてコンテンツを変化させたり、様々な事ができそうな技術だと思います。 「Library」にソースコードや実装方法などが公開されています。気になる方は是非チャ
フリーで利用できるHTML5+CSS3テンプレート集「15 Free HTML5 and CSS Templates」
TOP > WebDesign > フリーで利用できるHTML5+CSS3テンプレート集「15 Free HTML5 and CSS Templates」 HTML5とCSS3、随分昔からWEB業界ではよく聞く単語ではありますが、HTML5やCSS3の実案件というのは対応ブラウザの問題から意外と少なく、本腰を入れて勉強する機会も創らないとなかなかないのが現状だと思います。今日紹介するのはフリーで利用できるHTML5+CSS3テンプレート集「15 Free HTML5 and CSS Templates」。 Minimalism 案件ではあまり使えないかも知れませんが、知識を仕入れるには出来上がったのを触るのが手っ取り早い方法だと思います。全部で15のテンプレートが公開されていますが、その中からいくつピックアップして紹介したいと思います。 詳しくは以下 Simple Style その
CCS3を対応するためのプロパティを自動付与し、一行にまとめるスクリプト「Prefix Free」
WEB業界ではすっかりおなじみのCSS3。ただまだ全てのブラウザに標準化され実装されているわけではなく、ブラウザ毎に接頭語を付けてあげる必要があります。 機能的にはそれぞれ接頭語をつけて、書き分けてあげれば良いのですが、管理面や手間的もあり面倒です。そこで今回紹介するのは、接頭語を欠かずにシンプルなCSSのみで様々なブラウザに対応させる事ができるというものです。 詳しくは以下 こちらのスクリプトは非常に軽量なものとなっており、配布されているjsを読み込むだけで実装可能です。 対応ブラウザはIE9+、Opera 10+、Firefox 3.5+、Safari 4+、Chromeとなっております。いずれは必要なくなってくれるのが一番好ましいですが、取りいそぎ、煩わしさを回避したいという方はお試しください。 デモ確認用のCSSファイルは「this page’s stylesheet」からどうぞ。
10 Really Helpful Traversing Functions in jQuery | Envato Tuts+
With jQuery, selecting HTML elements is laughably easy. But at times, we may wish to further refine the selection, which can be a hassle when the HTML structure is complicated. In this tutorial, we'll explore ten ways that we can refine and extend a set of wrapped elements that we wish to operate upon. The HTML First of all, let's take a look at the simple webpage shown in the figure below. We'll
Román Cortés » Pure CSS Coke Can
Último proyecto completado: Chimeneas Rofer & Rodi Proyecto actual en curso: Arteforo (versión en castellano abajo) After doing the CSS Paper Bird effect, I found out that by a combination of the CSS1 properties background-attachment and background-position, 2D displacement maps could be created and, by scrolling, the displacement map would be applied to different parts of the texture (a backgroun
HTML5で誤用されがちな各要素の正しい使い方 | コリス
HTML5はXHTML1.0やHTML4を継承しつつ、使い方が大きく変わった点もあります。 よく利用されるHTML5の各要素の誤用されがちな例とそれを正しく適切に使う方法を紹介します。 You're Doing it Wrong: Common HTML Tag Misuses [ad#ad-2] 下記は各ポイントを意訳したものです。 <br>の誤用 <br>の間違った使い方 <br>のよくある誤用は、コンテンツ間にスペースをつくるために使用することです。 これはWYSIWYGエディタで作成するとよく起きる現象で、複数の空の行で隙間をつくります。 <br>の適切な使い方 <br>は文章を改行するために使用するものです。 段落に分けるには<p>を使用し、文章同士の間をあけるためにはCSSのmarginなどで間隔を設定します。 <div>の誤用 <div>の間違った使い方 HTML+CSSでペ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
5509.me
5509.me
5509.me
http://blog.net-king.com/2010/07/01/jquery%E3%81%A7%EF%BC%92%E3%81%A4%E4%BB%A5%E4%B8%8A%E3%81%AE%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%81%AE%E5%90%84%E3%82%BB%E3%83%AB%E5%B9%85%E3%82%92%E5%90%88%E3%82%8F%E3%81%9B%E3%82%8B/
jQuery PointPoint Plugin | Tutorialzine Demo
https://www.jnathanson.com/blog/client/jquery/heatcolor/index.cfm