CSSのみでマウスオーバー時にリンク先のURLをツールチップで表示させる
cssの小技的な内容です。さほど使う機会は無さそうなんですけど、JavaScriptを使うほどでも無いようなものなのでcssだけでやって見た、みたいな記事。リンクにマウスを乗せるとそのリンク先のURLをツールチップとして表示させます。 ...
css
地味に使えるCSS小技のメモ&サンプル集
cssの小技的なテクニックが便利なので好きなん ですが、cssそのものが嫌いで覚えられないので カンペ的な記事を作ることにしました。便利な小技 は沢山あるんですが、特に自分が良く使いそうな Tipsをメモします。既に出回っている情報...
240pxから最大2560pxの画面サイズまで対応出来るレスポンシブWebデザイン構築用のグリッドシステム・Golden Grid System
iPhoneなどのモバイルや、超ワイドなモニターサイズ までサポートしているレスポンシブWebデザイン構築用 のフレームワーク・Golden Grid Systemなるものが 登場した模様です。最大で2560pxまで対応できる らし...
css3を使って手紙が封筒から出てくる様を表現したコンタクトフォームがなかなか可愛い
とっても可愛らしいコンタクトフォームがありま したのでメモがてらご紹介します。封筒に入 った手紙を模したフォームのデザインで、 マウスを乗せると、フォーム部分の手紙が アニメーションしながら出てきます。使いど ころは今は限られてし...
Facebookページをアピール出来るソーシャルプラグイン・Likebox（いいね！ボックス）をオリジナルデザインに変更する方法
Facebookページもかなり普及したようで、 様々なサイトやブログでソーシャルプラグ インの定番のLikeboxを見かけるように なりました。最近知ったのですが、この Likeboxはデザインを変更する事が出来る ようなので、今...
グリッドレイアウトを意識したレスポンシブWebデザインをSass/Compassを使って構築する為のサンプル
なかなか珍しかったので備忘録。個人的 にも注目しているMedia Queryを使った レスポンシブWebデザインの構築を、 Sassをサポートしたcssフレームワーク、 Compassを使って行える、というサンプル。
Media Queryを使用したレスポンシブWebデザインの構築時にはResponsivepxっていうツールが超オススメです
たまたま見つけたツールが泣きそうなくらい 便利だったのでシェア。Media Queryを使用 したレスポンシブなWebデザインの構築時 にとっても役に立ってくれるツールです。URL を指定するだけで、あとは幅を調整しながら レイア...
CSS3のtext-shadowを使ったテキスト装飾のサンプル集
たまに使うので自分用にメモします。 css3のtext-shadow等を使用した テキスト装飾のサンプルコードの 備忘録です。工夫すればいろいろ と作れるんでしょうけど、とりあえず よく使うものをピックアップします。
手軽にデザインを変更できるCSS3ボタンを作る為のフレームワーク・CSS3 Buttonize Framework
CSS3のみで作るボタンのフレームワーク。 以前にも似たようなものがありましたけど、 CSS3 Buttonize Frameworkは軽量で、 使いやすそうだったのでメモがてらご紹介 します。やはり管理が楽なのは魅力ですね・・
CSS Regionsのように雑誌のような複雑なレイアウトを組めるライブラリ・Regions.js
雑誌のような複雑なレイアウトをWebや 電子書籍でも組めるようにしよう、という 目的（かどうか分からないけど）で先日 W3Cで公開されたCSS Regionsをjsで 実装しよう、というもの。cssオンリーだと まだまだ時間かかり...
グリッドレイアウトでWebサイト構築したい時にはGrid calculator and generatorが手軽で良さそう
なかなか手軽で自分向きだったのでメモ。 グリッドレイアウトを意識したWebサイトの 構築の際に、希望の幅を入れれば、その 幅に応じたグリッドレイアウト用のcssが 生産されます。ファイルはフレームワークの Blueprint cs...
Webサイトのレイアウト調整や補助に使えるjQueryプラグインいろいろ
レイアウトの調整を簡略化したり、通常 は難しいレイアウトを可能にしたり、とい った補助的なjQueryプラグインのまとめ です。最近探す機会が増えたので今後 の為に備忘録的に記事にしておきます。 この手のプラグインは数多にあるので...
WebサイトのCSSをインタラクティブに修正したり保存出来るツール・CSS Pivotがなかなか便利
なかなか便利だったのでシェアがてら ご紹介。WebサイトのCSSをプレビュー を見ながら修正したり、そのコードを 保存することが出来るツール・CSS Pivot のご紹介。似たような機能のChromeの エクステンションを普段使用...
CSS3 関連情報・総まとめ
css3の情報がかなり増えてきたので 一旦まとめておきます。基本的にはIE が非対応なので、実用はまだまだこれ からという印象でしたが、iPhoneやiPad の普及や、IEにも対応させることが可能 なライブラリの出現でかなり実用...
見にくい原因になりがちなcss3プロパティを無効化するブックマークレット
css3、僕も好きで使うことは使うのですが、 css3を使っている事が理由ですごく見にく いサイトやブログにたまに遭遇してアレな ので無効化するブックマークレットを探して みました。良さそうなのがありましたので 少し手を入れさせて...
class名を変えるだけでデザイン変更可能な、css3で作られた沢山のボタンを公開しているWe Love Buttons
なかなか面白い試みだなぁと思って シェア。class名を変更するだけで ボタンのデザインを変えることが出来 るようにしてくれているボタンデザイン の着せかえプロジェクトです。css3で すので使いどころは限られますが、 試みが素...
2010年のWeb制作に役立つ海外まとめ記事のまとめ
まとめのまとめです。来年の復習用 にエントリー。今年もWeb制作関連 の記事が沢山ありましたが、そんな 中でもうまくまとめてくれている記事 をまとめてハブ的な記事にしたいと 思います。
cssの未使用セレクタをその場で複数ページ一括調査するブックマークレット・cssess
中小規模サイトの構築時に役立ちそうな ブックマークレットがあったのでご紹介します。 閲覧しているWebサイトで使用しているcss の未使用セレクタを教えてくれるブックマーク レットです。こういったWebサービスはあります が、その...
クロスブラウザ対応・グリッドレイアウトのCSSフレームワーク・FEM
以前、まとめ記事にも複数含めましたが、 この手のものはいくつあっても困らない のでご紹介。グリッドレイアウトのcssの フレームワークです。勿論、IE6~IE8、 Firefix＜Chromeなどクロスブラウザに 対応しています。...
Webフォントを使ってみよう！@font-face 関連の情報いろいろ
Webフォントを使う機会があった のでついでに備忘録的メモです。 @font-face関連の情報いろいろ。 と言っても、まだそんなに情報が 無いので触りを理解するための まとめ的な記事です。
コーポレートサイト向けに美しくデザインされたフリーのHTML5+css3テンプレート
HTML5+css3なので、実際の業務で 使用する機会は日本では無さそうで すが、デザインがとても美しかったの でメモがてらご紹介。jQueryはIEでも 動いたのでcss3やhtml5を変更すれ ば普通に実践使用できそうです。 ...
borderに画像を使用したcss3プロパティをサクッと生成するジェネレーター・border-image-generator
今まで知らなかったんですが、 css3ってborderに画像を使える んですね・・・勉強不足でした。 border-image-generatorはその css3による画像borderをサクッと 作ってくれるWebジェネレーター ...