レスポンシブWebデザインのサイトを作るときのMedia Queriesの順番を考えてみた | A40
ちょうど今レスポンシブWebデザインのサイトを制作しているのですが、Media Queriesで画面サイズ別にCSSを記述していくときにどのような順番で記述すればよいのか、改めて調べてみたらいろいろ迷ってしまいました。 今までいろいろなやり方を試してきたのですが、一度整理してみたいと思います。 記述方法の種類 一般的なMedia Queriesの記述の方法としては、以下のようなやり方があります。（ブレイクポイントを480px、768px、980pxとした場合の例です） 1. PCのスタイルから記述していく方法 デフォルトでPC用のスタイルを定義し、タブレット／スマートフォン用のスタイルはMedia Queriesを使って上書きしていくPCファースト的な方法です。 /* デフォルト：980px以上用（PC用）の記述 */ @media screen and (max-width: 979px
このスマフォ・タブレット用メディアクエリは危険！
Updated 2013.10.03 / Published 2013.10.03 当初はスマフォ・タブレット専用のメディアクリエがどうにか作れないものかを考えていたのですが、どうしても解決できない点があったために無理があると判断しスマフォ・タブレット専用のメディアクエリはボツ企画へ、そして逆にドツボにはまる可能性のある危険なメディアクエリを三段階評価でいくつかご紹介します。 案件の予算や納期からレスポンシブデザインにできないという場合は少なくありません。そこで特定のデバイスにだけ、最適化を行うためにメディアクエリを使われることがありますが、そこには次のような思わぬ落とし穴があります。 iPad用メディアクエリの危険 iPad用のメディアクエリとしてよく紹介されているのが次のコードです。 @media only screen and (min-device-width : 768px) a
レスポンシブ・ウェブデザインでの CSS コードの書き方 | Yomotsu net
いわゆるレスポンシブ・ウェブデザイン、つまりメディアクエリーを採用した Web サイトを構築する際の一番管理しやすいと感じるコードの書き方をまとめました。ただし、あくまでも個人的な、経験から感じた意見ですので絶対ではありません。 CSS のコードの配置広く知られている方法はいくつかあります。 CSS ファイル自体を分ける方法 @media 規則で 1ファイル内にメディア特性単位に書く方法 @media 規則で 1ファイル内にパーツ単位で書く方法 それぞれをコードで表すなら以下の書き方が該当します。 方法1 : CSS ファイル自体を分ける方法この方法は管理が大変でおすすめできません。これでファイルごとコード分割されてしまったらコード検索しづらいわけです。 <link rel="stylesheet" href="desktop.css" media="(min-width:769px)">
Animatable: One property, two values, endless possiblities
box-shadow ◀ ▶ From: 0 0 black To: 0 150px 10px -50px rgba(0,0,0,.5) Author: @leaverou Tweet
Creative Button Styles
Note that on mobile devices the effects might not all work as intended. Button Button Button Button Button Button Button Button Button Button Button Button Button Button Yes No Add to cart Bookmark Favorite Settings Send data Continue Return Continue Return Add to cart Delete Settings Add to cart Delete Settings Button Button Button Button Button Button Button Button Button Button Button Button Cl
Simple jQuery Dropdowns
There are lots of dropdown menus already out there. I’m not really trying to reinvent the wheel here, but I wanted to try to do something slightly different by making them as dead simple as possible. Very stripped down code and minimal styling, yet still have all the functionality typically needed. Here are the features: Cross-browser compatible (even IE 6) Multi-level and retains “trail” Very min
CSSで半透明、opacityとrgbaの違い - ぼくはまちちゃん！
こんにちはこんにちは！！ 今日はちょっとCSSのメモです！ 半透明について！ opacityを使った透過 #testOpacity { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /* IE */ filter: alpha(opacity=40); /* IE */ -moz-opacity:0.4; /* Firefox(old) */ -khtml-opacity: 0.4; /* Safari(old) */ opacity: 0.4; } Opacity test! opacityは子要素まで全て透過する。 RGBaを使った透過 #testRgba { background: rgba(0, 0, 0, 0.4); /* RGBを10進数(0〜255)で指定、不透明度を0〜1.0で指定 */
はてなにおけるCSSメタ言語（CSSプリプロセッサ）の導入について - Hatena Developer Blog
こんにちは、id:tikedaです。数年前から登場して以来、利用されるケースが増え続けているCSSメタ言語（CSSプリプロセッサ）。近年、様々な大規模サービスへの導入が進む中、はてなのサービス開発においても導入を行うため、2012/3/6に勉強会を実施しました。その内容を公開いたします。CSSメタ言語そのものの説明よりも、社内導入の為に必要な内容が中心となります。 アジェンダ どんなものがあるか 導入の背景と目的 はてなでの選択 何がやれるか どう使うか 事例・実演 運用ルール 今後の展望 どんなものがあるか Sass(scss,sass) http://sass-lang.com/ Less http://lesscss.org/ Stylus http://learnboost.github.com/stylus/ Tass http://cho45.github.com/tasscs
Sass、そしてSassy CSS (SCSS)
CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass (主にSCSS)の良さを解説する。 CSSフレームワーク Sass Sassy CSS aka SCSS SCSSでCSSフレームワーク 2カラムレイアウトの作成 clearfixやReset CSSの組み込み カラム幅の変更 カラムの入れ替え SCSSで完結することの意義 まとめ 最後に CSSフレームワーク 960.gsやBlueprint、BlueTripなどCSSフレームワークと呼ばれるものは色々ある。フレームワークと名乗るだけのことはあって、それらの生産性はとても高い。テンプレートで適切にクラス名やIDを埋め込むだけなので、複雑怪奇なCSSコーディングを意識することなく誰でも簡潔にきれいなカラム・レイアウトを作成できる。 HTML 4
CSSや画像の命名規則について - kojika17
コーディングで時間のかかる要素の1つとして、id,class名や画像名などの命名規則が挙げられます。 特に中規模、大規模のサイトで、適当な名前を付けると名前が被る確率が上がり、 その結果、画像の上書きや不要なプロパティがかかってしまうなど、よくない結果になることも考えられます。 一つの例として、私の命名規則について紹介してます。参考程度に読んで頂けると幸いです。 カテゴリに分類して、つなげる。 ページのどの位置に属すか分類し、つなげる方法を取っています。 基本的に、CSSや画像名は同じにします。同名にすることで、名前を考える手間も省け、変更箇所の特定がしやすくなります。 例： CSS #top-side-nav 画像 top-side-nav-home.png top-side-nav-company.png 上記のように命名することで、 デザインを見なくても、どのような箇所に使われている
Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法
Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法 2011-08-28 Webデザイナーが、Webサイトのパフォーマンスを重視する傾向はあまり無いように感じますが重要なことです。 Googleでは、0.5秒遅くなると、検索数が20%減少する amazonでは、0.1秒遅くなると、売り上げが1%減少する という報告もあるようです。Webサイトのパフォーマンスはコンバージョンにも影響する大切な部分。 今回はWebサイトのパフォーマンスを上げる方法を取り上げます。 パフォーマンスアップの前に 応答時間の限界 0.1秒までなら、結果はコンピューターではなく、ユーザーによって引き起こされたように感じる。 1秒までなら、"遅れている"と感じるが、ユーザーの思考は途切れずに、自由に動いていると感じる。 10秒までになると、ユーザーがコンピューターに振り回されている気持ちになり、ストレ
[CSS]まるでFlashのように画像とキャプションをアニメーションで替えるテクニックいろいろ
画像をホバーすると、小気味良いアニメーションを伴ってキャプションに替えるCSS3のテクニックを紹介します。 デモは10種類あり、CSSでここまでできるのか！って感じです。 Original Hover Effects with CSS3 [ad#ad-2] 基本となるHTML 基本となるCSS 必見の10種類のかっこいいデモ 基本となるHTML HTMLは非常にシンプルです。 キャプションはタイトルとテキストをdiv要素で内包しclassに「mask」をつけ、そのキャプションと画像をdiv要素で内包します。 <div class="view"> <img src="image.gif" /> <div class="mask"> <h2>Title</h2> <p>Your Text</p> <a href="#" class="info">Read More</a> </div> </d
CSSで垂直中央を実装する【css tips】
CSSで垂直中央を実装する【css tips】 vertical-alignの使い方の続きです。 vertical-align:middleでの垂直表示は説明しましたが、あの方法ですと2行以上の場合は利用できないです。 2行以上の場合に垂直中央表示をするにはpositionプロパティを利用します。 (X)HTMLソース <div> <p>中央に表示<br />したい文字</p> </div> CSSソース div{ width:200px; height:200px; background:#39FF6B; position:relative; } p{ position:absolute; top:50%; left:50%; margin-left:-2.5em; margin-top:-1em; } サンプル positionを使いp要素の開始位置を中央に設定します。 その後にmar
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
