CSSの content プロパティーを使いこなそう！CSSの小技やスニペット集なんかを見ていると、ちょくちょく見かける content プロパティー。「そういえば、こいつ一体何者…！？」と思った方もいるかもしれないので、今更ながら改めて content プロパティーの紹介をしようと思います。 content プロパティーって何？content プロパティーは、要素の前後に、:before または :after という擬似要素を使ってテキストや画像などのコンテンツを挿入する際に使用します。擬似要素とは、HTML などの文書には記述されていない要素を CSS によって新たに作り出された架空の要素です。Web クリエイターボックスでも、過去記事「かつては JavaScript を利用していたものの、今では CSS のみで実装できる 10 の小技」や「経歴や会社の沿革ページに！簡単な CSS で
One of the things that Google revealed at the Google I/O 2014 was the new visual language for all their apps, services and Android OS — called material design. Together with the keynote they released a living style guide.I am impressed by the attention Google pays to all the details in their guide. I was especially impressed by the section on shadows which are used to define different layers and t
なんとなく使っているとはまるCSSの継承について、今月号のWebDesigningでまとめていたのですが、どっかのサイトに載ってないかと探していたらいろいろ情報がありまして。 まず、本当にありえないと思うのが、親タグのスタイル指定の一部分だけが勝手に子タグに反映されてしまうという点。 しかも、親タグがid属性で指定していた場合、idの優先順位が高いため、指定の仕方によっては子タグで上書きしようとしているスタイルが反映されない点。 このあたりがCSSを難しくさせているとしか思えないのです。 しかも、JavaやObjectiveCなどと違い、親タグは無限に設定可能です。というか、HTMLの構造上そうならざるを得ません。 そうなると、何がなにやら、という状況に容易になってしまいます。 このあたりはFirebugの機能を使ってフォローできますけど。 今後、CSS3で今まで画像で済んでいた要素が、ス
Animate.css Just-add-water CSS animations See animations Close list Attention seekers bounce Copy class name to clipboard flash Copy class name to clipboard pulse Copy class name to clipboard rubberBand Copy class name to clipboard shakeX Copy class name to clipboard shakeY Copy class name to clipboard headShake Copy class name to clipboard swing Copy class name to clipboard tada Copy class name t
<html> <body> <div>a div! <span>a span!</span></div> <div> <style scoped> div { color: red; } span { color: green; } </style> a div! <span>a span!</span></div> <div>a div! <span>a span!</span></div> </body> </html> then it restricts the style rules so that they’re applied to the enclosing <div> that is the parent of the <style scoped> element and anything inside just that <div>. We call this ‘scop
Buttons are a very important element of any web design. It enhances the feel and beauty of the design and has an impact on its overall look. Buttons can make the design more interesting and unique and add some spice to it. This is the reason why designers are always trying to be creative in designing eye-catching buttons. Buttons are usually made using CSS3, as CSS3 is a comparatively easy to lear
こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基本から理解して、使い方をマスターしよう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！ デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で
dislay 属性についてもっと知りたいという方は、こちらのサイトを参照ください。 display - CSS | MDN 要するに何が言いたいかというと、テーブルもまたスタイルシートの display 属性によってその形状を実現しているに過ぎず、この値を色々と操作すればスマートフォンのようなスクリーンサイズの狭い環境にも最適化された表示が出来るのではないかということです。 実際に作ってみた - 下準備 今回は4パターンの表示を紹介します。まずは下準備として簡単なテーブルレイアウトと元となるスタイルを組んでいくとします。 はじめに HTML で適当なテーブルを作ります。 <table class="table table-striped table-responsive"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Ag
表1：CSS3カラーキーワード・チャート *1 CSS2.1で定義される17色 *2 別名でcyan *3 別名でmagenta *4 greyの綴りも受け付ける CSS3では拡張色として以上の138色（+別名10色）が定義されている。色キーワードの関係としては、 CSS3基本色＝HTML4定義色 CSS3基本色＋オレンジ（CSS3拡張色）＝CSS2.1定義色 CSS3拡張色≒SVG1.1定義色≒Netscapeカラーパレット≒X11の色名称 ということになっている。X11の色名称は、Netscapeカラーパレットとして初期のバージョンに一部の色にバグがありながらもかなり昔のNetscapeには実装されていた。よって、色をサポートしているブラウザが色キーワードを解釈できず、色が出ないということはまずないと思われる。なお、X11の色名称の経緯については、なぜCSSのカラー名には「トマト」「レ
I’m proud to announce my latest CSS experiment—The CSS Social Buttons. They are not another "pure CSS3" or "HTML5 canvas" icons. These icons use the basic traditional background-image technique. The purpose of these icons is to provide a cross-browser, consistent and versatile CSS that can be applied in any design, app or theme. Basically, it is one master stylesheet that contains various design s
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
