CSS3なら簡単！ アニメーションするリングメニューを作る | CSS-EBLOG
CSS3なら簡単！ アニメーションするリングメニューを作る カテゴリ：CSS3関連 2011年7月19日 07:40 jsdo.itで公開したら意外と好評だったので、解説などを書いてみたいと思います。 ゲームなどにありそうなリングメニューを、CSSだけを使って実装した例です。下に実際の動くサンプルもあるので、ぜひ触って見てください。 ちなみに右の画像は、中央の「main」にマウスオーバーした際にアニメーションでメニューが出てくる瞬間の画像です。 デモ まずは下のサンプルをご覧ください。ちなみにアニメーションに対応しているブラウザのみ、アニメーションが実行されます。具体的には、GoogleChrome、Safari、Firefox、Operaです。 リングメニューをCSSで実装してみる - jsdo.it - share JavaScript, HTML5 and CSS テクニックの肝 今
CSSレイアウトの肝！ 表示・配置のプロパティ、14選
詳しくはコチラ→ position ボックスのレイアウト方法を指定するpositionプロパティ topプロパティ topプロパティは、ボックスを配置する場合に上からの距離を指定します。基準位置の上端から配置するボックスの上端までの距離を示します。positionプロパティが「static」以外のときに有効となるプロパティです。 詳しくはコチラ→ top ボックスを配置する場合に上からの距離を指定するtopプロパティ bottomプロパティ bottomプロパティは、ボックスを配置する場合に下からの距離を指定します。基準位置の下端から配置するボックスの下端までの距離を示します。positionプロパティが「static」以外のときに有効となるプロパティです。 詳しくはコチラ→ bottom ボックスを配置する場合に下からの距離を指定するbottomプロパティ leftプロパティ leftプ
ブラウザのデフォルトのスタイルをCSSでリセットする方法 | ネットショップ店長のWeb作成ノートps6.0
ネットショップ店長が店舗運営に役立てるための、マーケット動向，ショップ運営，ショップ作成，画像加工などのメモやリンク，まとめ記事。 各ブラウザは、htmlのタグ毎にデフォルトで適用するスタイルをそれぞれ独自にもっています。<h1>で囲んだ要素を、違うブラウザで表示してみると文字の大きさが違ったりするのは、ブラウザ毎にもっている<h1>のスタイルが異なるからです。 CSSを使ってブラウザ毎のデフォルトの違いを吸収するためには、CSSの最初の部分でデフォルトのスタイルをリセットする方法がよく使われます。リセットの具体的な方法はコレ リセットのやり方は2通りあります。 CSSのユニバーサルセレクタを使ってリセットする ユニバーサルセレクタとはCSSの全てのプロパティに対して適用できるセレクタのことです。セレクタに*を書くとユニバーサルセレクタになり、一度に全ての要素に対して指定できます。
HTML5 & CSS3 ブラウザ別サポート状況
What is an IP Address? An IP (short for “Internet Protocol”) address is a unique number assigned to every machine that connects to the internet. Nowadays, you can have multiple computers behind a router that share a single IP using Network Address Transformation (NAT). If you have ever used a wifi hotspot to access the internet, you’ve shared an IP address with someone. What’s the Difference betwe
ゆず屋
漫画、アニメ、ライトノベル関係のロゴに使われているフォントの紹介。オタクのためのフォント読本「書体の研究」の情報も。「狼と香辛料」第壱話 〜我こそは誇り高き賢狼の狼である〜 from 混沌と勇気日記。 〜新たなる勇ましき無秩序の世界〜 01/11 22:24 みなみけ〜おかわり〜 1杯目「温泉、いただきます」 それが今重要か？ from 裏オタク 01/11 04:42 シゴフミ 第1話「コクハク」 from 天使は瞳を閉じて 01/09 04:19 みなみけ~おかわり~ 第１話 from ニコパクブログ１号館 01/08 03:17 みなみけおかわり１杯目『温泉、いただきます』 from アニメ好きのケロポ 01/08 00:00 昨日の土曜日はこれを観ていました。 『乃木坂春香の秘密』の DVD 第１巻です。 で、同封されていた冊子にちょうど良い資料があったので、以
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い:phpspot開発日誌
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。 が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく整列できてしまいます。 ↓↓↓↓↓↓↓↓↓↓ これを実現するのに必要なJavaScript コードは以下のように数行。これで実現可能です。 $('#primary').masonry({ columnWidth: 100, itemSelector: '.box' }); この仕組みを使ってブログ等を表示するともっと面白いことになります。 新聞っぽくなりましたね。 ブラウザ幅を変える事でいろいろな見え方になるのも面白いです。 以下のエントリを参照してください。 jQuery Masonry ? B
Web制作時に色（カラー選定）で困った際に役立ちそうな13のツールやサービス - かちびと.net
Webサイトの制作時にいつも 時間がかかるのがカラー選定 で、少し困っているのでもう少し 時間を短縮したいと思い、使って いるツールも含めていろいろご紹介。 いろいろ有りすぎるので使いやすいと思ったサービスに厳選しています。順不同。使いやすさとか好みもあると思うので参考程度に。。。ネタ帳さんのwebサイト作成時にサイトカラーを決められない人の為のwebサービスいくつかという記事も凄く参考になりますよ。 原色大辞典 色のリファレンス国内サイト。国内にも同じようなサイトは沢山ありますが個人的にここが一番見やすくて使いやすいです。 原色大辞典 colr.org 写真からスキームを作成してくれます。手持ちの画像をアップロードしてスキーム作成も可能ですが、flickrからランダムで呼び出したり、ピッカー機能があったり、タグ付け出来たりと多機能ですが、UIがシンプルで使いやすい。動作も軽いので重宝しま
CSS のみで吹き出し
hail2u.net - Weblog - Pure CSS な吹き出し に触発されて、画像や JavaScript を使わずに CSS だけを使って「吹き出し」を作る方法を僕も考えてみた。 Demo: CSS のみで吹き出し マークアップは 2 重の要素があれば OK。ここではそれぞれ bubble と body というクラスを付与した div と p を例に説明する: <div class="bubble"> <p class="body">Speech!</p> </div> CSS の最低限必要な部分のみを抜き出すと以下のとおり。これは背景が黒いボックスの下に左向きのしっぽを出す場合の例: .bubble { float: left; /* または position: absolute; */ border-left: 10px solid black; border-bottom
CSS Sprite Generator, Editor, and Code
What are CSS Sprites CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image. This technique can
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
syboos.jp
CSSでヘッダーを固定にしたサンプル | CSS Lecture
フッターを固定にしたサンプル | CSS Lecture
The W3C Markup Validation Service