![http://ri-mode.com/rainbow/2013/03/07/swap_contents_with_tabs_jquery/](https://cdn-ak-scissors.b.st-hatena.com/image/square/c9cd596ce67c23e7517837aa6e51ef79824ebe4f/height=288;version=1;width=512/https%3A%2F%2Fri-mode.com%2Frainbow%2Ffiles%2Fjquery002.jpg)
ブレイクポイントの考え方 レスポンシブウェブデザインを実現するのによく使われる手法がメディアクエリを使った画面サイズ別スタイリングです。レスポンシブウェブデザインの場合、ある画面サイズを境目として適用させるスタイルを切替えますが、この境目を『ブレイクポイント』といいます。 この『ブレイクポイント』ですが、特に「こうするべき」というものが今のところありません。この境目をどの値にするかもそうですし、何分割させるのかというのも制作者がいろいろ試行錯誤しています。 これまでのウェブ制作では、デスクトップの場合はアクセス解析からよく見られている画面サイズを分析、モバイルは横幅240pxが主流、などの明確な指針があったのでそれに合わせたデザインを行えば問題ありませんでした。 しかし多様なデバイスが次から次へと出てくるようになり、PCやタブレット、スマートフォンだけでなく、テレビやウェアラブルタイプのデ
CSS3の「box-shadow」を使用して、ウェブデザインに洗練された美しいエフェクトを加えるテクニックを二つ紹介します。 How to create slick effects with CSS3 box-shadow デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 box-shadowプロパティとは ページ全体に奥行きを加えるエフェクト 紙がめくれたようなエフェクト 対応ブラウザ box-shadowプロパティとは 「box-shadow」は、ボックス要素の内側・外側に多数のシャドウを加えることができるプロパティです。フォーマットは下記のようにオフセット、サイズ、ブラー、カラーの値を指定します。 <shadow> = inset? && [ <length>{2,4} && <color>? ] 簡単な例をみてみましょう。 box-shadow: 3px 3px
Creating Different CSS3 Box Shadows Effects [ad#ad-2] デモ 実装 デモ デモはbox-shadowに対応した下記のブラウザでご覧ください。 対応ブラウザ Internet Explorer 9.0+ Firefox 3.5+ Chrome 1+ Safari 3+ Opera 10.5+ デモページ [ad#ad-2] 実装 基本となるHTML 8つの各デモのHTMLの基本は同じで、class名が異なるだけです。 <div class="box effect"> <h3>Effect</h3> </div> 基本となるCSS div要素とh3要素の基本となるスタイルです。 .box h3{ text-align:center; position:relative; top:80px; } .box { width:70%; height
中心箇所を選定 画像は天地左右にクロップ可能なので、中心となる箇所をグリッドから決定します。 HTML HTMLは画像を配置するimg要素の他に、クロップするためにdiv要素が二つ必要です。 <div class="focal-point"> <div><img src="guy.jpg" alt="guy"></div> </div> div要素を余計に使用することはよくないことですが、実装を簡単にするために使用しています。 クロップする箇所を指定するには、classを追加します。 <div class="focal-point right-3 up-3"> <div><img src="guy.jpg" alt=""></div> </div> 右3、上3は、上記のグリッドから算出してもので、右3上3にクロップします。 CSS まずは、ベースとなるスタイルシートです。 * { marg
Focal Pointは画面幅に応じて画像の表示場所を切り替えるJavaScriptライブラリです。 レスポンシブWebデザインの弱点とも言えるのが画像の表示です。単純に縮小して表示してしまえば良いという訳ではありません。そこで使ってみたいのが です。 デスクトップの場合。 幅を少し小さくした場合。特に変わっていないと思います。 さらに縮めました。一部が切り抜かれたのが分かるでしょうか。 さらに小さく。顔の部分を中心にしています。 こちらもデモ。Aチームです。 幅を狭めると一気に拡大写真のように。 さらに狭めると人がちゃんと収まっている状態まで縮まりました。 こちらは右側のいすに注目。 ほら、なくなったのが分かるでしょうか。 こちらの写真も… 上下が特に大きく変わっています。 こちらの場合はどうでしょう。 右上は固定で左側のコンテンツが大きく削られています。 これは…ミサイル? 上下左右と
こんにちは。 最近徐々にjQueryをいじるのが楽しくなってきたデザイナーのツチヤです。 テーブルレイアウトでは楽に出来ていたのに、HTMLとCSSでは実現が厳しい! という事がよくあるのですがjQueryのおかげで簡単にクリアできるようになりました。 そのうちの一つをご紹介します。 リストページ等で、 ・縦横サイズの違う画像を並べる ・画像は固定のサイズBoxの縦横中央に配置したい というレイアウトをする場合、テーブルレイアウトでは tdをalign=”center”、valign=”middle”にすれば可能ですが、 CSSでは一工夫必要です。 そこでjQueryを使って画像の縦横サイズと親のBoxサイズのマージン値を求めて 代入する処理をすることにより、スッキリ実現できるようになります! ※display: table-cell(テーブルの構造を表現することができるCSSプロパティ)
来年春の引っ越しに向けて、自宅に大量にある本を整理しています。 以下の本の中で、欲しいものがある“知り合いの方”は、メール、やtwitter、facebookなどを通じて連絡してください。 以下に未掲載の物もまだまだたくさんあります。随時挙げていきますので楽しみにしていてください。 画像:Full Page Background Image | jQueryより Webサイトの背景に、大きなサイズの画像を使う際ぶちあたるのは、見る人のブラウザサイズによって背景画像の表示されるサイズをコントロールできないということです。 この問題に対してjQueryを使って解決方法を紹介していた海外のサイトがあったので、紹介したいと思います。 「背景画像を常にブラウザサイズぴったりにする」とは? はじめに、「背景画像を常にブラウザサイズぴったり...」とはどういうことかを見てみましょう。 こちらのサイトをご
画像を包括したコンテナに その画像がぴったり収まる ようにサイズを調整する、 というjQueryプラグイン。 必要になるか分かりません が、需要はありそう。 コンテナ一杯に画像を表示させる、というもの。 上が使用した状態、下が未使用です。下はコンテナに隙間があるのに対し、上はコンテナに隙間無く画像が収まっています。画像をメインとしたコンテンツでグリッドレイアウトなWebサイトなどにも良さそうです。 コード<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> <script src ="imgLiquid-min.js" type="text/javascript"></script>コアとプラグインを読み込みます。 $("
タイトルの『今更』というのは、レスポンシブ Web デザインに最近まで手を付けなかった自分自身に対する教訓の意味を込めていますので、何も『レスポンシブ Web デザインがダメだ。』とか『レスポンシブ Web デザインは一時期の流行りで、もう過去のモノだ。』というような意味ではないです。 反対に、これからもっと活用されるべきだと思っておりますし、最近ではレスポンシブ Web デザインのことを取り上げたブログ記事なども多く見受けられますので、皆さんも同じように感じているのではないでしょか。 最初にレスポンシブ Web デザインが紹介されたのは、2010年5月25日の A List Apart: Articles: Responsive Web Design だと思いますので、もうすでに2年前の記事です。 ということを考えると、Media Queries をちょっと試しただけで、今までレスポンシ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く