タイルレイアウトjs
Pinterestのようなサイトをよく見るようになりました。 この手のサイトは jQuery Masonry を利用することが多いのですが、今回は The Wookmark jQuery plugin を使ったPinterest 風のタイル状サイトを構築しましたので、その備忘録です。 The Wookmark jQuery plugin の特徴 タイル状にコンテンツを横に並べていく分けですが、CSSの float: や display:inline-block で並べても、各要素の高さが異なるとその分隙間が出来てしまいます。 そこで jQueryプラグイン jquery-wookmark.js を利用することで、高さが異なる要素をタイル状に並べても、隙間を埋めて表示してくれるようになります。 ブラウザの幅を伸縮しても親要素の幅に合わせてコンテンツが上手く配置されますし、レスポンシブWEBデ
Mac/iOS Safariでバックスラッシュを円記号として表示する方法 - teppeis blog
Unicodeではバックスラッシュ*1と定義されているU+005Cだが、歴史的な背景によりMS系日本語フォントでは円記号が割り当てられているのはよく知られた話。 ところがMac/iOSに載っているヒラギノ角ゴシック等ではU+005Cはバックスラッシュとして表示されるし、キーボードの右上の円記号キーを打つとU+005CではなくU+00A5 Yen Signが入力される*2。 それぞれのシステム内で閉じてれば一貫性が保たれるのだけど、Windowsで円記号を意図して入力したU+005Cが、Mac/iOSではバックスラッシュとして表示されてしまう。企業で使われるWebシステムの場合、Windows PCとiPhone/iPadってメジャーな組み合わせだし、円記号が化けるってのは日本企業ではわりと見過ごせない問題だったりする。 実はSafariではこのバックスラッシュ円記号問題への特別対応コードが
floatで並べた li 要素の中央寄せ | Web Design Leaves
いつも忘れてしまうのでメモ。詳細は以下のサイトで。 参考にさせていただいたサイト：hail2u.net「floatで並べたリストのセンタリング」 以下のように、li 要素をフロートさせた場合、それらを中央寄せするには、「text-align: center;」や「margin: 0 auto;」ではうまくいかない。 <div class="materials"> <ul> <li>gold</li> <li>silver</li> <li>copper</li> </ul> </div> /* CSS */ li { float: left; } .materials { position: relative; overflow: hidden; } .materials ul { position: relative; left: 50%; float: left; } .materia
スクリーンサイズに合わせてフォントサイズを変更 | Web Design Leaves
<section> <h1 class="title">Media Queries</h1> <p class="main-text">Animi sint corrupti ipsum sunt...</p> <section> <h2 class="title">Break Point</h2> <p class="main-text">Vitae, nam, aperiam pariatur dicta officia...</p> <p class="main-text">Possimus, error, a id totam cumque fugiat ...</p> </section> <section> <h2 class="title">Grid System</h2> <p class="main-text">Sapiente dolorum impedit commo
これは便利！アイコン型WebフォントのCDN「Font Awesome」
まず、以下のコードでWebフォントの呼び出します。 後は、表示したいところにコードを挿入するだけです。サイト内のアイコンをクリックするとコードが表示されます。 この基本形にクラスを追加すると色々とカスタマイズすることができます。 ちなみに「fa」は表示の基本となるスタイルで「fa-sitemap」はアイコンの種類を表します。スタイルの中身はこんな感じです。 .fa { display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fa-sitemap:before { content: "\f
CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sites Of The Day - Awwwards