CSSのすごいアイデアが満載！実用的なものからスゴ技までスタイルシートのテクニックのまとめ素晴らしいアイデア満載のクリエイティブなスタイルシートのテクニックを紹介します。 これからのプロジェクトに使ってみたくなるような実用的なものから、CSSでこんなこともできるのか！という驚きのテクニックまで、今年もCSSに注目です。
HTML5とCSS3で何ができるかを実際に動かして学べる「The Expressive Web」
「HTML5」や「CSS3」を導入することで、ウェブサイトの作成やウェブデザインがさらに便利になります。そんなHTML5とCSS3で追加されている新しい要素で「何ができるのか？」ということが、実際に試したり動かしたりしつつ学べるAdobeの「The Expressive Web」です。 HTML5 and CSS3 - Adobe - The Expressive Web - Beta http://beta.theexpressiveweb.com/ 「The Expressive Web」は左側に各コンテンツのメニューがあり、1つずつ見ていくことでCSSやHTML5の動作が分かっていくというウェブサイト。一番上の「CSS3 Animations」をクリックすると、青いキャラクターと背景がCSS3アニメーションで動いている様子を見ることができます。CSS3アニメーションはHTMLにキーフ
[CSS]紙、ステッチ、リボンなどのかわいいエフェクトを簡単に実装できるコードをまとめたスタイルシート -Beemuse
p, div要素などで実装したシンプルなHTMLに紙やステッチのかわいいスタイルを簡単に実装できるスタイルシートをまとめたフレームワークを紹介します。要素を少し増やすとリボンも簡単に実装できます。 Beemuse Beemuse -GitHub 使い方は簡単、CSSファイルを外部ファイルとして記述し、あとはHTMLにclassを追加するだけで、さまざまなかわいいスタイルを利用できます。 <head> ... <link rel="stylesheet" type="text/css" href="css/beemuse.min.css" /> </head> 各デモは:before, :after の疑似要素を使用しているため、IE8+でご覧ください。一部のスタイルはIE10+になります。
知っておいてよかった！Web制作時に効率上げる「便利」なCSSテクニック - コムテブログ
TL;DR 少し前にサイト制作でさりげなく使われている CSS テクニックをまとめましたが、今回はそれを補足する形で、これから増えそうなもの、使っていきたいものを今後忘れないようにメモしておきます。 Photoshop ののように、乗算・オーバーレイなど背景色と背景画像を混ぜあわせたり、写真に色々な効果を付与することができるbackground-blend-modeプロパティ。シンプルな例では、以下のように背景写真と背景色を合成することが可能です。 .blended { background-image: url(face.jpg); background-color: red; background-blend-mode: multiply; } 効果一覧：multiply／screen／overlay／darken／lighten／color-dodge／color-burn／hard
CSS3でバウンドするアニメーションが簡単に作成できるジェネレータ「Bounce.js」 | ライフハッカー・ジャパン
Nintendo Switchの純正プロコンを異次元レベルの操作性に!使わない理由がない革新的アダプター
[JS]実装が簡単！要素にclassを加えるだけでCSS3アニメーションを自在に使えるスクリプト -CSS3 Animate It
アニメーションの一覧 CSS3 Animate Itの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/animations.css" type="text/css"> </head> <body> ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src='js/css3-animate-it.js'></script> </body> Step 2: HTML HTMLはまずは、通常通りに各エレメントを配置します。 <div> <h2>見出し</h2> </div> 親要素に「.animat
たった一行でさまざまな要素をレスポンシブ対応にするスタイルシート -Fluidity | コリス
iframeを使った地図 Fluidityの使い方 使い方は簡単です。 Step 1: 外部ファイル head内に当スタイルシートを追加するだけで完了です。 <link rel="stylesheet" href="css/fluidity.min.css"> Step 2: HTML あとは、通常通りにHTMLを記述するだけです。 画像の場合 <img src="image.png"> テーブルの場合 テーブルの時はclassを加えます。 <div class="overflow-container"> <table> <!-- table contents --> </table> </div> 地図の場合 <iframe src="https://www.google.com/maps/embed?マップのコード" width="100%" height="450" framebor
[CSS]柔軟性のあるグリッドをシンプルで簡単に実装するスタイルシートのチュートリアル
すべてのモダンブラウザとIE8+に対応したグリッドを複雑なフレームワークを使うのではなく、シンプルで簡単に実装するスタイルシートのチュートリアルを紹介します。 Don't Overthink It Grids 下記は各ポイントを意訳したものです。 ラッパー カラム フロートのクリア ガター（溝） 外側のガター（溝） カラムの追加 対応ブラウザ ラッパー まずは、グリッドを包むラッパーです。 グリッド用のラッパーはセマンティック的には特に意味がなく、ただのラッパー（包み紙）です。使用する要素はdivがよいです。 HTML <div class="grid"> <!-- 100% wide --> </div> 表示例 ラッパーとなるdiv要素はブロックレベルのエレメントで、この中にグリッドを包み込みます。 カラム カラムはよく見かけるメイン コンテンツとサイドバーの2つです。 メイン コンテ
[CSS]対応ブラウザはWebkit系だけだけど、美しいエフェクトを備えたラジオボタン
見た目だけでもCSS3で美しくスタイルされたラジオボタン、クリックすると更に美しいアニメーションのエフェクトが仕込まれています。 光点がアニメーションで移動 ラジオボタンの選択が移動するのは、分かりやすいですね。 実装は下記のようになっています。 HTML <input type="radio" name="name" checked /> <input type="radio" name="name" /> <input type="radio" name="name" /> <input type="radio" name="name" /> <input type="radio" name="name" /> CSS body { padding: 50px; background-color: hsl(0,0%,20%); } input { -webkit-appearance:
[CSS]さまざまなバリエーションを簡単に利用できる美しいデザインのボタンを実装するチュートリアル
画像は使用せずに、繊細なパターンとグラデーションで美しいボタンをスタイルし、サイズやカラーなどさまざまなバリエーションを簡単に利用できるように実装するスタイルシートのチュートリアルを紹介します。 ベースとなるボタン HTML マークアップは非常にシンプルです。 <a href="" class="button">Button</a> または、button要素でも構いません。 <button class="button">Button</button> CSS CSS3を使って、ちょっとリッチにスタイルしてみましょう。 .button{ display: inline-block; *display: inline; zoom: 1; padding: 6px 20px; margin: 0; cursor: pointer; border: 1px solid #bbb; overflow
カテゴリ別に見る、スマフォのアプリに使用されている気持ちのいいアニメーションのまとめ
気持ちのいいアニメーションは、スマフォのアプリには欠かせないと言ってもよいでしょう。 アニメーションはインターフェイスを設計する上で非常に重要で、4つのカテゴリに分けてユーザエクスペリエンスに欠かせないアニメーションを紹介します。 Great Animations Make Great Apps 下記は各ポイントを意訳したものです。 1. 知らせるアニメーション 2. 可能であることを伝えるアニメーション 3. あなたを歓迎するアニメーション 4. 楽しませるアニメーション 1. 知らせるアニメーション 最も単純なアニメーションの使い方で、ユーザーに知らせることを目的としたアニメーションです。これは多くのアプリケーションで使用されています。
[CSS]スクリプト無しでこんなにかっこいいスライダーが実装できるとは！ -radio click through
画像が右からスライドし、それに続きコンテンツを配置した半透明のパネルが追いかけるようにスライドするコンテンツスライダーを紹介します。 実装はHTML/CSSで、スクリプトは無しです。 radio click through スライダーの動作の仕組みはラジオボタンで、チェックが入ったコンテンツを表示します。 実装はこんな感じ。 HTML 各パネルはリスト要素で、ラジオボタンとラベル、コンテンツがセットになっています。 <div id="gal"> <nav class="galnav"> <ul> <li> <input type="radio" name="btn" value="one" checked="checked"/> <label for="btn"></label> <figure> <img src="image.jpg"/> <figcaption> <h4>見出し</h
[CSS]画像無しで、両端にいくにつれ薄くなるラインを描くテクニック
デモページ [ad#ad-2] 実装 全コードはデモページに記載されているので、ここではラインのスタイルをピックアップします。 HTML マークアップはシンプルなリストで、ul要素にclassを指定するだけです。 <ul class="container"> <li>First list item</li> <li>Second list item</li> <li>Third list item, etc.</li> </ul> CSS 両端がフェードするラインはCSS3グラデーションで、linear-gradientを使います。 シンプルに書くと下記のようになります。 background–image: linear–gradient(rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0)); 両端が「0」で、真ん中が「1」です。 また、このグラデー
[CSS]画像を使わずに、スタイルシートでぎざぎざの線をかくテクニック
画像を使わずに、ノコギリの歯のようなぎざぎざの線をスタイルシートでかくテクニックを紹介します。 下記は、p要素一つだけです。 実装は、こんな感じです。 HTML HTMLはpでもdivでも適当に。 <p>塩レモン</p> CSS ぎざぎざの線はlinear-gradientでかきます。 ぎざぎざのサイズは、4pxを4箇所、それを倍にした8pxを2箇所、変更してください。 p{ padding:1em; background: linear-gradient(-135deg, #4885ff 4px, transparent 0) 0 4px, linear-gradient(135deg, #4885ff 4px, #fff 0) 0 4px; background-color: #4885ff; background-position: left bottom !important; b
[CSS]角丸やシャドウだけではないCSS3の大切な三つのテクニック
CSS3って角丸とかシャドウとかグラデーションでしょ、という人に知っておいてほしいCSS3の大切なテクニックを紹介します。 3 Advanced CSS3 Techniques You Should Learn デモページ（※キャプチャはChrome） [ad#ad-2] 1. Advanced Selectors CSS3で最も重要といってもよい特徴の一つが「Advanced Selectors」です。簡単に説明すると、特定のHTMLエレメントに対してIDを使用しないで、スタイルを適用できるものです。 リスト要素で配置した下記のデモを見てください。 背景色を奇数番目はブルーに、更に5番目はレッドにしています。
[CSS]テキストの天地に美しいグラデーションのボーダーと背景を適用するスタイルシート
p要素などで実装したテキストの天地に、美しいグラデーションのボーダーと背景を適用するスタイルシートのデモを紹介します。 カルピスもちはおやつにもらったのがおいしかっただけで、スタイルシートには何の関係もありません。 上記は当方でテキストやサイズを変更したもので、デモは下記にあります。 Gradient Borders 実装はシンプルなので、他にも応用がききそうですね。 HTML p要素をdivで内包します。 <div class='backbox'> <p>This is the future.<br>Live it & love it.</p> </div> CSS まずは、Webフォントと背景カラーの設定です。 @import url(http://fonts.googleapis.com/css?family=Josefin+Slab); html { background-colo
スマートフォンサイトのHTMLコーディングメモ12個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
display:table-cell; を活用する リキッドレイアウトのコーディングにすごく便利。 親要素に display:table; 子要素に display:table-cell; 記事リストなど、画像とテキストを横並びにするときに。 均等に横並びにしたいときに。 タップ時のカラー設定 CSSで以下のように設定。アルファ値も設定可能。 -webkit-tap-highlight-color: rgba(255,105,183,0.6); 画像、iframeに max-width を指定 img・iframeは、サイズが大きすぎて画面からはみ出すことがあるので max-width:100%; を指定する。 word-break:break-all; を指定 スマホは幅が狭いため、長いURLなどが1行に入りきりません。 word-break:break-all; を適宜指定する。 フォ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS HappyLife ZERO
http://www.hp-stylelink.com/news/2013/10/20131001.php
2013年上半期、チェックしておきたいCSSのフレームワークのまとめ