7. 確認する <p class=”btn check”> チェックボックス✓ <input type=”checkbox” class=”check”> 段落です p span{color:blue; margin:20px} <p class=”btn”> <span>ボタン</span></p> ボタン 定義済みのid,class名をつけた 要素の再定義で崩れた 9. 共通ボタン 例外ボタン共通ボタン デバイスの向きを変えられる ユーザはいつでも、さまざまな理由でiOSデバイスの向きを変えることができます。たとえば、実行 する操作が縦長の向きのほうが自然に感じられる場合もあれば、横長のほうがより多くの情報を表示 できると感じられる場合もあります。デバイスの向きを変える理由が何であれ、アプリケーションの 主要な機能が見やすいままであることをユーザは期待します。 ユーザはホーム(Home
2012年02月09日 13時58分更新 文●斉藤祐也／<a href="http://css.studiomohawk.com/">CSS Radar</a> 最近のWebサイトは大規模傾向にあり、Webアプリケーションを構築する機会も増えてきました。jQueryやMooToolsなど、JavaScriptを手軽に利用できるようにするライブラリーが普及する一方、Webサイトの表示を担うCSSにも、「Blueprint」や「960 Grid System」に代表されるフレームワークが登場しています。 「LESS」や「Sass」のようなCSS拡張メタ言語は、こうしたフレームワークとは異なり、CSSの言語自体を拡張し、CSSには存在しない機能を追加するものです。CSS拡張メタ言語を利用することで、変数、ミックスイン、入れ子ルール、名前空間、四則演算、関数などの動的な処理をCSSに追加でき、CS
2011年10月09日14:15 カテゴリLightweight Languages DHTML - 最低限文化的なCSSアナログ時計 これ見たら一つ作り置きしたくなってきたので。 Demo 右の通り。 一応 WebKit (Safari & Chrome on Mac/PC/iOS/Android)、Firefox、Operaで動くのを確認。Operaで動く分、AppleのiPod Nanoのページよりも互換性は少し上です。 なぜかIEで動かない。参考にした Fun with CSS Transforms in Firefox and Webkit - zachstronaut ではIEでもぐるぐる回転しているのですが。 何をやっているかは、ソースを見ればおわかり頂けるかと。 それよか、ちょっと驚いたのが、これ。 WebKitのWeb InspectorってリアルタイムでDOMの変化追え
Enables to animate an element. Every animation consists of the animation properties, e.g. delay and duration, and the related keyframes, which define its appearance. Compatibility -webkit-animation Safari 5+, Chrome 10+ iOS 3.2+ Android 4+ Blackberry 7+ @-webkit-keyframes animation Firefox 16+ Internet Explorer 10+ Opera 12.1+ IE Mobile 10+ @keyframes Not supported by Firefox prior to version 5, I
Gmail for Mobile HTML5 Series: CSS Transforms and Floaty Bars
Gmail for Mobile HTML5 Series: CSS Transforms and Floaty Bars On April 7th, Google launched a new version of Gmail for mobile for iPhone and Android-powered devices. We shared the behind-the-scenes story through this blog and decided to share more of what we've learned in a brief series of follow-up blog posts. This week, I'll talk about different ways to animate the floaty bar. Even from the earl
Fun With CSS Shapes - Nettuts これは驚き！CSSだけで作れる吹き出しボックス。 次のような吹き出しが、画像を一切使わずにCSSだけで実現できてしまうようです。 HTMLコードをちょっと分かりやすいようにダイエットしてみたものが以下。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> blockquote {
CSSのセレクタをインタラクティブに確認できる超絶便利ブックマークレット『SelectorGadget』 February 27th, 2009 Posted in その他 Write comment かなりマニアックではあるが、その筋の人にはすっごく便利なのでは。 SelectorGadgetではCSSのセレクタを書くためのブックマークレットを配布している。CSSのセレクタは慣れるまで書くのが大変である。 しかしこれを使えば「タイトルだけを指定するCSSセレクタ」「このテーブルのこの列だけを指定するセレクタ」なんてのをインタラクティブに指定しながら確認していくことができる。 使い方は簡単で、まずはブックマークを好きなページで起動する。すると右下にセレクタ表示用のボックスが現れる。 次にセレクタに含めたいDOMをクリックする。するとそこが緑になり、さらにそのセレクタにマッチするDOMが黄色
DNSを守り、DNSで守る 高度・巧妙化し危険度を増すサイバーリスク いま考えるべきモダンセキュリティのあり方 仮想環境データ保護の新次元 高度化・複雑化するIT環境の課題への解決策 最新鋭データ保護・管理ソフトウェア基盤 勝つためのクラウド活用術 New Value on Azure ビジネスを次のステージへ！ サステナビリティの今と未来 企業戦略としてのサスティナビリティ推進 世界の通信インフラを支えるコルトの取組み 今時プライベートクラウドの作り方 2020年代のプライベートクラウド環境を AzureとVMwareを例に紹介 すぐに実践できる仕事効率アップ術 驚きの効果をもたらす外付けディスプレイ なんと最大50％の業務効率アップも！ 最新ストレージで変わるIT運用 仮想化テクノロジーとFlashArrayの組合せで 運用負荷軽減と高性能化を実現したDMM Kubernetes活用の
前回の「CSS 3における新しいレイアウト手法：ボックスレイアウト」に引き続き、「display: box」と指定して実現するボックスレイアウトの特徴を見ていきたい。 今回は、ボックスレイアウトでリキッドレイアウトを作成する方法と、段組みの段の表示順序を指定する方法を紹介する。これまでのfloatやpositionプロパティを使ったレイアウトと比較すると、簡単に設定できるのが特徴だ。 なお、ボックスレイアウトはCSS 3の「Advanced Layout Module」という草案で提案されている新しいレイアウト手法で、現在のところFirefoxとSafari、Google Chromeが対応している。 リキッドレイアウトで段組みを作成する ブラウザウィンドウの大きさに合わせて横幅が変わるレイアウトを「リキッドレイアウト」と呼ぶ。これまでのようにfloatプロパティを使ったレイアウトではネガ
ボックスレイアウトではレイアウトの方向を簡単に指定することができる。これにより、要素を横に並べた段組みのレイアウトだけでなく、縦に並べたときのレイアウトも細かくコントロールすることが可能だ。 なお、ボックスレイアウトはCSS 3の草案「Advanced Layout Module」で提案されているレイアウト手法で、現在のところFirefoxとSafari、Google Chromeが対応している。詳しくは前回までの記事を参照してほしい。 CSS 3における新しいレイアウト手法：ボックスレイアウト ボックスレイアウトで簡単リキッドレイアウト ボックスレイアウトの方向を指定する 次のサンプルでは全体を囲んだ をボックス要素として表示するため、「display:box」と指定している。すると、ボックス要素の子要素「テキストA」〜「テキストC」は横に並べて表示される。これにより、ボックスレイアウト
Can you believe this: Few days ago I went to my bank to check my credit score with the Credit Bureau. The bank official typed in my personal data and sent a request. Web application responded by displaying a yellow message box with an exclamation icon saying that data processing is still in progress. He checked several more times, but he didn't notice that at one moment the message changed to "Acc
We're all trying to build an effective and good looking web forms. But there are always a new challenges. If you read my previous articles on how to build a better web forms, you could have noticed there are so many details. Label positioning, context highlighting or justifying elements. But, with just a few simple CSS tricks you can make a usual, boring web forms more effective and exciting. See
Safariのバージョン3では、スタイルシートを利用して文字のアウトラインを表示できるようになった。スタイルシートで文字をアウトライン化すれば、画像を使わずに文字のデザインの幅を広げることができる。「Safari 3.1でWebフォントを利用する」で紹介したWebフォントが普及すれば、文字のデザインに画像を使う必要は少なくなっていくだろう。 アウトラインのデザインを指定する 文字のアウトラインのデザインは、以下のような-webkit-text-stroke〜というプロパティで指定する。現在のところ、指定できるのはアウトラインの色と太さだ。 アウトラインのデザインを指定するプロパティ プロパティ機能
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
