<p><a href="http://zeotheory.ticksy.com" rel="nofollow"><img s...
Spaces | Full Screen Grid-Based Blog/Portfolio Preview - ThemeForest
<p><a href="http://zeotheory.ticksy.com" rel="nofollow"><img s...
CSS3のFlexboxを基本から理解して、使い方をマスターしよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基本から理解して、使い方をマスターしよう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！ デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で
レスポンシブ・ウェブデザインでの CSS コードの書き方 | Yomotsu net
いわゆるレスポンシブ・ウェブデザイン、つまりメディアクエリーを採用した Web サイトを構築する際の一番管理しやすいと感じるコードの書き方をまとめました。ただし、あくまでも個人的な、経験から感じた意見ですので絶対ではありません。 CSS のコードの配置広く知られている方法はいくつかあります。 CSS ファイル自体を分ける方法 @media 規則で 1ファイル内にメディア特性単位に書く方法 @media 規則で 1ファイル内にパーツ単位で書く方法 それぞれをコードで表すなら以下の書き方が該当します。 方法1 : CSS ファイル自体を分ける方法この方法は管理が大変でおすすめできません。これでファイルごとコード分割されてしまったらコード検索しづらいわけです。 <link rel="stylesheet" href="desktop.css" media="(min-width:769px)">
CSS3による様々なエフェクトが選択可能なレスポンシブWebデザイン対応イメージスライダーを実装するjQueryプラグイン・REFINESLIDE
3Dやスライスなど、様々なアニメーション エフェクトを使用できて、且つレスポンシブ Webデザインにも対応可能なイメージスライ ダーを実装できるjQueryプラグインのご 紹介。REFINESLIDEというプラグインです。 覚えておいて損は無いのでは。 IEではフェードエフェクトのみになってしまいますが、iPhoneやiPadなどではcss3による様々なエフェクトを利用できます。スマフォ用として利用するっていうのも手ですね。 スマフォとかにも対応できるCSS3+jQueryなイメージスライダーです。3Dな感じのとかスライスしたエフェクトの素敵なもありますのでインパクトは与えられそうですね。 実機で問題なく動作しました。 Sample 上記はIE7でサンプルにアクセスした際の状態です。赤いラベルはそのブラウザでは非対応、という意味です。 以下、そのサンプルページになります。Chromeなら全
[CSS]CSS3アニメーションを効果的に使ったResponsiveコンテンツ用のナビゲーション
Demo 5 上から順に回転します。 実装 Demo 1を例に、実装方法を紹介します。 HTML パネルにはh2要素、リンク、パラグラフを配置しており、一番上に各パネルへのリンクをnav要素で配置します。 <section class="cn-container"> <div class="cn-slide" id="slide-main"> <h2>Explore this</h2> <nav> <a href="#slide-1">Philosphy</a> <a href="#slide-2">Science</a> <a href="#slide-3">Literature</a> </nav> </div> <!-- Slide 1 and sub-slides --> <div class="cn-slide ts-slide-sub" id="slide-1"> <h2>Ph
[CSS]スマートフォンで表示した際、サイドバーの広告を効果的な配置にするテクニック
当サイトのようにサイドバーに広告を掲載している人には朗報のテクニックを紹介します。 下記のようなサイドバーをもったレイアウトをスマートフォンなどの小さいサイズで表示する際、サイドバーのレイアウトをどのようにしますか？ 通常（デスクトップ）時のレイアウト サイドバーを全部、下に移動しますか？ [ad#ad-2] サイドバーを全部下にしてしまうと残念な感じになるので、サイドバーの各広告をコンテンツの間に配置するテクニックを紹介します。 Content Folding スマートフォンなどのレイアウト [ad#ad-2] デモ 実装 デモ このCSSのテクニックはCSS3 Regionsを使用しているため、Chrome16+, Safari5.2でご覧ください。 IE10もおそらく対応しています。 デモページ：幅800pxで表示 実装 HTML HTML5を使っての実装です。 ポイントとなるのは、
[CSS]スタイルシートでここまでできる！Responsiveデザイン対応のスライダー -Responsive CSS3 Slider
JavaScript無し(*1)で、スタイルシートで実装するResponsiveデザイン対応のコンテンツスライダーを紹介します。 *1 スライダーの基本機能ではJavaScriptを使用していませんが、iOSに対応させるために使用。 Responsive CSS3 Slider Without Javascript [ad#ad-2] デモ 実装 デモ デモはCSS3に対応した下記のブラウザでご覧ください。 ベスト Firefox フルサポート Chrome, Firefox, Opera, Safari ※各ブラウザの最新版 一部非対応 IE9 ※スライダーの機能は対応しますが、アニメーションに未対応。 デモでは左右のアローと下のボタンで各パネルがアニメーションでスライドします。 ※ウインドウサイズを変更するのが面倒な人用に、上部にサイズ切り替えボタンがあります。 デモ：幅800pxで表
スマホ対応の新潮流「レスポンシブWebデザイン」とは？ (1/3)
スマートフォンの普及を背景に、「レスポンシブWebデザイン」（Responsive Web Design）という制作手法が海外で注目を集めている。レスポンシブWebデザインとはどのようなアプローチなのか？ 実例で解説する。 ウィンドウサイズを基準にデザインを調整 レスポンシブWebデザインとは、デバイスごとに複数のデザインを用意するのではなく、ブラウザーのウィンドウサイズに合わせてデザインをフレキシブルに調整する制作手法だ。モバイルサイトの制作では、デバイスやスクリーンサイズごとにページを振り分ける方法が一般的だが、レスポンシブWebデザインではHTMLはそのままに、CSS3のメディアクエリーを利用してスタイルシートだけでデザインを変更する。 レスポンシブWebデザインは、2010年5月、米国のイーサン・マルコッテ氏によって提唱され、海外では企業サイトを含む多くのWebサイトで採用されてい
Responsive Web Design のウェブサイトを集めてみた。
スマートフォンウェブサイトの開発を考えると、これだけ、画面サイズが増えてくれば PHPや.htaccess で全てのデバイスに対してユーザーエージェントで細かく振り分けを行い、別々のHTMLやCSSを提供する手法は、ゼロサムゲームみたいなものかもしれません。クライアントにはコストが重くのしかかり、開発者には開発時間が重くのしかかります。ここには win-win のような関係は全くないでしょう。 「Responsive Web Design（レスポンシブ・ウェブデザイン）」 こんな時、少し考え方を変えて Responsive Web Design（レスポンシブウェブデザイン）を採用してはどうでしょう。スクリーンサイズに反応するようにレイアウトが変わるデザイン手法です。allWebクリエイター塾のスマートフォン講座では、一貫して 「Responsive Web Design（レスポンシブ・ウェ
レスポンシブ・ウェブデザインのみを集めた 「mediaqueri.es」
以前 「Responsive Web Design のウェブサイトを集めてみた。」をしたところ非常に人気がありました。そこで、レスポンシブ・ウェブデザインのみを集めた「mediaqueri.es」をご紹介します。かなりの数のレスポンシブ・ウェブデザインが掲載されていますので参考にしてみてください。ウェブサイトそれぞれでデザインが違うので勉強になります。
レスポンシブ・ウェブデザインって何？
先日、レスポンシブ・ウェブデザインのウェブサイトを集めた「mediaquri.es」を紹介しましたが、周りの人からそもそも「レスポンシブ・ウェブデザイン」が何かということを説明して欲しいと言われました。 レスポンシブ・ウェブデザインとは 「レスポンシブ」は「反応型」とも解釈することができます。何に反応するのかというと、「スクリーンの幅」です。「レイアウト」がデバイスのスリーンの幅に反応して可変をしていくのが「レスポンシブ・ウェブデザイン」です。現在では、iPhone のみならず Android など多様なスクリーンサイズをもったデバイスが出現しています。特定のデバイスのスクリーンサイズに合わせてウェブサイトのレイアウトを作成すると、他のデバイスで上手く表示されない問題などが発生します。デバイスを基準に考えるのではなくて、スクリーンのサイズを元に考えようというのがレスポンシブ・ウェブデザイン
IE6-8 にも レスポンシブ・ウェブデザインを適用する「respond.js」
allWebクリエイター塾のスマートフォン講座では、レスポンシブ・ウェブデザインを徹底的に教え込みます。そのなかで、IE6-8 （IE6はすでに対象外かもしれません）へ Media Queries を適用する JSを紹介しています。それが、「respond.js」です。 「respond.js」は 非常に軽くて(最小化バージョン3kb /gzipバージョン 1kb)使いやすい JavaScript ライブラリです。作成したのは、jQuery UI や thmem roller などを作成した 「Scott Jehl」、最近人気が急上昇の開発者です。jQuery Mobile も大きく関わっています。 利用方法 利用方法は簡単で、「respond.js」を<head></head>内の CSSファイルの後に設置するだけです。 <head> <meta charset="utf-8" /> <
allWebクリエイター塾 ブログ: レスポンシブ・ウェブデザインの Media Queries の設定と15px
レスポンシブ・ウェブデザインで大きなポイントとなるのが、メディアクエリのサイズの設定です。以前に「mediaqueries」に掲載されているウェブサイトの メディアクエリのサイズを調査したことがありましたが、今回は メディアクエリのサイズの設定について詳しく紹介したいと思います。 メディアクエリのサイズメディアクエリのサイズですが、 800px –ネットブック、Nexus One、Dell Streak などのサイズ。 600px – タブレット端末、例えば SamuSung ギャラクシー、Blackberry Playbook。iPhone 4 のポートレートのサイズは少し大きい 640pxなので、800pxのスタイルシートが iPhone4 のポートレートでは適用される。 480px – スマートフォンでは一般的なサイズ、3GS以下のiPhone のポートレートモードもこのサイズ。 3
CSS3 「rem」って何だ。
CSS3を勉強する際に大切なことは２つあります。ひとつ目は、”知っているプロパティをいかに上手に使うかということ”、二つ目は、”知らないプロパティをもっと勉強すること”だと言えます。 今回は、後者のあまり知られていないであろう「rem」を紹介いたします。とは言っても「rem」は プロパティではなく単位になります。単位表示でおなじみの「em：エム」に似ていますが「em」の様に親要素の値に影響を受ける事はありません。 フォントサイズの指定を考えてみましょう。 「px」を利用するとフォントサイズを固定することができて制作する際には便利だったりしますが、最近ではスマートフォンなどのモバイルサイト向けに「Responsive Web Design」というデザイン手法で「em」のような相対単位を「Responsive Type Setting」として利用します。 ただし、IE では「em」を利用すると
Responsive Web Design を利用している企業サイトリスト
allWebクリエイター塾 ブログでは、Responsive Web Design（レスポンシブ・ウェブデザイン） をよく取り上げています。では、実際に一般のウェブサイトや個人以外のウェブサイトで Responsive Web Design を利用しているサイトはどのくらいあるでしょう？ということで探してみました。特に一般の企業を中心に集めてみましたので、レスポンシブ・ウェブデザインが一般企業でどこが利用しているのか興味がある方は、是非とも参考にしてみてください。 新聞編 About.comなんと、New York Time の一部である、「About.com」ですが、レスポンシブウェブデザインです。日本の各新聞にもそのビジネスモデルまで影響をあたえる「New York Times」までもが Responsive Web Design（レスポンシブ・ウェブデザイン）とは驚きですね。海外では
レスポンシブ Web デザインのテストツール「Responsive Design Testing」
レスポンシブWebデザイン の為のツール Responsive Web Design でウェブサイトを作製するときに、複数の画面サイズを一覧で確認できなくて困った事はありませんか？ そんな時に、「Resposive Design Testing」は最適なツールです。 このツールは、スクリーンキャプチャーのURLボックスに、確認したいファイルのパスを入力すれば、横幅240px、320px、480px、768px、1024px のそれぞれのデザインを確認することができます。 ウィンドウサイズを自分で変更する必要がないのは時間を短縮することができます。 また、この「Responsive Design Testing 」はダウンロードしてローカルで利用することもできます。 まとめ 「Responsive Design Testing」のようなツールが最近では、見られるようになりました。やはり、レス
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Enfold Demo Overview – A list of all available Enfold demos
10+ Best Free Photography WordPress Themes (Most Popular 2024)
レスポンシブ Web デザイン には欠かせない。スケッチテンプレート
大手新聞社の Boston Globe も Responsive Web Design を採用