CSS で作るスマートフォン向け片手操作メニュー
ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック （タップ） で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript （jQuery 使用） で作ってみたので紹介。 久々にこの手のネタ書いた気がしますけども… ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック （タップ） で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript （jQuery 使用） で作ってみたので紹介。多分言葉で言っても伝わりにくいと思いますので実際のサンプルをまずは見てみてください。 CSS で作るスマートフォン向け片手操作メニュー サンプル 現在最新版の Firefox
スクロール途中から位置が固定されるナビゲーションを作ってみる
ある程度スクロールすると、途中から位置が固定になるコンテンツを見かけたことはありませんか？ 今回はjQueryを使ってそれを作ります。 デモ1 デモ2 途中から位置が固定されるナビゲーションのデモ 1 & 2 ダウンロード 今回使うHTMLはこんな感じです。 <div id="header"> <h1>タイトル</h1> </div> <div id="container"> <div id="main">左カラム（メインコンテンツ）</div> <div id="sidebar"><!-- サイドバー --> <div id="nav">ここを固定する</div> </div> </div>#mainと#sidebarはfloat: leftしています。 これの#navが表示エリア上部から20pxの位置まで来たら位置を固定したいと思います。 position: fixedを使って固定する
必見！携帯サイトをお手軽にiPhoneやスマートフォンに対応させる方法 - 適当な日々
フリーランスでwebの仕事をしながらwebサービスとかを作ったり作らなかったり、成長と挫折の記録・・・かもしれないiPhoneの登場でスマートフォンで閲覧しやすいサイトの需要が高まってきたようです。 でもわざわざiPhoneやスマートフォン向けにサイトを作るのは大変・・・。 そんな方に、今までに制作したモバイルサイトをスマートフォン対応させる方法があります。 しかも5分でお手軽にできます！ htmlとCSSで解決する方法なのですが、実はこの方法を使うだけで開発もしやすくなる優れものです。 論より証拠ということで、まずはこちらをご覧ください。 （PCからでもオッケーです。htmlはこちらの記事で作成したものを使ってます。） まず、こちらが普通に作成したモバイルサイト→before そしてこれがその方法を使ったもの→after やっていることは閲覧しているブラウザに応じて、3つの
Firefox 4.0 からは、chromeフォルダが無くなった :: Firefox Fan Club + More Browsers
Firefox 4.0 の新規インストールの場合、chromeフォルダは廃止されてプロファイルフォルダの中には存在しないので注意というお話し。 但し、Firefox 3 系からプロファイルを使いまわしたり、自動更新でバージョンアップさせる場合にはこのchromeフォルダはプロファイルフォルダの中にそのまま残る。 問題は、Firefox 4.0 を新規でインストールした場合のこと。 Firefox 4.0 にはchromeフォルダが無い無いと慌てず騒がず、プロファイルフォルダの中にchromeフォルダを自分で作成して、さらにchromeフォルダ内にuserChrome.cssファイルやuserContent.cssファイルも作ってやればOK。 もしくは、Firefox 3 系のプロファイルフォルダを保存しているなら、chromeフォルダをそのまま同じ場所へコピー＆ペーストしてやればよい。 パ
【初音ミク】 フルCSSでみくみくにしてあげる♪ 【してやんよ】
3/1の夕方、jsdo.itの公式アカウントが大っぴらに誘い受けしてた。 その昔、マクパペットをフルカスタムしたり… あの楽器を再現したり… あの楽器 (Firefox4 only) – jsdo.it – share JavaScript, HTML5 and CSS …した過去があるのでつい反応。 したらすかさず煽られた。 …………CSS3に不可能はない！！ 心の中で啖呵を切った。そして釣られた事に気付いた午後６時。 ぶわっと頭の中に広がったのはCSSなはちゅねを-webkit-animationでネギ振らせる映像だったのだけども、 前記事で紹介したjsdo.piggという素晴らしい素体をみっくみくにしてやることに決めたら後は早かった。 ※Webkit以外だと残念なミクさんになってしまうので実行画面はChromeかSafariで見てね！ （IE6-8で見るのはダメ！絶対！） jsdo.
CSSでキュウべえ(FULL)を描いてみた - jsdo.it - Share JavaScript, HTML5 and CSS
/* * CSSでキュウべえ(FULL)を描いてみた * ※Google Chrome, FireFox, Safari, Operaに対応しています。 */ <div class="qb"> <!-- tail --> <div class="tail"> <div class="parts-1"></div> <div class="parts-2"></div> <div class="parts-3"></div> <div class="parts-4"></div> <div class="parts-5"></div> <div class="parts-6"></div> <div class="parts-7"></div> <div class="parts-8"></div> <div class="parts-9"></div> </div> <!-- ear --
【CSS】IE7のコメントアウトしないと左右のmarginが反映されないバグ！？│自由人万歳ν（ニュー）タイプ
【CSS】IE7のコメントアウトしないと左右のmarginが反映されないバグ！？ IE7の日本語正式版がリリースされて、暫く立った。 今まで作ったページで特に表示が崩れたり、変になる箇所もなく平穏無事に過ごしてきた。 ある新しいページを作ることになり、IE7で表示を確認するとどーもおかしい。 画像があって、その右側に簡単な説明文が入るというよくみる表示方法でIE7だけで左右のmarginが無視されてしまうのである。 しかも同じようなスタイルを適用している別の箇所では、左右のmarginが効いている。 つまり、同じようなHTMLソースと同じようなスタイルをCSSで指定しているのに、片方は左右のmarignが効き、片方は左右のmarginが無視されているのだ。 一体どういうことだ！？っとソースコードを何回も見直してみるが、誤った記述はない。 あーでもない、こーでもないと色々いじっていたが、全く
IE 以外で body の右マージンが無視される訳 - yamachan の JavaScript メモ
body 要素のサイズについて調べてたら、妙なことに気がつきました。 ブラウザによって 右マージン(margin-right) が表示されたりされなかったり。テスト用に作成した body width test (HTML) などで確認すると、IE6 IE7 以外では右マージンが表示されていないのがわかります。 nextindex.net によると、CSS の 過剰制約 (over-constrained) という仕様のようで。 表示しきれないような狭い領域にボックス要素を配置した場合、親の配置指定が左詰めならば右のマージン、右詰ならば左のマージン指定が無視されるそうな。 IE は CSSにあまり準拠していない、ってよく聞くけど、これもその1つかな。 ちなみに IE7 は互換モードでは右マージンを表示するけれど、標準準拠モード(DOM宣言がちゃんとあるxhtml)だと右マージンを表示しないみ
CSS_Reference - Mozilla Developer Network
この CSS リファレンス は、すべての標準 CSS プロパティ、擬似クラス、擬似要素、データ型、@-規則 の アルファベット順の索引 として利用できます。また、すべての CSS 種類別セレクター の一覧および 重要な CSS の概念 の一覧もあります。また、簡単な DOM-CSS / CSSOM リファレンス も含まれています。 基本的な規則と構文 スタイル規則の構文 スタイル規則 ::= セレクターリスト { プロパティリスト } ... ここで セレクターリスト ::= セレクター[:擬似クラス] [::擬似要素] [, セレクターリスト] プロパティリスト ::= [プロパティ : 値] [; プロパティリスト] 下記の セレクター、疑似クラス、疑似要素 の一覧を参照してください。 各指定値の構文は、各指定プロパティに定義されたデータ型に依存します。 スタイル規則の例 strong
CSS reference - CSS: Cascading Style Sheets | MDN
CSS Tutorials CSS basics CSS first steps CSS first steps overview What is CSS? Getting started with CSS How CSS is structured How CSS works Assessment: Styling a biography page CSS building blocks CSS building blocks overview CSS selectors Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators Cascade, specificity, and inheritance Cascade layers The box mo
EPUB仕様策定の当事者たちが語る。EPUBとは何か、歴史的経緯と最新の進捗状況
電子書籍フォーマットの1つとして注目が高まっているのがEPUBです。EPUBは、HTMLやCSSといったWeb標準によって構成されているのが最大の特徴ですが、現在の使用ではまだ縦書きやルビといった日本語対応が十分ではありません。 しかし来年5月に制定予定のEPUB3ではそれらに対応する予定で、それがEPUBに注目が集まっている大きな理由でもあります。 11月15日に行われたWebデベロッパーのためのイベント「Web Directions East 2010」において、このEPUBの仕様策定に関わっている当事者たちが登壇し、EPUBとは何か、そしてその現状がどうなっているのかを解説するセッションが行われました。 この記事では、そのセッションの内容を紹介しましょう。 EPUBの概要 村田真氏は、電子書籍のフォーマットを策定する米国の団体IDPF（International Digital Pu
CSS3が日本語の禁則処理、傍点、縦書きなど対応へ、ドラフト公開
スタイルシートの新たなWeb標準として現在策定が進められているCSS3に対して、日本語に対応した禁則、傍点（圏点）、縦書き仕様などの機能が追加されたドラフトが公開されました。 9月28日にPublickeyで公開した記事「電子書籍フォーマット「EPUB」で縦書きとルビのサポート、来年5月には仕様完成の見通し」では、EPUBでの縦書きやルビ、傍点などの仕様を策定中であることを紹介しましたが、EPUBはXHTMLやCSSをベースにした仕様であるため、仕様策定の作業はEPUBとCSSのそれぞれのグループが協力してCSS3に対して機能を追加する方法で行われていました。 これが最終的にCSS3の仕様として策定されれば、Webブラウザ上での禁則処理、傍点、縦書きなどの組み版処理が充実することになります（ルビはまだ作業中ですが）。大げさではなく、世界中のWebブラウザに対して日本の日本語文化に対応した表
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Redirect
【図解】CSSだけで画像の縦横比を維持したサムネイルを表示する - Qiita
builwing.info
gcss.info
笑い男 SVG - サバニFRP
CSS2 Reference
http://www.designwalker.com/2009/01/table.html
CSS3 ドラえもん